広告 問題解決 ブログ

【AFFINGER6】スライドの左右ボタンのカスタマイズ方法

2024-11-23

ブログのデザインをカスタマイズする際、スライドショーの左右ボタンが重要な要素となります。

しかし、デフォルト設定だと白いボタンが背景に溶け込んでしまい、全く見えないことがあります。

今回は、AFFINGER6テーマを使用している方に向けて、スライドの左右ボタンをカスタマイズする方法をご紹介します。

ろずびー
ろずびー

正直こんなちょっとしたカスタマイズで、ここまで苦戦するとは思ってもみませんでした。

AIの力を借りないと絶対に無理だったよね!

ぶろとら
ぶろとら
ろずびー
ろずびー

あとは、ついでなのでCocoonでのスライドの作成方法も紹介したいと思います!

Cocoonだったらデフォルトの設定だけでいいから簡単なんだよね!

ぶろとら
ぶろとら

なぜボタンが見えないのか?

AFFINGER6のスライドボタンのデフォルトデザインは、背景色に白が多いテーマでは目立たず、視認性が非常に低くなります。

特に、背景画像やシンプルなデザインを使用している場合、 矢印ボタンが全く見えなくなる ことがあります。

このため、ボタンのカスタマイズが必要です。

デフォルト状態なのに見えないっていうのも、なんだか納得いかないよね!

ぶろとら
ぶろとら

やることはシンプル

AFFINGER管理画面

手順

  1. 左側のメニューから「AFFINGER管理」をクリックします。
  2. 「トップページ」を選択します。
  3. 「タグ」をクリックします。
  4. 「記事一覧/カード」を選びます。
  5. 次に、「記事一覧(スライドショー)」を選択します。

これにより、スライドショーに必要なコードが表示されます。そのコードを確認したら、「保存」をクリックして設定を完了します。

ろずびー
ろずびー

デフォルトのコードの各部分についての説明は下記の通りです。

ショートコード

[st-postgroup id="" rank="" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]

各コード説明
st-postgroupこれは、特定の投稿グループを表示するために使用されるショートコードタグです。
id=""表示する投稿のIDを指定する部分ですが、ここでは指定されていません。
複数のIDをカンマ「,」で区切って指定することができます。
rank=""投稿のランキングを表示するオプションですが、空白になっているため、ランキングは表示されません。(onで有効)
slide="on"スライドショー機能を有効にするオプションです。投稿をスライド形式で表示します。
slides_to_show="3,3,2"表示するスライドの数を指定します。デスクトップ、タブレット、モバイルの順に、スライドショーに表示する投稿数を設定します。
例えば、デスクトップでは3つ、タブレットでは3つ、モバイルでは2つが表示されます。
slide_date=""投稿の日付を表示するオプションですが、空白になっているため日付は表示されません。
slide_more="ReadMore"スライドショーの各スライドに「Read More(もっと読む)」のリンクが表示されます。テキストをカスタマイズすることも可能です。
slide_center="on"中央寄せ表示を有効にするオプションです。スライドショーのコンテンツが中央に配置されます。
fullsize_type=""フルサイズの画像表示に関する設定ですが、空白になっているためデフォルト設定が適用されます。

ちなみに、スライドに表示させたい記事のIDは投稿画面から簡単に確認できるからね!

ぶろとら
ぶろとら

追加CSSにコードの貼り付け

実行手順

  1. WordPress管理画面の左側メニューから「外観」をクリックします。
  2. 「カスタマイズ」を選択します。
  3. 「追加CSS」をクリックします。
  4. 下記のコードを入力欄に貼り付けます
  5. 最後に、「公開」ボタンを押して変更を保存します。
/* 左右ボタンの基本デザイン */
button.slick-prev.slick-arrow,
button.slick-next.slick-arrow {
  background-color: #0073e6; /* ボタンの背景色 */
  color: #ffffff; /* 矢印の色 */
  border: none; /* ボタンの枠線をなくす */
  border-radius: 50%; /* 丸みを追加 */
  width: 40px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease; /* アニメーション効果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* ボタンに影を追加 */
}

/* ホバー時のデザイン */
button.slick-prev.slick-arrow:hover,
button.slick-next.slick-arrow:hover {
  background-color: #ff4500; /* ホバー時の背景色 */
  color: #ffffff; /* ホバー時の矢印の色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* ホバー時の影 */
}

/* 左ボタンの位置調整 */
button.slick-prev.slick-arrow {
  left: -30px; /* 必要に応じて調整 */
}

/* 右ボタンの位置調整 */
button.slick-next.slick-arrow {
  right: -30px; /* 必要に応じて調整 */
}

/* モバイルデバイス用のスタイル */
@media (max-width: 767px) {
  button.slick-prev.slick-arrow,
  button.slick-next.slick-arrow {
    width: 30px; /* ボタンの幅 */
    height: 30px; /* ボタンの高さ */
  }

  button.slick-prev.slick-arrow {
    left: -20px; /* 左ボタンの位置調整 */
  }

  button.slick-next.slick-arrow {
    right: -20px; /* 右ボタンの位置調整 */
  }
}

なぜ苦労したのか?

その1:クラス名の相違

スライドボタンのカスタマイズについて調べたところ、多くの記事では以下のクラス名を使ったCSSの例が掲載されていたため、AIもそれに準じる形でコードを作っていました。

主流となっているクラス名

  • .swiper-button-prev
  • .swiper-button-next

しかし、自分のAFFINGER6環境ではこれらのクラスが使われておらず、ブラウザの開発者ツールで確認した結果下記のものが適用されていることが分かりました。

自分の環境下でのクラス名

  • button.slick-prev.slick-arrow
  • button.slick-next.slick-arrow

この発見により、正しいクラス名を指定しないとカスタマイズが反映されないことがようやく判明しました。

ろずびー
ろずびー

クラス名の確認方法は下記の通りです。

手順(ブラウザはGoogle chrome)

  1. カスタマイズしたい部分を右クリック:(今回は矢印ボタン)を見つけて、右クリックします。
  2. 「検証」を選択:表示されるコンテキストメニューから「検証」を選択します。これにより、ブラウザの開発者ツールが開きます。
  3. 右側にプログラムが表示される:開発者ツールの右側に、選択した要素のHTMLコードが表示されます。
  4. カーソルをコードの上に乗せる:表示されたHTMLコードにカーソルを乗せると、ページ上の対応する部分がハイライトされます。このとき、カスタマイズしたい部分の上にクラス名が表示されます。

上手くいかなかったら自分のクラス名を調べて、AIにそのクラス名を伝えるとそれに沿ったコードを書いてくれるよ!

ぶろとら
ぶろとら

その2:スマホでの表示

そして、自分のクラス名をChat GPTに伝えると、早速新しいコードを書いてくれ、それを追加CSSに追加して公開してみると見事反映していました!

ろずびー
ろずびー

ヤッター!バンザーイ!・・・で終わりたかったのですが、ふとスマホで見てみると表示がおかしくなってしまっていたんですね。

そこで、今一度Chat GPTに伝えようとするも、無料での回数制限に引っかかってしまい、Copilotに相談することにしました。

そしたら、見事スマホ表示用に調整したコードを作ってくれて無事に解決することができました。

Copilot画面

投稿した記事は必ずスマホでもチェックするというのはとても大事なことだね!

ぶろとら
ぶろとら

超カンタン!Cocoonでのスライド作成方法

手順

  1. 管理画面にアクセスし、「Cocoon設定」メニューを開きます。
  2. 「カルーセルタブ」を選択し、「カルーセルの表示」からカルーセルを表示したい場所を選びます。
  3. 表示したい場所を選んだら、下記の設定を行います👇️
  • 表示内容:カルーセルに表示するコンテンツを選択します。
  • 最大表示数:カルーセルに表示する最大のアイテム数を設定します。
  • オートプレイ:スライドが自動で切り替わるように設定する場合、このオプションをオンにします。
ろずびー
ろずびー

カスタマイズしようとすると色々と手間はかかりますが、普通にスライドを表示させるだけならCocoonは凄くカンタンなんですよね。

デフォルトのものでも十分だしね!

ぶろとら
ぶろとら
ろずびー
ろずびー

ただ、表示させる記事を1つ1つ自由に選ぶということはできず、カテゴリーだったり、人気記事だったりとある程度の大枠で選択するという形にはなってしまいます。

細かいカスタマイズがしたければ、色々とテクニックが必要になるってことだね!

ぶろとら
ぶろとら

まとめ

AFFINGER6でスライドの左右ボタンをカスタマイズするには、正しいクラス名を確認し、デバイスに応じたレスポンシブ対応を行うことが重要です。

今回のケースでは、 button.slick-prev.slick-arrow が使われていることに気づくまでに時間がかかりましたが、ChatGPTやCopilotの助けを借りて解決できました。

同様の課題を抱えている方は、ぜひこの記事を参考にしてみてください!

ろずびー
ろずびー

ちなみに、AIの作ってくれたカスタマイズボタンをそのまま使っています。
変更方法は分かったので、いじろうと思えばいじれますが、今ので十分満足です。

だいぶ苦戦はしたけどAIの活用スキルが格段に上がったよね!

ぶろとら
ぶろとら

スポンサーリンク

-問題解決, ブログ