貰えるものはなんでも欲しいガジェレポ！@gadgerepoです。こんにちわ。
今回は、はてなブログのカスタマイズについて少々。
はてなブログではお馴染みのはてなスター、その『Addボタン』をお好みの画像に変更する方法を解説します。
なぜ「Addボタン」を変更するのか？
コチラが、はてなスターの「Addボタン」。
「はてなスター」を「プラス」する。
用途を簡略に表わしている、素晴らしいデザインですね。
はてなブログ利用者には広く認知されているこのボタン、わざわざ変更する理由はというと……
ブログデザインにオリジナリティーを
第一の理由、それはオリジナリティー。
筆者は当ブログにおいて、“はてなブログっぽさを無くす”というテーマでカスタマイズを行っています。
で、一見して 「あ、はてなブログだな。」と判るノーマルの “SNSシェアボタン”とか……
“読者になるボタン”とか……
このあたりはカスタマイズ済みなのですが、はてなスター関係は手付かずでした。
それで今回、「Addボタン」の変更を思い立ったわけですが、意外と「はてなスター周り」をカスタマイズしている方は少ない様子。
小さな差異ですが、他のはてなブログとの差別化を図る・オリジナリティーを出すという点では有効なのではないでしょうか。
タッチデバイスでの“押しやすさ”を改善
PCからだと気になりませんが、タッチデバイス、特に画面の小さいスマートフォンなどでは、「Addボタン」が小さくて押しにくく感じます。
はてなスターを付けてくださったユーザーアイコンに、間違ってタッチしてしまうという誤動作も しばしば……
「Addボタン」を一回り大きくすることで、押しやすくなり誤動作を防げ、ブログを訪れたユーザーのストレスを軽減する効果も期待できます。
「Addボタン」画像の変更方法
それではお待ちかね、「Addボタン」画像の変更方法です。
大まかな流れは……
- 画像の用意
- 「はてなフォトライフ」に画像をアップロード
- はてなブログに CSSを追加
となります。
画像の用意
まずは、オリジナル「Addボタン」の画像を用意します。
絵心のある方はご自身で作画するのも良し、フリー素材から見つけるも良し。
「free icon star」で画像検索してみるといいかもしれませんね。
用意した画像は画像編集ソフトでリサイズしておきましょう。
ノーマルのはてなブログ Addボタン
は画像解像度が高さ 20pixelなので、ユーザーアイコンと揃えたいのであれば同じくらいに、一回り大きくするのであれば 32〜48pixelあたりで調節。
もちろんもっと大きくしてもOKです。
「はてなフォトライフ」に画像をアップロード
続いて、用意した画像をアップロードします。
画像がアップロードできて、その画像にアクセスできる URLが取得できれば 自鯖とかでもいいのですが、はてなブログなら「はてなフォトライフ」がいいでしょう。
「はてなフォトライフ」→「アップロード」から画像をアップロード。
そして、「フォルダを編集」に移動して先程アップロードした画像を選択し、「ブログに貼り付ける」をクリック。
「HTMLタグ」に表示される……
の「URLその2」の部分をコピーします。
はてなブログに CSSを追加
最後は、はてなブログの管理画面から「デザイン」→「カスタマイズ」→「デザインCSS」に
を追加しましょう。
モバイル版は「デザイン」→「モバイル」→「ヘッダ」に
を追加で OKです。
これで「Addボタン」は任意の画像に変更されるはず。
↓ この下に見えるのがオリジナリティー溢れる「Addボタン」のサンプルです。
お疲れ様でした。
