Hatena BlogのCSSを素人が弄ったら！七転八倒まちがいナシ！

ついに着手しましたHatena Blog、デザインのCSS変更は根性だ！

ずっとHatena Blogではテンプレートを弄らないで、そのまま使っていたのですが、文字サイズは見たまま編集で大きくしただけというテイタラク、それで怖々ですがCSSを弄ってみたわけです。

CSS変更前はこんな感じで、Hatena Blogのブログ記事の文字のサイズがいまいち小さいのと、記事の投稿日時が左にあるのが気になっていたので・・・

こうなるように変更しました。

Hatena Blogのブログ記事のタイトルの上に投稿日時がくるように、それとブログ記事本文の文字が大きくなるように変更。

本文の文字に合わせて、大見出し・中見出し・小見出しの文字サイズをチョコチョコ直してみました。

この作業で分かったことは、難しい調整でなければHatena BlogのCSSの調整ワタシにも出来るということ。

それとテンプレートのCSS、シンプルな変更はインターネットの検索でいろいろ探してもなかなかみつかりません。

「見出しのフォントサイズを変えたいだけなの〜」っていうのは、アウトオブガンチュウでそんな、シンプルなCSSの変更はブログ記事にするまでもないってことなのかなぁ？

Hatena Blogは出来るだけシンプルなデザインのブログにしたいのが趣旨なので、凝り凝りのHatena Blogのブログはワタシのゆような素人には参考にならないのが辛いところです。

デザインテーマはできるだけシンプルなものがいいと思ったので、Hatena BlogのEpicをつかっていたんですけど。

Hatena Blogのデザインテンプレートは、タイトルの位置は固定でサイズも変えられないみたい・・・

これは確認出来ているわけじゃないんですけど、少なくともいまのワタシには無理です。

それで一応、Hatena Blogでワタシのように始めたばかりの人が、見出し変えたいとおもったらつかえるように。

まだHTMLを貼付けることが出来る仕様になっていないので、変な空白がないってしまうので注意してください。

それでも、カスタマイズでCSSにひとつひとつ試せば、無理なくHatena BlogのCSSをあなたも変更できます。

/* 日付の位置を変える */
.entry-header .date {
position: relative;
left: 0px; }
/*編集ボタン位置を変える */ .entry-header-menu a {
top: 4px;
left: 120px;
}
/*タイトル文字サイズ */
.entry-title{
font-size: 200%;
margin:10px 0px;
padding:0 0 3px 0px;
}
/*本文文字サイズ*/
.entry-content{
font-size: 120%;
}
/*大見出し文字サイズ*/
h3{
font-size: 160%;
margin:10px 0px;
padding:0 0 3px 15px;
border-left:15px solid #356cc4;
}
/*中見出し文字サイズ*/
h4{
font-size: 145%;
margin:8px 0px;
padding:0 0 3px 10px;
border-left:10px solid #356cc4;
}
/*小見出し文字サイズ*/
h5{
font-size: 130%;
margin:8px 0px;
padding:0 0 3px 10px;
border-left:6px solid #356cc4;
}

いっぺんに変更してしまうとどこを直したのか混乱するので注意が必要です。

Hatena Blogで一応はCSSを変更できて、今度は本文の幅の調整とかしてみたいと思ってます。

Blogger 面白主義　　　　　　　　　　　　★★★★★ではブログ本文にHTMLの記述を挿入する方法には成功しているんですけどねぇ・・・