ブログカードについてご存知でしょうか？こんなやつです。
ブログカードはブログ内の別ページのリンクを貼るときにカードっぽい見た目にする事なんですが、実は結構重要なんです。
なぜなら、文字だけのリンクよりも明らかにアクセスが多くなるからです！
と言うよりも、文字だけだとあまりアクセスしてもらえないのです。「SEO的にも意味がある」なんて意見もあります。
何よりおしゃれなブログカードってちょっと目を引きますよね。それだけで素敵じゃないですか？
という事で、この記事ではブログカードの作り方を紹介します！
▼このブログで使っているテーマ(SEOに強い)▼
事前準備
この記事では、人気のプラグインである「Pz-LinkCard」は使いません。
「Block Lab」というGutenbergのカスタムブロックを作るプラグインを使って作成します。
そのためBlock Labの基本的な使い方について以下のページを参照し、基礎的な使い方を把握していただけると嬉しいです。
Block LabはWordPressの新しいエディタGutengergにカスタムブロックを追加する事ができるプラグインです。当サイトではBlock Labを使って、さまざまな目的に合ったカスタムブロックの作り方を紹介しています。[…]
何で専用のプラグインを使わないの？
先ほど申し上げた通り、この記事では「Pz-LinkCard」を使わないでブログカードを作りたいと思います。
Pz-LinkCardは見た目も良く簡単につくれる人気のプラグインではあるのですが、その分重いと言われています。
私が検索した時では、予測候補の4番目には「重い」って出てきました。。
動作の遅さはSEO的にも減点対象となります。せっかく見栄えの良いブログカードを作っても、アクセスしてくれる人が減るんじゃ元も子もないですよね。
それだったらカスタムブロックを作るプラグインの「Block Lab」ならそれほど重くありませんし、何よりブログカードに限らず様々なカスタムブロックを作成できるのでお得じゃないかと思うのです。
そういう訳で、私は「Block Lab」でブログカードを作成する事をオススメしています！
ブログカードを作ろう！
それでは、WordPressでブログカードを作る方法を紹介します！
作成の手順 – Block Labの設定 –
まずはBlock Labの設定をしましょう。
Block Labの「Add New」で新規ブロックの設定画面を開きます。
まずはブロック名とSlugを設定します。
今回はひねらず「blogcard」という名前にしました。
次にFieldを追加して、以下を入力します。
- Field Label: field-url(ここは何でも良いです)
- Field Name: field-url
- Field Type: Text or URL
- Location: Editor
作成の手順 – php, cssファイルの作成 –
ここがキモになります！と言っても、コピペでOKです。
PHPもCSSも書けない私の苦労の結晶です、使ってください…!!
・ block-blogcard.php
・ block-blogcard.css
うん、コードって見ると恐ろしくなりますよね。笑
とはいえコピペだけなので、ぐっとこらえて進めましょう！
なお、このコードは以下の記事から学ばせてさせていただきました。
とはいえ結構変更していますのであしからず。
macoblog 【WordPress】コピペで実装ブログカードの作り方【プラグインなし】
有益な記事には日々感謝です。ちなみにこの方のサイトを見ると、専用のプラグインを使わないでブログカードを作る利点がより分かります。
作成の手順 – サーバにファイルを配置 –
このあたりはBlock Labの使い方記事に書かれているので、割愛します。
レンタルサーバのファイルマネージャーか、専門的なのが分かる方ならFTPツールでファイルを置いてくるだけです。
これで設定は完了です！
実際に使ってみよう
設定ができたら早速使いましょう！
追加したブロックが表示されていますね。
ブロックを選択すると、URL入力欄が常時されます。
ここにURLを入力すると……
できました！あとは細かなところを好みでカスタマイズしてみてください！
補足：SEOについて
補足としてSEOの効果について解説します！
ブログカードのSEOへの影響ですが、ブログカード自体がSEOになるわけではありません。
適切な場所に見やすいブログカードがあると、それをクリックする人は増えますよね。
それによって、サイト内の回遊率とセッション時間が上がり、直帰率が下がります。
これらの要素がGoogleから評価され、SEOとなるという事です。
なので、むやみやたらにブログカードを挿入すれば良いという訳じゃないので、適切に使ってくださいね！
なお、回遊率やセッション時間、直帰率などの専門用語がイマイチ分からないという方は、こちらの記事を参考にしてください。
最近のGoogleの分析ツールって、ものすごく便利ですよね。なんでこんなのが無料なのか怖いぐらいです…でも、便利すぎる一方でこんな問題が。そう、ユーザ側にもある程度の知識が求められるようになってしまいま[…]
最後に
ブログカードを作るって実際にはハードル高いことですが、コピペなら結構簡単じゃないですか？
皆さんのお役に立てられたら幸いです！
もし不明点があればコメント欄にてお問い合わせください。
TwitterのDMも受け付けていますので、お気軽にご連絡くださいね。
あなたはこんなボタンを見たことはありませんか？光るボタンです！これ、ついクリックしたくなっちゃいますよねぇ。実際、「光るボタンでクリック率が上がった」という声もあります。AFFINGER5 の "キラリ[…]