コピペで使える 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種類作ってみました。

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

画像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 を指定している理由は、これを指定しないと画像の親要素の外側に影が広がらないためです。

結果

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

line-height と padding の関係

記事やサイドバーの見出し、あるいはボタンなどに上下左右均等に余白を取りたいとき、例えば 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 とした。

• 上下方向…基準値から line-height によって発生する余白を取り除く
• 左右方向…基準値（1）を 1.618 倍する

1.618 を 2.414 に変えると白銀比に、3.303 に変えると青銅比になったりする。

はてなブログのグローバルヘッダーの高さは User Agent で変わる

はてなブログのグローバルヘッダーの高さは、User Agent に Mobile が含まれている時（スマホ閲覧時）とそうでない時（タブレットあるいはPC閲覧時）でそれぞれ 44px と 37px に変わるので、スマホでもそれ以外でも常に画面上部に固定する場合はめり込みを防止するためのコンテンツの表示開始位置を調整する余白を調整しなくてはならなかった。

はてなブログの body には、どの機能を使っているか、どのページを表示しているかで様々な Class が付与されるみたいなのでそれを利用する。

Class	付与
.page-index	インデックスページ
.page-archive	アーカイブページ、検索結果
.page-archive-category	アーカイブページ（記事部分 - 記事タイトル下のカテゴリーリンクから）
.page-category-category_name	カテゴリーページ（サイドバー - 最新記事、人気記事モジュールのカテゴリーリンク、カテゴリーモジュール）
.header-image-enable	タイトル画像-画像とテキストを表示を使用する
.header-image-only	タイトル画像-画像だけ表示を使用する
.enable-top-editarea	タイトル下のカスタマイズを使用する
.enable-bottom-edit-area	フッター上のカスタマイズを使用する
.globalheader-off	有料プラン-ヘッダとフッタを表示しないを有効化する
.browsing-with-smartphone	User Agent に Mobile を含むデバイス（スマホ）でブログを訪問する

スマホ未対策、PC対策済

#container {
    margin-top: 37px;
}
.globalheader-off #container{
    margin-top: 0;
}

公式テーマの CSS を覗いたらこんな感じで対策していた。スマホ閲覧時はグローバルヘッダーの高さが 44px に増えるため、44px - 37px = 7px 分コンテンツがグローバルヘッダーの下にめり込んでしまう。

スマホ対策済、PC対策済

#container {
    margin-top: 37px;
}
.browsing-with-smartphone #container {
    margin-top: 44px;
}
.globalheader-off #container{
    margin-top: 0 !important;
}

スマホ未対策版にスマホ閲覧時を示す body の class browsing-with-smartphone を用いた #container の margin-top 指定を追加した。.globalheader-off の指定は優先度の不安があるので 念のため important に。

スマホ対策済、PC対策済（個人仕様）

body {
    padding-top: 37px;
}
body.browsing-with-smartphone {
    padding-top: 44px;
}
body.globalheader-off {
    padding-top: 0 !important;
}

余白を取るという意味では公式テーマと変わらないけれど、余白を指定したい要素を行の左端に揃え、階層を浅くし、可読性 etc を向上させてみたバージョン。ただし body に padding を指定するという気持ち悪さはある。

四ヶ月連続更新、だけど

photo by photosteve101

3月中旬に WordPress から移行してから今日まで毎日更新を続けてきたのだけれど、7月に入ってから暑さや湿気でいつも以上に家にこもる生活が続き、ゲームやガジェット関連のニュースを引用してなんとか更新を続けるという「ブログに縛られる」状態に陥ったため、本日 7/18 の更新をもって当ブログは不定期更新に移行します。

今日の出来事は父が床屋からの帰り道に財布を失くしてあらゆるカードの利用停止手続きに追われていたくらい。