アイコンの変更。


これは、24日の記事です。


スターアイコンを、好みのアイコンに変える方法。


ああ。今日も暑い....。


さすがに夕方まで机に向かってると、足がムクんでつらぁ〜い。痛ぁ〜い。(;一_一)
クーラーの中なんで余計ですね。


本州は連日のこの猛暑なのに、北海道では、大雨による被害が甚大ですね。。。。
どうか拡大しませぬよう。。。


さて、いつもならここから 「 本日のべんと....」 と なるんだが、今日は、私のこのブログのタイトル横のアイコン




↑ 「 こんな風に、アイコンを に変えるにはどうすれば? 」 って質問を、複数の方から頂いてましたが( と、言ってもほんの数人ですが....)、遅くなりましたが、ご説明申し上げますね。




アイコン変更について

  1. これは、Hatena会員のみの、またHatenaブログ内においてのみ有効な変更です。
  2. 作業の表現方法が、初心者向け(特に中高年向け)に、少々易しくなっておりますこと(笑)、ご了承ください。
  3. なお、簡単な作業ではございますが、しかし標準以上のカスタマイズになることを認識し、自己責任においての作業となりますことも併せてご了承ください。
  4. また、作業中に 「 ここは違うだろ? 」 って箇所があれば、どうぞ訂正 指導くださいませ。



(1)
まず最初にすることは、表示させたいアイコンを探してこなければなりません。
アイコンは、いろいろなソザイヤさんが無償で提供してくれているので、探してみよう。
大きさは、あまり大き過ぎてもバランスが悪くなるので、程よい大きさのアイコンを探そう。

私がよく行くソザイヤさんは.....


Fine  mariya  およりて など、よくお邪魔します。
(他所のサイトなどでも良く見かける人気素材屋さんです。)
でも、ここらあたりの素材屋さんは、素材を使用すればリンクを貼らなければならない素材屋さんです。


しかし例えば、ココ → blue-green のように、「 使用連絡不要 」、「 素材の加工(サイズ変更、文字要れなど)もご自由に 」 って言う、ホトケのような(古っ!)優しい素材屋さんもあります。


いろいろ検討してみてくださいね。


●●●そして、お気に入りのアイコンが見つかったら......



↑ 図のように、「 名前を付けて画像を保存 」から、自分のわかりやすいフォルダにアイコンを保存。








今回は、紫の花 を、表示させてみようと思います。


●●●出来上がりイメージは、こんな感じ。。。









(2)
次にまず、自分のPCに保存した を、ハテナのフォトファイルへ送信します。
文章に書くとアレですが(アレって?)、皆様がいつもデジカメで撮った画像などをアップする方法、ソレと同じです。


なのでまずは。。。

この を、過去記事のどこかに挿入してみよう。。。




●●●過去記事編集画面から



↑ 図のように、お花 を、挿入させたい箇所にカーソルを出し、そのまま、いつものように 『 写真 』 タブをクリック。








(3)


●●●画像のあるフォルダより、紫の花を選択し、アップロードしていきます。



図のように、選択してアップロードボタンをクリック。








(4)


●●●確認画面よりアップロードした画像が表示されているか確認。



図のように、本文後に、アイコン画像が表示されましたか?








(5)


●●●ついでにもうひとつやっておこう。



図のように、本文の後ろに表示された の上にカソール合わせ、右クリックより、プロパティを出す。









(6)


●●●そして出てきた ダイアログから.....



図のように、アドレス部分 http://〜〜 から始まっている長いアドレスをドラッグで選択。
再び、右クリックでコピー。


コピーしたアドレスは、メモ帳にでも貼り付けておくと、いざ出番が来た時に便利です。
(でも、こういう作業が慣れている方は、メモ帳貼り付けなどしなくても良いですね。)








さあ。やっとこれで 自分のフォトファイル(画像格納庫)へ、アイコンを収納することができました。
次はいよいよ、タイトル横へ表示させていく作業にうつります。


ここからは、管理画面より、『 デザイン 』→『 詳細タブ 』→『 スタイルシート 』までたどり着き、その 『 スタイルシート 』のスペース内に、下 ↓ に表示されている 『 タグ 』 を貼り付けていきます。







(7)




.hatena-star-star-image {
background-image: url();
}




↑ 上の、 .hatena 〜〜〜 }  までをすべて、ドラッグで選択し、コピーしておきます。








(8)


●●●管理画面より



図のように、デザインタブ を クリックし、『 詳細 』タブもクリックします。








(9)


●●●出た画面より、スクロールバーを下方へ引っ張ると....


図のように、『 スタイルシート 』 の太文字が見えますか?
そこの空いてるスペースへ、 (7)でコピーした、 .hatena〜〜〜  から始まる タグ を、貼り付けていきます。









(10)


●●●そして次に....


図のように、( )の中にカーソルを合わせ、(6)でメモ帳にコピーした、アイコンのアドレスを貼り付けます。











さあ。ここまで来ればもう出来たも同然。。。
一気に仕上げてしまおう。(^O^)/








(11)


●●●書き込み終わったすぐ下に、こんなボタンが見えるハズ.....



図のように、いきなり『 変更 』 ボタンは押さず 必ず プレビューボタン をクリックして、確認のこと。






●●●そして、プレビュー画面で確認すると.....



こんな風に、お好みのアイコンに変わってますか?








(12)


●●●さあ。これでおしまい....



プレビュー画面の下方に、上の保存画面があるので、図のように 『 この内容に変更する 』をクリックし、最終保存して おしまいっ!


へい。おつかれさんどした。。。


  1. ここに記載した作業内容は、Hatenaの サポート掲示板内 の 「 アイコン変更について 」 の説明を、図式化して説明を加えたものですが、誤り、また不具合等があれば、どうぞご連絡ください。
  2. また、作業途中、頻繁に出てくる 「 右クリック 」などの表現は、OS.Windowsシリーズ における動作のひとつであり、他の OS に ついては、その表現方法を私は存じません。あしからずご了承くださいませ。