⑰ヘッダー画像(スライド)を作って入れよう

スライド

いよいよ? お楽しみの? ヘッダー画像です。

ヘッダー画像というのは、私たちのサイトで言うと、この部分header01

正に、サイトの顔。表情を表すと言った画像ですね。

この画像に自分の好きな画像を自由に入れられるのが、ワードプレスの楽しさでもあり。また、この画像が結構、カッコイイと、それだけで おっ ってなるサイトに仕上がります^^

では、このヘッダー画像の設定の仕方について、解説していきます。

0.ヘッダー画像の基本

ヘッダー画像は、何か自分で気にってる写真があればそれを使っても、もちろん大丈夫です。

サイズは、1900px × 500px が今回のテーマ、ライトニングが推奨している、標準画像サイズです。

これより、小さくても大丈夫ですが、自動で拡大がなされて、その推奨サイズに収まります。

高さは、500pxより、小さくても、大きくても、幅が1900pxであれば大丈夫です。

ただ、あまり、高さが、高すぎると、全画面、ヘッダー画像でうまる感じになります^^;

又、ライトニングは、スライド機能が標準でありますので、1枚で固定にすることもできますが、2枚、3枚と増やして、プレゼン資料の様に、スライドして表示することも可能です。

今回は、せっかくなので、画像の選び方も含めて、実際の流れに沿って解説しますね。

1.好きな画像を選ぶ

実際、なんでも良いのですが、サイトのコンセプトと、似た、写真を使うのが、一般的。人は、視覚から、80%の情報を得ているとの話もあるように、見た目で、色々な事を判断します。

例えば、カウンセラーさんのサイトのヘッダー画像が、好きな芸能人の写真にしてあったとします。(仮に福山雅治だとします。)

サイトに訪れた方は、困惑します。

はて?なんのサイトだろうと。

そもそも、著作権は、大丈夫なのかな?と

私達のサイトは、ライフワークや、楽しい事を共有するサイトなので、例えば、私たちのサイトにヘッダー(スライド)を足したいと思った時は、なにか、楽しげな写真を使うのが、無難です。

又、写真は、プロが撮ったカッコイイ写真を使うと、サイトの雰囲気も引き締まります。

もちろん、自分で撮った、写真も味が有りますし、イラストとかを

使うのも良いですね。

これは、サイトや、伝えたい思いと、リンクしていくので、自分の好みや、感性にあったものを使いましょう^^

今回は、ちょっとカッコいいのを作りたいので、写真はこのサイト

Free stock photos · Pexels
のモノを使います。このサイトの様に、最近は、CC0 Licenseのコンセプトのもと、写真等の著作権を完全に放棄した、自由に利用しても大丈夫な写真共有サイトが増えています。

英語のサイトなので、英語での入力が必要ですが、自分のイメージを膨らませて。

山の様な自由な感じを使いたいなと思ったら、mountainで検索してみてください。header02

こんな感じで、山の写真が沢山出てきます。

この中から、サイトのコンセプトにあった、写真を選びます。

header03

選びましたら、右のダウンロードボタンを押しましょう。

そのとき、サイズが幾つかでてきます。

header04

ライトニングのヘッダー(スライド)は、1900px × 500px が推奨なので、なるべく、それより、大きなサイズにしましょう。

選んだら、ダウンロードを選択して、画像を保存してください。

2.サイズを合せよう

自分の写真を選ばれた方も、この作業を行いましょう。

サイズ合わせのお勧めは、このサイトですね
Amazingly Simple Graphic Design Software – Canva

このサイトの便利さ、詳しい情報は、natsukiちゃんのサイトで、詳しく説明しているので、こちらを参考に

このアイキャッチ画像は5分で作りました

で、ここでは、Canvaの登録が終わり、ログインが終わった状態を前提に話を進めていきます。

Canva を開きましたら

header13

-左上の、Create a designをクリック

-画面が変化したら、右上の、Use custome demeinstionsをクリック(画像は、既に、クリックしているので、Don’t use custome dementions という反対の意味の 表現がされています。)

-そうすると、キャンパスサイズの指定ができるので、作りたい画像のサイズをここで入力しましょう。(私たちのテーマの推奨サイズの1900×500ですが、幅が、1900であれば、高さは自由なので、今回は、私たちのサイトの、他の画像サイズに合わせて、1900×720でサイズを指定してみます)

これで、画像を作る、準備が出来ました。

header06

ここで、左下の赤い囲みの、Upload、 Upload your own images

を選択して、ご自分で、ご準備された写真、もしくは、先ほど、ダウンロードした写真をアップロードします。

header16

アップロードした写真をクリックして、右のキャンパスにもっていくと。キャンパス上に写真が表示されます。拡大、縮小もできるので、好きな大きさに、しちゃってください。

これだけでもOKですが、Canvaは、左の赤い囲みの機能から、英語だけですが、文字を入れたり、図を入れる事もできるので、自分の好みで、色々、いじってみましょう。

こんな感じに、加工できます

header18

完成したら、右上のdownload を押して、今回は、Web用、Jpegが良いですかね?

head08

それを選んだら、画像を保管してください。

流れを、ビジュアル的に感じたい方は、下記動画も、参考にしてください。

3.いよいよ、ヘッダー、スライドの設定をする。

長かったですね^^;

いよいよ、ヘッダーの設定です。

ヘッダーの設定は、結構、簡単なので、安心してください^^

header09

まず、管理画面(ダッシュボード)で外観→カスタマイズを選びます。

header10

次に、カスタマイズ画面の下の方。Lightningトップページスライドショー、これを選択します。(ここで、ヘッダースライドの設定が出来ます。)

header11

左側の部分が、設定画面です。

私達のは、既に二つあるので、スライド画像3からの設定です。

初期状態も、ライトニング標準の画像が2枚入っています。

削除を押すと消す事が出来ます。

スライド画像1だけを設定している状態にしておけば、ヘッダー画像は固定されます。

スライド画像2,3と追加していく事で、それぞれのスライドがスライド形式で表示されていきます。

赤字①のボタンを押すと、画像の設定が出来ます

⑩画像を入れよう(アイキャッチ画像やブログに入れる画像)

この記事なども、参考に、準備した、画像をupdateして、選択しましょう。

赤字②は、画像のタイトルです。

これもSEOの検索ワードとなるので、設定しておきましょう。

赤字③はリンクですね、ヘッダースライド画像をクリックした際のリンク先の設定です。セミナー情報など、なにかPRしたい情報をヘッダーに使用する場合は、リンクの設定を行いましょう。

header12

右の画面で、スライドが正しく機能されているのが、確認できたら、上側の「保存して公開」を押せば、設定完了。実際のサイトに反映されます。

実際、先にも述べましたが、ワードプレスのサイトは、ここに綺麗な画像、見栄えのする画像を使うだけで、サイトの質が、かなり上がってみえます。

是非、お気に入りの写真を使って、色々試してみてください^^

追記1:Lightning4.0.0アップデートに関する付加機能

こちらに追加記事を書きましたが^^

ライトニングのアップデート(Lightning 4.0.0)に関する変更点

スライドに文字を入れたり、ボタンを配置できるようになって

ますます便利になったので、こちらの記事もご参考に^^

追記2:lightningサイズのヘッダー用画像集

こちらにいくつか画像をアップしていますので、ご自由にお使い下さい^^

ライトニング向け、ヘッダーサンプル

追記3:便利なフリー素材の写真リンク集

最近、動画の構成作り(写真を使った絵コンテ的なモノ)のお仕事を良くやらせて頂いているので

自分の備忘録様に、フリー写真のリンク集を作ってまとめました。

色んな写真を探してみたいかた。

このサイトをご参考にしてください^^

むっちゃ使える無料画像サイトリンク集



PROFILE

Ryu
Ryu
外資系の社長を卒業して(廃校になったとも言う)独立。
プロデューサーという役割を軸に、コンサルとか、コーチング、カウンセリングをしながら、イベントを企画したり、セミナーを主催したり、面白い人のプロデュースをしている。
基本、めんどくさい事が苦手なのですが、めんどくさい事を防ぐためには、細かい事に全力でこだわる。そんな自分が、一番、めんどくさかったり......

コメント

コメントを残す

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

CAPTCHA