PR

フロントページ設定:メインビジュアル

フロントページ
記事内に広告が含まれています。

フロントページのメインビジュアルについて、設定方法を説明します。

ご確認ください

この記事で設定しているメインビジュアルについて、WordPressの表示設定によって表示されないことがあります。

以下の設定がされている時、フロントページが表示されない為、メインビジュアルが表示されません。

メインビジュアルが表示されずお困りの方は、まずこちらの設定になっていないか、ご確認いただければと思います。

WordPress管理画面>設定>表示設定で
ホームページの表示が固定ページになっている
ホームページ:に固定ページを設定しておらず、「ー選択ー」となっている
投稿ページ:には、何かしらの固定ページを設定している

この設定になっていると、フロントページが表示されずメインビジュアルも表示されません。
ホームページの表示を最新の投稿にするか、(※こちらを推奨します)
ホームページ:でフロントページ用の固定ページを設定すれば
、フロントページが表示される為、メインビジュアルも表示されます。

メインビジュアルが表示されない設定
スポンサーリンク

Cocoon設定で画像読み込み

Cocoon設定 > ヘッダーのタブで行います。

ヘッダータブ内のヘッダー背景画像で画像を選択できます。

選択ボタンをクリックすると、メディアから画像を選択することができます。

画像を選択したら、Cocoon設定の「変更をまとめて保存」ボタンで必ず保存しましょう。

次に、設定した画像についてテーマカスタマイザーで見た目を調整します。

テーマカスタマイザーでメインビジュアルの調整

まずテーマカスタマイザーでスキン独自項目を表示する手順は、以下をご覧ください。

テーマカスタマイザー手順

テーマカスタマイザー立ち上げの手順
  • STEP1
    管理画面 > 外観 > カスタマイズ を選択

    テーマカスタマイザーが立ち上がります。

  • STEP2
    左側の一番下にある、「skin-grayish: カスタマイズ」をクリック

    スキン独自のカスタマイズ項目が表示されます。

スキン独自のカスタマイズ項目の一覧は以下になります。

スキン独自のカスタマイズ項目の一覧 (v1.0.4より変更)
  • 全体:英字フォント設定
    • サイトタイトルなどに反映される英字フォントを選択
  • 全体:カラー設定
    • テキストカラー、アクセントカラーのカラー選択
  • 全体:テキスト変更
    • フロントページの「New Post」などを任意のテキストに設定
  • フロントページ設定:ヘッダー
    • フロントページのヘッダーに関するカスタマイズ
  • フロントページ以外の設定:ヘッダー
    • フロントページ以外のページのヘッダーに関するカスタマイズ
  • コンテンツ下部ウィジェット:プロフィールBOX
    • プロフィールボックスをフッター上に表示する時、背景の画像について設定
  • モバイル設定
    • タブレット・スマホでのヘッダーの設定など

メインビジュアルの調整は、フロントページ設定:ヘッダー

スキン独自カスタマイズの、フロントページ設定:ヘッダーでメインビジュアルの調整を行います。

テーマカスタマイザー>スキン独自カスタマイズ項目

フロントページ設定:ヘッダー内の、メインビジュアルに関する項目を調整します。

grayishでは、デフォルトでメインビジュアルに透明度を調整できる白色のフィルターと白色の細かいドットを重ねて表示しています。

画像が多少粗い場合でも、上記のフィルターを使用することであまり気にならないようにしています。

メインビジュアルのフィルター構造イメージ

メインビジュアル 白ドットのON/OFF

メインビジュアルの上に重なる白ドットが不要の場合はOFFにします。

メインビジュアル 白オーバーレイの不透明度調整

メインビジュアルの上に重なる白色オーバーレイの不透明度を調整します。値が大きくなるほど白が濃くなります。

メインビジュアルの内容によってお好みで調整してください。

テーマカスタマイザー ポイント

テーマカスタマイザーで設定を変更した場合は、必ず最後に画面上の「公開」ボタンをクリックしてください。
「公開」ボタンをクリックしないと変更が反映されません。

他のカスタマイザーの設定も色々と試してみてください。

この記事は以上になります。