(cache) はてなブログでちょっとおしゃれに枠線と背景色を表示するカスタマイズ

f:id:tsubasa123:20170112172608j:plain

こんにちは、つばさ（@tsubasa123）です。

先日、下記の記事が目に止まりました。私もちょっとだけ便乗してみようと思います。

www.carameltrip.com

Bootstrapってご存知ですか？

WEBの世界を覗いたことがある方ならご存知だと思います。CSSフレームワークと呼ばれるもので、ファイルを読み込んで決められたルールに従ってHTMLを記述するだけでそこそこオシャレなデザインを提供してくれるすごいやつです。

最低限のHTMLの知識は必要かもしれませんが、デザインを学んだことがない人、または苦手な人でも最低ラインの見栄えをゲットできるようになります。ちなみに開発元はみんな大好きTwitter社です。なんとなくTwitterっぽいデザインになると思ってもらえればOKです。昔は「Twitter Bootstrap」と呼んでいたのですが、いつの間にか「Bootstrap」に変わったようです。

はてなブログに入れちゃおう

冒頭で紹介した記事では丸ごと導入されていました。確かに広告のレスポンシブ対応とかグリッドレイアウトが使えると捗りそうな気がします。

導入方法と広告の貼り方に関しては先の記事で詳しく説明されていますのでそちらをご覧ください。

私的にはAlertsが使いたい

私もBootstrapのデザインで、枠と背景をつけて特定の文字を目立たせる装飾は使いたいと思っていました。はてなブログには標準ではついていないみたいなんですよね。

parsetreeさんのように丸ごと読み込んでもよかったのですが、今後ブログを魔改造する際にBootstrapと干渉すると都合が悪いので欲しい部分だけ抜き出すことにしました。

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

上記のCSSをカスタマイズに追加して、

<div class="alert alert-success">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</div>
<div class="alert alert-info">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</div>
<div class="alert alert-warning">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</div>
<div class="alert alert-danger">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</div>