テーマLuxeritasでヘッダー下にリンクボタンを設置する方法
当ウェブチルサイトでは、2022年12月現在ヘッダー下におすすめ記事へのリンクボタンを設置しています。このページにもありますが、「ワードプレスの準備」「ワードプレスの使い方」「Gutenbergの使い方」「配色シミュレーター」のボタンですね。
本記事ではどのようにして設置したらよいのか、その方法を2通り紹介いたします。
1.カスタムHTMLウィジェットで設置する方法
(当ウェブチルサイトで使っている方法です。HTMLやCSSをベタ書きするのに抵抗がない方向け)
2.再利用ブロックウィジェットで設置する方法
(HTMLベタ書きは苦手という方向け。ただし少しばかりのCSSは必要です)
1.カスタムHTMLウィジェットで設置する方法
ウェブチルサイトのヘッダー下ボタン構成
このページのヘッダー下を見てもわかるように、ヘッダー下に4つのおすすめ記事へのリンクボタンを配置しています。ホバー(マウスオーバー)で下から記事のアイキャッチ画像が出てくる仕様です。
ちなみにスマホでは以下のようにリンクボタンは2行2列表示となります。
ヘッダー下へのリンクボタンの設置手順概要
手順概要は以下の通りです。
- ヘッダー下ウィジェットエリアにカスタムHTMLウィジェットを配置
- カスタムHTMLウィジェットにHTMLを記述
- カスタムCSSでデザイン
HTMLを記述してCSSでデザインする、という最も単純な手法ですが、慣れていない方には難しいかもしれません。
以下の詳細手順では、実際のHTMLとCSSのコードをそのまま紹介します。
ヘッダー下へのリンクボタンの設置手順詳細
1.ヘッダー下ウィジェットエリアにカスタムHTMLウィジェットを配置
ダッシュボードメニューの外観>ウィジェット へアクセスして、ヘッダー下ウィジェットエリアにカスタムHTMLウィジェットを配置します。
2.カスタムHTMLウィジェットにHTMLを記述
配置したカスタムHTMLウィジェットにHTMLを記述して保存します。
実際に私が記述しているHTMLが以下の通りです。
<div class="recommend-post__container">
<div class="recommend-post">
<a class="recommend-post__btn slide-bg post1"
href="https://web-children.com/2020/11/16/get-ready-for-wordpress/"><img width="320" height="180"
src="https://web-children.com/wp-content/uploads/2020/11/bb1097c87265e5c8b1dd8bddb8dded26-320x180.jpg"
class="thumbnail wp-post-image" alt="おすすめ記事" itemprop="image"
srcset="https://web-children.com/wp-content/uploads/2020/11/bb1097c87265e5c8b1dd8bddb8dded26-320x180.jpg 320w, https://web-children.com/wp-content/uploads/2020/11/bb1097c87265e5c8b1dd8bddb8dded26-300x169.jpg 300w, https://web-children.com/wp-content/uploads/2020/11/bb1097c87265e5c8b1dd8bddb8dded26-530x298.jpg 530w, https://web-children.com/wp-content/uploads/2020/11/bb1097c87265e5c8b1dd8bddb8dded26-565x318.jpg 565w, https://web-children.com/wp-content/uploads/2020/11/bb1097c87265e5c8b1dd8bddb8dded26.jpg 640w"
sizes="(max-width: 320px) 100vw, 320px"><span>ワードプレスの準備</span></a>
</div>
<div class="recommend-post">
<a class="recommend-post__btn slide-bg post2"
href="https://web-children.com/2020/11/18/master-guidelines-flow-for-wordpress/"><img width="320"
height="180"
src="https://web-children.com/wp-content/uploads/2020/11/4d71ed2262463ccb7f9f87c1dff65467-320x180.jpg"
class="thumbnail wp-post-image" alt="おすすめ記事" itemprop="image"
srcset="https://web-children.com/wp-content/uploads/2020/11/4d71ed2262463ccb7f9f87c1dff65467-320x180.jpg 320w, https://web-children.com/wp-content/uploads/2020/11/4d71ed2262463ccb7f9f87c1dff65467-300x169.jpg 300w, https://web-children.com/wp-content/uploads/2020/11/4d71ed2262463ccb7f9f87c1dff65467-530x298.jpg 530w, https://web-children.com/wp-content/uploads/2020/11/4d71ed2262463ccb7f9f87c1dff65467-565x318.jpg 565w, https://web-children.com/wp-content/uploads/2020/11/4d71ed2262463ccb7f9f87c1dff65467.jpg 640w"
sizes="(max-width: 320px) 100vw, 320px"><span>ワードプレスの使い方</span></a>
</div>
<div class="recommend-post">
<a class="recommend-post__btn slide-bg post3"
href="https://web-children.com/2020/11/18/gutenberg-guidelines/"><img width="320" height="180"
src="https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-320x180.jpg"
class="thumbnail wp-post-image" alt="おすすめ記事" itemprop="image"
srcset="https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-320x180.jpg 320w, https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-300x169.jpg 300w, https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-530x298.jpg 530w, https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-565x318.jpg 565w, https://web-children.com/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc.jpg 640w"
sizes="(max-width: 320px) 100vw, 320px"><span>Gutenberg使い方</span></a>
</div>
<div class="recommend-post">
<a class="recommend-post__btn slide-bg"
href="https://web-children.com/color-distribution-using-original-pccs-map/"><img width="320" height="180"
src="https://web-children.com/wp-content/uploads/2021/02/034e43a8d81a44094fe23288b0069cdd-320x180.jpg"
class="thumbnail wp-post-image" alt="おすすめ記事" itemprop="image"
srcset="https://web-children.com/wp-content/uploads/2021/02/034e43a8d81a44094fe23288b0069cdd-320x180.jpg 320w, https://web-children.com/wp-content/uploads/2021/02/034e43a8d81a44094fe23288b0069cdd-300x169.jpg 300w, https://web-children.com/wp-content/uploads/2021/02/034e43a8d81a44094fe23288b0069cdd-530x298.jpg 530w, https://web-children.com/wp-content/uploads/2021/02/034e43a8d81a44094fe23288b0069cdd-565x318.jpg 565w, https://web-children.com/wp-content/uploads/2021/02/034e43a8d81a44094fe23288b0069cdd.jpg 640w"
sizes="(max-width: 320px) 100vw, 320px"><span>配色シミュレーター</span></a>
</div>
</div>
HTMLのポイント解説
4つのボタン要素を記述しているのでHTMLが長く見えますが、ポイントは以下の通りです。
上記のように各記事へのリンクURL、アイキャッチ画像へのリンクURLおよびsrcsetの記述、リンクテキストの記述は、各記事の情報に応じて書き換えてください。
アイキャッチ画像のリンクですが、メディアライブラリを開けて目的の画像の画面でURLをコピペすると、サイズとしてはアップロードした元画像のサイズのまま表示されることになります。
このままでよければ(PCやスマホなどどのデバイスでもこのデフォルトサイズの画像を使いたければ)、そのままHTMLのアイキャッチ画像のURLのところにコピペしてしまって、その後のsrcsetの記述は省略してしまえばよいでしょう。ただしデフォルト画像のサイズが元々大きい場合は、サイトの表示スピードに影響したり、ユーザーに無用な負担を強いることになります。かといって、すべて小さいサイズの画像を指定するとPCのように大きな画面では画像の質が劣化してしまいます。
これを避けるためにワードプレスは自動的にデフォルト画像より小さい画像を何種類か出力してくれるので、srcset記述で画像を使い分けるのがよいでしょう。
Luxeritasの場合、アイキャッチ用画像としては ”****-320×180”、このほか -300×169、-530×298、-565×318、といったサイズも準備されるので(縦横比はデフォルト画像に応じて自動的に設定される)、私はsrcset記述でこれらを使い分けるようにしています。
3.カスタムCSSでデザイン
以下のCSSを記述して、ボタンのデザインを整えます。CSSの記述場所としては、私は子テーマのstyle.cssに記述していますが、好みによって例えば外観>カスタマイズの追加CSS欄などでもよいかと思います。
/* ヘッダー下おすすめ記事(カスタムHTMLウィジェット) */
div#custom_html-2 {
margin-top: 40px;
}
.recommend-post__container {
margin-top: 20px;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.recommend-post {
text-align: center;
width: 23%;
max-width: 300px;
height: auto;
font-size: 16px;
font-weight: 600;
}
.recommend-post a:hover img {
opacity: 1;
}
@media screen and (max-width: 990px){
.recommend-post {
width: 45%;
margin-bottom: 30px;
}
}
@media screen and (max-width: 450px){
.recommend-post {
justify-content: space-between;
font-size:14px;
}
}
.recommend-post__btn {
display: block;
border-radius: 5px;
width: 100%;
height: auto;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.recommend-post__btn>img {
width: 100%;
}
.recommend-post__btn.slide-bg {
position: relative;
overflow: hidden;
z-index: 1;
}
.recommend-post__btn.slide-bg::before {
content:"";
display: block;
width: 100%;
height: 100%;
background: -moz-linear-gradient(-135deg, #494153,#aaa19a);
background: -webkit-linear-gradient(-135deg, #494153,#aaa19a);
background: linear-gradient(-135deg, #494153,#aaa19a);
position: absolute;
top: 0;
left: 0;
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
z-index: 2;
}
@media screen and (max-width:990px){
.recommend-post__btn.slide-bg::before {
-webkit-transition: -webkit-transform 0.1s;
transition: -webkit-transform 0.1s;
transition: transform 0.1s;
transition: transform 0.1s, -webkit-transform 0.1s;
z-index: 2;
}
}
.recommend-post__btn.slide-bg:hover::before {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.recommend-post__btn.slide-bg span {
display: inline-block;
white-space: nowrap;
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform:translate(-50%, -50%);
color: #fff;
z-index:3;
pointer-events: none;
}
.recommend-post__btn.slide-bg:hover span {
top:100%;
left:50%;
-webkit-transform: translate(-50%, -100%);
transform:translate(-50%,-100%);
background-color: #555;
opacity: 0.95;
display:block;
width:100%;
text-align:center;
}
CSSのポイント解説
各ボタンの装飾は好みによるので、ここではレイアウトに関する部分のポイントを紹介します。
1.最初の3行のセレクターについて
最初のセレクターdiv#custome_html-2でウィジェットエリアのマージンを設定しているのですが、このセレクターidはサイトによっては変わるのでブラウザのデベロッパーツールで確認が必要です。
デベロッパーツールはブラウザを表示した状態でCtrl+Shift+Iで開きます。(MacならCommand+Shift+I)
2.各要素の並び(フレックスボックスの設定)
各要素はフレックスボックスで並びを整えていますが、PCとタブレット・スマホでの表示列数の変更などを以下の通りに設定しています。
並べる要素の大きさ・形状などによって見映えは変わるので、見映えを確認しながら整えるとよいでしょう。
2.再利用ブロックウィジェットを使う方法
以上がウェブチルサイトで実施している内容となりますが、HTMLをベタ書きするのが嫌、という人には別の方法として再利用ブロックウィジェットを使う方法を紹介しておきます。
手順概要
Luxeritasには再利用ブロックに登録したコンテンツをウィジェットで呼び出せる”再利用ブロックウィジェット”という便利なウィジェットがあるので、これを利用します。手順概要は以下の通りです。
- あらかじめ固定ページなどで表示させたい要素を作成する
(例えばカラムブロックで画像やボタンなど横並びのコンテンツを作成) - ①を再利用ブロックに登録
- ヘッダー下ウィジェットエリアに再利用ブロックウィジェットを配置
- ③で配置した再利用ブロックウィジェットから②で登録した再利用ブロックを呼び出す
事例紹介
実際の事例として、Luxeritasで「子供イラスト教室オンライン」というブログを運営されている絵馬さんのサイトを紹介します。
絵馬さんのサイトでは2022年1月4日現在、ヘッダー下に以下のようなリンクボタンを設置されています。
方法は上記で紹介の通り、カラムブロックで4つのイラストボタンを横並びとしたものを再利用ブロックに登録し、再利用ブロックウィジェットでヘッダー下に表示する方法です。
PCでの表示
カラムブロックで作成したとおり、4列に横並びとなっています。
スマホでの表示
デフォルトのカラムブロックではスマホ表示では4つのカラムが縦並びとなってしまうため、カスタムCSSを使って2行2列に整えています。
可愛いイラストと素敵な配色のボタンで、ユーザーをうまく誘導できるようになっているのがわかりますね。
カスタムCSSと注意点
絵馬さんのサイトでは以下のCSSで表示を整えています。
実際に2行2列に変更しているCSSは9行目のflex-basis: 45% !important;の部分だけで、その他はカラム周辺の余白調整に使っているCSSとなります。
#thk_reusable_blocks_widget-4 .wp-block-image {
margin: 0em 0;
}
@media screen and (max-width: 781px){
#thk_reusable_blocks_widget-4 {
padding: 0 20px 0;
}
#thk_reusable_blocks_widget-4 .wp-block-column {
flex-basis: 45% !important;
}
}
@media screen and (max-width: 575px){
#thk_reusable_blocks_widget-4 {
padding: 0 7px 0;
}
#thk_reusable_blocks_widget-4 .wp-block-columns {
gap: 0.5em;
}
}
ここでの注意点としては、セレクターとして度々出てくる#thk_reusable_blocks_widget-4という記述です。
これは、実際にヘッダー下に配置された再利用ブロックウィジェットを指定するために使っているセレクターですが、末尾の数字は使用するサイトによっては必ずしも4にはなりません。たまたま絵馬さんのサイトでは4となっています。
実際にブラウザの開発者ツールを開けて(Google ChromeならCtrl+Shift+I)、ヘッダー下に挿入したウィジェットのidを調べて使うようにしましょう(id=thk_reusable_blocks_widget-Xという記述を捜してみてください)。
まとめ
このようにLuxeritasではヘッダー下ウィジェットエリアを使って自由にコンテンツを配置することができます。
コンテンツの作成方法でHTML・CSSを自由に使える方は、カスタムHTMLウィジェットを使って自由にコンテンツを作成すればよいのですが、慣れていない方の場合は再利用ブロックウィジェットを使うのがおすすめです。