カスタマイズ

【AFFINGER6】ヘッダー下にスライドショーを設置する方法【ブロよび。風カスタマイズ】

AFFINGER6カスタマイズ:スライドショー

この記事は
【AFFINGER6】サイトデザイン完全マニュアル【ブロよび。風】
スライドショー編の記事になります。

全ての工程を順番に進めることで「ブロよび。風」のデザインが完全再現できるようになっています。

前回の作業が済んでいない方はこちらの記事から見てください。
参考
>>ヘッダーとヘッダーメニューのカスタマイズ方法【ブロよび。風】

こんな人におすすめ

  • AFFINGER6でブログを運営している
  • シンプルでおしゃれなデザインにしたい
  • あれこれ考えるよりも手順通りに操作して完成を目指したい

それでは早速、ヘッダー下にスライドショーを設置する方法を一緒にみていきましょう。

完成イメージは以下の通りです。

スライドショー:完成イメージ
ヘッダー下:スライドショーの完成イメージ

ちょっとでもこのデザインがいいなと思ってくれた方は手順通りに進めてみてください。

編集長F

「稼ぐ」に特化したおすすめテーマ
ACTION / AFFINGER6

\当ブログも愛用してます/

AFFINGER6の詳細はこちら

/いますぐゲットする\

スライドショーの作り方

方法

スライドショーの作り方には2つの方法があります。

  • ショートコードを利用する方法
  • AFFINGER管理から作成する方法

どちらのやり方でもOKです。
好きな方を選んで作成してみましょう。

それでは手順をみていきます。

【方法①】ショートコードを利用してヘッダー下にスライドショーを設置する方法

ショートコードを利用する場合、投稿ページから作業していきます。
流れとしては

  • 投稿ページでコードを取得する
  • 設定を決める
  • ウィジェットでヘッダー下に挿入する

こんな感じです。

順を追ってみていきましょう。

投稿ページでスライドショーコードを取得しよう

管理画面/新規追加

スライドショー作成方法

手順

  • WordPress管理画面」→「投稿」→「新規追加
  • 」をクリックしてブロックを呼び出す
  • クラシック」をクリック

スライドショー作成方法

スライドショー作成方法

手順

  • タグ」→「記事一覧/カード」→「カテゴリー一覧(スライドショー)
  • 上図のようなコードが表示(取得)されます

参考までにコードの意味を以下にまとめました。
覚える必要はありませんが、気になる方は参考にしてください。

コードの意味

  • st-catgroup cat=""
    カテゴリID(0だと全てのカテゴリ)
  • page=""
    読み込み数
  • order=""
    新しい順:desc
    古い順:asc
  • child=""
    子カテゴリー表示のon,off
  • slide=""
    スライドショーのon,off
  • slides _to _show=""
    表示する記事数
  • slide _date=""
    日付表示のon,off
  • slide _more=""
    「続きを読む」などのテキスト
  • fullsize _type=""
    card:画像のみ表示
    text:画像とテキストを表示
    未入力:全て表示

スライドショーの設定を決めよう

続いて表示されたコードを編集していきます。変更を加える部分は以下の3箇所です。

スライドショー作成方法

手順

  • page="10"
  • slides _ to _show="5,3,1"
  • fullsize type="text"
  • 最後にコードをコピー

赤字にした部分を入力してください。

これでスライドショーの設定は完了です。
最後にウィジェットからトップページに設置していきましょう。

ウィジェットでスライドショーを設置します

スライドショー作成方法

手順

  • WordPress管理画面」→「外観」→「ウィジェット
  • テキスト」→「ヘッダー画像下エリアのウィジェット」→「ウィジェットを追加

スライドショー作成方法

手順

  • 先ほどコピーしたコードを「ビジュアル」モードに貼り付ける
  • 保存」をクリック

これで完成です。
ではもうひとつのやり方をみていきましょう。

編集長F

【方法②:簡単】AFFINGER管理を利用してヘッダー下にスライドショーを設置する方法

スライドショー

実はAFFINGER管理画面にはスライドショーを簡単に設定できる項目があります。

前述した方法でもOKですが、トップページにスライドショーを設置するだけならAFFINGER管理の方がオススメです。

手順は以下の通りです。

AFFINGER管理

スライドショー作成方法

手順

  • WordPress管理画面」→「AFFINGER管理
  • ヘッダー下/おすすめ」→「サムネイルスライドショー

スライドショー作成方法

手順

  • フロントページ」にチェック
  • 表示数」:5,3,1
  • 取得記事数」:10
  • 昇順(DESC)」にチェック
  • ID」にチェック
  • センター寄せにする」にチェック
  • 画像➕テキスト」にチェック
  • 画像を角丸にする」にチェック
  • 画像に影をつける」にチェック

細かい部分は自分なりにカスタムしてもらって大丈夫です。

実際のデザインを確認してみよう

デザイン

最後に出来上がったデザインを確認してみましょう。

下図のようになっていればOKです。

スライドショー:完成イメージ
ヘッダー下スライドショー:完成イメージ

お疲れ様でした!

編集長F

まとめ(次章の内容)

この記事ではヘッダー下にスライドショーを設置する方法を解説しました。

次章では【おすすめ記事】の設置方法について解説していきます。

AFFINGER6おすすめ記事完成イメージ
おすすめ記事:完成イメージ

それではまた次回、【AFFINGER6:トップページにおすすめ記事を設置する方法(ブロよび。風カスタマイズ)】でお会いしましょう!

前回の作業が済んでいない方はこちらから戻れます。

<<前回の記事に戻る

>>次の作業に進む

「稼ぐ」に特化したおすすめテーマ
ACTION / AFFINGER6

\当ブログも愛用してます/

AFFINGER6の詳細はこちら

/いますぐゲットする\

よく読まれている記事

アイキャッチ 1

副業に興味のある方は多いと思います。 月に5万円でも稼げれば生活はかなり楽になりますよね。副業候補の代表格でもあるアフィリエイト。 一度は耳にしたことがあるのではないでしょうか? そんな疑問に答えます ...

アイキャッチ 2

それでは本題に入りましょう! 目次 SEOとは?SEOの本質を知ろうGoogleのビジネスモデルを理解しようユーザー満足度を理解しよう検索エンジンの仕組みSEO対策の目的SEO対策の具体例①検索意図に ...

アイキャッチ 3

本記事ではエックスサーバーを使ったワードプレスブログの始め方を解説しています。 画像付き解説ですので手順に従って作業すれば、10分程度で完了します。 目次 はじめにブログ開設に必要なものサーバーとはワ ...

-カスタマイズ