2015-12-06

06 版

はてなブログには標準で読み込まれるアイコンフォントがあり、クラス等を指定すれば誰でも使えることは以下の記事で以前から知っていたのですが、なんとなく CSS を見ていたら使えるアイコンの数が以前よりかなり増えていることが分かったのでメモしておきます。

bulldra.hatenablog.com

2015-12-05

はてなブログで「タイトル画像」を設定する時のテクニック

ブログカスタマイズはてなブログ

はてなブログの「タイトル画像」機能はオプションが少なく、せっかく設定しても意図した通りの表示にならないケースが少なくありません。今回はそんなタイトル画像機能の不満を解消するテクニックを数点掲載します。

2015-12-03

コピペで使える URL を書くだけでアイコンが表示される SNS フォローボタン5種

ブログカスタマイズはてなブログ

ブログの購読率向上のために、記事の下やサイドバーに表示するアイコン付き SNS フォローボタンの HTML って、こんな感じで書かれていることが多いと思います。

よくあるパターン1

<ul class="follow-me">
    <li><a href="https://twitter.com/hogehoge"><i class="fa fa-twitter"></i></a><li>
    <li><a href="https://www.facebook.com/hogehoge"><i class="fa fa-facebook"></i></a></li>
    <li><a href="https:/plus.google.com/hogehoge"><i class="fa fa-google-plus"></i></a></li>
</ul>

<a> の中にアイコンフォントの表示タグを書くパターンです。アイコンフォントの表示タグ <i> の Class 名は FontAwesome の場合です。

よくあるパターン2

<ul class="follow-me">
    <li><a href="https://twitter.com/hogehoge" class="twitter"></a><li>
    <li><a href="https://www.facebook.com/hogehoge" class="facebook"></a></li>
    <li><a href="https:/plus.google.com/hogehoge" class="google-plus"></a></li>
</ul>

<a> に表示するアイコンの Class を設定して、擬似要素で表示するパターンです。

個人的にですが、このよくある書き方は a タグの中に要素が増える、表示するアイコンの Class を個別に指定しなければいけないという不満と手間を感じます。そこで、属性セレクタを活用した URL を書くだけでアイコンが表示される SNS フォローボタン を5種類作ってみました。

2015-11-30

はてなブログで記事の画像を開いたときの見た目をカスタマイズする

ブログカスタマイズはてなブログ

画像1

画像2

はてなブログでは、記事に貼り付けられたはてなフォトライフの画像はクリックすると画像2のように lightbox 風に開かるけども、lightbox 風に画像を開くならその背景（オーバーレイ）色は白より黒の方がより画像が映える気がするので、例によって CSS で色を変えてみようかと思います。

CSS

#colorbox,
#cboxOverlay,
#cboxWrapper {
    overflow: visible;
}
#cboxOverlay {
    background-color: #000;
    opacity: 0.85 !important;
}
#colorbox #cboxContent,
#colorbox #cboxContent #cboxLoadedContent {
    background-color: transparent;
    overflow: visible !important;
}
.cboxPhoto {
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
}

12/03 一部修正

背景（オーバーレイ）の色を白（#fff）に指定していたのは #cboxOverlay の background-color で、これを #000 に変えます。opacity はその透明度です。標準の 0.9 だと濃すぎたので 0.85 に下げました。

また「lightbox」感を向上させるために box-shadow で画像に影を付けます。各要素に overflow: visible を指定している理由は、これを指定しないと画像の親要素の外側に影が広がらないためです。

結果

f:id:waitingmoon:20151130121011j:plain

「lightbox といえば」な見た目になって満足。やっぱり白より黒だろう…！あ、一応書いておくとスクリーンショットに使ったブログはテーマの製作用として使っている非公開のブログです。

2015-11-28

line-height と padding の関係

Webデザイン

記事やサイドバーの見出し、あるいはボタンなどに上下左右均等に余白を取りたいとき、例えば padding: 10px と指定しても妙に上下方向だけ伸びていることがあるが、これは余白を指定した要素に含まれる文字が親要素に指定された line-height の影響を受けているためだ。

body {
    line-height: 1.5;
}
button {
    background-color: #eee;
    color: #333;
    font-size: 16px;
    padding: 10px;
}

例えば、上記のようにfont-size: 16px のテキストを含むボタンが line-height: 1.5 を継承した場合、このテキストには {(16px * 1.5) - 16px} / 2 = 4pxの余白が上下に割り振られるため、表示されるボタンの余白は padding: 14px 10px のように見えてしまう。

すなわち、この要素に上下均等に余白を取るには上下方向の余白に左右方向より 4px 小さい値を指定しなくてはいけない。

body {
    line-height: 1.5;
}
button {
    background-color: #eee;
    color: #333;
    font-size: 16px;
    padding: 6px 10px;

…最も、日本語サイトでは body の line-height は 1.7 前後が多く、この例のように左右方向から引く値が単純明快な値になるケースは少ない。左右から何px 引いた値を指定するのが正解かはとても分かりにくいのである。そういう場合は em（相対値）が便利だ。

body {
    line-height: 1.7;
}
button {
    background-color: #eee;
    color: #333;
    font-size: 16px;
    padding: 0.65em 1em;
}

em（相対値）で上下左右均等な余白を指定する場合、上下方向の余白は左右方向から (line-height - 1) / 2（小数点以下の半分）を引いた値を指定する。

この指定の場合、テキスト上下の余白は {(16px * 1.7) -16} / 2 = 5.6px となり、ボタンの上下方向の余白は 16px * 0.65 = 10.4px、ボタンの左右方向の余白は 1em = 16px となり、padding: (10.4 + 5.6)px 16px で上下均等になる。

応用

body {
    line-height: 1.7;
}
button {
    background-color: #eee;
    color: #333;
    font-size: 16px;
    padding-top: calc(16px - (((1em * 1.7) - 1em ) / 2));
    padding-left: calc(16px * 1.618);
    padding-right: calc(16px * 1.618);
    padding-bottom: calc(16px - (((1em * 1.7) - 1em ) / 2));
}

CSS3 の calc() を使い、基準値から黄金比（1:1.618）な余白を指定してみた。基準値は 16px とした。