はてなブログの見た目をカスタマイズ

はてなブログはそのままじゃシンプルすぎるので、少し改造してみました。
まず、デザインテーマを「ace」に変更。
デフォルトのテーマは文章の表示幅が狭くて、改行が変になるなーと思ったので。

そこからさらに変更を加えました。
変更する場所はメニューの、デザイン→カスタマイズ→デザインCSSのところ。
クリックすると文字入力画面が出てくるので、そこにcssを書き込んでいきます。

背景画像をいれた


背景画像はbg-patterns様より
画像は「はてなフォト」にアップしてそのアドレスを指定しました。
body{
background-image: url(画像のURL); 
background-repeat: repeat;
background-color:transparent;
background-attachment: fixed;
background-position: left top;}

 

見出しを目立つように変更


見出しの左横に画像をつけて、見出しの下には点線をつけました
h3が大見出し、h4が中見出し、h5が小見出しです
h4 {
background: url(画像のURL) no-repeat left center;
padding: 5px 35px; 
border-bottom: 1px dashed #65a4b0;
}

文字に勝手に張られるリンクを目立たなくする


a.keyword {
border: 0 !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: default;
}

記事のタイトルに背景色をつけ、角は丸くする


.entry-title{
background: #f3f3f3;
border-radius: 40px;
padding:20px 0px 10px 0px;
}


それから、ブログ村へのアイコンも素材を使って変更しました。
可愛い鳥のアイコンはmoon cat様よりお借りしました。


どうだろう、少しは可愛くなったかなあ?
スマホでの見た目も変えたいけど、それは有料会員じゃないとできないんだよなあ。

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ