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

f:id:s_ahhyo:20220106233256p:plain

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

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

こう言う感じで。

読者になる

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

↓右上サイドバー部分↓

f:id:s_ahhyo:20190414134112p:plain

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

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

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

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

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

www.sun-ahhyo.info

はてなブログ Perfect GuideBook

作者: JOE AOTO
出版社/メーカー: ソーテック社
発売日: 2016/07/22
メディア: 単行本
この商品を含むブログ (3件) を見る

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

作者: 狩野祐東
出版社/メーカー: SBクリエイティブ
発売日: 2016/10/27
メディア: 単行本
この商品を含むブログ (1件) を見る

共通タグ

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

<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"> 読者になる</a>

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

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

「わかんねーよ！！」

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

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

RSSボタン

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

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

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

<a href="（ブログURL）/feed" target="_blank" title="RSS登録" class="rss-button"> RSS</a>

Facebook ボタン

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

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

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

<a href="https://www.facebook.com/（Facebook ID）" class="facebook-button"> Facebook</a>

Twitter フォローボタン

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

<a href="https://twitter.com/intent/follow?screen_name=（TwitterID）" target="_blank" class="twitter-button"> Twitter</a>

Instagram フォローボタン

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

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

<a href="https://www.instagram.com/（Instagram ID）?ref=badge" target="_blank" class="instagram-button"> Instagram</a>

LINE友達申請ボタン

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

<a href="https://line.me/（後述します）" target="_blank" class="line-button"> 友達申請</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;
}