2015-12-09

はてなブログで jQuery プラグインを使うなら jsDelivr から読み込もう

はてなブログで jQuery プラグインを使うとなると、ファイルをどこに置くか？という問題に直面します。外部ファイルの呼び出し（ファイル置き場として利用すること）を許可しているサーバーは少ないですし、Dropbox や Github を使うのもなんだかなあという感じ。そんな時は jsDelivr から読み込むのがおすすめです。

2015-12-06

はてなブログで使えるアイコンフォント一覧 2015/12/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 を指定している理由は、これを指定しないと画像の親要素の外側に影が広がらないためです。