はてなブログをカスタマイズ① - やる気のないやる気

公式テーマのReachってテーマを使ってたけど枠線で囲まれてる割に見辛い（表示領域が少なすぎる）のもあって表示の変更してみたからメモ

1.Yunomiってブログテーマをインストール（↓のリンク、作者のアイコンかわいい）

2.CSSの設定①

サイズを指定してサイドバーを少し狭く、文字も小さめに（どうせあんま見ないだろうと判断）

/** 全体サイズ設定 */
#container {
width: 960px; /* 全体の幅 */
margin: 0 auto; /* 真ん中に表示 */
}
#wrapper {
width: 680px; /* 記事部分の幅 */
float: left; /* 記事を左に表示 */
}
#box2 {
width: 280px; /* サイドバーの幅 */
float: right; /* サイドバーを右に表示 */
font-size: 14px; /* 文字の大きさ */
}

3.CSSの設定②

記事のタイトルをわかりやすく区別

/** タイトル部分 */
.entry h1{
padding:10px;
background: #DDDDDD;
border-left:10px solid #212121;
}

こんな感じで背景色を変えて左側に線を引いた

4.CSSの設定③

テーマを変えたらなんかスターの吹き出しと下の吹き出しが被ってダサいから吹き出しを消した

/** スターの吹き出し */
.star-navigation-tooltip{
    display: none;
}

5.CSSの設定⑥（記事末尾の名前、IDと投稿時間を削除）

どうせ俺しか書かないしこれ要らないだろ…(´・ω・`)

/** 名前、時間削除*/
.entry-footer-section {
display: none;
}

6.ブログタイトルとメインのコンテンツの間に区切り線を入れた

<p style="border:5px double #dddddd;width90%;"></p>

7.関連記事の表示

LinkWithin（LinkWithin - Related Posts with Thumbnails）とかいうサービスで簡単に関連記事を表示できるらしいから表示してみた。
メールアドレスとURL、プラットフォーム（otherを選択）するだけの簡単設定
入力したら↓が表示されるからはてなブログの設定にコピペするだけ

<script>
var linkwithin_site_id = ;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

（サイトIDは消した）
「You might also like」って文字は変えられるらしいけど別に英語でも何が書いてあるかは大抵の人にはわかるし日本語にするよりなんかかっこ良く見える気がするから変えない

とりあえずこんなところで様子見てみようかな本気出したらキリがなさそうだし…
ってここまで書いてようやく変更前の画面のスクリーンショット撮ってないことに気づいた
劇的びふぉーあふたー出来ないじゃん(´・ω・`)