ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

【ブログカスタマイズ】はてなスターの『Addボタン』をオリジナル画像に変更するには?

SPONSORED LINK

はてなスターイメージ画像01

貰えるものはなんでも欲しいガジェレポ!@gadgerepoです。こんにちわ。

今回は、はてなブログのカスタマイズについて少々。

はてなブログではお馴染みのはてなスター、その『Addボタン』をお好みの画像に変更する方法を解説します。

なぜ「Addボタン」を変更するのか?

 

コチラが、はてなスターの「Addボタン」。

はてなスターイメージ画像02

 

「はてなスター」を「プラス」する。

用途を簡略に表わしている、素晴らしいデザインですね。

はてなブログ利用者には広く認知されているこのボタン、わざわざ変更する理由はというと……

ブログデザインにオリジナリティーを

 

第一の理由、それはオリジナリティー

筆者は当ブログにおいて、“はてなブログっぽさを無くす”というテーマでカスタマイズを行っています。

で、一見して 「あ、はてなブログだな。」と判るノーマルの “SNSシェアボタン”とか……

はてなスターイメージ画像03

 

“読者になるボタン”とか……

はてなスターイメージ画像04

 

このあたりはカスタマイズ済みなのですが、はてなスター関係は手付かずでした。

それで今回、「Addボタン」の変更を思い立ったわけですが、意外と「はてなスター周り」をカスタマイズしている方は少ない様子。

小さな差異ですが、他のはてなブログとの差別化を図る・オリジナリティーを出すという点では有効なのではないでしょうか。

タッチデバイスでの“押しやすさ”を改善

 

PCからだと気になりませんが、タッチデバイス、特に画面の小さいスマートフォンなどでは、「Addボタン」が小さくて押しにくく感じます。

はてなスターを付けてくださったユーザーアイコンに、間違ってタッチしてしまうという誤動作も しばしば……

「Addボタン」を一回り大きくすることで、押しやすくなり誤動作を防げ、ブログを訪れたユーザーのストレスを軽減する効果も期待できます。

「Addボタン」画像の変更方法

 

それではお待ちかね、「Addボタン」画像の変更方法です。

大まかな流れは……

  1. 画像の用意
  2. 「はてなフォトライフ」に画像をアップロード
  3. はてなブログに CSSを追加

となります。

画像の用意

 

まずは、オリジナル「Addボタン」の画像を用意します。

絵心のある方はご自身で作画するのも良し、フリー素材から見つけるも良し。

「free icon star」で画像検索してみるといいかもしれませんね。

用意した画像は画像編集ソフトでリサイズしておきましょう。

ノーマルのはてなブログ Addボタン

f:id:gadgerepo:20170608181726p:plain は画像解像度が高さ 20pixelなので、ユーザーアイコンと揃えたいのであれば同じくらいに、一回り大きくするのであれば 32〜48pixelあたりで調節。

もちろんもっと大きくしてもOKです。

「はてなフォトライフ」に画像をアップロード

 

続いて、用意した画像をアップロードします。

画像がアップロードできて、その画像にアクセスできる URLが取得できれば 自鯖とかでもいいのですが、はてなブログなら「はてなフォトライフ」がいいでしょう。

「はてなフォトライフ」→「アップロード」から画像をアップロード。

はてなスターイメージ画像05

 

そして、「フォルダを編集」に移動して先程アップロードした画像を選択し、「ブログに貼り付ける」をクリック。

はてなスターイメージ画像06

 

「HTMLタグ」に表示される……

「URLその2」の部分をコピーします。

はてなブログに CSSを追加

 

最後は、はてなブログの管理画面から「デザイン」→「カスタマイズ」→「デザインCSS」に

を追加しましょう。

モバイル版は「デザイン」→「モバイル」→「ヘッダ」に

を追加で OKです。

これで「Addボタン」は任意の画像に変更されるはず。

↓ この下に見えるのがオリジナリティー溢れる「Addボタン」のサンプルです。

お疲れ様でした。