04_カスタマイズ・ヘッダー画像(スライドショー)

スライドショー用ヘッダー画像を準備する

引き続き、テーマ「Lightning」のカスタマイズです。

画像ソフトでヘッダー画像を作成する

作成は必須ではありませんが、読んでくださる人の目にとまるようにキーワードを挿入したものを作ると、反応も違ってくると思われます。

Lightningのヘッダー画像は、ヘッダータイトルなどテキストの挿入とリンクも貼れますので、普通にサイト内容にあった写真をアップロードしてもOKです。

ヘッダー画像を作る場合

画像加工ソフトで「新規作成」ボタンをクリックして、画像サイズに1900×600を入力、表示された画像キャンパス上で、写真やテキストなどを組み込んでヘッダー画像を作成します。

参照:02_PhotoScapeXでの画像加工

写真を用意してWordPressで簡単トリミングする場合

カスタマイズに入る前に写真など「画像」を用意、左サイドメニュー⇒「イメージ」画面でその画像をアップロードしてサイズを1600×900に加工しておきます。

参照:01_WordPress内での画像加工

スライドショー用ヘッダー画像を変更する、設定をする

カスタマイズコーナーに入る

  • 左サイドメニュー「外観」⇒「カスタマイズ」で、テーマカスタマイズ画面に入ります

  • サイト基本情報をクリックしてカスタマイズメニューの中の「Lightningトップページスライドショー」を表示させます

カスタマイズ⇒Lightningトップページスライドショー

スライドショーは5枚登録できますが、あまり多いとサイトが重くなりますので、2,3枚が良いと思います。

もちろん、1枚の静止画でもかまいません。

トップ画像無しも出来ます。

スライド切り替え間隔について

1秒 = 1000ミリ秒ですので、40000ミリ秒=40秒でスライドが切り替わるという意味です。

[1]から編集していきます。

  • 現在サンプル画像が登録されているサムネイル(縮小画像)の下にある「画像を変更」ボタンをクリック
  • 1900×600ピクセルサイズで作成した画像をアップロード・またはイメージ・ライブラリで画像を選択して登録します

  • スライドにかぶせる色(任意)
    …全体的にカラーを乗せる感じで色の濃さでうっすら赤みを帯びさせるなどできます。
  • スライド画像リンク先URL
    …Lightning配布元のURLになっているので、画像のクリックボタン(見本では「READ MORE」となてます)をクリックすると表示させたいページ、またはカテゴリーのURLに変更してください。

  • スライドタイトル(任意)
    …キャッチコピーなどテキストを入れて作った場合はこの設定は必要ないと思います。
    ※下の画像の大きい文字の部分です。
    ※枠内に記述してある半角の<br>は、改行するというコードです。
  • スライドテキスト(任意)
    …サブタイトル(説明文)で、文字サイズが小さくなります。

※この文字サイズはどちらもここでは変更できません(CSSでなら変更可)

  • ボタンの文字(任意)
    …表示させたいページがこのボタンをクリックすると表示されます。
    …文言の変更がここで出来ます(「詳細はこちらから」など)
  • 位置(任意)
    …スライドタイトル、スライドテキスト、ボタンの表示位置の設定

  • スライド上の文字色(任務)
    …画像の色を考慮に入れて、文字色を変更しましょう
  • 文字に影をつける(任意)
    …影をつけたいときは、チェックを入れます
  • 文字の影の色(任意)
    …影の色をここで選択します
    ※影とありますが、文字を囲む色な間隔で色を設定してもOKです
    ※影の幅やぼかし度合いはここでは変更できません。

 

  • 設定が終了後、「公開」ボタンを押してから、「<」ボタンを押してカスタマイズメニューに戻ってください。
  • 「公開」ボタンを押さずに戻ると設定が消えます
  • 「×」をクリックするとダッシュボードに戻ります。