「夜空」テンプレートのカスタマイズ(9)・・・小ネタいろいろ

css1年半ぶりに、ブログ・テンプレートのカスタマイズ・ネタです。今回はこの1年半の間にCSSに手をいれたところの覚え書きです。やはり書き留めておかないと、どうやったのか自分でもすぐ忘れるので。

ウェブリブログ以外には汎用性がない記事ですから、興味のない方はランキングをどうぞ。

ランキングを見る(にほんブログ村 オペラ 人気ランキング)
ランキングを見る(クラシック情報サイトボーダレスミュージック)

以下の作業はいずれもウェブリブログの編集メニューから
[設定]の「オプション」→[CSS編集(上級者向け)]
を開いてCSSの記述を変更または追記します。


1.タイトルのフォントを「HGP創英角ゴシックUB」にする

広報室ブログのタイトル「オペラ対訳プロジェクト広報室」部分をオペラ対訳プロジェクト(ウィキ)のタイトルで使っているのと同じフォントにします。赤字部分を追記します。
/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/

/* タイトル領域内のアンカー */
#banner a{
font-family: "HGP創英角ゴシックUB",Meiryo,sans-serif;
font-size:36px;
}

/* タイトルテキスト */
#banner h1{
font-family: "HGP創英角ゴシックUB",Meiryo,sans-serif;
font-size:36px;
}
こっちも
/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*---------------- タイトル(小) ----------------*/

/* タイトル領域内のアンカー */
#subbanner a{
font-family: "HGP創英角ゴシックUB",Meiryo,sans-serif;
font-size:36px;
}

/* タイトルテキスト */
#subbanner h1{
font-family: "HGP創英角ゴシックUB",Meiryo,sans-serif;
font-size:36px;
}
「HGP創英角ゴシックUB」がインストールされていないパソコンでは「メイリオ」、それもインストールされていなければ、ブラウザ指定の「セリフなしフォント」で表示されているはずです。

2.タイトル画像を少し右に寄せる

「訳」のgif画像が少し左に寄りすぎていてバランスが悪いように思えたので、左から20px、上から10pxほど中央に寄せます。CSSの末尾に追記します。
#profile img { margin-left: 20px;
margin-top: 10px;
}


3.記事タイトルのフォントを「メイリオ」にする

記事のタイトル(この記事の場合、上の『「夜空」テンプレートのカスタマイズ(9)・・・小ネタいろいろ』の部分)を強制的に「メイリオ」フォントにします。

/*----------------- 記事ヘッダ -----------------*/

/* 記事タイトル */
#blog-head h2{
font-family: "メイリオ",Meiryo,sans-serif;
}
私はブラウザの指定フォントを「メイリオ」にしています。そのため広報室ブログの記事その他は基本「メイリオ」で表示されているのですが、この記事タイトルだけがなぜか強制的に「MS Pゴシック」で表示されるのが気にくわないので「メイリオ」にしてやりました。インストールされていなければ、ブラウザ指定の「セリフなしフォント」で表示されているはずです。

4.ジャケ写の画像に余白をつける

この記事の一番上に飾ってあるCDのジャケット写真に余白を付けます。CSSの末尾に追記します。
#blog-body img { margin-left: 10px;
margin-right: 10px;
}
これをやらないと、左のテキストが右のジャケ写とくっついてしまい見栄えが悪くなります。ちなみにジャケ写の画像は「align="right"」の回り込み機能を使って右に寄せています。

5.壁紙を変更し固定する

壁紙を新しく作り直しました(昔のはこちら)。
/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
background:url("http://userdisk.webry.biglobe.ne.jp/011/090/43/N000/000/000/129507270353916314916_bg6.gif"); /* 背景に画像を敷きつめる */
background-color:#555; /* 背景色をカラー名やRGB値で指定する */
background-attachment : fixed ;
}
「#555」(灰色)を指定することで、壁紙の読み込みに失敗しても背景が灰色になります。「fixed」を指定することで、ページをスクロールしても壁紙が固定されたままになります。

6.フッターに背景色をつける

いろいろカスタマイズしたら「フッター」のテキスト(白)が壁紙(灰色)のせいで、読みにくくなってしまいました。フッター部分の背景には壁紙ではなく、「#07173b」(青)の背景を出すようにします。テキストは「#666」(灰色)にします。
/*-------------- ページフッタ領域 --------------*/
#footer{
background-color:#07173b;
color:#666;

}

/* フッタ内のアンカー */
#footer a{
color:#666;
}

7.「h3」タグを指定する

↑この見出し(太字、点線付き)を「h3」タグで指定できるようにします。CSSの末尾に追記します。
h3 {
font-weight:bold;
border-bottom:2px dotted #425170;
margin-bottom:3px;
}
記事にはこのように書きます。
<h3>7.「h3」タグを指定する</h3>

8.「blockquote」枠内を調整する

「blockquote」の背景画像を消したり、点線を付けたりする方法は前に書きましたが、今回は「blockquote」内のフォントを基本「arial」にして、リンクのフォント色を「#555」(灰色)「アンダーライン無し」にします。日本語は「セリフなしフォント」で表示します。
/* タグスタイル再定義(引用) */
#blog-body blockquote{
font-family:arial,Sans-Serif;
background-image:none; /* 背景画像を消す */
border:2px #808080 dotted;
background-color: #FFFFFF;
color:#000000;
}
#blog-body blockquote a{
color:#555;
text-decoration:none;
}


ランキングを見る(にほんブログ村 オペラ 人気ランキング)
ランキングを見る(クラシック情報サイトボーダレスミュージック)

にほんブログ村 外国語ブログ 通訳・翻訳(英語以外)へ
ココで投票できない場合こちらで投票してください。⇒⇒⇒投票所


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック