Feedback

Eye Catch

アイキャッチ画像とは、ページデザインの印象を直接視覚的に伝える要素です。

ここでは、アイキャッチ画像の挿入と編集方法、アイキャッチ画像が手に入るサイトを紹介します。

Eye Catch モジュールの読み込み方法

wp.Vicuna専用スキンでは、スキンによってアイキャッチモジュールを読みこませることができるものがあります。他のモジュールと同様、読み込ませるためのimport規則は5-module.cssに記述されており、コメントアウトの解除によって即座に適用されます。

/*--------------------------------------
 Eye Catch [Short]
---------------------------------------*/
/*
@import url(module/hoge.css); 
*/

以下のソースではコメントアウトの解除によりモジュールは読み込まれる。

/*--------------------------------------
 Eye Catch [Short]
---------------------------------------*/

@import url(module/hoge.css);

モジュールにより固定されるレイアウト

可変幅のレイアウトの場合には、ウインドウサイズによってアイキャッチ画像とウインドウ幅が合わなくなってしまう問題があり、これを回避するためにアイキャッチモジュールにはレイアウトを固定幅に変更する記述がなされています。

指定の画像幅より大きなものを使いたい場合はアイキャッチモジュールに記述されたレイアウトの調整用の記述を編集してください。

/*--------------------------------------
	1-1.全てのページへ影響
---------------------------------------*/

body {
	margin: 0 10px;
}

div#header,
div#content,
div#footer {
	width: 800px;
}

アイキャッチ画像の編集

モジュールによって読み込まれる画像は、スキンフォルダ内のimages/eyeCatchに同梱されています。これらを編集し、同じサイズ・同じファイル名でアップロードして上書きすることで差し替えることができます。

アイキャッチに使われる画像には自作のイラストや写真などが考えられますが、そういったものが用意できない場合はロイヤリティーフリーの素材を入手してサイズを調整して使うといいでしょう。以下にWEBで入手できる著作権フリーの素材サイトをピックアップしますので、自分好みのアキャッチ画像を製作してwp.Vicunaで使い下さい。

photoLibrary [日]: ロイヤリティーフリーの画像検索サイト。
LinkStyle [日]: プロのカメラマンが撮影した高解像度の写真素材サイト。
Image*after [英]: ロイヤリティーフリーの画像検索サイト。
PicFindr: ロイヤリティーフリーの画像検索サイト。(使いやすくてお勧め)
Yotophoto [英]: ロイヤリティーフリーを含む画像検索サイト。画像によってライセンスが異なるので注意してください。

以下は有料ですが、高品質な写真素材を手に入れることができます。自分の一部ともいえるブログだったら1枚ぐらいお気に入りを買ってもいいかも?

amana [日]: 高品質な写真素材販売サイト。

Page Top