【WordPress】前の記事・次の記事にサムネイル画像を表示する【WordPress】前の記事・次の記事にサムネイル画像を表示する画像のように前の記事と次の記事のナビゲーションにサムネイル画像を表示する方法のご紹介です。最新の記事と最古の記事には【ホームへ戻る】のボタンを設置しています。サイトを訪れてくださった方の滞在時間を延ばすのが目的ですwスポンサーリンク設置は簡単!コピペするだけ!ブログの記事に設置するのでsingle.phpに記述します。<!–ページナビ–>以下を書き換えてください。?></div>アイキャッチを設定していない記事には画像は表示されません。Awesomeのアイコンフォントを使用しています。上記のコードはHTML5用のコードです。HTML5サイトではaタグに直接idやclassを付けられるようになったり、aタグでdivを囲めるようになりました。こんな感じのコードが書けてしまうのです。class=”blog”>●●●</div></a>こうすることによりdivのなか全体どこでもクリックできるのです。divの中のどこでもクリックできるというのはクリックの領域が広がる、つまりスマホでのユーザビリティーが向上するんですね。Attentionしかしdivの中にさらにaタグを設置する場合にはエラーを吐き出すので注意!aタグをさらに置きたいときはJqueryを使うやり方がいいようです。詳しい説明はまた次の機会に。HTML5以外のサイトの場合、今回わたしも参考にさせていただいたこちらのサイトがわかりやすくコードの紹介が載っています。今村だけがよくわかるブログcssに記述あとはスタイルシートで見た目を整えるだけです。(結構)雑ですが参考までにわたしのブログのコードを載せておきます。お好みで変えてくださいね。table-cell;でやってるので次の記事と前の記事がないところはスキマ空きます。後でなおします(←たぶん)PCサイズのbeforeとかafterとかついてる所はホバーでぬるぬる動くアニメーションをCSS3でつけています。まとめ前の記事、次の記事への誘導に限らず画像が付いている方が目を引きますし、クリックにもつながります。スマホ記事を見ている場合テキストをクリックするのってなんかストレス感じます。指に力が入るっていうか。今回ご紹介したaタグでブロック要素を囲む方法はトップページやアーカイブ、サイドバーの記事一覧にも使えると思いますよ。Share!!ツイートするシェアするはてブするこの記事のタイトルとURLをコピーする記事タイトル【WordPress】前の記事・次の記事にサムネイル画像を表示する記事URLhttps://shufulife.com/prev-next/お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。【エクセル帳簿】決算時に行うこともっと見るブログの中の人ちゅんこ@shufulife意識低い系主婦。夫と娘(5歳)と仲睦まじく暮らしています。毎日楽することばかり考えて、お手本はアニメ「あたしンち」のお母さん。Shufulife本サイト内にある記事や画像などの一切の無断転載を禁じます。