小粋空間のデフォルトだとブログタイトルが
ベタ塗りの背景になってて少し寂しい
そこでJUGEMでもやってたブログタイトルに画像を張る
まず貼り付ける画像を用意する
横幅をサイト幅になるようにトリミングする
ここで例として940×400サイズの画像を用意
そしたらその画像をWordPressでアップロードしておく
次にWordPressでstyle.cssを開き
以下のbanner title部分をこのように修正する
/* banner title */
#header {
padding: 15px 15px 0px 15px; /*デフォルト padding: 15px*/
*これをやんないとなぜか画像の下に変な帯が付く
追記ではなく修正なのでデフォルト値はメモしておく
/* ここ */ ←ここの部分に書いた文字はコメント扱いで
メモとして使用できる
そしたらstyle.css末尾に以下のコマンドを追記
/* ブログタイトル(ヘッダー)背景画像 変更 */
#header {
height: 385px; /*用意した画像の縦解像度-15px*/
border-bottom: 1px solid #669;
color: #999;
background: #8fabbe;
background-position: right top;
background-repeat: no-repeat;
background-image: url("画像のURL");
text-align: left;
}
*画像のURLは先ほどアップした画像のURLをコピペする
heightには用意した画像の縦解像度から15引いた値を入力
これも先ほどと同じ理由で変な帯が付くので
これで画像が表示されるようになる
ついでにブログタイトルのフォントも色々弄ってみる
/* ブログのタイトル名のフォント変更 */
#header a,
#header a:link,
#header a:visited {
background: transparent;
font-family:Comic Sans MS;
font-size: 50px;
font-weight:bolder;
color:#66ccff;
text-decoration: none;
font-style: oblique;
text-shadow: 3px 3px 10px #000; /* 文字に色縁をつける */
text-decoration:none;
}
/* ブログのサブタイトル(説明部)の変更 */
.blog-description {
color: #ffffff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
background: transparent;
font-size: 12px;
}
*font-family:を指定することで色々なフォント使用できる
ただしOSにインストールされているものに限る
text-shadowで文字に影を付けたり色々できる
いじょうでブログタイトル部分のカスタムが終了
次は小粋空間テーマにない記事末尾にタグを表示する方法
コメントを残す