プロのウェブデザイナーが作ったカスタマイズ可能なホームページ素材Flash(フラッシュ)とWordPressテーマを無料配布しています。
Flash Works
HOME » ワードプレス無料テーマ FlashWork-s » WordPressヘッダー画像の設定

WordPressヘッダー画像の設定


多くのホームページは、ヘッダー画像やキービジュアルと呼ばれる大きな画像がページ上部に配置されたデザインになっています。

そして、ワードプレスもこのデザインを基本としており、カスタマイザーで画像を変更したり、非表示にすることが可能です。

もちろん、WordPressテーマ『FlashWork-s』にもこの機能は付いているので、ぜひご利用ください。

ヘッダー画像は、閲覧者がページを見た時に最初に目にする情報であり、その一瞬でサイトの信用度や価値を判断する重要な要素なので、サイト内容に合った画像を使いましょう。

初期画像として設定している画像には、私が撮影した桜の写真を使っています。

なお、当テーマのヘッダー画像は『パソコン画面』の画像サイズを基準としており、『タブレット・スマホ・携帯画面』はその画像をウィンドウサイズに合わせて縮小しているので、920 X 200pxの画像をひとつ用意すれば事足ります。

(1)カスタマイズ

カスタマイズ

ワードプレスの左サイドバーから『外観 » カスタマイズ』と進みます。

(2)カスタマイズ画面

カスタマイザー

左側にあるメニューから設定したい項目を選び、右側でその状態を確認できます。

(3)ヘッダー画像

ヘッダー画像

左メニューから『ヘッダー画像』をクリックしてください。

(1)でヘッダー画像の表示・非表示を決定できます。

(2)で自作のヘッダー画像を登録できます。

(3)は複数の画像を登録した場合に、ページを読み込むたびにランダムで画像を入れ替えるボタンです。

右側で実際の表示を確認できるので、問題なければ青い『保存して公開ボタン』をクリックします。

ヘッダー画像のサイズを変更する方法

当テーマのヘッダー画像サイズは横920 X 縦200pxですが、中にはサイズを変更したいという方もいると思うので、その方法について説明いたします。

まずは、『functions.php』をコピーしてバックアップを取っておいてください。

『functions.php』は、少しミスしただけでもプログラムが機能しなかったり、表示されなくなる可能性があるファイルであり、元に戻せなくなると困るので、バックアップは徹底して行いましょう。

注意

メモ帳でcssファイルやphpファイルを開いて変更してはいけません。エラーの原因となります。PHPやCSSに最適のテキストエディタを参考にしてください。

変更するのは、58行目の『//custom header』です。

//custom header
$custom_header = array(
'default-image' => get_template_directory_uri().'/images/header-img.png',
'width' => 920,
'height' => 200,
'flex-width' => false,
'flex-height' => true,
'header-text' => false,
'uploads' => true,
);
add_theme_support('custom-header', $custom_header);
default-image初期ヘッダー画像へのパス
widthヘッダー画像の横幅
heightヘッダー画像の縦幅
flex-width横幅のフレキシブル対応
flex-height縦幅のフレキシブル対応
header-textヘッダー画像にテキストを重ねるか否か
uploadsファイルのアップロードの許可

WordPressのカスタムヘッダーは上記以外も設定できますが、当テーマではこの通りになっています。

画像サイズを変更するときは、この『縦幅であるheightの200』をピクセル単位でご希望のサイズに変更してください。

注意

横幅のwidthを変更するとページデザインが崩れるので、cssを調整できる人以外は変更してはいけません。

変更・保存したら、FFFTPで『functions.php』をアップロードします。

ただし、この状態でサイトを確認しても元の画像サイズで表示されるので、新たに用意した画像をアップロードして確認してください。


関連記事

ワードプレスをインストールしたら行うべき設定方法について説明いたします。 あくまでも一般的な設定の仕方であって、必ずこうしなければならない...


ワードプレスの『投稿』がブログのページを作れる一方、『固定ページ』はウェブサイトのページを作れます。 最初はこの2つのページの使い分けがよ...


WordPressテーマ『FlashWork-s』は、商用サイト、アフィリエイトサイト、趣味サイト、日記サイトなど、さまざまな分野のサイトを...


ワードプレスにはウィジェット(Widget)という便利な機能があり、『最近の投稿』や『カテゴリーのリンク』、『カレンダー』などをドラッグアン...


ワードプレスはサイト訪問者のリクエストがあった時に、ページを構成するそれぞれのパーツを組み合わせ、さらにデータベースから取り出したテキストを...



コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

最新記事

マウス

一度気にしたら、その後ずっと気になるPCマウスのクリック音。「カチカチ」うるさ...

マウス

パソコンを使っていると、ある日突然、マウスの左クリックの反応が悪くなります。そ...

パソコントラブル

Windowsパソコンのスリープ機能が勝手に起動してしまう場合があります。その...

PCクーラー

ノートパソコンは、暑い中で長時間使用すると、熱がこもって故障することがあります...

マウス

キーボードやマウスは、便器の5倍汚くて細菌まみれであることが分かっています。そ...

テレワーク

WiMAX2+を短期間利用する方法を紹介します。できるだけ安く、そして、違約金...

WiMAX乗り換え

WiMAX2+は、乗り換えた方がお得な場合があります。乗り換えを検討している方...

おすすめのWiMAX会社TOP3

初めてWiMAX2+を利用する方におすすめの会社とその理由を教えます。ぜひ、W...

WiMAX2+の解約金

WiMAX2+は、多くの会社が2年契約または3年契約としており、その契約期間以...

WiMAX

WiMAX2+は、通常2.4GHzの周波数帯を利用していますが、5GHzに切り...

素材ラインナップ

How to ホームページ

その他

インフォメーション

検索