【WordPress.com】ヘッダー画像の設定方法 🔵

最終更新日:2016-04-11

ヘッダー画像の設定方法についての覚書です。

ヘッダー画像の設定

WordPress.com のヘッダー画像の設定には、大きくわけで、4つのパターンがあるようです。

特定の画像を表示する

最もオーソドックスな方法は、ある画像をひとつ、ヘッダー画像として適用することです。

2015-07-29 at 10.15

例えば、テーマ「Twenty Eleven」では、こんな感じで表示されます。

Screen Shot 2015-07-29 at 10.16.04

画像を適宜、アップロードし、

Screen Shot 2015-07-29 at 10.17.02

適宜、切り取ることで、

Screen Shot 2015-07-29 at 10.17.58

任意の画像をヘッダー画像として適用できますが、

Screen Shot 2015-07-29 at 10.18.52

きれいに表示させたいときには、推奨の画像サイズのものをアップロードすればいいのではないかと思います。

2015-07-29 at 10.19

すでにテーマに準備されている画像をランダムに表示させる

テーマの種類によっては、あらかじめヘッダー画像が準備されているものがあり、それらの画像の下にある「おすすめヘッダーをランダム表示」というボタンをクリックすると、

2015-07-29 at 10.08

ヘッダー画像の設定状況が以下のようになり、

2015-07-29 at 10.06

あらかじめテーマに準備されている画像がランダムに表示されるようになります。

自分で画像をアップロードし、それらの画像をランダムに表示させる

ランダムに表示させる画像として、オリジナルのものを使う場合には、適宜、画像をアップロードした後、それらの画像の下に表示されている「アップロード済みヘッダーをランダム表示」ボタンをクリックすると、

2015-07-29 at 10.09

ヘッダー画像の設定状況が以下のようになり、

2015-07-29 at 10.08

アップロードした画像がランダムに表示されるようになります。

ヘッダー画像が表示されないようにする

ヘッダー画像を使わない場合は「画像を非表示」ボタンをクリックすれば、

2015-07-29 at 10.21

OK です。

2015-07-29 at 10.21

たとえば、テーマ「Twenty Eleven」の場合は、こんな感じになります。

Screen Shot 2015-07-29 at 10.23.02

ヘッダー画像の利用の応用

スライダーの代わりに使う

ヘッダー画像のランダム表示機能を使って、スライダーの代用として使うことができるのではないかと思います。

たとえば、テーマ「Sketch」の場合はこんな感じです。

Screen Shot 2015-07-29 at 13.16.57

テーマ「Sketch」のスライダー

arro03png

Screen Shot 2015-07-29 at 13.27.25

テーマ「Sketch」のヘッダー画像

記事のロゴ画像として使う

私自身は、CSS を追加することで、以下のような感じで、ヘッダー画像を記事のロゴ画像のような感じにして表示させています。位置を合わせるのが結構たいへんなので、一般的な方法としてはあまりお勧めしません。

2015-07-29 at 14.06

関連情報・トピックのマップ  

2016-04-11 at 16.52.png

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。