はてなスターのアイコンを日本酒アイコンにしてみた

公開日: : 最終更新日:2014/04/20 IT, はてな


日本酒大好きです。
というわけで、はてなスターを日本酒アイコンにしてみました。

その流れは以下にメモ。

 はてなスターの導入

  • WordPressに「Hatena Star」プラグインをインストール
  • 参考1を元に「Hatena Star」プラグインの設定で、「認証トークン」を記入
  • スターを表示させたい場所のタグ名とクラス名を記入。

    • このサイトだと、タイトルの箇所のタグが<h2 class=”title”>なので、タイトルの横に表示させるためにタグ名「h2」、クラス名「title」と記入。

これで、タイトルの横にはてなスターが表示されます。
今のままだとデフォルトのスター。

 はてなスターのアイコン変更

通常のスターもいいのだけど、ここは個性を出して自分用に変更。

はてなスターのアイコンの変更方法。

  1. アイコンをどこかしらにアップ。

    • アップしたアイコンのURLを用意(例:http://example.com/star.gif)
  2. CSSに以下を追加

    • 新しくはてな用のCSSを用意するもよし、どこかに追記するもよし
.hatena-star-star-image {
  background-image: url(http://exapmle.com/star.gif);
}

というわけで、はてなスターを日本酒アイコンにしてみました。
是非日本酒を出しまくってください。

 参考

  1. はてなスターをブログに貼り付ける – はてなスター日記
  2. もっとカスタマイズをしよう – はてなスター日記

広告

関連記事

no image

iPhoneアプリ開発 -mixiSDKを使ってmixi連携をしてみる(2)-

* 前回 は、「ユーザーにAPI利用のための認可」をおこなってもらうところまでやりました。 本エン

記事を読む

no image

Twitterでプロテクトをかけているユーザが投稿したステータスを取得する方法

* 前提 ID Twitterの各投稿にはIDが存在していています。 そのIDを元にステータス

記事を読む

no image

PhoneGapを触ってみた(3) -画像を扱う(Camera APIを使ってみる)-

今回は、PhoneGapのCamera APIを使って携帯のアルバムにある画像を扱ってみます。

記事を読む

no image

Selenium2.0でUIテスト(2) -Rubyでやってみよう-

前回は、Selenium + PHPを試しました。 今後はRubyでやってみようということでSele

記事を読む

no image

アプリのためにFacebookページ作成 -現時点で注意すべき点-

* 前回 会社のメルアドでFacebookページを作成する方法を載せました。 * Faceboo

記事を読む

datebox-date

jQueryMobileでカレンダー表示 -DateBoxプラグインの利用-

スマートフォン対応をしているとカレンダーの表示の仕方をスマートフォンらしくしたいことがあると思います

記事を読む

no image

iPhoneアプリ開発 -UIScrollViewで画像を拡大・縮小-

* やりたいこと UIScrollViewでピンチアウト・インして上に乗っている画像を拡大・縮小した

記事を読む

no image

PHP_CodeSniffer+ Eclipse + PHP Code Formatter Pluginでコーディング規約を守ったコーディング

1人でプログラミングをしているにしても、多人数でプログラミングをしているにしても、コーディング規約を

記事を読む

no image

Capistranoで簡単デプロイ -開発用サーバー編-

cakePHPを使って開発しているサービス()で、リリース周りを楽にしたいなと思いCapistran

記事を読む

githubを使っての開発(1) -実践github-flow-

今は開発でgithubを利用しています。 開発をおこなう上で、githubをどのように扱えば良いの

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑