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

あるとたたん

写真好きの前向き日誌

おしゃれなフォローボタンを設置する方法

f:id:masami11662277:20161009133708p:plain

 

 ブログに設置したい!おしゃれなデザインのフォローボタン!

設置するだけで、ブログのこなれ感がグッと増しますよね。

 

今回も画像つきで説明していきますので、初めての方も簡単に設定できると思います。手順は多くなりますが、指定のタグを3箇所にコピペするだけで設置できるので、気になっていた方はやってみてください。

 

 

 最初のコピペ!

 アイコンに使用する画像はこちらから借りているものです。

そのため、以下のサイトをブログ内に紐付けしなければなりません。

 

fontawesome.io

 

まずは、以下のHTMLをコピーします。

 

 

▼貼る場所までの経路

「設定」⇛「詳細設定」のページ。

アイキャッチ画像」「独自ドメイン」の下の方にスクロールしていくと「検索エンジン最適化」という項目があります。その下のほうに「headに要素を追加」という欄に貼り付けます。

 

f:id:masami11662277:20161009144857p:plain

 

f:id:masami11662277:20161009144914p:plain

 

2つ目のコピペは一工夫!

次のHTMLタグは私のURLやIDで表示してあるので、コピペして貼ったあとに自分のURLやIDに変更する必要があります。

(タグの後に変更部分の詳細説明があります!)

 

変更が必要な箇所を①〜⑤で目印をつけているので、以下をコピーして貼るときは①〜⑤を消してください!

 

<!-- フォローボタン -->
<center>
<div class="sidebar-follow-buttons" >
<div class="follow-title"><span style="font-size: 8px">フォローする</span></div>
<a class="hatena" href="http://①blog.hatena.ne.jp/masami11662277/alto.hatenablog.jp/subscribe" onclick="window.open('http://②blog.hatena.ne.jp/masami11662277/alto.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;">
<i class="blogicon-hatenablog lg"></i>
<span class="inner-text">Hatena</span>
</a>
<a class="twitter" href="https://③twitter.com/intent/follow?screen_name=9071lo" target="_blank">
<i class="blogicon-twitter lg"></i>
<span class="inner-text">Twitter</span>
</a>
<a class="instagram" href="https://④www.instagram.com/9071alto/" target="_blank">
<i class="blogicon-instagram lg"></i>
<span class="inner-text">Instagram</span>
</a>
<a class="feedly" href="http://⑤feedly.com/i/subscription/feed/http://alto.hatenablog.jp/feed" target="_blank">
<i class="blogicon-rss lg"></i>
<span class="inner-text">Feedly</span></a></div></center>

 

▼ブログのIDとURLを変える

①blog.hatena.ne.jp/masami11662277/alto.hatenablog.jp/subscribe

②blog.hatena.ne.jp/masami11662277/alto.hatenablog.jp/subscribe

 

TwitterのIDを変える

twitter.com/intent/follow?screen_name=9071lo

 

InstagramのIDを変える

④www.instagram.com/9071alto/

 

▼ブログのURLを変える

feedly.com/i/subscription/feed/http://alto.hatenablog.jp/feed

 

貼る場所はサイドバー!

 今回、私はサイドバーに設置したので以下の手順になります。

 

▼貼る場所までの経路

「デザイン」⇛「カスタマイズ」⇛「サイドバー」⇛「モジュール追加」⇛「HTML」

 

f:id:masami11662277:20160821164908p:plain

 

f:id:masami11662277:20160821164925p:plain

 

f:id:masami11662277:20160901002321p:plain

 

f:id:masami11662277:20160901002331p:plain

f:id:masami11662277:20160901002542p:plain

 

f:id:masami11662277:20160901002744p:plain

 

3つ目のコピペ!

以下のCSSをコピーします!

 

/*サイドバーフォローボタン*/
.sidebar-follow-buttons{
text-align: center;
width:100%;
letter-spacing: -.40em;
}
.sidebar-follow-buttons a {
display: inline-block;
letter-spacing: normal;
width:48%;
font-size: 18px;
text-align: center;
text-decoration: none;
padding:6% 0;
margin:1%;
}
.sidebar-follow-buttons .inner-text {
font-size:16px;
}
.sidebar-follow-buttons .hatena {
color: #ffffff;
background: #38393C;
}
.sidebar-follow-buttons .hatena:hover {
background: #5F6063;
}
.sidebar-follow-buttons .twitter {
background: #55acee;
color: #ffffff;
}
.sidebar-follow-buttons .twitter:hover {
background: #89C7F7;
}
.sidebar-follow-buttons .instagram {
background: #3f729b;
color: #ffffff;
}
.sidebar-follow-buttons .instagram:hover {
background: #7AA5C7;
}
.sidebar-follow-buttons .feedly {
background: #6cc655;
color: #ffffff;
}
.sidebar-follow-buttons .feedly:hover {
background: #8EDC7A;
}

.entry-content {
font-style:丸ゴシック;
font-size:16px;
line-height:2.0em;
}

span.author.vcard {
display: none;
}

 

▼貼る場所までの経路

「カスタマイズ」⇛「デザインCSS」⇛ペーストしたら変更を保存する!!

 

f:id:masami11662277:20160821164925p:plain

 

f:id:masami11662277:20160821164932p:plain

 

f:id:masami11662277:20160821164935p:plain

 

f:id:masami11662277:20160821164940p:plain

 

 

参考ブログ

今回、参考にさせてもらったブログです。こちらのアイコンやデザインを自分用にカスタムしてあります。

サイドバーだけでなく記事の上下に設置するタイプもあります。

 

 ▼FacebookGoogleのアイコンやクリックのデザインも種類豊富です!

www.ituore.com

広告を非表示にする