WordPress（AFFINGER5）で固定ヘッダ画像の上にスライドショーを設置

WordPressではヘッダ画像が簡単に設定が可能で、スライドショーのプラグインも多数あります。
WordPressの高機能テーマ「AFFINGER5」を使えば、これら機能が簡単に作ることができるのです。
PC画面で当ブログのTOPページを表示したときにスクロールすると、どのような動作になるか解ると思います。

ヘッダーエリアのBGを設置

▼メニューから背景を選択
外観　＞　カスタマイズ　または
外観　＞　背景

▼背景画像　を選択

▼画像を選択
画像アップロード画面が表示されるので、ドラッグアンドドロップで画像をアップロード後にBGに設定したい画像を選択します。

▼ヘッダBGのプロパティ設定
アップロードした画像がプレビューで見れます。
プリセットとして、タイル画像などに有効な「繰り返し」や、ブラウザの横サイズに応じて変動する「画面に合せる」などが選択できます。

設定が完了したら「公開」ボタン押下で設定を反映させます。

ヘッダーエリアに画像スライドショーを表示

▼ヘッダ画像設定画面を開く
外観　＞　カスタマイズ　＞　ヘッダ画像

「新規画像を追加」を押下。

▼画像をアップロード

画像をアップロード、選択したら「選択して切り抜く」を押下。

▼スライドショーに設定する画像を選択
ヘッダ画像に適正なサイズのトリミング位置で切り抜くことが可能です。
当サイトではスマートフォンで大きく表示させたかったので、高さは少し高めの650pxにしています。
そのため「切り抜かない」を選択しました。
 

▼必要に応じてスライドショーの画像を追加

スライドショーの動作を設定

▼Affinger5の機能を使ってスライドショーの動作を設定
「AFFINGER5 管理」を選択。

▼「画像スライドショー」設定を押下

▼動作設定

ヘッダーエリアの高さを調整

ヘッダーエリアの高さを調整する場合は、追加CSSを入力することで調整ができます。

▼カスタマイズリストから「追加CSS」を選択

▼下記CSSを追加して「公開」ボタンを押下

 command
/*headerエリアの高*/
#headbox {
padding: 10px 10px 50px;
}

AFFINGERついてのまとめ

AFFINGER5に限らず、WordPressの有料テーマはこのように多くの機能でが充実しているので、費用対効果はとても高いと思います！
少なくとも、もう無料テーマの自己カスタマイズには戻れないですね...！

尚、AFFINGER5は拡張できる特別版として、アナリティクスとデザインを強化した拡張機能の「EX版」や「すごいもくじ」などの拡張機能がありますが、一番安い基本パッケージだけで十分です！

有料のテーマだと「THE THOR（ザ・トール）」と「Afiinger」で迷う方が多いかと思いますが、トールがデフォルトでオールインワンで機能が豊富なのに対して、AFFINGER5は他の機能は好みに応じてプラグインをインストールするのに適しているようです。
また、上記のような用意されている装飾タグはAFFINGER5の方が多く使い易い感じですかね。

プラグインの追加や、コード変更でカスタマイズをする中級者以上のかたは、AFFINGER5の方が良いかなと思います。