wordpressのスキン
アイキャッチイメージを変更
アイキャッチイメージとは初期設定でブログのタイトルの下にある画像のことです。このままでもいいのですが、オリジナルの画像を使うと、より他のブログと差別化することができます。
- 横860px×縦250pxの画像を用意します。Photoshopなどをお持ちで無い方は、フリーで画像のサイズを変換するソフトもあります。画像をお持ちで無い方は、無料で画像をダウンロードできるサイトが存在しますので、利用してみてください。
- FTPソフトで先程の画像をアップロードします。アップロード先は、
ワードプレスのフォルダ/wp-content/themes/linkit/img/original/
にしてください。ファイルの名前は半角英数字であれば何でも構いません。
- 管理画面にログインし、メニューから「デザイン」→「テーマエディタ」を選択。右側の「テーマファイル」の「スタイル」からstyle.cssを選択。
- 中ほどの
/* --------------------------------------------
* Over the Topmenu
* -------------------------------------------- */
div#topimg1 {
/*display:none;*/
width:860px;
height:250px;
background:url(img/original/topimg_860x200.jpg);
margin:0 5px 0px 5px;
border-bottom:solid 1px #FFFFFF;
}
がアイキャッチイメージを指定している部分です。このbackground:url()の部分を、先程アップロードしたパスに書き換えてください。例えば先程保存した画像の名前がexample.jpgだったとすると、
/* --------------------------------------------
* Over the Topmenu
* -------------------------------------------- */
div#topimg1 {
/*display:none;*/
width:860px;
height:250px;
background:url(img/original/example.jpg);
margin:0 5px 0px 5px;
border-bottom:solid 1px #FFFFFF;
}
となります。 - 応用として、height:250px;の部分を書き換えると、画像の高さを調整することができます。例えば横860px×縦400pxの画像をアイキャッチとして利用したい場合、そのサイズの画像を用意し、上記３までを実行した後、以下のように書き換えます。
/* --------------------------------------------
* Over the Topmenu
* -------------------------------------------- */
div#topimg1 {
/*display:none;*/
width:860px;
height:400px;
background:url(img/original/example.jpg);
margin:0 5px 0px 5px;
border-bottom:solid 1px #FFFFFF;
}
アイキャッチイメージを削除
- 管理画面にログインし、メニューから「デザイン」→「テーマエディタ」を選択。右側の「テーマファイル」の「スタイル」からstyle.cssを選択。
- 中ほど Over the Topmenuの/*display:none;*/の部分のコメントアウト（/* */）の部分を削除します。（/*display:none;*/→display:none;）Over the Main Contentsの部分ではありませんのでご注意下さい。
/* --------------------------------------------
* Over the Topmenu
* -------------------------------------------- */
div#topimg1 {
display:none;
width:860px;
height:250px;
background:url(img/original/topimg_860x250.jpg);
margin:0 5px 0px 5px;
border-bottom:solid 1px #FFFFFF;
}