IDOL×IDOL STORY! 感想レビュー
ナツメグチャンネル
Luxeritas カスタマイズ サムネイル 05
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02

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

2024/06/13Luxeritas

【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02
ナツメグチャンネル

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

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

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

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

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

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

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

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

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

作業の手順
  • リンクにする画像を用意する
  • 固定ページでカラムを使って画像リンクを4つ並べる
  • 再利用ブロックウィジェットを使ってヘッダー下に画像リンクを4つ並べる
  • スタイルシートにCSSを書き込んでデザインを整える

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

仕上がりはこんな感じ。

PCでの表示。

画像を4つ並べる
ナツメグチャンネル

スマホ表示。

画像を4つ並べる モバイル
ナツメグチャンネル

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

ナツメグの子供部屋

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

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

Luxeritas カスタマイズ サムネイル 04
ナツメグチャンネル

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

サイズは800×450pxです。

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

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

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

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

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

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

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

プラスマーク
ナツメグチャンネル

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

カラムを選択
ナツメグチャンネル

33/33/33を選択。

33/33/33を選択
ナツメグチャンネル

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

カラムを追加
ナツメグチャンネル

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

ブロックを追加
ナツメグチャンネル

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

画像ブロックを選択
ナツメグチャンネル

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

メディアライブラリ
ナツメグチャンネル

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

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

画像を4つ並べた
ナツメグチャンネル

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

リンクを挿入
ナツメグチャンネル

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

リンクの挿入 02
ナツメグチャンネル

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

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というセレクターは
サイトによって変わるそうです。

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

ヘッダー下 id
ナツメグチャンネル

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

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

ヘッダー下画像リンク4つ並び PC
ナツメグチャンネル

スマホ画面。

ヘッダー下画像リンク4つ並び モバイル 02
ナツメグチャンネル

#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