WordPressテーマ ブログ運営

【WordPress:AFFINGER5】ブログ記事の投稿方法と書き方を解説【TinyMCE Advance対応】

2020年9月22日

【WordPress:AFFINGER5】ブログ記事の投稿方法と書き方を解説【TinyMCE Advance対応】
悩んでいる女性
初めて記事を書くんだけど、やり方が分からない。
おすすめのプラグインとかあったら知りたいな。
大丈夫!これ全部に答えます。
トモヤ
本記事の内容
・記事を書く前の準備
・効率のいい記事の書き方
・投稿する方法と注意点
1. 記事を書く前の準備

準備は以下の2つです。

・【AFFINGER5】WordPressテーマの準備
・【TinyMCE Advance】プラグインの準備

順番に説明していきます。

1-1. 【AFFINGER5】WordPressテーマの準備

おすすめのWordPressテーマは「AFFINGER5」です。
テーマを導入されている方は、次の「1-2. 【TinyMCE Advance】プラグインの準備」をご覧ください。

>>AFFINGER5を見てみる

▼テーマについての記事はこちら

AFFINGER5
参考無料テーマからAFFINGER5に変えた感想レビュー【結論:大満足です!】

続きを見る

1-2. 【TinyMCE Advance】プラグインの準備

プラグインは「TinyMCE Advance」がおすすめです。

インストールして、有効化、そして「クラシック」と呼ばれるツールを選択すれば、下図のようなものが出てくると思います。

クラッシック
クラッシック

「見出し」や「タグ」、「太文字」「斜体」「ボックス」など、何を搭載するかは、管理画面の【設定】→【TinyMCE Advance】の順番に進んでいき、自分の好きなものを選ぶことが出来ます。

▼TinyMCE Advanceの設定画面です。

TinyMCE Advanceの設定画面
TinyMCE Advanceの設定画面
2. 効率のいい記事の書き方

記事の書き方は以下の3つです。

その①「台本を書く」
その②「台本の装飾」
その③「プレビューで確認」

順番に解説します。

2-1. その①「台本を書く」

台本はこんな感じで書いています。

ブログの台本①
ブログの台本①
ブログの台本②
ブログの台本②
ブログの台本③
ブログの台本③

僕は記事構成をテンプレ化しています。

今回の記事構成を大まかに図解するとこんな感じ。

キーワード WordPress 投稿 書き方 TinyMCE Advance AFFINGER5
タイトル 【WordPress:AFFINGER5】ブログ記事の投稿方法と書き方を解説【TinyMCE Advance対応】
ディスクリプション WordPress のプラグインTinyMCE Advanceを用いて、ブログ記事の投稿と書き方を解説した記事になります。初めて記事を書くけど、書き方が分からないと感じている方におすすめです。投稿するまでの順序を詳しく解説しています。
問題提起 初めて記事を書くんだけど、やり方が分からない。
おすすめのプラグインとかあったら知りたいな。
解決策 効率のいい記事の書き方 投稿の方法 注意点 サンプル
根拠 月100万円越えプレイヤーも採用している方法
導線 他の記事へ誘導

このように、どこに何を書くのかを決めておくと簡単になりますし、整理しやすいですよね。

また、何か商品を売るためのアフィリエイト記事を書く際にも、論理的に記述出来るので、非常に分かりやすい記事内容にすることが出来ます。

2-2. その②「台本の装飾」

装飾は以下の通り。

装飾その①「見出し」
装飾その②「画像」
装飾その③「太文字」
装飾その④「文字の大きさ」
装飾その⑤「URL」
装飾その⑥「こんな人におすすめ」
装飾その⑦「吹き出し」

順番に紹介していきます。

装飾その①「見出し」

基本的に、僕が使用してる見出しは以下の3つです。

見出しの見本
見出しの見本

見出しは様々デザインで装飾できます。

上図以外で、僕が使用しているデザインはこちら。

チェックマーク
チェックマーク

他にもどんなデザインがあるのかは、こちらの記事が一番参考になると思いますのでご参考に。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

管理画面の【外観】→【追加CSS】へいき、用意されているCSSをコピペするだけで完成です。色は自分で変更することが出来ます。

ついでに、色を表すコードはこちらを参考に

色の名前とカラーコードが一目でわかるWEB色見本

装飾その②「画像」

画像は下図の部分をクリックすると挿入できます。

画像の挿入
画像の挿入

「大きさ」や「代替えテキスト」は編集画面で設定できますし、画像の下に画像の説明を入れることが出来ます。

装飾その③「太文字」

太文字は、太文字にしたい部分を「網掛け」で選択し、下図の「B」という部分を押すだけで、このような太文字にすることが出来ます。

装飾その④「文字の大きさ」

大きさは、下図のような箇所で変更可能です。

文字の大きさ
文字の大きさ

自分のイメージしている大きさに変更可能なので、かなり便利ですよ。

また、大きさを変える前の「文字の大きさ」を変更したい場合、下図にある通り、管理画面の「AFFINGER5管理」という部分をクリックし、【デザイン】→【フォントのサイズ】から変更できます。

文字の大きさ設定
文字の大きさ設定
装飾その⑤「URL」

URLは下図のように、「クラシック」というツールで「挿入」という部分があります。

URLの挿入
URLの挿入

そこをクリックすると「リンクの挿入/編集」が表示されるので、またそこをクリックすると、リンクを挿入できるバーが表示されますので、そこにURLを貼ってください。

それで完成です。

装飾その⑥「こんな人におすすめ」

これは、「記事の冒頭」もしくは「商品の画像の下」に設置するものです。

▼こんな感じのやつですね。

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

これは、「クラッシック」の【タグ】→【ボックスデザイン】→【こんな方におすすめ(v)/[v]】で設置できます。
「(v)」と「[v]」の違いは上図のアイコンの違いになります。

チェックマークの色は下図の手順で変更できます。

オプションカラー①
オプションカラー①

まずは【オプションカラー】を選択してください。

オプションカラー②
オプションカラー②

その次は【リスト】を選択します。

オプションカラー③
オプションカラー③
装飾その⑦「吹き出し」

吹き出しはこんなやつですね。

どうも!トモヤです。
トモヤ

これは「AFFINGER5管理」の画面から、【会話・ファビコン】という部分があります。

そこから、アイコンにしたい画像を登録し、名前を設定することで上のような吹き出しになります。

2-3. その③「プレビューで確認」

ここは、記事を作成する上で重要になってきます。

プレビュー画面とは、読者が画面を見る時にどのように見えるのかを確認するものになります。

例えば、今回紹介した「こんな人におすすめ」は、編集画面ではアイコンが赤色のチェックマークでしたが、プレビュー画面になると青色になっています。

編集画面
編集画面
プレビュー画面
プレビュー画面

また、編集画面では折り返していない文章が、プレビュー画面だと折り返している場合があります。

編集画面②
編集画面②
プレビュー画面②
プレビュー画面②

このように、編集画面だけを見ていると自分がイメージしていたものとは違う記事が完成してしまいますので、こまめに確認することをおすすめします。

3.  投稿する方法と注意点
注意点

方法と注意点は以下の通り。

▼方法

・「公開ボタン」を押すだけ

▼注意点

・「パーマリンク」
・「アイキャッチ画像」
・「AMP対応」

順番に解説していきます。

3-1. 投稿は「公開ボタン」を押すだけ

投稿する際は「公開」と書かれているボタンが右上に表示されているかと思います。

記事が完成したら、そこをクリックしてください。そしたら、最終確認の「本当に公開しても良いですか」が表示されるので、良ければ、そのままもう一度「公開」をクリックしてください。

これで記事の投稿は完了です。

しかし、投稿する前の確認必須事項がありますので、その注意点を確認してから終わりたいと思います。

3-2. 注意点その①「パーマリンク」

パーマリンクとは以下のような、オレンジ枠で囲まれている部分を指します。

パーマリンク
パーマリンク

ここは自分で設定することが出来ますので、出来るだけ自分で作成しましょう。

理由は、オレンジ枠部分が日本語表記ですとSNSなどで共有したり、コピペをした場合、文字化けしてしまいます。有名なブロガーの方もパーマリンクは英語表記にすることをすすめています。

パーマリンクを英語表記にすべき理由は、こちらの記事が詳しかったので参考にしてみて下さい。

WordPressのパーマリンクは「投稿名」で英数表記がベストな理由

3-3. 注意点その②「アイキャッチ画像」

▼アイキャッチ画像はこんなやつです。

アイキャッチ画像
アイキャッチ画像

YouTubeで言う「サムネ」になります。
記事の顔になる部分ですね。

パソコンでは文字だけで表示されますが、スマホでは画像付き(アイキャッチ画像付き)で表示されますので、設定しておくことをおすすめします。

3-4. 注意点その③「AMP対応」

これは、スマホで記事をタッチして、本文が表示されるまでの時間を短縮するための設定です。

▼AMP対応に関する記事はこちら

AMPとは?SEO効果について【2020年版】

ついでに、導入するデメリットに関して、詳しく解説されている記事も載せておきます。

『AMPって導入すべき?表示速度は4倍でも、今AMPを導入しない理由』

AMP対応とは|記事タイプ別に徹底解説。SEO対策上の優位性は?

4. 本記事のまとめ

今回は「【WordPress:AFFINGER5】ブログ記事の投稿方法と書き方を解説【TinyMCE Advance対応】」というテーマでお話しました。

本記事はここで終了となります。
最後まで見ていただいてありがとうございました。

では

-WordPressテーマ, ブログ運営

© 2020 内気な猫 Blog Powered by AFFINGER5