今回はスグにブログの見た目がかわる下記2つの装飾ツールを解説していきます。
・『関連記事』『こちらもCHECK』ブログカード
・記事一覧
AFINGER5 すぐに使えて見た目が激変！装飾ツール
せっかく購入したAFFINGER5ですから、じっくりとカスタマイズや記事の装飾をしたくなりますよね。
とても細かく設定できるのが魅力のAFFINGER5ですが、『デザインを凝ったためにブログ記事を書く時間がなくなった』というブロガーさんもいるようです。
時間に余裕があれば別ですが、デザインに凝るのはある程度記事数が増え、Googleアナリティクスが認知してくれる3ヶ月後からでも大丈夫です。
ブログカードを設置するまでの手順
AFINGER5ではブログカードを簡単に設置することができます。
が、いきなり記事を編集すると2度手間になるので、順番に作業をすすめていきましょう。
むずかしいことはありませんので、下記２つの手順にそって解説していきます。
① 記事IDを確認する
② 記事にブログカードを設置する
記事IDの確認方法
ブログカードを設置する前準備として、『記事ID』を確認しておきましょう。
記事IDは『投稿一覧』の画面に表示されています。
記事IDがわかったところでブログカードの設置に進みます。
『あわせて読みたい』『関連記事』ブログカードの作り方
ブログカードを使うことでブログの中に『あわせて読みたい』や『関連記事』を簡単に設置することができます。
ブログカードとはサムネイルやタイトルなどをカードのような形で表示されるリンクのことです。
単なる文字リンクよりも読者の目にとまりやすいので、クリック率アップに効果があります。
１．ブログカードのつくり方
ビジュアルモードで『カード』をクリックすればOKです。
画面には下記のようなショートコードが表示されます。
例）【st-card myclass="" id="記事ID" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""】
ショートコードの各項目の意味について説明します。
| id | 記事ID |
| color | 文字色をHTMLカラーコード（#で始まる６桁のカラーコード）で指定https://www.tagindex.com/color/color_name.html |
| bgcolor | 背景色をHTMLカラーコード（#で始まる６桁のカラーコード）で指定https://www.tagindex.com/color/color_name.html |
| label | ラベルに入れる文字（4文字程度） デフォルトの文字は『参考』 |
| name | 記事タイトルを変更したい場合 |
| fontawesome | 表示するフォントアイコン（fontawesome4のクラス名を指定）※ver20190903よりhttps://fontawesome.com/v4.7.0/icons/ |
| pc_height | PC（パソコン）閲覧時のカードの高さを指定する属性※高さを指定した場合は自動でoverflow:hiddenが付与されます（高さを超える内容は見えなくなります）例：pc_height="150"（pxは不要）※ver20191218より |
| readmore | 『続きを読む』を表示する(on)・しない(off)を選択 |
| thumbnail（EX版のみ） | サムネイル画像の有無。例：thumbnail="off" |
例えばショートコードの各項目を下記のように変更してみましょう
【st-card myclass="" id="" label="関連記事" pc_height="" name="タイトル書き換えたいときはここへ入力" bgcolor="#000000" color="#ffffff" fontawesome="fa fa-check-square" readmore="on" thumbnail="on" type=""】
プレビューで見るとこんな感じです。
-
-
タイトル書き換えたいときはここへ入力
続きを見る
外観⇒カスタマイズ⇒「オプションカラー」⇒「ブログカード/ラベル」からブログカードのラベルをリボンデザインに変更します。
２．『参考』ブログカードのつくり方
『①タグ』⇒『②記事一覧／カード』⇒『③ブログカード』⇒『④参考』をクリックします。
下記のショートコードが表示されるので、必要に応じて中身を変更していきましょう。
【st-card myclass="st-no-shadow" id="" label="参考" pc_height="" name="" bgcolor="#cccccc" color="#ffffff" fontawesome="fa-file-text-o" readmore="on" thumbnail="on" type="text"】
| id | 記事ID |
| color | 文字色をHTMLカラーコード（#で始まる６桁のカラーコード）で指定https://www.tagindex.com/color/color_name.html |
| bgcolor | 背景色をHTMLカラーコード（#で始まる６桁のカラーコード）で指定https://www.tagindex.com/color/color_name.html |
| label | ラベルに入れる文字（4文字程度） デフォルトの文字は『参考』 |
| name | 記事タイトルを変更したい場合 |
| fontawesome | 表示するフォントアイコン（fontawesome4のクラス名を指定）※ver20190903よりhttps://fontawesome.com/v4.7.0/icons/ |
| pc_height | PC（パソコン）閲覧時のカードの高さを指定する属性※高さを指定した場合は自動でoverflow:hiddenが付与されます（高さを超える内容は見えなくなります）例：pc_height="150"（pxは不要）※ver20191218より |
| readmore | 『続きを読む』を表示する(on)・しない(off)を選択 |
| thumbnail（EX版のみ） | サムネイル画像の有無。例：thumbnail="off" |
２．『CHECK（ふきだし）』ブログカードのつくり方
『①タグ』⇒『②記事一覧／カード』⇒『③ブログカード』⇒『④CHECK（ふきだし）』をクリックします。
下記のショートコードが表示されるので、必要に応じて中身を変更していきましょう。
【st-div class="" margin="0 0 -5px -5px" padding="0 0 0 0" add_style=""]【st-minihukidashi fontawesome="fa-check" fontsize="" fontweight="bold" bgcolor="#FFECB3" color="" margin="0 0 0 0" radius="30" position="" add_boxstyle=""]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass="st-card-minihukidashi" id="" label="" pc_height="" name="" bgcolor="#cccccc" color="" fontawesome="" readmore="on" thumbnail="on" type=""】
変更する項目は先ほどとほぼ同じで、『こちらもCHECK』の文字部分も変更できます。
記事一覧のつくり方
記事の最後に関連記事の一覧があると、読み終えた読者が自然と次の記事に流れやすくなります。
『①タグ』⇒『②記事一覧／カード』⇒『③記事一覧』をクリックします。
下記のショートコードが表示されるので、記事IDとランクを必要に応じて入力していきます。
【st-postgroup id="" rank=""】
id=”ここに記事IDを入力,複数の記事を入れたい時は『,』（コロン）で区切る”
例）id=“88,99,105”
rank=”順番を入れたい時はここに『1』を入力する”
rankはデフォルト(””)では表示されない設定になっています。
まとめ
今回は『ブログカード』『記事一覧』のつくり方について解説しました。
HTMLやCSSの知識があるとショートコードの意味もわかりますが、初めて見る方にはハードルが高いですよね。
一から覚えようとすると相当時間がかかることなので、今回の記事でひとまず簡単に理解してブログ記事を書くことを優先していきましょう。