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

ミニマルシンプリスト

ミニマリストほど物は減らせないけれどシンプル生活を目指しています

はてなブログでソーシャルボタンを変更してみた

WEB関連 カスタマイズ関連

f:id:xxyomogixx:20160406194230j:plain:w300
昨日、今日とブログを少しカスタマイズしてみました。
少しでもページ表示を速くしたいと思い調べてみたら最初からついているソーシャルボタンが重いということが判明。
それで軽いソーシャルボタンを探して変更することにしました。
カスタマイズ前には自分のブログテーマが何かを調べておいたほうが作業がやりやすいです。
あときちんとメモ帳などに以前のコードを保存しておきましょう。

テーマ

私のブログのテーマはReachというデザインでレスポンシブデザインでした。
ちなみに自分が使っているテーマがレスポンシブデザインかどうかは下記のURLで確認してくださいね。
レスポンシブの意味が分からない方も覗いてみてね。
http://staff.hatenablog.com/entry/2016/03/09/161000

ソーシャルボタンを変更

今回参考にしたのはゆきひーさんのサイト。
www.yukihy.com
画像付きで細かく書いてあるのでその通りやっていけば大丈夫です。
ただ、設定方法がPC画面とスマホ画面とレスポンシブに分かれています。
ココでテーマ以前にレスポンシブの意味が分からなかった私はググることになりました(^_^;)

コピペを確実にして貼り付ける場所を間違えなければ簡単にできると思います。
最後にデザイン→カスタマイズ→記事→ソーシャルパーツのチェックを外せば以前のソーシャルボタンは消えます。
レスポンシブデザインの方はデザイン→スマホ→詳細設定でレスポンシブデザインにチェックを入れれば終了です。

最後にPCとスマホで確認

私の場合、PCはOKだったのですがスマホにキャッシュが溜まっていたのか閲覧できない状況になり焦りましたがキャッシュを削除したらきちんと表示されていました。
twitterでフォローしていただいてる方々ご心配かけてすみませんでした)

ラインのアイコンが少しずれていたので修正方法を見ながら訂正して綺麗に揃いました。

まとめ

コピペでカスタマイズするのは初心者でも可能。
ただその前に下調べしていないと分からないこともある。
作業に入る前に熟読し必要な情報は先に集めておきましょう。

ゆきひーさんのおかげでページ速度も少し上がりました。
初心者に優しいコードの提供ありがとうございます!

今日カスタマイズしたドロップダウンメニューの紹介は明日させてもらいます。

広告を非表示にする