はてなブログをコピペでカスタマイズする その2

ここ2・3日頭痛のおさまらないがちゃまにあです。どーもこんばんは。
歯から来てるのか、眼精疲労なのか、風邪なのか。
どれも怪しいので頭痛薬でしのいでます。
ノロやインフルも流行ってるようだし、みなさまお気をつけください。

はてなブログをコピペでカスタマイズする その1 - がちゃまにあ日報

この記事、すごい凡ミスがあります。
記事の中程、色の表記方法の説明の件で「16進法で書かれているものを2進法に直す必要がある」とか書いちゃってるけど、どう考えても2進法じゃなくて10進法だよね。アホか私は。
記事訂正したいんですが、編集するとまた言及通知飛んじゃうしなあとか思ってできません。
はてなさん、これはほんとに早急に改善して!

では、今日は続き書こうと思います。

前記事からの変更点

「チカチカして見づらい」とのブコメがあったので、改善すべくデザインを変更した。
まず背景画像の変更。CSSではなく画像本体を加工した。
タイトルも文字から画像にした。白地に文字だけだと味気ない気がして作ってみたのだが、ちょっと鬱陶しいかもしれない。
これに合わせて文字色と背景色も変えた。

タイトル画像の指定は「デザイン設定」「カスタマイズ」タブにある「ヘッダ」で行った。
画像のサイズは縦200px、横1100pxで作ってある。
「デザインCSSに以下のように記述した。

#blog-title-inner{
    margin:0px;
    padding:0px;
    width:1100px;/*画像の幅に合わせる*/
    height:200px;/*画像の高さに合わせる*/
    background-repeat:no-repeat;
    background-size:cover;
}

#blog-title{
    background-color:#000;
    height:200px;/*画像の高さに合わせる*/
    margin:0px;/*0にしないと変な余白ができる*/
    padding:0px;
}

「#blog-title」でmarginとpaddingの設定をしないと変な余白ができてしまう。
これを直そうといろいろ試したのだがうまくいかなかったので、chromeに「firebug lite」という拡張機能を入れて調べたら即解決。
1時間以上いじってたのが嘘のよう。最初から入れておけばよかった。

記事部分の変更

さて、つぎはメインとなる記事部分である。
記事タイトルのサイズと書体、背景色、文字色、リンク文字色などがいじってある。

/*本文について*/
a:link{color:#09f;}/*リンク文字の色*/
a:visited{color:#a86;}/*リンク先に行ったことのある場合の色*/
a:hover{color:#0df;}/*マウスが乗っかってるときの色*/

.entry-content{
    line-height:1.8em;/*改行幅*/
    font-size:11.5pt;/*文字の大きさ*/
    margin-top:20px;/*位置調整*/
    color:#655118;/*文字色*/
    padding:15px;/*余白*/
    }

/*記事タイトル*/
h1.entry-title,h1.entry-title a:link,
h1.entry-title a:visited,
h1.entry-title a:hover{
    font-size:18pt;/*文字サイズ*/
    margin-top:15px;/*位置調整*/
    padding:30px 10px;/*余白*/
    color:#655118;/*文字色*/
    font-family:"ヒラギノ明朝 Pro W6","Hiragino Mincho Pro",
"HGS明朝E","MS P明朝", serif;/*書体*/
    }

/*記事のカテゴリ*/
.categories,.categories a:link,
.categories a:visited,.categories a:hover{
    float:right;/*右側に配置*/
    background-color:#f5f1c8;/*背景色*/
    margin-top:-8px;/*位置調整*/
}

/*タイトル左上の日付*/
.date{
    font-size:9pt;
    background-color:#f5f1c8;/*背景色*/
    margin-left:120px;/*位置調整*/
    margin-top:-5px;
}

.entry-content h2 {
    font-size:18pt;
}

/*記事内見出し はてな記法では「*」にあたる*/
.entry-content h3 {
    font-size:16pt;/*文字の大きさ*/
    color:#655118;/*文字色*/
    background-color:rgba(190,170,90,0.53);/*背景色と透明度*/
    padding: 10px 10px 10px 15px;/*余白 順に上、右、下、左*/
    border:2px solid #998552;/*枠線*/
    margin-top:40px;/*位置調整*/
    margin-bottom:15px;
    font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", 
"HGS明朝E", "MS P明朝", serif;
}

.entry-content h4 {
        font-size:14pt;
         }

/*記事の幅*/
.entry-inner{
    width:630px;/*幅*/
    margin-left:-60px;/*位置調整*/
    }

/*記事右の縦線*/
#main{
    border-right:2px solid #998552;
    }

/*記事全体の位置調整*/
#wrapper{
    width:650px;
    padding:0px;
    margin:0px;
    }

たくさん書いてあるように見えるが、そのほとんどは前回の記事で書いたことを数値を変えて別の部分にも設定しているだけである。
padding、margin、color、width、border、fontなどが大部分を占めているはずだ。
細かい説明は「はてなブログをコピペでカスタマイズする その1 - がちゃまにあ日報」参照。

サイドバーの変更

サイドバーは幅と文字色を変更し、「最近の記事」と「良く読まれている記事」、「がちゃまにあ作品部屋へのリンク」を貼ることにした。
まずはCSS

/*サイドバー全体の設定*/
#box2{
    float: right;
    width:350px;/*サイドバーの幅*/
    padding:10px;
}

/*モジュールについての設定*/
.hatena-module{
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;/*はみ出た部分は隠す*/
}

/*モジュールのタイトルに関する設定*/
.hatena-module-title{ 
    background-color:rgba(190,170,90,0.53);/*背景色、透明度*/
    font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro",
"HGS明朝E", "MS P明朝", serif;/*書体*/
    border:2px solid #998552;
    padding:10px 20px;
    font-size:16pt;
    font-weight:bold;/*文字の太さ*/
    color:#655118;
}

/*「最近の記事」などの下部にあるリンク文字の設定*/
.hatena-module-title2{ 
    font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", 
"HGS明朝E", "MS P明朝", serif;
    float:right;
    margin-top:15px;
    font-size:10pt;
    color:#655118;
}

「最近の記事」と「良く読まれている記事」に関しては、こちらを利用させていただいている。

はてなブログの人気記事を画像付きで表示させるコードを作るやつ。 - #ChiroruNote

設置方法は簡単。
「カスタマイズ」タブの「サイドバー」「HTML」モジュールを追加する。
その中に、HTML/JS欄に生成されたコードをコピペ。
そして「デザインCSS」にCSS欄に生成されたコードをコピペすれば完了。

「最近の記事」も設置方法はほとんど同じである。
コードはこのページで生成できる。

はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote

こうやって自分ができないことを誰かがしてくれるのは本当にありがたい。
CSSはほぼコピペしたままなので省略。

「がちゃまにあ作品部屋へのリンク」は「カスタマイズ」タブの「サイドバー」に「HTML」モジュールを追加し、そこに以下のように該当ページへのリンクを貼っただけである。

[http://gachamaniaworks.hatenablog.com/entry/2014/01/15/225722:image]
[http://gachamaniaworks.hatenablog.com/entry/2014/01/13/002057:image]
<br><br>
<div class="hatena-module-title2">
<a href="http://gachamaniaworks.hatenablog.com">その他の作品はこちら</a>
</div>

トラックバックも表示させてみる

フッターには池田仮名さん作のトラックバックを付けた。
もっとも、私のブログは滅多に言及通知されないのであまり表示されることはないかもしれないのだが(笑)
これを設置しておけば、言及通知来たものもシェアできるようになる。

はてなブログにトラックバック機能を拡張するウィジット(スマホ対応) - 情報学の情緒的な私試論β

「カスタマイズ」タブの「記事」にある「記事上下のカスタマイズ」にコードをコピペし、自分のブログのURLを入れれば設置できる。
詳しくは記事内の解説参照。

感想

私がこのブログに関して行った変更は以上である。
非効率な設定をしている場合もあると思うのだが、私の知識ではこれが限界だ。
もうちょっときちんと勉強してみようかと思う。

今回一番驚いたのが、私が持っている株式会社アンクのCSS辞典が2002年版だったことである。
載ってない事だらけなのにもようやく合点がいった。
さすがに替え時だな・・・

CSS辞典 第5版  [CSS2/3/4対応]

CSS辞典 第5版 [CSS2/3/4対応]