私の他サイトにて、サイドバーに記事へのリンクを貼っているのですが、テキストリンクのためインパクトの弱いもの。そこで今回、簡単なコピペ対応により、サイドバーのリンクをブログカード表示にしてみました。
なお、以下のコピペ対応は、WordPressのテーマ「Simplicity」、Google Chromeでの対応となります。
サイドバーでのブログカード表示のBefore, After
まずは、テキストリンクのBeforeとブログカード表示のAfterの表示例です。
▼以下はサイドバーのスクショですが、左がテキストリンク、右がブログカードでのリンク表示です。やはり、サムネイル付のブログカード表示は画像付きでインパクトがあるように感じます。
▼サイトの横幅全体のスクショ。トップ画面の表示とそろっていて、良い感じ。
実際にサイドバーのブログ表示を利用しているサイトはこちら。
表示する方法
以下のとおり、単純に記事中のブログカードのソースを、サイドバーのテキストウィジェットに貼り付けたのみです。
※WordPressのテーマ「Simplicity」での説明となります。
- 記事作成画面で、表示したいリンク先ののブログカードリンクを作成（ブログカードの利用設定を行っていることが前提です）。
- 記事のプレビューにて、ブログカードの上あたりを右クリックし「ページのソースを表示」を選択。
- 該当のソースをコピー。
- WordPressの外観-ウィジェット画面の「パソコン用テキストウィジェット」に３のソースを貼り付けて完了。
画像にて補足します。
▼記事にて作成したブログカードをプレビューにて右クリックし、「ページのソースを表示」を選択。
▼ソースが長いので一部を割愛
▲ブログカードの種類などによりソースが異なるかもしれませんが、私の場合、赤枠の<div id=”the-content”から<div><div><div>までをコピペすることで対応できました。
なお、ブログカードのタイトル・記事の抜粋の修正は、ソース中のテキストをいじることで対応できそうです。
▲▼パソコン用テキストウィジェットにて、コピーしたソースを貼り付けて完了です。
まとめ
サイドバーのリンクをテキストリンクからブログカードに変更したところで、大きなアクセス増につながるものでもないのですが、サイドバーの人気記事のリンク、トップページのサムネイル表示と統率のとれたものとなりました。簡単にできるものですのでお試しください。
コメント