HTML・CSSスマホ版を作るにあたり、アイコンにもこだわりました。こだわった、といってもデザインとか、ではなく従来と違う画像を表示することなんですけどね。ブログのアイコンを設定で変えたら済むんですけど、ブログアイコンはファビコンやお気に入りのロゴとかになるので、今までのを使いたい。いったワガママを実現するために奔走した記録なのですが、もしよろしければご参考にしてください。現在はスマホ版表示は設定していませんので、画像等の確認はできません。スポンサーリンクフォトライフを使った方法はてなで画像を使う場合まず思いつくのがフォトライフです。フォトライフを使った方法は、もっとも簡単でポピュラーな方法だといえます。その中でも1番手軽な変更方法はCSSを使ったものです。一例をあげれば、こんなCSSです。要素に幅と高さを指定し、背景として画像をURLを指定して設置しています。本来あるアイコンは、消しておくことを忘れないようにしてくだ。他にはJavaScriptを使った方法があります。例としては次のようなスクリプトです。'画像のURL';この方法は従来あるアイコンのimg要素のsrc属性を、スクリプトを使って任意の画像に書き換えています。できるだけ早く動作させたほうがいいので、アイコンに最も近い部分にHTMLを記述するのがいいでしょう。*1ちなみに、この程度ならJavaScriptだけで良いと思うのですが、ブログにjQueryを導入している場合、jQueryを使ったほうがシンプルかつ可読性よく書けます。jQueryいろんな指定方法がありますが、1つあげればこんなコードです。'画像のURL');はてなブログを使っていると画像関係は、使い慣れているフォトライフがやはり使いやすいです。設置してみたら分かりますがフォトライフは表示されるまで若干時間がかかります。1、2秒程度かな?これはCSS・JavaScriptどちらでも同様で、CSSは全スタイルが読み込まれた後、JavaScriptは要素が変更したのち読み込み直され、その後に画像が表示されるためだと思われます。どちらにしてもタイトルが表示させるまでにタイトルとアイコンに若干のタイムラグが生じます。これは仕様なのでどうすることもできません。数秒にも満たない差なので気にしなくても良いかもしれないですが、わたし自身はこの表示がずれることが気になりました。試してみた、という経緯に繋がるのですが...。インラインイメージを使う方法ここから『他に作ったはてなブログのアイコンを使う方法』や『SVGを設置してアイコンとして使う方法』などいろいろ試したのですが、現在はbase64を使ってインラインイメージで表示するを採用しています。現在は違う方法で表示しています。詳しくは下記の追記にて。URIスキームを使ったもので、非常に、簡単に、ざっくりと言えば、PNG画像を文字データにしてHTMLやCSSに直接埋め込む方法です。詳しくはこちらをご参考ください。Developers.IO埋め込み方は簡単で、まず1画像をbase64に変換し、その後2HTMLに埋め込むという方法でおこないます。利点としては画像のHTTPリクエストが減るということが挙げられます。埋め込んでいるので画像をサーバーからロードする必要が無くなるのです。欠点としてはキャッシュに保存されない、変換すると容量が確実に増えるなどがあげられます。容量の増加は画像にもよりますが、増えるものなら3倍以上増えることもあるそうです。簡単ではありますが、埋め込み方を説明していきます。画像をbase64に変換まず画像をbase64形式に変換します。変換方法はいろいろあって、ターミナルやコマンドプロンプト、Chromeのデベロッパーツールでもおこなえるのですが、簡単なのはオンラインで画像をbase64に変換してくるサービスです。検索すればいろいろ出てきますが、日本語のサイトならばこちらなどで変換できます。(画像を簡単に変換)変換すると、半角英数字記号がいっぱい並んだたくさんの文字が表示されます。ツールによっては改行して出力されるものもありますが、CSSなどでは改行が含まれると表示できないブラウザがあるので、改行は取り除いて下さい。わたしのアイコンの場合、次のようなデータにエンコードされます。ちなみに1416文字(1416バイト)とあまりにも長いので一部省略しています。HTMLに埋め込むできたデータをHTMLに埋め込みます。埋め込み方はimg要素のsrc属性に指定したり、CSSのbackgroundやcontentなどで設定します。指定する際はdata:image/png;base64,といった書式を先頭に付けて下さい。url(data:image/png;base64,エンコードした画像データ);わたしのブログでいえば、JavaScriptで次のようにアイコンのimg要素を入れ替えています。'data:image/png;base64,エンコードした画像データ';まとめわたしのブログではインラインイメージを使うことによって感じていた不満が解消されました。URLスキームを使えば、SVG画像をCSSで埋め込むことができます。WEBですが、わたしのブログアイコンはSVG画像に変換すると4倍以上、圧縮しても3倍ほど容量が大きくなるので、ちょっと重たくなりすぎです。それに比べ画像圧縮したPNG画像をbase64に変換した場合、約1.4倍になります。こちらを採用しました。変換後の容量は、画像の大きさやデザインによっても変わりますので、場合によってはSVGなどのほうが容量が少なくて済みます。試してみるのがよいかと思います。このような方法は、はてなブログのように自分でHTMLを編集できない部分があるものに対して、ちょっとしたアイコンなどを設置したいとき有効に働くと思います。AMPでは使えそうな気配がします。変換すると容量が大きくなりますので使う際にはご注意下さい。)その後もいろいろカスタマイズしていたのですが、先日このような記事がホッテントリしました。blog.shibayan.jpなるほど、PNGだと圧縮してアップしても容量が増えるのですね。確認したら増えてました。思い試しにGoogleフォトにPNG画像をアップロードして表示させたら早かったです。画像のほうが容量が断然軽いので、こちらの表示が早ければ文句はありません。キャッシュを取ってくれるのも、ありがたい。今は、Googleフォトにアップロードした画像を使ってアイコンを表示させています。スポンサーリンク*1:ベストな場所はデザイン設置の【ヘッダ】にある【タイトル下】の記述部分です。width属性とheight属性とがあります。sizes属性というものがあります。srcset...2017-08-06リストのマーカーをCSSでカスタマイズする方法まとめHTMLでリストを作ると、自動でマーカーが付きます。はてなブログPro冬眠しないタヌキ。プロフィールはこちら。わたしと納豆ごはんスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。