【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】
![【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/luxeritas-arrange-4-images-thumbnail-02.png)
![ナツメグチャンネル プロフィール 02](http://nutmeg-channel.com/wp-content/uploads/2023/07/nutmeg-channel-profile-02.png)
ナツメグです
もうダサくしないカスタマイズ第10回。
Luxeritas(ルクセリタス)の
ヘッダー下に
画像リンクを4つ並べて
回遊率を上げたい。
そんなLuxeritasユーザーも多いのでは
ないでしょうか!?
でもやってる人は案外少ない。
多分やり方が
広まってないからですね。
Cocoonの
アピールエリアみたいに
名前が付いてないから
検索しにくいですし。
このヘッダー下に画像リンクを4つ並べるのは
何て呼べば良いんだろう。
「ヘッダー下画像リンク4つ並び」とか?
【Luxeritas】ヘッダー下画像リンク4つ並び
- リンクにする画像を用意する
- 固定ページでカラムを使って画像リンクを4つ並べる
- 再利用ブロックウィジェットを使ってヘッダー下に画像リンクを4つ並べる
- スタイルシートにCSSを書き込んでデザインを整える
という訳でLuxeritasオリジナルの
再利用ブロックウィジェットを使って
ヘッダー下に
画像リンクを4つ並べて行きます。
仕上がりはこんな感じ。
PCでの表示。
![画像を4つ並べる
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/arrange-4-images.png)
スマホ表示。
![画像を4つ並べる モバイル
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/arrange-4-images-mobile.png)
このヘッダー下に
画像リンクを4つ並べるのは
カルーセルスライダーより
断然、回遊率が上がるのでお薦めです。
ナツメグの子供部屋
https://nutmeg-room.com/
リンクにする画像を用意する
まずリンクにする画像を用意します。
![Luxeritas カスタマイズ サムネイル 04
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/luxeritas-customize-thumbnail-04.png)
テスト用にこの画像を使っても良いですよ。
サイズは800×450pxです。
画像の著作権は放棄しません。
固定ページで画像リンクを並べる
WordPressの管理画面から
固定ページ>新規追加。
タイトルを適当に付けて行きます。
固定ページのタイトルは
「ヘッダー下画像リンク4つ並び」にしました。
パーマリンクはarrange-4-imagesに設定。
編集画面の
プラスマークをクリックします。
![プラスマーク
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/plus-mark.png)
デザイン>カラムを選択。
![カラムを選択
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/select-column.png)
33/33/33を選択。
![33/33/33を選択
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/select-33-33-33.png)
カラムとカラムの間にマウスオーバーすると
「カラムを追加」と表示されるので
クリックして
カラムを追加します。
![カラムを追加
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/add-column.png)
カラムの真ん中のプラスマークを
マウスオーバーすると
「ブロックを追加」と表示されるので
画像ブロックを追加します。
![ブロックを追加
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/add-block.png)
画像ブロックが表示されない場合は
全てを表示をクリックすると
編集画面の左側に全てのブロックが表示されるので
画像ブロックを選択。
![画像ブロックを選択
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/select-image-block.png)
メディアライブラリにサムネイル画像をアップロードして
画像を選択します。
![メディアライブラリ
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/media-library.png)
800×450pxのサムネイル画像で
画像を4つ並べる前提なので
800×450pxのサムネイル画像を
使って下さい。
ない場合は上のサムネイル画像をコピペして
使って下さい。
![画像を4つ並べた
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/4-images-side-by-side.png)
こんな感じでサムネイル画像を横に4つ並べました。
![リンクを挿入
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/insert-link.png)
リンクのマークをクリックして
表示させたいリンク先のURLを書き込みます。
![リンクの挿入 02
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/insert-link-02.png)
カラムの画像を選択して
画像サイズは中を選択。
100%をクリックして下さい。
![中を選択
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/select-medium.png)
メディア設定の画像サイズの
中サイズを選択したという事です。
![中サイズ
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/medium-size.png)
これ以外の画像サイズを選択すると
サムネイル画像が小さく表示されてしまいます。
![カラム全体を選択
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/select-entire-column.png)
カラム全体を選択して縦の…をクリック。
![再利用ブロックを作成
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/create-reusable-blocks.png)
再利用ブロックを作成をクリック。
再利用ブロックに名前を付けます。
![名前を付けて保存
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/save-as.png)
名前は「ヘッダー下画像リンク4つ並び」。
固定ページを公開します。
![固定ページを公開
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/publish-static-page.png)
サムネイル画像が4つ並んだカラムの
再利用ブロックが使えるようになりました。
再利用ブロックウィジェットを使う
WordPressの管理画面からウィジェットを選択。
![再利用ブロックウィジェット
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/reusable-block-widget.png)
上から2番目の再利用ブロック(Luxeritasオリジナル)を
ヘッダー下ウィジェットに追加します。
ヘッダー下ウィジェットの再利用ブロックの欄で
「ヘッダー下画像リンク4つ並び」を選択。
![ヘッダー下ウィジェット
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/widget-under-header.png)
ブログを表示すると
ヘッダー下にザムネイル画像のリンクが4つ並びました。
![ヘッダー下
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/under-header.png)
まだ記事が少ないので画像は全部同じですが。
デザインを整える
スタールシートに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
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/header-under-id.png)
デバロッパーツールの使い方
PC画面はこんな感じです。
![ヘッダー下画像リンク4つ並び PC
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/arrange-4-images-PC.png)
スマホ画面。
![ヘッダー下画像リンク4つ並び モバイル 02
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/arrange-4-images-mobile-02.png)
#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段になるという
指示でしょうか?
これを入れないとこうなります。
![ヘッダー下 モバイル
ナツメグチャンネル](http://nutmeg-channel.com/wp-content/uploads/2023/07/under-header-mobile.png)
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秒で上がるという指示になります。
参考にしたサイトはこちら
スマホの画像の並べ方が分からなかったので
助かりました。
ありがとうございました。
![ナツメグチャンネル プロフィール 02](http://nutmeg-channel.com/wp-content/uploads/2023/07/nutmeg-channel-profile-02.png)
今回は以上です
追記
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】グローバルナビのメニューにアイコンを付ける