AFFINGER5 WordPress

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

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

当ブログでは現在スライドショーは非表示にしています。

この手順で出来ること

  • BGはスクロールしても動かない固定画像
  • スクロールしたときに固定BGの上でメニューなどが動いてリッチ感UP!
  • Affinger5の機能を使ってスライドショーを表示
  • ヘッダエリアの高さをPC・スマホそれぞれで変更

 

AFFINGER5について


AFFINGERは低価格で販売されているWordPress用のテーマです。
デザインタグ、SEO、広告などの機能が豊富で、1つのテーマに全てが詰まっているので、直ぐにリッチテイストなWEBページやブログを作ることができます!


 

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

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

 

 

▼背景画像 を選択

 

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

 

 

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

ココがおすすめ

画面をスクロールしたときに背景はスクロールさせずに固定表示させる場合は「ページと一緒にスクロール」のチェックを外します。

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

 

 

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

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

ココがポイント

先ほどのヘッダ画像の手順から続けてスライドショーの設定をする場合は、「背景画像」の左にある矢印で下記のカスタマイズ一覧の画面に移動します。 

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

 

 

▼画像をアップロード

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

ココがポイント

スライドショーに設定する画像のおすすめサイズは、2200×500pxくらいです。
高さは好みに調整してくださいね。

 

 

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

 

 

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

 

 

ココがポイント

「画像を非表示」ボタンを押した場合、スライドショーとして設定した画像は削除されず、スライドショーとして画像が1枚も選択されていない状況になります。

 

 

ココがポイント

「画像を非表示」で非表示に設定した場合、再度アップロード済みのスライドショーの画像を1つ選択すると、再びスライドショーとして動作するようになります。

 

 

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

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

 

 

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

 

 

▼動作設定

  • 「ヘッダー画像をスライドショーで表示する」をチェック
  • 「フェードイン・アウト」「右から左」「左から右」から好みの表示方法を選択
  • スライドショーの表示速度を「ミリ秒」で設定。(1000で1秒)
  • 「横並びにする」はフェードインではない場合は、次の画像と1つ前の画像の横端が少し見える状態で横並びに表示されます。

 

 

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

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

  • PCで見たときに特定サイズの高さを確保する
  • スマートフォンで見たとき特定の横幅サイズの場合は指定したサイズの高さを確保する

 

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

 

 

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

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

 

 

AFFINGER5ついてのまとめ

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

 

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

 

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

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

 

AFFINGER5を使ってみた感想

  • かっこいいデザインがクリックだけで簡単にできる!
  • 装飾タグの量がとてつもなく豊富で使いやすい!
  • グラフィカルな記事が簡単に早く作れる!
  • SEO関連の機能の設定が視覚的にわかりやすく簡単!
  • Googleアナリティクスとの連携がとても簡単!
  • 無料テーマであるビジュアル、テキストエディタの切り替え時の変な挙動がない!

 

 

-AFFINGER5, WordPress

© 2022 Studio ilia - スタジオ イリア