トップ > パソコン関係 > 「はてなブログ」を自分好みに変える（文字サイズ）。ファビコン画像

「はてなブログ」を自分好みに変える（文字サイズ）。ファビコン画像

パソコン関係 はてなブログ

「はてなブログ」を自分好みに変える、項目が多くなったので前記事の使用感と分けた。

文字サイズの大きさ変更

あと少し不便だなと思って、文字サイズを大きく。フォントサイズ100％に慣れていると、元のサイズが小さく感じたので（フォントサイズ14pxだった）。google推奨は16pxサイズらしい（実際の文字サイズはこんな感じ→「16pxサイズ」「14pxサイズ」「12pxサイズ」）

サイズの変え方は、一回一回投稿時に文字の大きさを変えるのもあるけど、ブログ全体から変える方法は、

デザイン → カスタマイズ → ｛｝デザインCSS

f:id:cethyan:20181007135450p:plain

entry-content {font-size:16px;}

もう一つ「デザイン → ヘッダ 」は同じで「タイトル下」を選択して、

<style type="text/css">
.entry-content {font-size:16x;}
</style>

どちらも表示できたので、どっちでも良いのかな。ズームでサイズ変更できるけど、しなくて良いならそれに越したことは無い。ミニマムはデザインとして可愛いは可愛い、けど読み難い。スマホの方も変えられるみたい、と思ったけど「デザイン → スマートフォン → ヘッダー → タイトル下」の最後の（HTMLを記述できる）所が「はてなブログProに登録するとご利用いただけます。」と無料のままじゃできなかった。

捜してみたら↓のオークニズムのサイトでスマホに適用させるには、始めのに@media（メディアクエリ。下の場合は、ブラウザの横幅が480pxのスマホとかのサイズになるとフォントサイズ16pxにしてねという記述）を付け足すと良いみたい。ただ私のスマホだと一行目のだけでスマホにも適用されていた。

デザイン → カスタマイズ → ｛｝デザインCSS

entry-content {font-size:16px;}
@media screen and (max-width: 480px){
.entry-content p {font-size: 16px;}}

文字列選択時のスタイル（色を変えたい）

「｛｝デザインCSS」の所に張り付け。このサイトでは黄色に変わる様にしています。別に要らないと言えば要らない。色の組合せによっては見辛くなるし。W3Cの仕様から外れているし。でも何か見た目が好き。薄いピンク#f5a2a2や、薄い青#9fd6d2に黒文字。濃いピンク#ff1493にや、濃い青#000080に白文字とかでも良いと思う。

::selection {background:#ffff00; color: #444;}
::-moz-selection {background:#ffff00; color: #444;}

ブログアイコンとプロフィールアイコンの設定

「設定」→「基本設定」の「ブログアイコン」で画像を設定すると、ファビコン（お気に入り登録した時の左やタブに表示される画像）とブログカード（見た目が装飾されたリンク）になる。

↑こういうの事。ブログアイコンの画像はブログタイトル左横に表示される。右の画像はアイキャッチ画像。

「アカウント設定」→「基本設定」の「プロフィールアイコン」で画像を設定すると、コメントした時に表示される画像やその名の通りプロフィール画像などに（参考、プロフィール画像とは - はてなキーワード）。

私は同じ画像を使いまわし（画像サイズは62×62にした）。自分でファビコン画像を用意しなくて良いのが楽。↓あめみかのサイトで、どれがどう反映されるか分かり易く視覚的に説明されてあった。

開発のブログで「ホーム画面にWebクリップ（ショートカット）を作成したとき」とあるけど、私のスマホではデフォルトのページ全体のスクショだった。機種によるのか。あとサイズについて気になる言葉が。そのうち変えれたら変える。

192×192ピクセルより大きな正方形の画像を使用するようおすすめしています。

「ホームアイコン」ウエブクリップアイコンの設定

スマホで「ホーム画面に追加」でホーム上に出る画像のこと。何もせずだとページ全体のスクショに。設定は、

「設定」→「詳細設定」で（下にスクロールして）「検索エンジンの最適化」の項目の中「headに要素を追加」の所に、

<link rel="apple-touch-icon-precomposed" href="画像のアドレス" />

このブログでしてみた所、画像が表示されるようになった。画像名が「apple-touch-icon.png」らしい。でも「はてなブログ」でだと名前が変わるので違うのになった。Android用もあるけど割愛。

余談：ファビコン画像（favicon.ico）について

ここでは必要ないけど、他のサイトやブログではファビコンが必要な所もあるので。どこで表示させるか（ショートカットアイコンにも使われる）表示の仕方、サイズ・アニメメーションとか色々あるけど簡単に。ファビコン画像「ico」を作る。サイズはピクセルで16×16・32×32・48×48・64×64。マルチアイコン（16と32の組合せが良いらしい）がとかある。

画像からファビコン画像を作る

正方形の画像を用意する（32×32）。無料素材のアイコンからでも。ファビコンをこのサイトで作成。

画像ファイルを選択して「favicon.ico 作成」（32×32用。色が黒で見難い）

f:id:cethyan:20181007172526p:plain

複数サイズを一つにまとめたマルチアイコンも作れるので、試に作ってみたけど、32サイズを16に縮めたのとあまり差を感じず。画像の感じにもよるみたい。凝ったのだとマルチアイコンのが良さそう。

試用に作った画像。作ったファビコンは、ファイル形式が未対応なので投稿できず。シンプルに丸や四角でも、良いと思う。

作るのが面倒ならファビコン自体を無料素材から探す。分かり易く日本語のサイトだけ（サイズは16×16）。素材は多いけど、ファビコン自体は少なく感じる。外国のサイトだと結構あった。

ファビコン画像を指定する

head要素の中に、

<link rel="icon" href="https://〇〇〇/favicon.ico" />

〇〇〇にはアドレス。これはWikipediaでの表記（これが一番簡単）。私がしているのと違うなと思い調べてみると、IE8以下の場合「shortcut」が要る。検索するとファビコン設置の説明でこちらも見掛ける。

<link rel="shortcut icon" href="https://〇〇〇/favicon.ico">

pngやgifをIE8・9でとかあるけど省略（↓の正しいfavicon設定～に詳しく）。IE10以下はico形式しか認識せず（他のは画像ファイルを認識する）。ファビコンを作ると言っておきながらなんだけど、認識されなくても良い気がするから一つめので良いと思う。

ファイル名は「favicon.ico」だと、ルートディレクトリ（ファイル階層の最上位。トップのhtmlと同じ場所）に設置しておくと指定が無くても認識される。

ファビコンの作り方の参考。