メインイメージとは
- ここで言うメインイメージは、「トップページの上部にある大き目の画像」のことです。
これは、ホームページの印象を決めますから大事にしましょう。
できれば、イメージだけでなく、キャッチコピー（文字）も載せておくと良いです。 - このホームページのメインイメージは、3枚の画像をフェードさせています。
- 「Meteor Slides」というプラグインを使えば、フェードやスクロールなどの効果を自動で表示してくれます。
また、このプラグインは、スマホにも自動対応してくれます。
※フェード＝徐々に次の画像に入れ替わる効果
※スクロール＝上下左右などに画像が移動する効果
プラグインの設定方法にあるよう方法でプラグインMeteor Slidesをインストールしておきましょう。
Meteor Slidesの設定方法
- １．インストールして有効化すれば、管理画面の左メニューに「スライド」の表示ができます。
２．最初に「設定」をします。
スライド数、スライドの高さ、スライドの幅に数字を半角英数で入力してください。
※スライドの幅は、テーマによって異なります。サンプルで入っている画像をコピーして幅を調べてから設定しましょう。
効果スタイルは27種類もありますので、好みのものを選択しましょう。
※あまり奇抜な動きは見にくくなりますのでなるべくシンプルなものを選びましょう。
３．上の画像下部にある↓のphpは、表示したい箇所に貼り付けるものです。コピーしておきましょう。 - phpを貼り付ける場所と方法
殆どのテーマには、メインイメージ画像がサンプルで設置されています。
その記述があるのは、「front-page.php」か「メインインデックスのテンプレートindex.php」が多いですが、テーマによっては別のファイルに書かれていることもあります。
そのファイルの中で、メインイメージ画像を記述している箇所があります。
例：
<div id=”mainImg”><img src=http://www.rabbit-kumatori.com/img/mainimage.ｊｐｇ alt=”○○○○○○○○○○○○○○○○○” ></div>
↓
<div id=”mainImg”><?php if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow(); } ?></div>
※テーマによっては、id=”mainImg”が別の名前になっていることもあります。 - 記述箇所を探すには、その画像のURLをコピーして、ファイルを表示した状態で「ページ内検索」をすると早いです。
※画像のURLをコピーする方法は、パソコンにもよりますが、画像にカーソルを乗せて右クリックして出てくるプルダウンメニューの「画像URLをコピー」すればできます。
※「ページ内検索」は、パソコンにもよりますが、「Ctrl＋ｆ」で検索窓が表示され、そこに画像URLを貼り付けて検索すれば、該当箇所がハイライト（背景色が付けられる）されます。 - 表示したけれど、縦の長さが合わなくて、一部が欠けている場合があります。
それは、 id=”mainImg”のcssファイルでの設定が、高さheight:200px;などのように指定されている場合が多いです。
左メニュー「外観」→「テーマの編集」→「スタイル style.css」でstyle.cssファイルを開いて調べます。
上記の「記述箇所を探す」方法で、「mainImg」を探してください。
記述例：
#mainImg{
clear:both;
margin-top:2px;
line-height:0;
text-align:center;
z-index:0;
position:relative;
width:960px;
height:200px;
}
この中の、「height:200px;」を表示したいサイズに合わせてください。
例：height:300px; - ４．スライドショーの設定
上記の操作が済めば次にスライドショーの設定に移ります。
「名前」（＝日本語）と「スラッグ」（＝英数半角）に入力して、「スライドショーを追加」すれば、右の欄に表示されます。
通常は、一個のスライドショーで良いです。
次に、「新規追加」で画像を順に登録してゆきます。
「タイトル」（＝日本語）を入力する際には、SEOに影響がありますので、キーワードを含めた短いフレーズにしておきます。
例：このホームページの場合、３枚の画像に「初心者のWordPressでホームページ作成」「WordPressでホームページ作成」「ホームページ作成」としています。
「アイキャッチ画像を設定」をクリックすると下記の順に画面が変わります。
下記の画面では、SEOに影響がありますので、「タイトル」「代替えテキスト」「説明」の３つの欄に、キーワードを含めた短いフレーズを入力しておきます。
最後に、「スライド」で登録内容を確認すれば完成です。
ここに表示された上から順に表示されます。
順を変えたい時は、「新しい順に表示」をクリックして順を入れ替えてください。
次は、→ グローバルナビの作り方
