BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ SNSフォローボタンをブログページに設定する方法

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

はてなブログカスタマイズ SNSフォローボタンをブログページに設定する方法

   投稿日: 2017/11/23    投稿者:webコラム

bdcb0dec0f8d267691b50239ede324ed_s.jpg

こんにちは! ライターのモモタロウです。

今回は、はてなブログカスタマイズ SNSフォローボタンをブログページに設定する方法をお伝えします。

20171021-1-1.jpg



SNSフォローボタンをブログに設定するには?

まず、はてなブログにログインします。

その後、「ダッシュボード」の左側のメニューバーにある「デザイン」をクリックします。

20171021-1.jpgのサムネイル画像


デザイン画面で、左上のメニューバーにある「スパナボタン」をクリックします。
メニューバーの下から二番目に「フッタ」があります。

20171021-2.jpgのサムネイル画像


「フッタ」をクリックすると、HTMLが編集できますので、
そこに、以下の通り記述します。

<!--フォローボタン-->
 <div class="follow-btn" >
 <span style="font-size:80%; text-align:center">フォローする</span><br>
 <a class="hatena" href="http://blog.hatena.ne.jp/自分のはてなID/自分のブログのURLの「http://」を除いた部分/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i><br><span class="text-small">はてな</span></a>
   <a class="twitter" href="https://twitter.com/intent/follow?screen_name=自分のTwitterアカウントの@を抜いた部分   " target="_blank"><i class="blogicon-twitter lg"></i><br><span class="text-small">Twitter</span></a>
 <a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.自分のブログのURL/feed" target="_blank"><i class="blogicon-rss lg"></i><br><span class="text-small">Feedly</span></a>
 </div>

ブルーの部分は任意に新しく入力します。
自分のはてなID/自分のブログのURLの「http://」を除いた部分を入力します。

自分のTwitterアカウントの@を抜いた部分を入力します。

自分のブログのURLを入力します。


書き込みが終わったら「編集を保存する」をクリックします。

ブログを確認すると・・・

20171021-6.jpgのサムネイル画像

「はてな」、「Twitter」、「feedly」のフォローボタンが設定できました。


次に、表示されるボタンの形を変更してみよう。

四角バージョン


先ほどのメニューバーの「フッタ」の下にある 「{}デザインCSS」をクリックします。
クリックして編集モードになったら、以下の通り記述します。

.follow-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    height: 45px;
    line-height: 22px;
    width: 25%;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}
.follow-btn .hatena {
    color: #3D3F44;
    border: 2px solid #3D3F44;
    background: #ffffff;
}
.follow-btn .twitter {
    color: #00ACEE;
    border: 2px solid #00ACEE;
    background: #ffffff;
}
.follow-btn .feedly {
    color: #70CA3B;
    border: 2px solid #70CA3B;
    background: #ffffff;
}
.follow-btn .hatena:hover {
    color: #ffffff;
    background: #3D3F44;
    transition: all .3s;
}
.follow-btn .twitter:hover {
    color: #ffffff;
    background: #00ACEE;
    transition: all .3s;
}
.follow-btn .feedly:hover {
    color: #ffffff;
    background: #70CA3B;
    transition: all .3s;
}
.text-small{
    font-size: 8px;
}


書き込みが終わったら「編集を保存する」をクリックします。

ブログを確認すると・・・

20171021-7.jpg

ブログページの一番下に、四角いSNSフォローボタンが設定できました。


次に、丸いバージョンに設定してみよう。

〇バージョン


先ほどと同じように、「デザインCSS」に以下の通り書き込みます。


.follow-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 32px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.follow-btn .hatena {
    color: #3D3F44;
    border: 2px solid #3D3F44;
    background: #ffffff;
}
.follow-btn .twitter {
    color: #00ACEE;
    border: 2px solid #00ACEE;
    background: #ffffff;
}
.follow-btn .feedly {
    color: #70CA3B;
    border: 2px solid #70CA3B;
    background: #ffffff;
}
.follow-btn .hatena:hover {
    color: #ffffff;
    background: #3D3F44;
    transition: all .3s;
}
.follow-btn .twitter:hover {
    color: #ffffff;
    background: #00ACEE;
    transition: all .3s;
}
.follow-btn .feedly:hover {
    color: #ffffff;
    background: #70CA3B;
    transition: all .3s;
}
.text-small{
    font-size: 8px;
}

書き込みが終わったら「編集を保存する」をクリックします。

ブログを確認すると・・・

20171021-8.jpg

ブログページの一番下に、丸いSNSフォローボタンが設定できました。

まとめ

如何でしたか? はてなブログはさまざまなカスタマイズが可能となっております。

今回のブログテーマは編集が比較的容易な「Brooklyn」を設定しました。
外部ページの「テーマストア」で選択可能です。

是非、今回のSNSボタン設定も試してみてくださいね。




カテゴリ:

TOPへ