はてなテーマ「Brooklyn」にシェアボタン風のフォローボタンを追加してみた。

Sponsored Link

独学ながらHTML&CSSを勉強しています。

はてなのブログテーマ「Brooklyn」をブログ開設当時から愛用させていただいているのですが、作者さんのデザインした「読者になる」ボタンが設置できるようになっているんですよね。

 

こう言う感じで。

 
 

 これはこれでカッコいいんですが、「Brooklyn」オリジナルデザインのシェアボタンがカッコよかったのと、せっかくだからTwitterやRSSフィードのフォローボタンも作れないかなと思って、そちらにあわせてデザインを考えてみました。

 

 

↓右上サイドバー部分↓             

f:id:s_ahhyo:20190414134112p:plain

 

1列に並べようとすると5個までが限界ですね。

また、センタリングしようとしても反応してくれなかったり、プロフィールの下に載せようとすると勝手に改行が挿入されたり・・・とまだまだ改善の余地はありそうです。

 

 シェアボタンと同じ色だと見分けがつかないので色は反転させています。

ご自身でお好きなように色づけしてください。

カラー版はまた後日考えて更新しますわ・・・。

 

 関連記事

www.sun-ahhyo.info

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

 
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

 

 

共通タグ

必ず最初に入れてください。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!--↑ ここから上はシェアボタンを導入済みの場合不要-->


<!--フォローボタン-->
<div class="follow-button">
<div class="follow-inner">

 

(ここに各項目のタグを挿入)

 

</div>

</div>

 

読者になるボタン

「読者になる」が嫌な場合はテキトーに文字を変えてください。

文字のサイズ感はご注意を。

<!--読者になる-->
<a href="https://blog.hatena.ne.jp/(はてなID)/(ブログURL).hatenablog.com/subscribe" target="_blank" title="このブログの読者になる" class="hateblo-button"><i class="blogicon-hatenablog lg"></i><br><span style="font-size: 10px;">読者になる</span></a>

 

当然ですが「はてなID」「ブログURL」は別物であることは理解しておいてください。

「ブログURL」は「https://」などを除いたものを使ってください。

 

「わかんねーよ!!」

という方ははてなブログの「設定 > 詳細設定」のページをスクロールしてもらうと「読者になるボタン」というのが出てきますので、その文字列の「https://」以降〜「subscribe」までを貼り付けるとヨシ!です。

「subscribe」の後に「/」などが入るとエラーになるのでご注意。

 

RSSボタン

Feedlyとかもつけたいのですが、どうやらはてなのアイコンフォントにもFont AwesomeにもFeedlyアイコンはなさげ?なのかな?

自作されている方もおられるようですが面倒なのでただのRSSボタンだけにしておきます。

僕自身FeedlyもRSSも使ってないので違いもよくわからないし。

 

<!--RSS-->
<a href="(ブログURL)/feed" target="_blank" title="RSS登録" class="rss-button"><i class="blogicon-rss"></i><br><span class="mini-text">RSS</span></a>

 

Facebook ボタン

Facebookは2018年に「フォローボタン」という概念が公式から消滅したらしく、現在は「いいね!」もしくは「友達申請」に集約されているそうです。(よくわからん)

というわけでクリックするとプロフィールに飛ぶだけのボタンにしました。

僕個人は一般公開したくないので載せていません。

 

<!--Facebookプロフ-->
<a href="https://www.facebook.com/(Facebook ID)" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span style="font-size: 10px;">Facebook</span></a>

 

Twitter フォローボタン

TwitterIDは@なしで挿入してください

 

<!--Twitterフォロー-->
<a href="https://twitter.com/intent/follow?screen_name=(TwitterID)" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="mini-text">Twitter</span></a>

 

Instagram フォローボタン

今の時代インスタの効果は絶大なので、アカウントがあるのであれば載せておいた方が良いかと思います。僕は載せませんが。

 不特定多数に公開できるようなインスタアカウントがあるのであればフィードを公開してしまったほうが効果的な気もしますが、まぁ重くなりますし。

 

<!--Instagramフォロー-->
<a href="https://www.instagram.com/(Instagram ID)?ref=badge" target="_blank" class="instagram-button"><i class="blogicon-instagram lg"></i><br><span style="font-size: 9px;">Instagram</span></a>

 

 

LINE友達申請ボタン

いやー怖いです。僕はとてもじゃないですけどこれを載せようとは思わないので各自自己責任でやってください。載せるとしても「LINE@」とかのほうがいいと思います。

 

 

<!--LINE友達申請-->
<a href="https://line.me/(後述します)" target="_blank" class="line-button"><i class="fab fa-line lg"></i><br><span class="mini-text">友達申請</span></a>

 

 (後述します)の部分は、各自LINEを開いてもらって

「友達を追加 > QRコード > 自分のQRコード > 右上の▽ > メールで送信」でURLが取得できます。

 

CSS

一応試行錯誤した上でコレなんですが、例によって機能してないコードがあるかもしれません、マジでもう許してください。

 

/* フォローボタン */
/* 共通設定 */
.follow-button {
margin: 20px 0 10px 0;
width: 300px;
}
.follow-inner a {
position: relative;
display: inline-block;
width: 55px;
height: 55px;
padding: 4px 0;
line-height: 18px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
text-align: center;
color: #FFF;  /*文字色はここを変更*/

background-color: #111;  /*背景色はここを変更*/
text-decoration: none;
vertical-align: bottom;
border: 1px solid #ddd;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.follow-inner a:hover {
opacity: 0.6;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.follow-button i,
.follow-button .lg {
font-size: 24px;
}
.follow-inner .hateblo-button .blogicon-hatenablog.lg {
font-size: 30px;
}
.follow-inner .blogicon-hatenablog {
padding-top: 3px;
}

.follow-inner .twitter-button .lg {
font-size: 28px;
}
.follow-inner .twitter-button {
padding-top: 8px;
}
.follow-inner .facebook-button .lg {
font-size: 33px;
}
.follow-inner .facebook-button .fa-facebook-square.lg {
font-size: 31px;
margin-top: -1px;
}
.follow-inner .instagram-button .blogicon-instagram.lg {
font-size: 34px;
}
.follow-inner .instagram-button.lg {
font-size: 31px;
padding: 5px;
}

.follow-inner .rss-button .blogicon-rss.lg {
font-size: 34px;
padding-top: 5px;

}
.follow-inner .rss-button {
font-size: 31px;
padding-bottom: 5px;
}

.follow-inner .line-button .lg {
font-size: 29px;
}

.follow-inner .line-button {
padding-top: 1px;
padding-bottom: 7px;
}


.follow-button .mini-text {
font-size: 11px;
}

 

 参考にしたブログ

www.notitle-weblog.com例によって製作者様。創造主。お世話になっております。

 

orefolder-sample.hatenablog.comインスタグラムのアイコンはここから教えてもらいました。ありがとうございます。