レポ記事を書くにあたり、オモコロアイコンジェネレーター さんを使った「顔アイコンでの会話形式」に挑戦してみました。前々からやってみたかったので。
画像の作成から記事への設定まで、実践して初めてわかったことをまとめます。
大まかなポイントは3つ。
- アイコン画像はPCで作る
- 200pxで作成し100pxに縮小
- 文章は下寄せで入る
最初はiPhoneで作りましたが、できた画像がカメラロールに保存されない！pngが「ファイル」に入ってしまい手間なので、結局PCで作り直しています。
アイコン画像を作る際の細かい設定はこちらを参考にしました。
ブログとかWEB記事を書くときに便利な「顔アイコン」を作れるジェネレーターです。
— かまど (@comi_kamado) 2020年12月11日
僕はいつもこの辺りを意識して100×100pxで作っています。
▼オモコロアイコンジェネレーター https://t.co/Dym4IFcFBS pic.twitter.com/LyR48Z1Rq3
保存した画像をはてなの編集画面に貼り付け、サイズを調整して文字を入れます。
実際にやってみるとこんな感じ。
最初は100×100pxの画像を配置しましたが、記事の編集画面で見ると微妙に画質が悪い。一旦200×200pxで保存し、編集画面上で縮小すると綺麗にできました。
編集画面をキャプチャして作った比較画像がこちらです。
またアイコンに対して文章が下寄せになるのが気になりましたが、これは本家でもその仕様でした。（確認するために座談会記事を読んだ）今までにも記事を読んで目にしていたのに、自分で作ってみて初めて意識した！
次に「普段、はてなブログの設定で画像に枠をつけている」場合。
はてなのデザイン設定内「カスタマイズ」の「デザインCSS」に以下を設定することで、画像にグレーの枠線をつけています。（スマートフォンでの表示はデフォルトを使用しているので、PC版のみ）
/* 画像の枠線 */
img.hatena-fotolife {
border:1px #4d4d4d solid;
}
ブログ開設時に調べて設定したCSSなので、「フォト」のスペルを間違えていた！？と動揺しましたが、サービス「はてなフォトライフ」の正式な表記が"fotolife"でした。
はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました - はてなブログ開発ブログ
他の画像には枠線をつけたままにしつつ、顔アイコンに対しては枠線を外したい。
それについては記事にアイコン画像を配置後「HTML編集」モードを開き、アイコン画像に対する記述から枠線を指定している箇所を削除することで解決しました。
<img class="hatena-fotolife" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/xxx/202212xx/202212xxxxxxxx.png" border="0" title="" width="100" height="100" loading="lazy" />
以上！顔アイコンを使った記事作りの参考になれば幸いです。
