⑰ヘッダー画像(スライド)を作って入れよう
いよいよ? お楽しみの? ヘッダー画像です。
ヘッダー画像というのは、私たちのサイトで言うと、この部分
正に、サイトの顔。表情を表すと言った画像ですね。
この画像に自分の好きな画像を自由に入れられるのが、ワードプレスの楽しさでもあり。また、この画像が結構、カッコイイと、それだけで おっ ってなるサイトに仕上がります^^
では、このヘッダー画像の設定の仕方について、解説していきます。
0.ヘッダー画像の基本
ヘッダー画像は、何か自分で気にってる写真があればそれを使っても、もちろん大丈夫です。
サイズは、1900px × 500px が今回のテーマ、ライトニングが推奨している、標準画像サイズです。
これより、小さくても大丈夫ですが、自動で拡大がなされて、その推奨サイズに収まります。
高さは、500pxより、小さくても、大きくても、幅が1900pxであれば大丈夫です。
ただ、あまり、高さが、高すぎると、全画面、ヘッダー画像でうまる感じになります^^;
又、ライトニングは、スライド機能が標準でありますので、1枚で固定にすることもできますが、2枚、3枚と増やして、プレゼン資料の様に、スライドして表示することも可能です。
今回は、せっかくなので、画像の選び方も含めて、実際の流れに沿って解説しますね。
1.好きな画像を選ぶ
実際、なんでも良いのですが、サイトのコンセプトと、似た、写真を使うのが、一般的。人は、視覚から、80%の情報を得ているとの話もあるように、見た目で、色々な事を判断します。
例えば、カウンセラーさんのサイトのヘッダー画像が、好きな芸能人の写真にしてあったとします。(仮に福山雅治だとします。)
サイトに訪れた方は、困惑します。
はて?なんのサイトだろうと。
そもそも、著作権は、大丈夫なのかな?と
私達のサイトは、ライフワークや、楽しい事を共有するサイトなので、例えば、私たちのサイトにヘッダー(スライド)を足したいと思った時は、なにか、楽しげな写真を使うのが、無難です。
又、写真は、プロが撮ったカッコイイ写真を使うと、サイトの雰囲気も引き締まります。
もちろん、自分で撮った、写真も味が有りますし、イラストとかを
使うのも良いですね。
これは、サイトや、伝えたい思いと、リンクしていくので、自分の好みや、感性にあったものを使いましょう^^
今回は、ちょっとカッコいいのを作りたいので、写真はこのサイト
Free stock photos · Pexels
のモノを使います。このサイトの様に、最近は、CC0 Licenseのコンセプトのもと、写真等の著作権を完全に放棄した、自由に利用しても大丈夫な写真共有サイトが増えています。
英語のサイトなので、英語での入力が必要ですが、自分のイメージを膨らませて。
山の様な自由な感じを使いたいなと思ったら、mountainで検索してみてください。
こんな感じで、山の写真が沢山出てきます。
この中から、サイトのコンセプトにあった、写真を選びます。
選びましたら、右のダウンロードボタンを押しましょう。
そのとき、サイズが幾つかでてきます。
ライトニングのヘッダー(スライド)は、1900px × 500px が推奨なので、なるべく、それより、大きなサイズにしましょう。
選んだら、ダウンロードを選択して、画像を保存してください。
2.サイズを合せよう
自分の写真を選ばれた方も、この作業を行いましょう。
サイズ合わせのお勧めは、このサイトですね
Amazingly Simple Graphic Design Software – Canva
このサイトの便利さ、詳しい情報は、natsukiちゃんのサイトで、詳しく説明しているので、こちらを参考に
で、ここでは、Canvaの登録が終わり、ログインが終わった状態を前提に話を進めていきます。
Canva を開きましたら
-左上の、Create a designをクリック
-画面が変化したら、右上の、Use custome demeinstionsをクリック(画像は、既に、クリックしているので、Don’t use custome dementions という反対の意味の 表現がされています。)
-そうすると、キャンパスサイズの指定ができるので、作りたい画像のサイズをここで入力しましょう。(私たちのテーマの推奨サイズの1900×500ですが、幅が、1900であれば、高さは自由なので、今回は、私たちのサイトの、他の画像サイズに合わせて、1900×720でサイズを指定してみます)
これで、画像を作る、準備が出来ました。
ここで、左下の赤い囲みの、Upload、 Upload your own images
を選択して、ご自分で、ご準備された写真、もしくは、先ほど、ダウンロードした写真をアップロードします。
アップロードした写真をクリックして、右のキャンパスにもっていくと。キャンパス上に写真が表示されます。拡大、縮小もできるので、好きな大きさに、しちゃってください。
これだけでもOKですが、Canvaは、左の赤い囲みの機能から、英語だけですが、文字を入れたり、図を入れる事もできるので、自分の好みで、色々、いじってみましょう。
こんな感じに、加工できます
完成したら、右上のdownload を押して、今回は、Web用、Jpegが良いですかね?
それを選んだら、画像を保管してください。
流れを、ビジュアル的に感じたい方は、下記動画も、参考にしてください。
3.いよいよ、ヘッダー、スライドの設定をする。
長かったですね^^;
いよいよ、ヘッダーの設定です。
ヘッダーの設定は、結構、簡単なので、安心してください^^
まず、管理画面(ダッシュボード)で外観→カスタマイズを選びます。
次に、カスタマイズ画面の下の方。Lightningトップページスライドショー、これを選択します。(ここで、ヘッダースライドの設定が出来ます。)
左側の部分が、設定画面です。
私達のは、既に二つあるので、スライド画像3からの設定です。
初期状態も、ライトニング標準の画像が2枚入っています。
削除を押すと消す事が出来ます。
スライド画像1だけを設定している状態にしておけば、ヘッダー画像は固定されます。
スライド画像2,3と追加していく事で、それぞれのスライドがスライド形式で表示されていきます。
赤字①のボタンを押すと、画像の設定が出来ます
この記事なども、参考に、準備した、画像をupdateして、選択しましょう。
赤字②は、画像のタイトルです。
これもSEOの検索ワードとなるので、設定しておきましょう。
赤字③はリンクですね、ヘッダースライド画像をクリックした際のリンク先の設定です。セミナー情報など、なにかPRしたい情報をヘッダーに使用する場合は、リンクの設定を行いましょう。
右の画面で、スライドが正しく機能されているのが、確認できたら、上側の「保存して公開」を押せば、設定完了。実際のサイトに反映されます。
実際、先にも述べましたが、ワードプレスのサイトは、ここに綺麗な画像、見栄えのする画像を使うだけで、サイトの質が、かなり上がってみえます。
是非、お気に入りの写真を使って、色々試してみてください^^
追記1:Lightning4.0.0アップデートに関する付加機能
こちらに追加記事を書きましたが^^
スライドに文字を入れたり、ボタンを配置できるようになって
ますます便利になったので、こちらの記事もご参考に^^
追記2:lightningサイズのヘッダー用画像集
こちらにいくつか画像をアップしていますので、ご自由にお使い下さい^^
追記3:便利なフリー素材の写真リンク集
最近、動画の構成作り(写真を使った絵コンテ的なモノ)のお仕事を良くやらせて頂いているので
自分の備忘録様に、フリー写真のリンク集を作ってまとめました。
色んな写真を探してみたいかた。
このサイトをご参考にしてください^^
PROFILE
-
外資系の社長を卒業して(廃校になったとも言う)独立。
プロデューサーという役割を軸に、コンサルとか、コーチング、カウンセリングをしながら、イベントを企画したり、セミナーを主催したり、面白い人のプロデュースをしている。
基本、めんどくさい事が苦手なのですが、めんどくさい事を防ぐためには、細かい事に全力でこだわる。そんな自分が、一番、めんどくさかったり......
コメント