完成品は次の動画の通りです↓↓↓

CSSを追加するだけで、簡単に実装することができます。

1. ヘッダーメニューの事前設定（WordPress管理画面）

先に紹介した完成品と全く同じデザインにしたい場合には、次の操作を行ってください。
（全く同じでなくてもいい場合には、この手順１は飛ばしていただいても大丈夫です）

Cocoon設定を変更

事前のWordPressカスタマイズ

サブメニューを表示したい場合には、こちらの記事を参考にしてみてください↓↓↓

【Cocoon】ヘッダーにドロップダウンメニューを追加する方法

【コピペで出来るCocoonカスタマイズ】WordPressのテーマであるCocoonで、ドロップダウンメニューを追加する方法について解説します。CSSコード付きです。

www.qolup-it.com

2024.09.08

アイコンを使用したい場合には、こちらの記事を参考にしてみてください↓↓↓

【Cocoon】ヘッダーメニューにアイコンを追加する方法

【コピペで出来るCocoonカスタマイズ】WordPressのテーマであるCocoonで、Font Awesomeを使ってヘッダーメニューにアイコンを追加する方法ついて解説します。CSSコード付きです。

www.qolup-it.com

2024.09.07

2. ヘッダーメニューのCSSカスタマイズ（Style.css）

ここからが本題のカスタマイズです。
CSSコードは、カーソルを乗せると、右上のボタンからクリップボードへコピーができます。

全CSSコード

こちらのコードを貼り付ければOKです。
各コードの詳細を見たいという方は、次の章でご確認ください。

/*** 全体　***/
.item-label {
  font-size: 20px;
}

/* サブメニューに影を付ける */
.navi-in>ul .sub-menu {
  margin-top: 1px;
  box-shadow: 0 2px 2px 0 rgba(0 0 0 / 14%), 0 3px 1px -2px rgba(0 0 0 / 20%), 0 1px 5px 0 rgba(0 0 0 / 12%);
  background: #fff;
}

/*** マウスオーバー時のアニメーション ***/
/* マウスオーバー時、背景の色を変える */
.navi-in a:hover {
  transform: translateY(1px);
  background: #f5f5f5;
}

/* メインメニューのアニメーション */
.item-label:after {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0%;
  height: 2px;
  background: #757575;
  content: '';
  transition: all .4s;
}

.menu-header .menu-item:hover .item-label:after {
  width: 100%;
}

/* メインメニューのアニメーション -矢印変化- */
.navi-in .has-icon {
  right: 16px;
  opacity: unset;
  font-size: 20px;
}

.navi-in .has-icon .fa-angle-down {
  transition: all .4s ease-out;
}

.menu-header .menu-item:hover .fa-angle-down {
  transform: translateY(6px);
}

/* サブメニューのアニメーション -下線- */
.sub-menu .item-label:after {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0%!important;
  height: 2px;
  background: #757575;
  content: '';
  transition: all .4s;
}

.sub-menu .menu-item:hover .item-label:after {
  width: 100%!important;
}

/* サブメニューのアニメーション -フォント- */
.sub-menu .item-label {
  text-align: center;
  transition: font-size .4s;
}

.sub-menu .menu-item:hover .item-label {
  font-size: 19px;
}

各コードの詳細

全体

初期設定にあたる部分です。

/*** 全体　***/
.item-label {
  font-size: 20px;
}

/* サブメニューに影を付ける */
.navi-in>ul .sub-menu {
  margin-top: 1px;
  box-shadow: 0 2px 2px 0 rgba(0 0 0 / 14%), 0 3px 1px -2px rgba(0 0 0 / 20%), 0 1px 5px 0 rgba(0 0 0 / 12%);
  background: #fff;
}

・margin-top
　サブメニューの位置を少し下げています。

・box-shadow, background
　自サイトに合わせてお好みで変更してください。

マウスオーバー時、背景の色を変える

マウスオーバー時に背景の色、位置を変えるアニメーションです。

/*** マウスオーバー時のアニメーション ***/
/* マウスオーバー時、背景の色を変える */
.navi-in a:hover {
  transform: translateY(1px);
  background: #f5f5f5;
}

・:hover
　カーソルが乗っている要素(.navi-in a)にスタイルを適用するためのものです。擬似クラスです。

・transform
　メニューを1px分、下へ移動させています。

・background
　カーソルを乗せた後の背景の色を指定しています。

メインメニューのアニメーション -下線-

マウスオーバー時に下線を引くアニメーションです。

/* メインメニューのアニメーション -下線- */
.item-label:after {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0%;
  height: 2px;
  background: #757575;
  content: '';
  transition: all .4s;
}

.menu-header .menu-item:hover .item-label:after {
  width: 100%;
}

メインメニューのアニメーション -矢印変化-

メニューの右側にある矢印を下げるアニメーションです。

/* メインメニューのアニメーション -矢印変化- */
.navi-in .has-icon {
  right: 16px;
  opacity: unset;
  font-size: 20px;
}

.navi-in .has-icon .fa-angle-down {
  transition: all .4s ease-out;
}

.menu-header .menu-item:hover .fa-angle-down {
  transform: translateY(6px);
}

・opacity
　Cocoonの初期設定を打ち消しています。

・transition
　変化のスピードを変化させています。

サブメニューのアニメーション -下線-

サブメニュー部分の、下線を引くアニメーションです。

/* サブメニューのアニメーション -下線- */
.sub-menu .item-label:after {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0%!important;
  height: 2px;
  background: #757575;
  content: '';
  transition: all .4s;
}

.sub-menu .menu-item:hover .item-label:after {
  width: 100%!important;
}

サブメニューのアニメーション -フォント-

マウスオーバー時にサブメニューのフォントサイズを小さくするアニメーションです。

/* サブメニューのアニメーション -フォント- */
.sub-menu .item-label {
  text-align: center;
  transition: font-size .4s;
}

.sub-menu .menu-item:hover .item-label {
  font-size: 19px;
}

・text-align
　サブメニューを中央揃えにしています。

ヘッダーメニューのCSSカスタマイズ　さいごに

最後に、デザインをプレビューで確認して終了です。

以上です。

2023年8月25日にAmazonのバナー広告は廃止されました。

まず、今回対象としているAmazonのバナー広告とは、次のようなものです。

通常、Amazonアソシエイトから取得したHTMLコードをそのまま貼り付けただけでは左揃えとなってしまい、変更することはできません。

よって、中央揃えにするためには、このHTMLコードに少しだけ手を加える必要があります。

具体的には、次のように広告コードの前後に <div align=”center”></div> を追加します。
（カーソルを乗せると、右上のボタンからクリップボードへコピーができます）

<div align="center">
   <!-- ここに取得したHTMLコードを入れる -->

   <!-- ここに取得したHTMLコードを入れる -->
</div>

このコードは、もちろんエディターの「カスタムHTML」内に追加してください。

以上です。

次のコードを、使用している子テーマのスタイルシートへ追加してください。
（カーソルを乗せると、右上のボタンからクリップボードへコピーができます）

/* 記事タイトルを中央揃えにする */
header.article-header.entry-header {
	text-align:center;
}

以上です。

これはWordPressの標準機能のみで、簡単に追加することができます。
全部で４ステップです。

1.編集画面を開く

はじめに、WordPressの管理画面を開き、「外観→メニュー」へ進みます。

上の方にある「編集するメニュー選択」欄を「ヘッダーメニュー」に設定します。

2.メニュー項目を追加する

次に、「メニュー項目を追加」より、
ドロップダウンメニューに追加したい項目を選択します。

今回は、例として、「カテゴリー」の「WordPress」を選択しています。

3.親メニューの下の階層へ移動させる

追加されたメニューは、次の画像のようになっていると思います。

画像の矢印の先にあるように、
「<親テーマ> 下の階層」といった表示があると思いますので、それをクリックします。
(※ドラッグ・アンド・ドロップで移動させることもできます)

4.確認してメニューを保存する

ここまでの手順によって、
次の画像のように、「副項目」が表示されるようになったと思います。

問題がないようであれば、画面右下にある「メニューを保存」をクリックして完了です。

ドロップダウンメニューの表示名は、「ナビゲーションラベル」から変更することができます。
また、アイコンを追加したい場合には、こちらの記事を参考にしてみてください↓
(※Cocoonをお使いの方へ向けた内容となっています)

【Cocoon】ヘッダーメニューにアイコンを追加する方法

【コピペで出来るCocoonカスタマイズ】WordPressのテーマであるCocoonで、Font Awesomeを使ってヘッダーメニューにアイコンを追加する方法ついて解説します。CSSコード付きです。

www.qolup-it.com

2024.09.07

以上です。

ヘッダーメニューにアイコンを追加するためには、
Cocoonの標準機能として搭載されている「Font Awesome（無料）」を使用します。

全部で３ステップです。

①Font Awesoome 5を選択する

はじめに、WordPressの管理画面から「Cocoon設定→全体」へ進みます。

上の画像のように「サイトアイコンフォント」で「Font Awesome5」を選択してください。

Cocoonでは、この操作だけで導入することができます。

②「Font Awesome」の公式サイトでアイコンを選択する

公式サイト（https://fontawesome.com/）を開き、アイコンを検索します。

今回は、「Home」で検索してみます。

検索一覧の中から、導入したいアイコンを選択し、
上の画像の四角で囲った部分にある「<i class=”fa fa-home fa-fw”></i>」をクリップボードへコピーします。

③コードを追加する

WordPressの管理画面へ戻り、「外観→メニュー」へ進みます。

アイコンを追加したいメニューの「ナビゲーションラベル」に、先ほどコピーしたコードを追加します。

「HOME」→「<i class=”fa fa-home fa-fw”></i> HOME」

問題がないようであれば、画面右下にある「メニューを保存」をクリックして完了です。

コードをコピペするだけで簡単に設定することができます。
大きく分けて２ステップです。

1.CSSを追加する

次のコードを、使用している子テーマのスタイルシートへ追加してください。
（カーソルを乗せると、右上のボタンからクリップボードへコピーができます）

/* 画像に枠線を付ける */
.frame img {
  display: block;
  margin: 0 auto;
  padding: 1px;
  box-shadow: 0 0 6px rgba(32 33 36 / 28%); /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

「各コードの解説」

・margin
　leftとrightの設定をautoにすることで、実質的に画像を「中央揃え」にしています。
　枠線を付けるだけであれば必要ありません。
　デフォルトで「中央揃え」にしたくない場合には、行ごと削除してください。

・padding
　挿入した画像と、枠線の間の幅を指定しています。
　たとえば「1px」の値を大きくすると、枠線内の余白部分が広くなります。ここもお好みで変更してください。

・box-shadow
　画像に影を付けて、浮き上がっているようにしています。
　「影の水平/垂直方向の距離」の値を変更することで、影を伸び縮みさせることができます。
　「ぼかしの距離」は、値が大きくなるほど、ぼかしの幅が広がります。結果的に影の面積が広く、色も薄くなります。
　「rgba(32 33 36 / 28%)」はお好みで変更してください。

2.エディターで追加CSSクラスを指定する

コードを追加しただけでは、機能しません。
エディターの方で、画像に適応させたいCSSのクラスを指定してあげる必要があります。

具体的には、今回「figure.frame」という形でクラスを定義してありますので、エディターを開き「高度な設定→追加CSSクラス」へ「frame」と入力します。
「高度な設定」はブロックエディターであれば、画像を選択した上で、画面右の方にあるブロックのタブの下の方へ向かえば見つかるかと思います。

以上で、設定は完了です。

あとは、プレビューで確認をしておきましょう。

例えば、次のような図の場合。

この「読書をする天使」の部分がキャプションにあたります。

このキャプション部分を常に中央揃えにしたいのであれば、
次のコードを、使用している子テーマのスタイルシートへ追加してください。
（カーソルを乗せると、右上のボタンからクリップボードへコピーができます）

/* 画像のキャプションを中央揃えにする */
.wp-block-image figcaption {
	text-align: center;
}

もしも、個別に中央揃え以外にしたい場合（＝左揃えにしたい等）には、ブロックエディタの「配置を変更」から設定してあげてください。

以上です。