Mikotoにお任せ

ブラック会社から独立に向けての日々奮闘中の日記 貯金や節約の方法、通信回線を書いていますそれ以外にはフィッシング詐欺サイトに登録した記事などを書いています今日も一日頑張るぞい

はてなブログのサイドバーに表示されるプロフィールを変更する方法その2

f:id:mikotomikaka:20190920063047j:plain

 

f:id:mikotomikaka:20190920063047j:plain

こんにちはMikotoです 

 

前回のはてなブログのサイドバーに表示されるプロフィールを変更する方法の続きになります今回紹介するのは「はてなボタン」「Twitterのフォローボタン」を◯ボタンにする方法を紹介します

 

  

HTMLを追加する

 

前回コチラで紹介したやり方では

 

www.mikotoniomakase.work

 

よく見る「読者になる」「Twitterのフォロー」ボタン

 

が表示されるようになります

 

f:id:mikotomikaka:20200105173637p:plain

このフォローボタンをHTMLとCSSのコードを利用して◯型のボタンにします。基本コピーで大丈夫ですのでお試しください。

 

「ダッシュボード」→「デザイン」→「カスタマイズ」→「サイドバー」→「モジュールを追加」→「</>HTML」プロフィールの文章の下に追加して下さい

f:id:mikotomikaka:20200104114334p:plain

 

◯ボタンの上に表示されるフォローすると表示させる

 <div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>

 青の部分フォローするを変更するしてお好みのコメントに変更出来ます

 

「読者になる」ボタンを追加

<a class="hatena" href="http://blog.hatena.ne.jp/mikotomikaka/mikotomikaka.hatenablog.com/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i><br><span class="text-small">はてな</span></a>

 mikotomikaka/mikotomikaka.hatenablog.comを

自分のID/自分のID.hatenablog.comに変更します。はてなの部分もお好みで変更することが出来ます。?とか

 

 

「Twitterのフォロー」ボタンを追加

<a class="twitter" href="https://twitter.com/intent/follow?screen_name=mikotomikaka" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="text-small">Twitter</span></a>

name=mikotomikaka"の青い部分を自分のTwitterのIDに変更します。

 

「Feedly」ボタンを追加

<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.mikotoniomakase.work/feed" target="_blank"><i class="blogicon-rss lg"></i><br><span class="text-small">Feedly</span></a> 

http://www.mikotoniomakase.workの青い部分を自分のアドレスに変更します。

 

CSSを追加する

 

HTMLのコードを編集したら次はCSSのコードを変更します。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「{  }デザインCSS」にCSSのコードを追加します。

 

f:id:mikotomikaka:20200105184033p:plain

 

ココは変更無しでそのままコピーすれば大丈夫です 

 

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;
}

 

完成です

 

このように表示されるようになっているはずです

 

f:id:mikotomikaka:20200104132202p:plain

 

まとめ

 

前回に引続きはてなブログのプロフィールの変更方法を紹介しましたが、変更するにはHTMLとCSSの知識が必要になりとても難しいですよね。これからもHTML勉強をしながらはてなブログのカスタマイズ方法を紹介したいと思います。最後まで読んで頂き有難うございます。

 

投稿日2020/1/5 21:00

#はてなブログ #HTML #CSS #ブログ運営 #ブログ #はてなブックマーク #Twitter #サイドバー #カスタマイズ #Mikotoにお任せ