【いりまめ式ヘッダーカード】画像リンクを4列横並べでレスポンシブ表示する方法

 

 

 

 

 

ブログのウィジェットエリアに設置する内部リンクですが、ボタンやスライダー、テキスト、画像リンクなど読書の回遊を促すために皆さん様々なものを設置しているかと思います

 

 

各有料テーマでもブログカードやスライダー、AFFINGER5ではヘッダーカードなど簡単に設置できますね

 

 

今回ご紹介するのは、自称「いりまめ式ヘッダーカード

 

 

アイキャッチ画像を使って4列横並べの画像リンクを作りヘッダー部分に設置します。もちろんリンクをつけなくてもOK、画像のギャラリーとしても本文でも表示できます

 

 

では今回は4列横並べ画像リンクをCSS・htmlコードでヘッダーに設置する方法をご紹介したいと思います

 

 

 

 

 

 

ブログ内で紹介しているおすすめのアプリです【漫画アプリ、ゲームアプリ、ライブ配信アプリ、オンクレ、マッチング、稼げるアプリなど】

 

 

 

いりまめ式ヘッダーカード

見た目はこの記事のヘッダーに表示させている通りコンパクトで、ブログカードのように画像リンクで読者を記事に誘導するさせることができます

 

 

スライダーをスマホ表示すると大き過ぎるのが難点で、ガチャガチャしすぎて、何かね。動くっていうのも重たい気がして設置するのもためらいます

 

 

この4列画像リンクではスマホ表示でもコンパクト、あまり記事を邪魔せず見た目を損なうことなく設置することができます

 

 

またリンクで使う以外にも画像のギャラリーとして本文に並べることができるので大量に画像を載せたい時には便利

 

 

ただデメリットとしてテキストは表示出来ませんので画像に文字入れをしたものを使うと良いですね

 

 

4列横並べ画像リンクの設置方法

それでは4列横並べ画像リンクの設置方法を設置します

 

 

まずはこのコードをCSSにコピペして追加して下さい

 

[class^="img-flex-"] {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.img-flex-2 > img,
.img-flex-2 a { width: 49%; }
.img-flex-3 > img,
.img-flex-3 a { width: 32%; }
.img-flex-4 > img,
.img-flex-4 a { width: 24%; }

 

 

次にhtmlコードをテキストエディタに追加します

 

<div class="img-flex-4"> 	
<a href="①"><img src="②" alt=""></a> 
<a href="①"><img src="②" alt=""></a>
<a href="①"><img src="②" alt=""></a> 
<a href="①"><img src="②" alt=""></a> </div>

 

 

 

【手順】

まずはメモ帳などに上のhtmlコードをコピペして下さい

 

 

 

①の部分にブログ記事のURLを貼り付け

 

②に画像のURLを貼り付けます

 

 

 

 

①のブログ記事のURLは、トップページの投稿記事の内部リンクからコピーすることもできますし管理画面からでもURLを取得できます

 

 

②の画像の方はメニューの「メディア」よりアップロードされた画像画面の下の方にURLがあるので置き換えて下さい

 

 

alt属性の設定もした方が良いですね。キーワードを入れて簡単な説明を書きます。例えば「AFFINGR5メリット」など alt="○"に文字を入れるとクローラーが認識してくれるのでSEO効果が期待できます

 

 

※ちなみにalt属性を書かなくても特に問題はありません

 

 

 

アイキャッチ画像記事リンク付き

 

 

 

4つ並べの場合

 

 

 

3つ並べの場合

 

 

リンク無しで画像のみの表示にする場合は<a href="①">を抜いてください

 

 

ヘッダーに設置する

左メニュー「外観」より「ウィジェット」を選択し

 

「投稿ページ上部」に「テキスト」をドラッグします。テキスト内のテキストエディタにhtmlコードを入れるとヘッダーに画像リンクの設置ができます

 

 

ちなみに各テーマや他のブログで違いがあると思うので、これはDIVERの場合になります

 

 

サイズの変更

CSSで記述した通り横幅が次のように指定してあります

 

 

img-flex-2 49%
img-flex-3 32%
img-flex-4 24%

 

 

先程のhtmlコードの先頭img-flex-4をimg-flex-3や2に変えると大きさの変更ができます

 

 

img-flex-3で画像3つの場合

 

 

 

img-flex-2で画像2つの場合

 

 

 

 

画像の縦幅を短くしてアップロードすればAFFINGER5のような細長いリンクになります

 

 

このようにコピペだけでヘッダーカードが簡単に設置できます。WordPressに限らず他のブログでも使えるので是非

 

 

 

ちなみにAFFINGER5のヘッダーカードはこんな感じです

 

 

 

 

 

まとめ

以上、いりまめ式ヘッダーカードのご紹介でした

 

ヘッダー部分にもうひとアクセント入れるのに丁度良いかと思います。CSSはunlimited chaosさんを参考にさせて頂きました。今回はサイズを落としての文字入れが出来なかったので記述しませんでしたが、色々アレンジを加えてみてください

 

 

 

 

 

おすすめの記事