副業

【AFFINGER5】関連記事を記事中に設置する方法

AFFINGER5で関連記事を記事中に設置する方法
管理人(じろー)
こんにちは。当ブログ管理者のじろーです。
愛知県で会社員をしながら、ブログ運営をしています。

この記事では、WordPressのAFFINGER5について、次のような疑問を解決することができます。

・AFFINGER5で関連記事を記事中に設置する方法は?
・おすすめの設置方法は?

 

ブログ記事を書いているとき、別の記事を紹介したいときがありますよね。

「詳しくはこちらの記事で!」

〇〇について気になる方はこちらの記事をどうぞ」

このような文章で、関連記事が紹介されているのをよく見かけると思います。

管理人(じろー)
当ブログでもこんな感じで使っています

関連記事の例

一見難しそうな設定にも見えますが、人気テーマの1つであるAFFINGER5なら誰でも簡単に関連記事を設置することができます。

ここでは関連記事の設置について、設置方法を細かく解説していきます。

記事内容

  • 関連記事のリンクを貼る2つの方法
  • ブログカードを使った方法
  • リンク挿入を使った方法

 

 

AFFINGER5で関連記事を記事中に設置する方法

関連記事を記事中に設置する方法は2種類あります。

関連記事を設置する方法

同じ関連記事ですが、見栄えも設置方法も全く異なります。

次から、それぞれの設置方法と用途の使い分け方を解説していきます。

 

ブログカードを使った方法

ブログカードを使った方法

ブログカードを使った関連記事は、記事タイトルとアイキャッチ画像、冒頭の文が表示されます。

そのため、見栄えが良くスムーズに読者を関連記事に誘導することができるので、とても便利な機能です。

用途としては、1つの関連記事を紹介するときにおすすめです。

ご覧の通り、大きいボックスなのでこれが複数続くと、画面が関連記事だけになってしまい、読みやすさが落ちてしまいます。

 

ブログカードを使った設置方法はシンプルで、次の2ステップのみです。

ブログカード設置の手順

<ステップ1> ブログカードのタグを設置

<ステップ2>  記事IDを入力

 

<ステップ1> ブログカードのタグを設置

まず、本文中にブログカードのタグを設置していきます。

タグとは文や文字を装飾したり、ボタンや表などを設置できる機能です。

AFFINGER5は、このタグ機能が豊富なのが特徴の1つで、使いこなせると見やすい文章や飽きない記事を作ることができます。

関連記事を設置するには、「タグ」「記事一覧/カード」「ブログカード」を選び、「参考」「CHECK(ふきだし)」のどちらかを選びます。

選択すると本文中にコードが表れます。

「参考」と「CHECK」の違いは、下の図のようにデザインが変わり、その分コードの長さも異なります。

「参考」と「CHECK」の違い

 

ちなみに、”参考”と”CHECK”の文字は好きな言葉に変更することができます。

変更のやり方は、あとで出てくる”ブログカードのカスタマイズ”で解説します。

 

<ステップ2> 記事IDを入力

次に、ブログカードと表示させたい関連記事とのひも付けを行います。

ひも付けに使用するのは記事IDです。

記事IDとは、作成されている記事を特定する番号のことで、記事作成をするたびに自動で番号が割り振られます。

記事IDは「投稿」「投稿一覧」を開き、「ID」で確認することができます。

ここで、関連記事にしたい記事の記事IDを確認したら、ブログカードに戻り、その数字を入力します。

入力する場所は、コード中の「  id="ここ"  」です。
※例 id="1824"

記事IDの入力位置

これで、ブログカードを使った関連記事の設置をすることができました。

ちなみに、id=""に何も入力しなかったら、その時の最新記事が表示されます。

 

ブログカードのカスタマイズ

ブログカードは、色や文字などを自分好みに変更することができます。

ここでは、見出しの文字と背景色の変更の仕方を説明します。

それぞれ、下の図のコード部分で変更することができます。

ブログカードのカスタマイズ

 

リンク挿入を使った方法

リンク挿入の方法

次にリンク挿入を使った関連記事の設置方法を解説していきます。

上の例のように、リンク挿入の関連記事では記事タイトルだけが表示されます。

文字だけで殺風景ですが、複数の関連記事を紹介したいときに、まとめて表示できるのおすすめです。

 

リンク挿入の方法は、次の3ステップです。

ブログカード設置の手順

<ステップ1> 関連ボックスを設置

<ステップ2> 記事タイトルを入力

<ステップ3> 関連記事のURLを挿入

 

<ステップ1> 関連ボックスを設置

まず、”関連記事”と書かれたボックスを設置します。

このボックスもAFFINGER5では、タグにデフォルトで設定されています。

「タグ」「ボックスデザイン」「マイボックス」「関連」を選びます。

すると、本文中に関連ボックスのコードが表れます。

 

ステップ2. 記事タイトルを入力

次にボックス内に、関連記事のタイトルを入力します。

ボックス内にタイトルを入力するには、下の図のエリア内に入力をします。

 

<ステップ3> 関連記事のURLを挿入

関連記事のタイトルを入力したら、ここに関連記事のURL(パーマリンク)を挿入します。

それにはまず、関連記事の投稿編集画面を開き、パーマリンクをコピーします。

 

次に、関連ボックスに戻り、①関連記事タイトルを選択して、②「リンク挿入/編集」を押します。

出てきたURLペースト欄に③コピーしたパーマリンクを貼り付けます。

 

これで、リンク挿入を使った関連記事の設置が完了です。

複数の関連記事を載せる場合は、改行して2つ目のタイトルを入力して、それぞれにパーマリンクを挿入する必要があります。

 

関連ボックスのカスタマイズ

関連ボックスも、文字や背景色などを自分好みにカスタマイズすることができます。

見出しの文字文字の色背景色は、コードの次の部分で変えることができます。

関連ボックスのカスタマイズ

 

 

まとめ:AFFINGER5で関連記事を記事中に設置する方法

AFFINGER5で記事中に関連記事を設置する方法は、2種類あります。

2つの設置方法

  • ブログカードを使った方法
    →見栄えがよく、1つの記事を紹介するときにおすすめ
  • リンク挿入を使った方法
    →見栄えはいまいちだが、複数の記事を紹介するときにおすすめ

 

ブログ記事を書いていくうえでは、どちらも使用する機会多くあるため、ぜひ取り入れてみてください。

 

-副業
-, ,

Copyright© 人生2段飛ばし , 2020 All Rights Reserved Powered by AFFINGER5.