monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

サイドバーのプロフィール欄にSNSのアイコンを作る

前回の続きです。

過去記事:はてなブログのプロフィール欄をシンプルなデザインに変えてみる - monoのメモ帳

この前、ブログのサイドバーのプロフィール欄を自分で作ったものに変更したのですが、SNSのボタンもつけたいと思って、簡単にSNSのボタンが作れるツールを作ってみました。

JavaScriptの勉強をしているので間違っていることもあるかもしれませんが、うまく動作しなくてもご了承ください。

出来上がりのイメージ

手順1 スタイルシートをコピペする

「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」に下のスタイルシートをコピペします。

ul.mo-sns-btn {
    margin: 0;
    padding: 0;
    /* list-style: none; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
ul.mo-sns-btn li {
    margin: 2px;
    line-height: 40px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
}
ul.mo-sns-btn a {
    color: #fff;
    background-color: #dfdfdf;
    display: block;
    padding: 0 10px;
    border-radius: 50%;
    text-align: center;
}
ul.mo-sns-btn a:hover {
    background-color: #999;
}

手順2 HTMLをコピペする

表示させたいSNSにチェックを入れてURLを入力します。


https://twitter.com/intent/follow?screen_name=Twitterユーザー名


https://www.facebook.com/facebookページのユーザーネーム


https://www.instagram.com/ユーザーネーム


https://ブログのURL/rss


https://ブログの問い合わせフォームのURL

「click」を押してみてください。

HTMLタグが表示されますのでコピーして、「管理画面」→「 デザイン」→「 カスタマイズ」 →「サイドバー」のプロフィールを作ったHTMLタグの下に追加します。

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。