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

青空コメントアウト

WEBのこと、デザインのこと、ご飯のこと、趣味のこと。青空の向こうの誰かに届きますように。

おしゃれなフォローボタンを設置してもっとブログを好きになろう!

このエントリーをはてなブックマークに追加
 

f:id:cocoro27:20160416235735j:plain

ピザ職人のあろえりーな(@aloerina_)です。
嘘です。ブログパーツ職人のあろえりーなです。
 
すいません、嘘です。
 
職人というのは嘘ですが、趣味程度にはブログデザインしたいので日曜大工ならぬ日曜デザインとでもいいましょうか。今回はブログに設置するフォローボタンをつくりました。使い方は簡単なので、ブログなんていじったことない!って方もお気軽にお試しください。
 
 
 

こんなのつくりました

マウスをのせると…ふわっと見た目が変わります。
ちなみにパソコン専用です。スマホ用のフォローボタンはまた後日。
 
 
 

つかいかた

やることは2つです。一つずつ見ていきましょう。
  • 好きな箇所にHTMLを貼る
  • CSSを貼る

 

好きな箇所にHTMLを貼る

ブログ改造の記事を見るたびにHTMLやら何やら専門用語が出てきて苛々するもしくは体調悪くなるという人のために、簡単に用語説明します。

HTML とは…
画面に表示する素の情報。全裸の情報です。
CSS とは…
情報を画面上にどう見せるかのデザイン。全裸の情報を装飾するための情報。

 

専門用語をばっちり理解したところで、全裸情報をブログに貼っていきましょう。今回はサイドバーのプロフィール欄に設置してみます。

以下のコードをコピーして、ダッシュボード ≫ デザイン ≫ サイドバー ≫ プロフィール の「ブログの説明」の欄に貼り付けましょう。

貼り付けたら、30行目、33行目、36行目、39行目を適宜変更します。貼り付けただけだと機能しないので要注意。はてなブログのフィードURLは、ブログURL/feed です。

ちなみにGithubのフォローボタンなんていらないよ!って方は、21行目の

<div class="follow-button follow-button-github">

<div class="follow-button follow-button-github display-none">

としましょう。他のボタンについても同様。follow-button-○○の横にdisplay-noneとつけると、ボタンが表示されなくなります。魔法の呪文、でぃすぷれいのん!!

 

CSSを貼る

ここまできたらあとちょっとです。全裸に服を着せましょう。
ダッシュボード ≫ デザイン ≫ デザインCSS に以下のコードをコピペしましょ。

 

 

完成だよ!

やっぱり自分のブログは自分が愛着もてるカタチにしたいもんね。これからも自分のブログを好きになれるように。そして読者の皆様、あろえのデザインを参考にしてくださっている皆様がそれぞれのブログを好きになれますように。

ご不明な点やお悩みがあればあろえりーな(@aloerina_)までお気軽にどうぞ。

TOP