マルチメディアコンテンツ制作読んどけ☆コラム・web・動画・daw音楽

動画・サイト制作・作曲&アレンジ・dawまで考えるマルチメディアコンテンツ制作コラム!

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

   

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

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

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

管理人の場合は、イラレや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メディア制作・運用

yondke-main

yondke-main

  関連記事

お知らせ:楽曲受付サイトをレスポンシブ・スマートフォン対応にしました。しなかった場合考えられるリスクは?効果は?

今回は音楽制作ではなく、管理人がお仕事サイト(アトリエss)をスマートフォン対応 …

ワードプレスでタイトルが長くなりすぎるのを、適正な長さにして検索表示対策

今回は、ワードプレスの個別記事タイトルの検索表示を最適化して、検索してきたユーザ …

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

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

ランキングサイト:ブログ村で、複数のブログをひとつのアカウントで管理する方法

今回は、有名でユーザー数の多い(上位だとアクセスが流れてきやすい)ブログランキン …

ワードプレスサイトを、プラグインでサクッとSSL化する方法

今回は、セキュリティの観点からも重要なサイトSSL(暗号化接続)を、ワードプレス …

ワードプレスホームページ制作『ブログ記事投稿ページ・固定ページ』使い分け

今回は、管理人がこのサイト・音楽スクールや一般企業のお取引先さまなどのサイトに使 …

『レスポンシブレイアウトwp』がプラグインエラーで、スマートフォンで上手く表示しなかったときの対策

今回は、サイトなどを使ってコンテンツを発信するのに役立つかもしれない、wordp …

ワードプレスSTINGERでアドセンスコードが入らない~『テキストドロップ』勘違いと、対処方法

今回は、このサイトにもつかわれているツール『ワードプレス』での、アドセンスコード …

【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測

今回は、スマートフォンに特化した、サイトの表示速度チェックツールをご紹介します。 …

ワードプレスwebサイトの、記事カテゴリー調整方法~設定しかた、親・子カテゴリ使い分け

今回は、このサイトにも使われているweb制作ツール・ワードプレスでの、カテゴリー …