はてなブログでアイキャッチ画像を使って「この記事が気に入ったらフォロー」を設置

以前からこのブログでは記事下に「この記事が気に入ったらいいね」のいいねボタンを読者登録などのフォローボタンにしたものを使っていました。これは記事の画像に「その記事の最初の画像」を使っていたのですが、これを「アイキャッチとして設定された画像」に変更しました。

以前のものと新しいものの比較

これが以前の「この記事が気に入ったらフォロー」です。

こちらが新しい「この記事が気に入ったらフォロー」です。

…ぶっちゃけ、見た目はほとんど変わっていません。ただし、表示している画像は「記事の最初の画像」から「アイキャッチとして設定された画像」に変わっています。私の記事はいつもアイキャッチと同じ画像を先頭に持ってきているのでほとんど変わりないですが、例えば以下の記事では記事内の画像ではなくアイキャッチ画像が表示されています。

今まで使っていたもの

これまで使っていたものは以下の記事を参考に設置したものでした。

（なお、今回の記事のアイキャッチ画像は、このケーさんの記事の画像を真似しています。）

これのFacebookのフォローボタンを「はてなブログ」「Twitter」「Feedly」に変更したものです。これで十分満足していたのですが、先日自分で書いた記事で、設定したアイキャッチをjavascriptで取り出せることに気づいたので、それを使うことにしました。これなら記事の最初にアイキャッチを置かない人でも使うことができます。

設置方法

このブログで実際に使っているものは、自分用に調整したり独自のアイコンフォントを使っています。なので、もうちょっと汎用的に使える、はてなブログで元々使えるアイコン（→参考）を使ったものを紹介します。

下準備

一応バックアップを取るなりし、できれば最初はテスト用ブログで試してください。テスト用ブログの作り方などは以下の記事を参考にしてください。

記事下

はてなブログのダッシュボードからデザイン→カスタマイズタブ→記事→記事下に以下のhtmlを追加します。

<div class="iine">
<script>
  function productImg() {
    var pi = document.getElementsByTagName('meta');
    for(i=0;i<pi.length;i++){
      if(pi[i].getAttribute("property")=="og:image"){
        return pi[i].getAttribute("content");
      }
    }
    return "";
  }
document.write('<div class="iine-l" style="background-image:url(' + productImg() + ');" />{Title}</div>');
</script>
<div class="iine-r">
<div class="iine-0">{Title}</div>
<div class="iine-1">この記事が気に入ったらフォローお願いします！</div>
<div class="iine-icon">
<a href="http://blog.hatena.ne.jp/はてなID/ブログドメイン/subscribe" onclick="window.open('http://blog.hatena.ne.jp/はてなID/ブログドメイン/subscribe', '', 'width=500,height=400'); return false;" class="iine-hatenablog" title="はてなブログの読者登録をする">読者になる</a>
<a href="https://twitter.com/TwitterID" class="iine-twitter" title="Twitterでフォローする">フォローする</a>
<a href="https://feedly.com/i/subscription/feed/{BlogURL}feed" class="iine-feedly" title="Feedlyで購読する">購読する</a>
</div>
<div class="iine-2">最新情報をお届けします。</div>
</div>
</div>

自分の環境に合わせて編集する箇所が2つあります。

はてなブログの読者登録

http://blog.hatena.ne.jp/はてなID/ブログドメイン/subscribeのはてなID/ブログドメインを自分のものに置き換えてください。このブログだとc-miya/orefolder.hatenablog.jpになります。

はてなブログのダッシュボードから「設定」を選ぶとURLはhttp://blog.hatena.ne.jp/はてなID/ブログドメイン/configになります。ここからコピペするのがわかりやすいかもしれません。

Twitterのフォロー

https://twitter.com/TwitterID" class="iine-twitter"
このURLの最後、TwitterID部分を自分のTwitter IDに置き換えてください。

デザインcss

次にデザイン→カスタマイズタブ→デザインcssに以下のコードを追加します。

.iine{
display: -webkit-flex;
display: flex;
margin: 0 0 1em 0;
}
.iine-l{
width: 50%;
color: transparent;
background-size: cover;
background-position: center center;
}
.iine-r{
width: 50%;
background: #333;
color: #fff;
padding: 2em 1em;
text-align: center;
}
.iine-icon{
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.iine-icon a{
color: #fff;
font-size: 0.7rem;
display: inline-block;
margin:1rem 0;
padding:0.3rem 0 0.45rem 0;
width:32%;
text-decoration:none;
}
.iine-hatenablog{
background: #606060;
}
.iine-twitter{
background:#1b95e0;
}
.iine-feedly{
background:#2BB24C;
}
.iine-hatenablog:hover{
background:#666;
}
.iine-twitter:hover{
background:#31a3ea;
}
.iine-feedly:hover{
background:#2ebc50;
}
.iine-icon a::before{
font-family: blogicon;
font-size: 0.9rem;
margin: 0 0.2rem 0 0;
position: relative;
top: 0.15rem;
}
.iine-hatenablog::before{
content: '\f000';
}
.iine-twitter::before{
content: '\f035';
}
.iine-feedly::before{
content: '\f04e';
}
.iine-0{
font-weight:bold;
margin:0 0 0.5rem 0;
}
.iine-1{
font-size: 0.9rem;
}
.iine-2{
font-size: 0.8rem;
}

レスポンシブデザインにする時は、以下のコードも加えてください。

@media screen and (max-width: 540px){
.iine-icon a{
font-size: 0px;
width:31%;
}
.iine-icon a::before{
font-size: 1.2rem;
margin: 0 0 0 0;
top: 0rem;
}
.iine-0{
font-size: 0px;
}
.iine-1{
font-size: 0.8rem;
}
.iine-2{
font-size: 0.7rem;
}
}

@media screen and (max-width: 540px){の部分は横幅何ピクセル以下でこのスタイルを適用するか（スマホ表示にするか）ということです。必要に応じて変更してください。

これでとりあえずは表示されるはずです。

カスタマイズのポイント

基本は上のとおりですが、それぞれのブログに合わせて微調整するといいでしょう。

.iine{
margin: 0 0 1em 0;
}

このmarginの値を変更すると、上下左右のマージンを変更できます。数字は上右下左の順番になっており、デフォルトは「下に1文字分のマージン」となっています。

.iine-l{
width: 50%;
}
.iine-r{
width: 50%;
}

アイキャッチ画像と右側のボタン類の領域の「幅」を設定しています。
.iine-lは左、.iine-rは右です。60%と40%などにすれば、画像が大きくなります。好きなように調整してみてください。

その他参考になるブログ記事

元の、記事の最初の画像を使う「この記事が気に入ったらいいね」については、カスタマイズ方法など書いている人がいます。いいねボタンの代わりにはてブボタンを使うなどありますので、こちらも参考にしてください。

追記：スマホ表示のパターン

スマホ表示というか、画面幅が狭い時のレイアウトパターンを2つ考えてみました。こちらの記事も合わせてどうぞ。