【AFFINGER6】 ブログカードを簡単に作成する方法

私のブログはWordPressテーマとしてAFFINGER6（アフィンガー）を導入しています。

ブログ開設初期の頃は各設定がデフォルト設定の為、ブログをオリジナルのデザインにするには色々な設定を変える必要があります。

　
デフォルト設定のままだと、ブログカードを作った際、ブログカード内に目次が設置される事象が発生しました。その際にどのように解決したのかをご説明します。

結論を先に言いますと

• 導入していたTable of Contents（TOC）の干渉が原因だった
• TOCの設定を変更することで問題解決

Table of Contents（TOC）はブログ記事に目次を自動で作ってくれる便利なプラグインです。ブログ記事を書く前に色々なプラグインを導入すると思いますが、プラグインによってはお互いに干渉することがあります。

解決する為にはプラグイン内の設定を変更しましょう。

本記事では【AFFINGER6】 ブログカードを簡単に作成する方法とブログカード内に目次が設置される事象の解決方法を短時間で説明します。

台湾現地在住者がなぜブログを始めたのかは下記のリンクより併せて読んでみて下さい。

＞＞ブログをなぜ書くのか？ブログを始めるメリットとは？

ブログカード

ブログカードとは

ブログカードはおすすめしたいブログの過去記事を視覚で訴えてくれることができる装飾法の一つです。

下記のようにリンクだけで過去記事などを紹介することもできますが、
ブログをなぜ書くのか？ブログを始めるメリットとは？

ブログカードを記事内に設置することにより、下記の通りより目立つように表現することが可能となります。

ブログカードによってブログの回遊率等に少なからず良い影響を与えてくれると思います。

ブログカードの作り方

下記コードをコピーして投稿編集画面に貼り付けて、各設定値を入力すれ作ることができます。

ブログカードのコード　→　st-card id= label="" name="" bgcolor="" color="" readmore="on"

テキストでクラシックを選んで、あとはブログカードのコードを貼り付けて完了です。

各コードが何を表しているのか、説明は以下の通り

• st-card id=表示させたい記事のID
• label=“カード左上のラベルに表示させる文字”
• name=“記事タイトル”
• bgcolor=“カード左上のラベルの背景色”
• color=“カード左上のラベルの文字色”
• readmore=“続きを見るボタン”　　　　　　

私がよく使っているコードは下記の設定にしています。

コード：st-card id=101 label="おすすめ" name="留学経験者が留学の良さを分かりやすく解説【留学＝日本では味わえない体験】" bgcolor="#4486bf" color="#ffffff" readmore="on"、コードの前後にはカッコ []を付けましょう。

上記のコードを用いるとこのようなデザインとなります。

TOCとは

Table of Contents Plus(TOC)はブログ記事に目次を作ってくれる便利なプラグインです。

ブログ内の目次がなぜ必要なのかを説明すると

• 読者の使い勝手や満足度を高められる
• 興味を集めることでブログの滞在時間が改善する

目次があることにより

• 読者が読みたい箇所にすぐ移動できる
• どのような記事項目があるか分かりやすい
• SEO効果に期待できる

以上が目次の必要性やメリットとなります。

私はTOCを導入していますが、導入後に記事を書いて、ブログカードを使って色々と記事をアレンジした後、いざ投稿してみると下記のような不具合が発生しました。

ブログカード内に目次が入ってしまいました。

さて、この不具合の解決方法を下記項目にて説明します！！

ブログカードの目次を解決する方法

なぜブログカード内に目次が作られてしまったのか。

TOCのデフォルト設定により関係ない見出しが目次の中に取り込まれてしまったせいで、ブログカード内に目次が作られてしまったのだと思います。

下記に解決方法を説明します。

　1. WordPressの「設定」項目からTOC+を選択します

2. TOC設定内の一番下にある上級者向け(表示)をクリックします

3. 表示を開くと見出しレベルというものがあります。デフォルト設定ではh4,h5,h6にチェックが入っていますが、これをすべて外します。その後、設定を更新すればブログカード内の目次が消えます。

まとめ

ブログカードは簡単に作れて、見栄えもよくなるのでわたしはよく利用しています。

ブログ初期の頃にブログカード内に目次が作成されてしまった場合、

• 導入していたTable of Contents（TOC）の干渉が原因
• TOCの設定を変更することで問題解決

上記原因と設定変更により問題が解決されますのでやってみてください。

留学に興味を持たれている方はこちらの記事でご紹介しています。

それでは以上となります。