散るろぐ

こころふるえる感情メディア

はてなブログのスマホ版でYahoo!オーサー風のアイコンと肩書きを表示する方法

「Yahoo!オーサー」を知ってるかな。ヤフーに記事を書いてるひとの群れなんだけど、あそこでは記事のタイトル下に、アイコンと肩書きが表示されている。


f:id:cild:20150902122157p:plain

オーサー一覧 - 個人 - Yahoo!ニュース


ね。

記事タイトルと同時に隊長のご尊顔を拝める。僕もこのデザインにひとめぼれして、自分のブログでマネしてみた。やり方は簡単だった。

<div style="border-bottom: 1px solid #000000;">
<br>
<table><tr><td>アイコンURL</td><td>名前・肩書き</td></tr></table>
<br>
</div>


これを「デザインの記事上」にコピペするだけで、Yahoo!オーサー風の筆者情報を表示できるよ。「アイコンURL」と「名前・肩書き」のところは各自で変更するように。枠線や余白を調整したいときは、こちらが参考になる。
CSS borderプロパティについてのまとめ | CSS Lecture

誰が書いたか気になる年頃

このカスタマイズのメリットはファーストビューで誰が書いたかひと目でわかること、アイコンが記憶にのこりやすいことかな。

僕はショボい肩書きだけど「投資家」とか「ファンドマネージャー」はカッコよく見せられる。

もっとも、この程度のカスタマイズは誰でもできるってのは鋭い指摘だと思う。

僕もそう思う。

だけど僕は、アイデアを評価して欲しいんだよ。

昨今のインターネットでは、何を書いたかではなく、誰が書いたかで判断されるようになってきた。

それは、検索キーワード向けの記事が増えたり、とりあえず更新するブログが増えたことにあると思う。

そしてみんな、初めて目にする記事に一抹の不安を抱くようになった。

本当にこの先を読み進める価値があるのだろうかと…。

そんなとき、誰が書いたかひと目でわかるデザインは参考になると思ったんだよ。

検索向けや、とりあえず更新の記事が悪いという訳ではなくて、単純に情報の量が増えてしまったから、アイコンと肩書きは読者の目安になるかなと。

この感じ伝わるかな。




よし、とりあえず今日も更新できたゾ。

んじゃね。