このブログではタイトルの右側に、mixiチェック、Tweetボタン、はてブに追加するボタンなどのソーシャルブックマークアイコンを表示していますが、このアイコンが幅を取ると、長いタイトルが改行されてしまうというのが気になっていました。
そこでアイコンを正方形のものに置き換えて、タイトルを表示するスペースを少し広くすることにしました。
参考にしたのはこちらの記事。
ただ、この記事で紹介されているのはMovable Typeに埋め込む方法なので、変数名などをNucleus用に置き換えなくてはなりません。
しかしNucleusで利用できる変数は少なく、対応するものが見付からなかったので、専用のプラグインを作ることにしました。それなら環境変数をプログラムで処理したりして自由な表示が可能になりますからね。1
アイコンの色がどれも濃いためか、白っぽい背景のこのブログのデザインには浮いてるような感じがしてしまったので、アイコンを並べている部分の背景を少し暗くしてみました。ついでに少し角丸。
デザインの合うフリーのアイコンも探してみたのですが、国内サービスであるmixiとはてブのアイコンでいいものが見付からなかったので、オリジナルに近いものを利用しています。
まだちょっと違和感あるんだけど。
あ、あとFacebookでシェアするためのアイコンもついでに並べました。
■ 追記
GitHubでソースコードを公開しました。
- 作ったプラグインは後でオープンソースにしてどこかで公開しようと思ってます。 ↩