はじめに
今回はWordPressにおいてブログカードの設定をして、他ページへのリンクを少しおしゃれに表示する方法を書いていきます。
なお、テーマはCocoonを使用しています。
「ブログカード」と聞いてもピンとこない方もいらっしゃると思いますので、下にブログカードの表示例を示します。
表示例
ブログカードは大きく2つに分けて「内部リンク」の設定と「外部リンク」の設定があります。
内部リンクは自分のサイトページへのリンク、外部リンクは他サイトへのリンクです。
今回設定していくブログカードには、2つの間で見た目に大きな相違はありませんが、下に当サイトで実際に表示しているそれぞれのブログカードの一例を示します。
内部リンク
内部リンクは自分のサイトのページの中での別の自分のサイトのページへのリンクのことです。
下の図で赤枠で囲ったものです。
基本的にはサムネイルとタイトル、本文の書き出しが数行表示されます。
外部リンク
外部リンクは他サイトへのリンクのことです。
内部リンクとは違って、少し扱いづらいこともあります。
以下の図のようにリンク先のサイトによって少し表示に相違が出てくる場合があります。
細かいところではありましたが、これらの点にも少し意識を向けておきましょう。
以上、上の図で赤枠で囲っていたものがブログカードになります。
ブログカードをクリックしてもらうことで、指定のURLのページへユーザーを誘導することができます。
ただ、URLが文字だけで
とリンクが指定されているよりもサムネイルで視覚情報がある分、目を引きやすくなっています。
ブログカードのイメージを掴んでいただけましたでしょうか。
おそらく誰しも一度は見たことがあったのではないでしょうか。
ブログカードの設定なしの場合の表示
試しにブログカードの設定がない場合も比較として下に図で示しますので、ご覧ください。
内部リンク
内部リンクのブログカードの設定を外すと文字のURLの表示のみになり、リンクが消えます。
ですので、ブログカードを使用しない場合は自分でHTMLを編集するなどの手間が必要になります。
外部リンク
2つのうち、1つがリンクが消えてしまいました。
リンク先のサイトによってはこちら側でブログカードの設定をせずとも、ブログカードが表示されるようです。
リンク先によってURLの表示が変わってしまうことからも積極的にブログカードの設定をすることは重要といえます。
では、以下より本題のブログカードの表示方法と設定について書いていきたいと思います。
設定方法
まずWordPressの編集画面より、左の黒帯のメニューから「Cocoon設定」を選びます。
すると右側にタブが現れますので、その中から「ブログカード」を選択します。
内部ブログカード設定
まずは「内部ブログカード設定」より内部リンクのブログカードの設定をします。
このあと行う「外部ブログカード設定」とほとんど内容は同じですので、ここで設定が満足にできれば後々に活かせます。
ブログカード表示
何がともあれ、ブログカードを表示させるためには、「プレビュー」の下にある「ブログカード表示」の項目にある「ブログカード表示を有効にする」のチェックボックスにチェックを入れます。
これにチェックを入れることで、サイト上にブログカードが表示されるようになります。
逆にここにチェックを入れなければ、いくら設定を頑張ってもブログカードが表示されませんので、注意しましょう。
また、「ブログカード表示を有効にする」のチェックボックスの下にもう1つ、「コメント欄のブログカード表示を有効にする」のチェックボックスがあります。
この設定は、コメント欄を設けているサイトに対して有効になります。
この「コメント欄のブログカード表示を有効にする」にチェックを入れると、コメント欄に他者が入力したURL対してもブログカード表示が有効になります。
現時点(2022/02/09)で当ブログにはコメント欄を設置していないため、実際に図を載せることができませんでした。
しかし、コメント欄のURLがブログカード表示になることで、余分にスペースをとることになります。
コメント欄を省スペースに抑えたい場合はこの設定は行わなくても良いかもしれません。
サムネイル・日付表示
ブログカード表示に関する設定が終わりましたら、次はブログカードのデザインや詳細な設定を行っていきます。
ここでの主な設定は「サムネイルスタイル」と「日付表示」です。
下の図のプレビューを見ていただければ分かりますが、ブログカードにはリンク先のアイキャッチ画像をサムネイルとして表示できます。
日付表示の設定ではブログカードの右下にリンク先のページの投稿日あるいは更新日を表示させることができます。
「サムネイルスタイル」の設定ではサムネイルをブログカード上で右側と左側のどちらに表示させるかを設定することができます。
デフォルトで左側になっており、この状態でも見やすいので特に事情がない限りは変える必要はないかと思います。
迷った場合は、右側の方も実際に試しながら設定するといいかもしれません。
「日付表示」の設定では、ブログカードの右下にリンク先のページの記事の投稿日あるいは更新日を表示させることができます。
「なし」にチェックを入れることで、何も表示させないように設定もできるので、ブログカードの見た目と相談しながら決めると良いでしょう。
また、「内部ブログカード設定」の一番下に「リンクの開き方」という項目があります。
これについては下の「新しいタブで開くとは」で説明させていただきます。
新しいタブで開くとは
「内部ブログカード設定」において最後の項目に「リンクの開き方」というものがあります。
この項目にある「新しいタブで開く」のチェックボックスにチェックを入れると、ブログカードのリンク先のページをクリックした時に新しいタブでページを開いてくれます。
おおかたどのような機能かというのは想像がつくかと思いますが、一応下に図を載せておきます。
下の図に当サイトに存在しているブログカードのひとつを載せています。
例えばこのブログカードをクリックすると今開いているページとは別に新しいタブでリンク先のページを開いてくれます。
どのようないいことがある？
かと言いますと、現在開いているページを見ながらリンク先の別のページを見ることができるということです。
「新しいタブで開く」のチェックボックスにチェックを入れていないと、現在開いているページに上書きするような形でリンク先のページが開かれてしまいます。
すると、2つのページを同時に見比べたい時などに不都合が生じてしまいます。
この設定も特に理由がなければ「新しいタブで開く」にチェックを入れておいて良いです。
以上で「内部ブログカード設定」についての説明は終わりです。
下の外部ブログカード設定も今までの設定とほとんど同じ！
外部ブログカード設定
ここまでこればもう大丈夫です。
「外部ブログカード設定」は「内部ブログカード設定」とほとんど内容は同じです。
同じ部分の説明は今までの章にお預けするとして、ここでは「外部ブログカード設定」のみの特殊な設定について説明します。
特殊な設定とは名前が大層な表現でしたが、その名は「キャッシュの保存期間」「キャッシュの更新」という項目です。
キャッシュに関する設定
キャッシュの設定には上の図で示したように「キャッシュの保存期間」「キャッシュの更新」があります。
キャッシュというものは、サイトの表示を素早く行うために保持しておく情報のことです。
ですから、例えば「キャッシュの保存期間」で30日と設定していると、30日間隔でブログカードのキャッシュ情報も更新されるようになります。
保存期間を短くするほど、より早くリンク先のサイトの情報をブログカードに反映することができる反面、PCやサーバにかかる負荷も大きくなります。
そこで「キャッシュの更新」の設定が役に立ちます。
ここの項目にある「キャッシュ更新モードを有効にする」のチェックボックスにチェックを入れます。
すると、リンク先のページを開いた時にブログカードのキャッシュの更新も自動で行ってくれます。
以上より、「キャッシュの保存期間」は少し長めに30日くらいに設定しておき、ページを開いた時に「キャッシュの更新」を行えるように「キャッシュ更新モードを有効にする」のチェックボックスにチェックを入れておくと良いでしょう。
以上で全ての説明は終わりです。
お疲れ様でした。
最後に
当サイトでは多肉植物の記事と並行してブログ作成に関する記事も頻繁に投稿しております。
これからの季節、暖かくなり、種がたくさん発芽していけば、多肉植物の記事も徐々に増えていくと思います。
ともあれまずはあと少しある寒い期間を無事に乗り切れるように、私自身の体はもちろん多肉植物の様子もしっかり見ながら生活していきたいです。
ところで明日は関東地方にも雪の予報。
温室で多肉植物をしっかりガードしておりますので、乗り切れると信じております。
以上、最後までありがとうございました。
