読者です 読者をやめる 読者になる 読者になる

ばさのーと

つばさの日常を綴るのーと

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

ブログ ブログ-カスタマイズ

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>

 

このようにHTMLを記述すると、

 

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

 

こんな見た目になります。素晴らしい!

 

色はお好みで変更することもできますので、ご利用中のテーマに合わせて調整してもいいかもしれません。

 

さいごに

 

Bootstrapすごいよ、って紹介記事でした。タイトルにカスタマイズと入れちゃいましたが、今回はBootstrapの一部を拝借しただけです。若干手抜きですがたまにはね。

 

Bootstrapでは他にもたくさんの機能が提供されていますので興味のある方は公式サイトをご覧ください。フォントアイコンとかはちょっと見出しをオシャレにしたりする際に使うと便利ですよ。

 

getbootstrap.com

 

ではでは、最後までお付き合いいただきありがとうございました。