【賢威8】メインビジュアルのカスタマイズ方法

こんにちは、HIROです。

 

賢威8を色々な角度からいじってみてるんですが、いや～、すごいですね。

 

テンプレートのわりに結構やれることが多く、収益に繋がる仕掛けも種類が豊富にあり、重宝しています^^

 

さて、今回賢威8から新たに実装された機能が、とても実践的なのでご紹介したいと思います。

 

その機能とは『メインビジュアル』です。

 

賢威8でのメインビジュアル設定は5つのパターンがあり、

 

 

と、メインビジュアルを華やかに魅せる仕掛けが一通り揃っているという感じです。

 

では、早速それぞれの機能を見ていきましょう。

 

メインビジュアルの設定『画像』

 

 

『画像』は、賢威8より下のバージョンでもあった機能なんですが、今回もしっかり使えるようになっています。

 

ワードプレス左のタブから『賢威の設定』をクリックした後、スクロールしていくと真ん中らへんにメインビジュアル設定がでてきます。

 

出てきましたか？

 

『画像』の設定は『テンプレート幅』と『ブラウザ幅』の二種類があります。

 

この『テンプレート幅』と『ブラウザ幅』の設定は、『背景画像』と『スライダー』にも同等の設定がありますので、詳しくみていきましょう。

 

『テンプレート幅』は、初期状態の値は1200px×375px(または1600px×500px)の画像幅を想定しており、メインコンテンツと同じ横幅で表示されます。

 

 

この画像は実際のサイズ1200px×375pxで画像を作り挿入してみました。

 

なるほど、メインコンテンツの幅に合わせてぴったり収まっています。

 

画像の大きさも申し分なく、十分メインビジュアルになりうる画像サイズになっています。

 

トップページにメインビジュアル画像を入れると訪問者の目を引くことに一役買ってくれそうです。

 

次に『ブラウザ幅』を見ていきたいと思います。

 

『ブラウザ幅』は、その名の通り各パソコンのブラウザ幅に合うように配置するためピクセルでは表せません。

 

『ブラウザ幅』で画像を用意する場合は、少なくとも横幅2000px以上の画像を持ってくるようにしましょう。

 

 

違いが分かりますか？

 

『ブラウザ幅』の方が『テンプレート幅』に比べて横幅が各パソコンの横幅までめいっぱい表示されるのでインパクトとしては断然『ブラウザ幅』に分がありそうです。

 

おしゃれな洋服販売サイトや専門学校の公式サイトなんかによく採用されるケースですね。

 

因みに『モバイル用画像』では『ブラウザ幅』であろうと『テンプレート幅』であろうと違いはありません。

 

『モバイル画像』の初期設定は750px×500pxを想定しています。

 

パソコンで表示させる画像と『モバイル画像』は別々にアップロードできますので、個々にサイズの違う画像を用意して表示させることもできます。

 

メインビジュアルの設定『背景画像』

 

 

『背景画像』は基本的には『画像』と同じです。

 

なので『表示幅』、『画像』、『モバイル用画像』については説明は省かせていただきます。

 

『背景画像』と『画像』の違いについてなんですが、『画像』は画像単体を張り付けるしかできませんでしたが、『背景画像』は画像の上にテキストが配置できますよという設定です。

 

設定欄の『テキスト』から自由に文字を選ぶことができます。

 

因みにHIROも画像を一つ作ってみました。

 

 

『テキスト』を入れることでブログタイトルもこの通り簡単にいれることができました。

 

テキストを中央揃えにし、『テキストの位置』も中央にしました。

 

背景画像にそのままテキストを入れると画像と重なって文字がみづらくなってしまいます。

 

文字の読みづらさ解消に透過ブラックでテキストが読みやすく加工されているのも文字が読みやすくて〇ですね^^

 

また『テキスト』の中には画像を入れることもできますので、ロゴ画像をそのまま入れるのもありだと思います。

 

 

メインビジュアルの設定『動画』

 

 

ここでは『動画』の導入方法をご紹介します。

 

賢威8も今までバージョンアップを繰り返してきましたが、『動画』は今回が初になります。

 

メインビジュアルに動画を入れているサイトって大手のサイトくらいしか見たことないですよね？

 

それが自分のブログにも簡単に導入できるというのだから、これは使わずにはいられません。

 

賢威8の『動画』では、埋め込みコードを入れる方法とmp4をアップロードする二つのやり方があります。

 

一度例としてYou Tubeの動画を埋め込みコードを使ってメインビジュアルに導入してみたいと思います。

 

まずはYou Tubeにアクセスします。

 

You Tubeにアクセスしたら動画の右下にある『共有』ボタンをクリックします。

 

 

すると『リンクの共有』というのがでてくるので、一番左の『埋め込む』をクリック。

 

 

すると下のような画面がでてきますので、青で反転している部分をコピーします。

 

 

You Tubeの埋め込みコードをコピーし終わると、ワードプレスに戻り、『賢威の設定』から先ほどコピーした埋め込みコードをペーストします。

 

 

ここまで来たらあとは保存を押して終了です。

 

ちゃんと動画の表示はされましたか？

 

 

ブログの他にYou Tubeの動画投稿も併用してブログ運用している人はメインビジュアルに動画をもってくるやり方もありだと思います。

 

他のブログがやっていないことをして差別化をすることでそのサイトにしかないオリジナリティがでるので、こういう機能は積極的に取り入れることをおすすめしたいですね。

 

メインビジュアルの設定『スライダー』

 

 

次に『スライダー』を紹介します。

 

よく大手のサイトなんかを見ていると、メインビジュアルにある画像が数秒ごとに違う画像に切り替わるようなものを見かけたことがあると思います。

 

本来なら画像が切り替わる仕掛けはjavascriptなどのプログラミング知識が必要になってくるわけですが、賢威8では、クリック一つでその仕掛けを難なく導入することができます。

 

HIROも実はプログラミングをかじってたことがありまして、中々に苦戦したのを覚えています。

 

画像が切り替わる仕掛けをプログラミングで作ろうと思えば気の遠くなるような勉強と時間が必要になってきます。

 

最初この仕掛けが賢威8でクリック一つでできるのを知った時は『ずるい！！』って思わず心の中で叫んでましたね^^

 

ここではそんなスライダーの手順をご紹介しますね。

 

 

と言っても簡単で、『画像』下の『動画をアップロード』をクリックして、画像を選択後、左下にある『画像追加』でどんどん画像を追加すれば無制限に切り替わる画像の枚数を増やしていけます。

 

『モバイル用画像』はお好みで付け足してもいいですね。

 

因みに『画像』にある画像のサイズは1200px×375px(または1600px×500px)を想定していて『モバイル用画像』のサイズは750px×500pxを想定しているので画像を入れる際は参考にしてみてください。

 

 

メインビジュアルの設定『全画面表示』

 

 

賢威8の『全画面表示』はそもそも賢威7でランディングページ用に作られた仕様です。

 

最初にお伝えした『画像』とほぼ同じ機能となり、違うところと言えば『全画面表示』の場合、『背景画像』同様『テキスト』が入れられるということくらいでしょうか。

 

何にしろ普段はそこまで使用頻度の多くない機能となっています。

 

まとめ

 

いかがだったでしょうか？

 

今回は賢威8でのメインビジュアルのカスタマイズ方法についてご紹介しました。

 

賢威8のメインビジュアル設定の良い所はHTMLやプログラミング言語などを勉強しなくても見栄えのいいメインビジュアルが簡単に導入できるところです。

 

自分のブログを運営していてオリジナリティをだしたくなったらメインビジュアルの導入も視野に入れておくと幅広いアフィリエイト戦略が立てられるでしょう。

 

この記事を参照してご自身のブログに導入していただけると幸いです。