スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テンプレートをいじった。

なんとなくデフォルトのテンプレートが気に入らなかったので、編集してみた。欧文フォントの変更とかメニューバーの改善、他にも色々試してみた。僕にはCSSやHTMLの知識は全くないので、とりあえずコードと睨めっこしながら分からないところを検索し、数値をチマチマ変えたりとかコピペを繰り返したりした。今のところ満足している。誰かの参考になればいいなぁと思い、以下に変更点とか色々書いておく。なお、初心者にもならんような奴が適当にいじっただけなので、安全性その他諸々は保証しかねる。誰が参考にするんだこれ。

Before:
before

After:
after



・フォント変更
欧文フォントをMeiryoからGeorgiaにした。ネットを見ると「数字がオールドスタイルis何だから日本語の文章と合わない」って言う人もいるみたいだけど、僕はお洒落で格好いい数字だと思う。0123456789。ついでにsans-serifからserifに直した。確かこれは文字の装飾が変わるはずなのだが、素人なので本当に何かが変わったかは分からない。ちなみに可読性を高めるためにCSSやHTMLのコードを書く際にはメイリオを使用している。

body{
width:100%;
text-align:center;
font-family: "Georgia", "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", serif;
line-height: 1.4;
font-size: small !important; /* IE7 */
font-size: 82%; /* IE6 */
word-break:break-all;
}




・ブログタイトル、記事タイトル
「続きを読む」は元々マウスオーバーしたら綺麗な水色に変わる仕組みがあったんだけど、これをブログのタイトルと記事のタイトルにも導入した。それと、微妙に色を変えた。これは本当に微妙だから分からない人がほとんどのはず。
影もついて立体感。

#header h1 a /* ブログタイトル */ { color: #333631; text-shadow: 2px 4px 3px rgba(0,0,0,.2);}
#headermenu .menu_bar a /* 「記事一覧」のリンク */ ,
#main_contents h2 a /* 記事タイトル */,
#main_contents .entry_body .entry_more a /* 「続きを読む」のリンク */
{ color: #333631; text-shadow: 2px 4px 3px rgba(0,0,0,.2);},

#header h1 a:hover {
color: #a0d8ef;
}
#main_contents h2 a:hover {
color: #a0d8ef;
}

あとこれはHTMLの改変なんだけど、ブログタイトルにマウスオーバーしたときに小さい四角いの出てくるよね。あれをタイトルそのままじゃなくてタイトルの日本語訳が出るようにした。無学の衒学。

<h1><a href="<%url>" accesskey="0" title="無学の衒学"><%blog_name></a></h1>




・メニューバー
最初メニューバーと言えるようなものはなかったんだけど、殺風景だなぁと思ったので作るだけ作ってみた。と言っても何か凄いコードを書いた訳ではなく、

<p class="menu_bar"><a href="<%url>archives.html">記事一覧</a></p>

これを3回コピペした。さらに細かいことが気になる性分なのでp classとかいう奴を"archives"から"menu_bar"に変え、これを呼び出しているところも全て"menu_bar"に変えた。

<p class="menu_bar"><a href="<%url>archives.html">記事一覧</a></p>
<p class="menu_bar"><a href="<%url>blog-entry-2.html">語学リンク集</a></p>
<p class="menu_bar"><a href="<%url>">未定</a></p>
<p class="menu_bar"><a href="<%url>">未定</a></p>


次に、ただ我武者羅に増やしてもカラムからはみ出て気持ち悪いから、記事のある大きいカラムの上にメニューバーがちょうど収まるようにした。まずブログのスクショ撮ってからペイントを起動してカラムの上にある2本の線の間が何pxかを測った。その数字を4とか6とかで割ってメニューバーの項目1つあたりが何pxの幅かを計算し、CSSのコードからメニューバーの項目の幅を決めてるところを探し出してその数字を入れた。ついでに文字が項目の真ん中に来るようにした。

#headermenu .menu_bar {
float: left;
width: 215px;
background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/headermenu.png) no-repeat 213px 0;
}

#headermenu .menu_bar a {
display: block;
width: 215px;
height: 39px;
line-height: 39px;
text-align: center;
}


メニューバーもマウスオーバーで色が変わるようにした。これが一番苦労した…。ここは元々マウスオーバーで色っていうか後ろの画像が変わるところだった (参照) 。この機能を外すのは簡単だった。ここを消せばいい。

#headermenu .archives a:hover {
background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/headermenu_hover.png) no-repeat bottom left;
background-size: 100% 100%;
}

その次に、まだテンプレートの編集始めたばかりでHTMLもCSSも意味不明だった今でも意味不明だけど僕は、とりあえず「続きを読む」で同じことをしていた部分をそのままコピペして使うことにした。実際にコピペしたのがこれ。

#headermenu .menu_bar a:hover {
background: #a0d8ef;
border-top: 1px solid #6BA9B3;
color: #FFFFFF;
}

そしてこうなった。
どうしてこうなった
カーソルを合わせると記事のカラム全体が大きく右に動いてしまうようになった。この原因が暫く分からず。多分5時間か6時間は試行錯誤していたのではないだろうか。最終的に、border-topというのが悪さをしているのが分かり、それを消してこんなコードを書き込んだ。

#headermenu .menu_bar a:hover {
background: #a0d8ef;
color: #FFFFFF;
}

border-topは項目の上部に薄い線を引いて立体感を出すためのコードだったみたいだ。あの手のものってカーソルを合わせた時にちょっと凹んだ感じがするが、その凹んだ感じを作っていたのがborder-topという訳。メイドイン俺でもそんな方法で立体感を出していた覚えがある。


まあ目に見えるような編集はこんなところ。他にも思い付いたらやってみようと思う。とりあえず目前の問題は果たして日本語文にGeorgiaは良いんだろうか良くないんだろうかということだね。僕は好きとは言ったけど、正直葛藤がある。それと日付の色。元は灰色で今は黒くなってるけど、これもどっちにしようか。どっちでもいい。

うーん、ブログタイトルと記事のタイトルだけにしようかな?
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

Zetashea

Author:Zetashea
勉強するフリばかりの無学な衒学。

学習言語は英語、ロシア語、ドイツ語、イタリア語、その他諸々。

他に頑張りたいことは数学です。
数検準2級を中1で取得。それ以降成長していない。

あとは音ゲーとか。

最新コメント

月別アーカイブ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。