・・・などなどワードプレスを使ったサイト制作やコーディングのみも承ります。お気軽にお問い合わせください。itLinkedInPocketCopy当ウェブチルサイトでは、2022年12月現在ヘッダー下におすすめ記事へのリンクボタンを設置しています。このページにもありますが、「ワードプレスの準備」「ワードプレスの使い方」「Gutenbergの使い方」「配色シミュレーター」のボタンですね。本記事ではどのようにして設置したらよいのか、その方法を2通り紹介いたします。この記事でわかること1.カスタムHTMLウィジェットで設置する方法(当ウェブチルサイトで使っている方法です。HTMLやCSSをベタ書きするのに抵抗がない方向け)2.再利用ブロックウィジェットで設置する方法(HTMLベタ書きは苦手という方向け。まとめ1.カスタムHTMLウィジェットで設置する方法ウェブチルサイトのヘッダー下ボタン構成このページのヘッダー下を見てもわかるように、ヘッダー下に4つのおすすめ記事へのリンクボタンを配置しています。ホバー(マウスオーバー)で下から記事のアイキャッチ画像が出てくる仕様です。ちなみにスマホでは以下のようにリンクボタンは2行2列表示となります。ヘッダー下ウィジェットエリアにカスタムHTMLウィジェットを配置カスタムHTMLウィジェットにHTMLを記述カスタムCSSでデザインHTMLを記述してCSSでデザインする、という最も単純な手法ですが、慣れていない方には難しいかもしれません。以下の詳細手順では、実際のHTMLとCSSのコードをそのまま紹介します。アクセスして、ヘッダー下ウィジェットエリアにカスタムHTMLウィジェットを配置します。配置したカスタムHTMLウィジェットにHTMLを記述して保存します。実際に私が記述しているHTMLが以下の通りです。320px"><span>配色シミュレーター</span></a></div></div>HTMLのポイント解説4つのボタン要素を記述しているのでHTMLが長く見えますが、ポイントは以下の通りです。上記のように各記事へのリンクURL、アイキャッチ画像へのリンクURLおよびsrcsetの記述、リンクテキストの記述は、各記事の情報に応じて書き換えてください。アイキャッチ画像のリンクですが、メディアライブラリを開けて目的の画像の画面でURLをコピペすると、サイズとしてはアップロードした元画像のサイズのまま表示されることになります。このままでよければ(PCやスマホなどどのデバイスでもこのデフォルトサイズの画像を使いたければ)、そのままHTMLのアイキャッチ画像のURLのところにコピペしてしまって、その後のsrcsetの記述は省略してしまえばよいでしょう。デフォルト画像のサイズが元々大きい場合は、サイトの表示スピードに影響したり、ユーザーに無用な負担を強いることになります。いって、すべて小さいサイズの画像を指定するとPCのように大きな画面では画像の質が劣化してしまいます。これを避けるためにワードプレスは自動的にデフォルト画像より小さい画像を何種類か出力してくれるので、srcset記述で画像を使い分けるのがよいでしょう。-300×169、-530×298、-565×318、といったサイズも準備されるので(縦横比はデフォルト画像に応じて自動的に設定される)、私はsrcset記述でこれらを使い分けるようにしています。3.カスタムCSSでデザイン以下のCSSを記述して、ボタンのデザインを整えます。CSSの記述場所としては、私は子テーマのstyle.cssに記述していますが、好みによって例えば外観>カスタマイズの追加CSS欄などでもよいかと思います。各ボタンの装飾は好みによるので、ここではレイアウトに関する部分のポイントを紹介します。1.最初の3行のセレクターについて最初のセレクターdiv#custome_html-2でウィジェットエリアのマージンを設定しているのですが、このセレクターidはサイトによっては変わるのでブラウザのデベロッパーツールで確認が必要です。デベロッパーツールはブラウザを表示した状態でCtrl+Shift+Iで開きます。(MacならCommand+Shift+I)2.各要素の並び(フレックスボックスの設定)各要素はフレックスボックスで並びを整えていますが、PCとタブレット・スマホでの表示列数の変更などを以下の通りに設定しています。並べる要素の大きさ・形状などによって見映えは変わるので、見映えを確認しながら整えるとよいでしょう。以上がウェブチルサイトで実施している内容となりますが、HTMLをベタ書きするのが嫌、という人には別の方法として再利用ブロックウィジェットを使う方法を紹介しておきます。手順概要Luxeritasには再利用ブロックに登録したコンテンツをウィジェットで呼び出せる”再利用ブロックウィジェット”という便利なウィジェットがあるので、これを利用します。手順概要は以下の通りです。実際の事例として、Luxeritasで「子供イラスト教室オンライン」というブログを運営されている絵馬さんのサイトを紹介します。イラストの簡単な書き方♪イラストの簡単な書き方♪https://nokonoko.jp/絵馬さんのサイトでは2022年1月4日現在、ヘッダー下に以下のようなリンクボタンを設置されています。方法は上記で紹介の通り、カラムブロックで4つのイラストボタンを横並びとしたものを再利用ブロックに登録し、再利用ブロックウィジェットでヘッダー下に表示する方法です。PCでの表示カラムブロックで作成したとおり、4列に横並びとなっています。スマホでの表示デフォルトのカラムブロックではスマホ表示では4つのカラムが縦並びとなってしまうため、カスタムCSSを使って2行2列に整えています。可愛いイラストと素敵な配色のボタンで、ユーザーをうまく誘導できるようになっているのがわかりますね。絵馬さんのサイトでは以下のCSSで表示を整えています。!important;の部分だけで、その他はカラム周辺の余白調整に使っているCSSとなります。0.5em;}}ここでの注意点としては、セレクターとして度々出てくる#thk_reusable_blocks_widget-4という記述です。これは、実際にヘッダー下に配置された再利用ブロックウィジェットを指定するために使っているセレクターですが、末尾の数字は使用するサイトによっては必ずしも4にはなりません。絵馬さんのサイトでは4となっています。ChromeならCtrl+Shift+I)、ヘッダー下に挿入したウィジェットのidを調べて使うようにしましょう(id=thk_reusable_blocks_widget-Xという記述を捜してみてください)。まとめこのようにLuxeritasではヘッダー下ウィジェットエリアを使って自由にコンテンツを配置することができます。コンテンツの作成方法でHTML・CSSを自由に使える方は、カスタムHTMLウィジェットを使って自由にコンテンツを作成すればよいのですが、慣れていない方の場合は再利用ブロックウィジェットを使うのがおすすめです。管理者のプロフィールウェブチルこと内田智士です。50歳を超えてワードプレスに初めて出会い、ブログ歴は4年です。このウェブチルサイトは私にとって4つ目のサイトですが、ワードプレスをもっと深く勉強してわかりやすくお伝えできたらと思います。初心者向けにセミナーも開催してますので興味があれば声をかけてください。