正衛門

垂れ流し 流して流して 詰まったら ひとまず放置 他力本願(字余り)

はてなブログでSNSフォローボタンを実装する際に工夫したこと

 「あっちのブログ」にSNSフォローボタンを導入してみたんですが、その際↑の記事が大変役に立ちまして。でも、ここで紹介されていること以外に何をしたかなんてのを垂れ流してみたいと思います。

工夫したこと

PC版とスマホ版CSSを一括管理するためにheadに要素追加

参考記事だとPC版とスマホ版のCSS記述箇所を分けるようにとのことでしたが、めんどくさがりな自分の場合、それだとどこに何があってーと分からなくなりそうだったので、headにまとめて記述しました。

headには、ダッシュボード→設定→詳細設定の順でアクセスして、実際に記述したCSSはこちら。

<style type="text/css">

.content-inner-follow-buttons{

text-align: center;
width: 100%;
letter-spacing: -.40em;
}
.content-inner-follow-buttons a {
display: inline-block;
letter-spacing: normal;
width: 30%;
text-align: center;
text-decoration: none;
padding: 4% 0;
margin: 0 1%;
}
.content-inner-follow-buttons .inner-text {
font-size: 16px;
}
.content-inner-follow-buttons .hatena {
color: #ffffff;
background: #38393C;
}
.content-inner-follow-buttons .twitter {
background: #55acee;
color: #ffffff;
}
.content-inner-follow-buttons .feedly {
background: #6cc655;
color: #ffffff;
}
</style>

PC版とスマホ版を1つのHTMLで管理

サイドバーと記事下に以下のHTMLコードを入れました。あっちのブログ仕様になっているのでご自身のブログで試される場合は適宜変更してください。

<div class="content-inner-follow-buttons">
<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.masaemon.jp/feed" target="_blank">
<i class="blogicon-rss lg"></i>
<span class="inner-text">Feedly</span>
</a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=masaemon_jp" target="_blank">
<i class="blogicon-twitter lg"></i>
<span class="inner-text">Twitter</span>
</a>
<a class="hatena" href="http://blog.hatena.ne.jp/thyself2005/www.masaemon.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/thyself2005/www.masaemon.jp/subscribe', '', 'width=500,height=400'); return false;">
<i class="blogicon-hatenablog lg"></i>
<span class="inner-text">Hatena</span>
</a>
</div> 

できあがり

f:id:thyself2005:20160216014530p:plain

なんとかできました。

こうやって書くとスマートにこなしたかのようですが、実際は元記事を見ながら七転八倒に四苦八苦しながらの対応でしたし、そういうこともあったのでふとログとして残しておこうと思いました。