【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】

2023/07/052024/09/04Luxeritas

もうダサくしないカスタマイズ第10回。

Luxeritas（ルクセリタス）の
ヘッダー下に
画像リンクを4つ並べて
回遊率を上げたい。

そんなLuxeritasユーザーも多いのでは
ないでしょうか!?

でもやってる人は案外少ない。

多分やり方が
広まってないからですね。

Cocoonの
アピールエリアみたいに
名前が付いてないから
検索しにくいですし。

このヘッダー下に画像リンクを4つ並べるのは
何て呼べば良いんだろう。

「ヘッダー下画像リンク4つ並び」とか？

【Luxeritas】ヘッダー下画像リンク4つ並び

という訳でLuxeritasオリジナルの
再利用ブロックウィジェットを使って
ヘッダー下に
画像リンクを4つ並べて行きます。

仕上がりはこんな感じ。

PCでの表示。

スマホ表示。

このヘッダー下に
画像リンクを4つ並べるのは
カルーセルスライダーより
断然、回遊率が上がるのでお薦めです。

ナツメグの子供部屋

https://nutmeg-room.com/

リンクにする画像を用意する

まずリンクにする画像を用意します。

テスト用にこの画像を使っても良いですよ。

サイズは800×450pxです。

画像の著作権は放棄しません。

固定ページで画像リンクを並べる

WordPressの管理画面から
固定ページ＞新規追加。

タイトルを適当に付けて行きます。

固定ページのタイトルは
「ヘッダー下画像リンク4つ並び」にしました。

パーマリンクはarrange-4-imagesに設定。

編集画面の
プラスマークをクリックします。

デザイン＞カラムを選択。

33/33/33を選択。

カラムとカラムの間にマウスオーバーすると
「カラムを追加」と表示されるので
クリックして
カラムを追加します。

カラムの真ん中のプラスマークを
マウスオーバーすると
「ブロックを追加」と表示されるので
画像ブロックを追加します。

画像ブロックが表示されない場合は
全てを表示をクリックすると
編集画面の左側に全てのブロックが表示されるので
画像ブロックを選択。

メディアライブラリにサムネイル画像をアップロードして
画像を選択します。

800×450pxのサムネイル画像で
画像を4つ並べる前提なので
800×450pxのサムネイル画像を
使って下さい。

ない場合は上のサムネイル画像をコピペして
使って下さい。

こんな感じでサムネイル画像を横に4つ並べました。

リンクのマークをクリックして
表示させたいリンク先のURLを書き込みます。

カラムの画像を選択して
画像サイズは中を選択。

100%をクリックして下さい。

メディア設定の画像サイズの
中サイズを選択したという事です。

これ以外の画像サイズを選択すると
サムネイル画像が小さく表示されてしまいます。

カラム全体を選択して縦の…をクリック。

再利用ブロックを作成をクリック。

再利用ブロックに名前を付けます。

名前は「ヘッダー下画像リンク4つ並び」。

固定ページを公開します。

サムネイル画像が4つ並んだカラムの
再利用ブロックが使えるようになりました。

再利用ブロックウィジェットを使う

WordPressの管理画面からウィジェットを選択。

上から2番目の再利用ブロック（Luxeritasオリジナル）を
ヘッダー下ウィジェットに追加します。

ヘッダー下ウィジェットの再利用ブロックの欄で
「ヘッダー下画像リンク4つ並び」を選択。

ブログを表示すると
ヘッダー下にザムネイル画像のリンクが4つ並びました。

まだ記事が少ないので画像は全部同じですが。

デザインを整える

スタールシートにCSSを書き込んで
デザインを整えて行きます。

/*ヘッダー下画像リンク4つ並び*/
#thk_reusable_blocks_widget-2 .wp-block-image{
	margin: 0px 0px;
	width: 100%;
}

#thk_reusable_blocks_widget-2{
	padding: 0 10px 0;
}

#thk_reusable_blocks_widget-2 .wp-block-column{
	flex-basis: 45% !important;
}

#thk_reusable_blocks_widget-2 .wp-block-columns{
	gap: 0.6em;
}

#thk_reusable_blocks_widget-2 .wp-block-image:hover{
	transition: 0.5s;
	box-shadow: 2px 2px 4px #ddd;
	transform: translateY(-3px);
}

@media screen and (max-width: 575px){
#thk_reusable_blocks_widget-2 .wp-block-columns{
	gap: 0.5em;
	}
}

CSSの解説

このCSSは参考にしたサイトのCSSをコピペして
いじっただけなので実は理解していません。

理解していないなりに解説して行きます。

thk_reusable_blocks_widget-2というセレクターは
サイトによって変わるそうです。

デベロッパーツールで確認して下さい。

デバロッパーツールの使い方

PC画面はこんな感じです。

スマホ画面。

#thk_reusable_blocks_widget-2 .wp-block-imageは
margin: 0px 0px;を指定しないと
スマホ画面で
画像が2段になったときに上と下に隙間が開きます。

thk_reusable_blocks_widget-2は
padding: 0 10px 0;で左右に10px余白を入れてます。

thk_reusable_blocks_widget-2 .wp-block-columnの
flex-basis: 45% !important;は要素の幅ですね。

flex-basisは全く分かりませんが
幅が45%になったら
要素が2段になるという
指示でしょうか？

これを入れないとこうなります。

gapは余白の指定ですね。

PCでは0.6em
スマホでは0.5emを指定。

サムネイル画像をマウスオーバーすると
画像が上に3px浮くようにしました。

thk_reusable_blocks_widget-2 .wp-block-image:hoverの
transition: 0.5s;は変化に掛かる時間。

マウスオーバーで
サムネイル画像の影が
上2px、左右2px、右4px表示されて
3px上に0.5秒で上がるという指示になります。

参考にしたサイトはこちら

スマホの画像の並べ方が分からなかったので
助かりました。

ありがとうございました。

追記

PCでの画像リンク4つ並びの
横幅をちょっと広く表示させるようにしました。

スタイルシートにCSSを書き込みます。

/*ヘッダー下画像リンク4つ並びを広く*/
#thk_reusable_blocks_widget-2{
	padding: 0px 0px 0px;
}

@media (max-width: 575px){
#thk_reusable_blocks_widget-2{
	padding: 0 10px 0;
	}
}

これで左右にちょっと広く表示されるように
なったと思います。

#thk_reusable_blocks_widget-2の部分は
サイトによって違うので
デベロッパーツールで
確認して下さい。

もうダサくしないカスタマイズ

【Luxeritas】もうダサくしないカスタマイズ
【Luxeritas】サムネイルは正方形か長方形か!?
【Luxeritas】サムネイルを長方形に統一
【Luxeritas】メタ情報のカテゴリーのカスタマイズ
【Luxeritas】記事一覧カスタマイズ【カード型】
【Luxeritas】文字の色はどうしよう!?【文字リンク】
【Luxeritas】SNSシェアボタンを消します
【Luxeritas】ブログカードのカスタマイズ
【Luxeritas】デベロッパーツールの使い方【Google Chrome】
【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】
【Luxeritas】メニュー（グローバルナビ）とフッターの色を揃える
【Luxeritas】ページネーションのカスタマイズ
【Luxeritas】ヘッダー上の帯メニューのカスタマイズ
【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】
【Luxeritas】目次のカスタマイズ
【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】
【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】サイドバープロフィールのカスタマイズ
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】パターン登録の使い方
【Luxeritas】新着記事のカスタマイズ
【Luxeritas】グローバルナビのメニューにアイコンを付ける