wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

ワードプレス・ブログメディアで、ヘッダー画像を変える2通りの方法【phpモバイル非表示有】

      2017/09/24

こんにちは、管理人@SS_mshpです。

今回は、ワードプレス・ブログメディアのサイトを作ったときに、ヘッダー(上についている画像)を変更する方法をお話します。

このサイトでも、時期に応じてヘッダーを変えたり、キャッチを入れたりみたいなことはしていますが、その方法についてチェックしていきます。

■まずは、ヘッダーの画像を作って用意しておく

管理人の場合は、イラレやinkscapeといったベクター系のソフトのほうが得意なので、そっちで行っています。パス曲げたりオブジェクト回転させたりみたいな動きがやりやすいから。フォトショップなどのほうが得意な場合はそちらでもokです。レイヤー機能があるものがベストです

で、人物・背景・フォントなど素材を用意して、画像ツール上でレイヤーごとに配置していって、ヘッダー画像をつくります。印象的なキャッチコピーを入れたい場合は、『キャッチの部分を、そのフレーズにあったフォントに変える』ということをしてもokです。

通常のブログでもあることですが、ワードプレスの場合でもテーマによっては『推奨ヘッダー画像サイズがあるもの(例:stinger5なら980×250px)』『ある程度横幅にあわせて調節してくれるもの』などがあるので、テーマがどういう風に動くのかも押さえておきます。

■ワードプレス・ヘッダー画像変え方2通り

さっそく、作った画像をつかってみましょう。まずは、さっき作ったヘッダー用の画像を、左メニューの『メディア→新規追加→画像をドラッグ&ドロップ(またはファイル選択)』と操作してアップロードしておきます。ここでアップロードするのは、以下の1番・2番どちらの方法でも使います。

■1:ワードプレス内の外観メニューから(普通のみんながやってるやり方)

通常は、横のメニューの『外観→ヘッダー』というふうに進んで、ヘッダーを変更する場合が多いと思います。

そのあとプレビューみたいな画面と、ヘッダー選択する部分が出るので、アップロードした画像を選択します。画像のトリミングもできるようですが、この機能は使ったことがありません。プレビューでヘッダーが表示されているのに『未設定』となっているのは、別の方法で表示しているからです。ここで設定した画像は・・・・

< ?php if(get_header_image()): ?>
    < p id="headimg"><img src="" alt="*" width="" height="" />

< ?php endif; ?>

header.php内の、上記のコードの部分から出力されます。この部分を移動してヘッダー画像位置を変えたりできますが、あまり使わないかも。

■2:header.phpに画像タグやスマホ/pc条件分岐タグを使う

ちょっとマニアックな方法になりますが、ワードプレス・テーマの編集の中にある『header.php(ここがヘッダーやh1説明部分を出力)』内に、imgタグ(画像アドレス指定)と、phpスマホ/pc条件分岐タグ書いてみました。条件分岐は昔使ったのがそのまま残っていたようです。だいたいh1の下あたりにあると思います(テーマによる)。

<?php if(!wp_is_mobile()) { ?>
<?php } ?>

というコードで『!wp_is_mobile』というようにびっくりマークがついているものは、『スマートフォン以外』という条件分岐です。ここに画像タグ入れることにより、スマホ以外での表示(例えば、pcやタブレットのみ表示)をやろうとしていました。スマホ回線だと、pngなどヘッダーのサイズが大きいときは、明らかにページ表示速度が落ちるからです。jpegで少し圧縮したものだと、そこまでページスピードのパフォーマンスは悪くなりません。

ちなみにheader.phpを直接エディットすることにより、条件分岐だったり、下にアドセンス表示したりみたいなことができるわけです。

■活用例(管理人の場合):ヘッダー画像変えでできること

このサイトの場合ですと、上記のようにキャッチを入れたヘッダー画像を時期に応じて入れ替えたりしています。人によってはヘッダーころころ変えないほうが言いということもあるかもしれません。

しかし、管理人が狙っているのは、『デパートのルミネ』みたいな戦略です。あれをブログに応用したらどうなるか。季節や、月ごとに刺さるコピーを考えられるか、という挑戦です。管理人自体がキャラ薄いので(笑)、忘れられないようにという願いもこめられています。

ぜひ皆さんも、ワードプレスサイトお使いの場合は、ヘッダーも工夫してみてください(やり方がわからない場合は管理人にご相談いただければ幸いです)。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト制作 【タグ】 -

  関連記事

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作につい …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …

音声セミナー・講座・音楽視聴をサイトに実装できる、HTML5 audio要素を使いこなそう

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTM …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

【ワードプレスサイト製作】レスポンシブ左右ボックスとaudioで、音楽素材サイトを作る

今回は、ワードプレスを利用して、新しいサイトを作ってみたときの話題です。 …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

オウンドメディア&コーポレートサイトを、1サーバー1ドメインで構築する手順

今回は、ワードプレスなどを使って、汎用性のある複数サイト組み合わせを行い …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …