はてなブログのスマホ版アイコン画像をフォトライフやインラインイメージを使って変える方法

スマホ版を作るにあたり、アイコンにもこだわりました。

こだわった、といってもデザインとか、ではなく従来と違う画像を表示することなんですけどね。

ブログのアイコンを設定で変えたら済むんですけど、ブログアイコンはファビコンやお気に入りのロゴとかになるので、今までのを使いたい。だけど、スマホ版は変えたい。

といったワガママを実現するために奔走した記録なのですが、もしよろしければご参考にしてください。

【2020年2月19日追記】
現在はスマホ版表示は設定していませんので、画像等の確認はできません。

フォトライフを使った方法

はてなで画像を使う場合まず思いつくのがフォトライフです。

フォトライフを使った方法は、もっとも簡単でポピュラーな方法だといえます。

その中でも1番手軽な変更方法はCSSを使ったものです。

一例をあげれば、こんなCSSです。

.header-blog-icon a {
    background-image: url( 画像のURL );
    background-size: 78px;
    display: inline-block;
    height: 78px;
    width: 78px;
}
.header-blog-icon img {
    display: none;
}

アイコン画面を囲んでいる a 要素に幅と高さを指定し、背景として画像をURLを指定して設置しています。

本来あるアイコンは、消しておくことを忘れないようにしてくだ。

他にはJavaScriptを使った方法があります。例としては次のようなスクリプトです。

document.getElementById( 'header' ).getElementsByTagName( 'img' ) [0].src = '画像のURL';

この方法は従来あるアイコンのimg要素のsrc属性を、スクリプトを使って任意の画像に書き換えています。

できるだけ早く動作させたほうがいいので、アイコンに最も近い部分にHTMLを記述するのがいいでしょう。*1

ちなみに、この程度ならJavaScriptだけで良いと思うのですが、ブログにjQueryを導入している場合、jQueryを使ったほうがシンプルかつ可読性よく書けます。

jQueryいろんな指定方法がありますが、1つあげればこんなコードです。

$( '.header-blog-icon img' ).attr( 'src', '画像のURL');

はてなブログを使っていると画像関係は、使い慣れているフォトライフがやはり使いやすいです。

ただ、設置してみたら分かりますがフォトライフは表示されるまで若干時間がかかります。おそらく1、2秒程度かな？

これはCSS・JavaScriptどちらでも同様で、CSSは全スタイルが読み込まれた後、JavaScriptは要素が変更したのち読み込み直され、その後に画像が表示されるためだと思われます。

どちらにしてもタイトルが表示させるまでにタイトルとアイコンに若干のタイムラグが生じます。これは仕様なのでどうすることもできません。

まあ数秒にも満たない差なので気にしなくても良いかもしれないですが、わたし自身はこの表示がずれることが気になりました。なので色々試してみた、という経緯に繋がるのですが…。

インラインイメージを使う方法

ここから『他に作ったはてなブログのアイコンを使う方法』や『SVGを設置してアイコンとして使う方法』などいろいろ試したのですが、~~現在はbase64を使ってインラインイメージで表示するを採用しています。~~現在は違う方法で表示しています。詳しくは下記の追記にて。

このインラインイメージとはdata URIスキームを使ったもので、非常に、簡単に、ざっくりと言えば、PNG画像を文字データにしてHTMLやCSSに直接埋め込む方法です。

詳しくはこちらをご参考ください。

埋め込み方は簡単で、まず①画像をbase64に変換し、その後②HTMLに埋め込むという方法でおこないます。

利点としては画像のHTTPリクエストが減るということが挙げられます。直接埋め込んでいるので画像をサーバーからロードする必要が無くなるのです。

欠点としてはキャッシュに保存されない、変換すると容量が確実に増えるなどがあげられます。容量の増加は画像にもよりますが、増えるものなら3倍以上増えることもあるそうです。

では簡単ではありますが、埋め込み方を説明していきます。

① 画像をbase64に変換

まず画像をbase64形式に変換します。

変換方法はいろいろあって、ターミナルやコマンドプロンプト、Chromeのデベロッパーツールでもおこなえるのですが、簡単なのはオンラインで画像をbase64に変換してくるサービスです。

検索すればいろいろ出てきますが、日本語のサイトならばこちらなどで変換できます。

変換すると、半角英数字記号がいっぱい並んだたくさんの文字が表示されます。ツールによっては改行して出力されるものもありますが、CSSなどでは改行が含まれると表示できないブラウザがあるので、改行は取り除いて下さい。

わたしのアイコンの場合、次のようなデータにエンコードされます。ちなみに1416文字（1416バイト）とあまりにも長いので一部省略しています。

iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAMAAADxhdbJAAAAclBMVEVHcExJS1BJS1BJS1BJS1BJS1BJS1BJS1BJS1BJS1BJS1BJS1BJS1BJS1BJS1BJS1BJ…（省略）…/0FtSHjzu9XVckAAAAASUVORK5CYII=

② HTMLに埋め込む

できたデータをHTMLに埋め込みます。

埋め込み方はimg要素のsrc属性に指定したり、CSSのbackgroundやcontentなどで設定します。

指定する際はdata:image/png;base64,といった書式を先頭に付けて下さい。

例えばbackgroundで指定する場合は、次のようなCSSにします

background-image: url(data:image/png;base64,エンコードした画像データ);

わたしのブログでいえば、JavaScriptで次のようにアイコンのimg要素を入れ替えています。

document.getElementById('header').getElementsByTagName('img')[0].src = 'data:image/png;base64,エンコードした画像データ';

まとめ

わたしのブログではインラインイメージを使うことによって感じていた不満が解消されました。

ちなみにこのdate URLスキームを使えば、SVG画像をCSSで埋め込むことができます。

参考リンク：

ですが、わたしのブログアイコンはSVG画像に変換すると4倍以上、圧縮しても3倍ほど容量が大きくなるので、ちょっと重たくなりすぎです。

それに比べ画像圧縮したPNG画像をbase64に変換した場合、約1.4倍になります。なのでこちらを採用しました。

変換後の容量は、画像の大きさやデザインによっても変わりますので、場合によってはSVGなどのほうが容量が少なくて済みます。なので、いろいろ試してみるのがよいかと思います。

このような方法は、はてなブログのように自分でHTMLを編集できない部分があるものに対して、ちょっとしたアイコンなどを設置したいとき有効に働くと思います。

特にAMPでは使えそうな気配がします。ただし変換すると容量が大きくなりますので使う際にはご注意下さい。

追記（2017年7月7日）

その後もいろいろカスタマイズしていたのですが、先日このような記事がホッテントリしました。

blog.shibayan.jp

なるほど、PNGだと圧縮してアップしても容量が増えるのですね。確認したら増えてました。

フォトライフでの表示が遅いのはこのせいかな？と思い試しにGoogleフォトにPNG画像をアップロードして表示させたら早かったです。

画像のほうが容量が断然軽いので、こちらの表示が早ければ文句はありません。キャッシュを取ってくれるのも、ありがたい。

なので今は、Googleフォトにアップロードした画像を使ってアイコンを表示させています。

*1:ベストな場所はデザイン設置の【ヘッダ】にある【タイトル下】の記述部分です。

わたしと納豆ごはん

納豆、Web、雑記など