読者です 読者をやめる 読者になる 読者になる

オタクの戯言

オタクが思うがままに書き連ねていく、とりとめのないブログです

はてなブログで、はてブのアイコン等をスタイリッシュな感じにする方法

スポンサーリンク

はじめに

当ブログにお越し頂き恐悦至極に存じます。あにおです。


f:id:aniota-alvarado:20170503211229j:plain

私は結構、読者登録をさせていただいているかたのブログや、Twitterでリツイートされてくるブログを拝見しているのですが、ある日、ふと気づきました。

私のブログ、なんかダサい、と。

その原因の一つが、ブログ内に設置してあった、はてブを始めとするアイコンです。

ということで、私も他の人みたいになんかオシャレな、スタイリッシュなやつにしたい!と思いやってみたので、本日は備忘録代わりに工程なんぞを書いていきたいと思います。


それでは、最後までお付き合いいただければ幸いです。

オシャレなソーシャルパーツは色々と種類がある

前述したアイコンは、正確にはソーシャルパーツというらしいのですが、調べてみたところかなり色々な種類があることが分かりました。

したがって、自分好みのものを検索して探し出す必要があるのですが、そういうのも面倒くさいという人は、以下のサイト様が参考になると思います。
【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - BACKFLOW (バックフロウ)

レスポンシブデザインか否かでやることが大きく変わる

私の場合は、好みであることに加えて、コードとかがよくわからないので、あら不思議、コピペで簡単にできちゃった!みたいなものである必要がありました。

そこで、参考にさせていただいたのが、以下のサイト様です。本当に丁寧でわかり易く、素人の私にも簡単に設定できました。
www.yukihy.com

基本的には書いてある通りにやればいいのですが、私がど素人であるがゆえに、いくつかつまったポイントがありました。

  • まず、共通設定としてheadにコピペする際に、先になにかコードが入力されていた場合は、そのあとに一行あけてペーストすれば平気でした。
  • レスポンシブデザインに対応している場合は、PC、スマホそれぞれの設定をする必要はなく、レスポンシブ設定のみをすれば大丈夫です。
  • jQueryのコードは、記事下であればどこに貼り付けても平気です。私の場合は、先にアドセンスのコードがあり、その次に「こんな記事も読まれてます」のコードがあったのですが、その間に入れました。
  • デザインCSSにも、先に何かのコードがありましたが、一行あけて貼り付けたところ問題なかったです。

おわりに

実際にやってみると、以前のアイコンがいかに味気なかったのか、思い知りました。

なんだかみんなスタイリッシュで格好良いなー、めっちゃ仕事できそうだなーなんて、指をくわえて見ているだけでしたが、意外に簡単にできたので早くやればよかったと後悔しています。

ブログを始めたかたで、まだそこまで自分のブログデザインに意識を向けられていないという人は、こういうところから取り掛かるのも良いかもしれませんね。



長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。