こんにちは!冒険者Lv.1(@boukenshaLv1)です!!
今回は記事下にフォローボタンを設置するカスタマイズです。
更にHTMLとCSSでデザインを『アイチャッチ画像』と『フォローボタン』をまとめて「この記事が気に入ったらフォロー・購読お願いします」という文章付きのBOXにしちゃいます。
ほとんどの方の記事下のフォローボタンは、ポピュラーなボタン系のデザインなので、今回紹介するフォローBOXはインパクトがありなおかつオシャレなデザインで一気に雰囲気が変えれますよ。
完成デザイン
尚、今回紹介するコードはレスポンシブデザイン対応です。
PC版
左側にアイキャッチ画像
右側に文章とフォローボタン(はてな・ツイッター・Feedly)
スマホ版
同じデザインで正方形に近いサイズに調整されています。
PC版の横長方形のデザインをスマホ画面で表示すると、BOX内文章やフォローボタンが小さくなり効果が発揮できないのでこういったサイズになっています。
参考にした記事
最初は[クリアメモリ]さんのフォローBOXがカッコイイ!!と思い、お問い合わせから厚かましく「カスタマイズ方法教えてください!」ってメッセージを送ったんですよ。
メールで「記事で紹介しますので少々お待ちを」という返事をいただいてワクワクしながら待っていたら本当にすぐ記事にしてくれて、分かりやすく解説してくれました。
クリアメモリさんのフォローBOXはこちら
実際にはシェアボタンはフォローBOXとは別ですが、綺麗にまとまっていて1つのBOXに見えますよね。
いざカスタムにトライして出来たんですが、レスポンシブに対応してなくてスマホ画面ではフォローボタンがBOXからはみ出てしまいました。
習性&レスポンシブ化にするほどプログラミング知識はないので断念(泣)
次に良いと思ったフォローBOXはミニマルグリーンさんのデザインです。
フォローボタンが丸いデザインで珍しいです。
ミニマルグリーンさんはプログラミングのプロさんで私がカスタマイズにおいてとても信頼している方です。
プログラマーということで説明がとても分かりやすく、初心者でも順調にカスタマイズできます。
私が今使わしてもらっているフォローボタンデザインです。
フォローBOXカスタマイズ方法
それでは順に説明していきます。
HTMLコードを記述
ダッシュボード(管理画面)
↓
デザイン
↓
カスタマイズ(スパナマーク)
↓
[記事]の記事下の記述エリアに以下のコードを貼り付けてください。
<div class="p-entry__push"> <div class="p-entry__pushThumb" style="background-image: url('アイキャッチ用画像URL')"></div> <div class="p-entry__pushLike"> <p>この記事が気に入ったら <br>フォロー・購読をお願いします。 </p> <ul class="social-icon"> <li><a class="hatena" href="http://blog.hatena.ne.jp/★はてなID★/★ブログドメイン★/subscribe" onclick="window.open('http://blog.hatena.ne.jp/★はてなID★/★ブログドメイン★/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i> </a></li> <li><a class="twitter" href="https://twitter.com/■■■■■" target="_blank"><i class="blogicon-twitter"></i></a></li> <li><a class="feedly" href="http://feedly.com/i/subscription/feed/〇〇〇〇〇/feed" target="_blank"><i class="blogicon-rss"></i></a></li> </ul> <p class="p-entry__note">読者登録で最新情報をお届けします</p> </div> </div> <!-- 画像を記事の一番上のものに変える --> <!--jQueryを使用--> <script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script> (function ($) { $(function() { var src = $('.entry-content img:visible:first').attr('src'); if (!src) return; $('.p-entry__pushThumb').css('background', 'url(' + src + ')'); $('.p-entry__pushThumb').css('background-size', 'cover'); $('.p-entry__pushThumb').css('background-position', 'center'); }); })(jQuery); </script>
コード内を自分用に変更する
上記のコードはご自分のブログやtwitterアカウントに合わせて以下のように変更してください。設置後、きちんと動作するかクリックして確かめてください。
変更方法・場所を説明します。
【1】画像を用意しはてなフォトライフなどにアップロードし、'アイキャッチ用画像URL'に画像アドレスを指定してください。
私はフォトライフを使ったことが無いのでよく分からないのですが、私がやった方法は記事作成ページの画面右側にある編集オプション内の[アイキャッチ画像]項目に表示されているURLを使いました。
このURLはなんでも良いです。
そのURLの画像がフォローBOXに使われる画像になるわけではないです。
コードによってアイキャッチに使用した画像が毎回各記事でフォローBOXの画像に変換されるようになっているので安心してください。
【2】はてなIDとブログドメインにブログURLからhttp://を抜いたものを入れて下さい。2箇所あるのでご注意。
まず読者になってもらうために自分のIDとブログURLをコードに埋め込みます。
見つけやすいようにオリジナルコードに『★』マークを付け各エリアを挟みました。
・はてなIDは分かりやすく言うと、デフォルトだと自分のブログを開いてプロフィールのニックネーム横に表示されています。
このかっこ()と「id:」というのを取り除いたものを使います。
・ブログドメインは上記でも説明していますが、URLの頭部分「http://」を消した以後のものを使ってください。
※「★はてな★」「★ブログドメイン★」の文字は決してくださいね。
【3】■■■■■のところにtwitterアカウントの@を抜いたものを入れて下さい。
こちらもオリジナルコードの変更する部分を「■■■■■」に変更しました。
オリジナルコードや私が使っているコードには各自のアカウントが記述されています。
コードって文字がズラーーーーてならんでるから、文字列の中から文字を探すのって初心者にとっては大変ですよね。
なので私はあえて記号マークを使ってコードを紹介しています。
・自分のツイッターアカウントは、ツイッター使っている方は分かると思いますが、マイページのニックネーム下にあるやつですね。
「@」を消して記述してください。
【4】FeedlyはブログURLをhttp://を含めたものを入れて下さい。
ここで変更する場所には「〇〇〇〇〇」という記号マークで表示しています。
・FeedlyはURLの頭「http://」を付けたまま記述してください。
以上でHTMLコード編集は完了です。お疲れ様でした。
尚、まだCSSでデザイン変更作業があるのでプレビュー画面でBOXにはなっていないです。
《注意》
「ブログドメイン」や「Feedly」でコピペしたURLの一番後ろに「/」(スラッシュ)が付いていたら「//」という感じで連続で記述している形になります。1つ消しましょう。
CSSコードを記述
同じく【デザイン】[カスタマイズ]内の一番下の項目『デザインCSS』に以下のコードを貼り付けてください。
/* この記事が気に入ったらフォロー */ /* フォローボタン */ ul.social-icon { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; list-style-type: none; -webkit-padding-start: 0;/* user agent stylesheet の無効化 */ } .social-icon li a { display: block; margin: 0 5px 5px 0; color: #fff; width: 50px;/* 丸ボタンの幅 */ height: 50px;/* 丸ボタンの高さ */ line-height: 50px;/* 高さに揃える */ border-radius: 50%; text-align:center; } .social-icon .hatena { background: #fff; color: #3d3f44; } .social-icon .hatena .lg { font-size: 1.3333333333333333em; line-height: .75em; vertical-align: -20%; } .social-icon .twitter { background: #00a1e9; color: #fff; } .social-icon .feedly { background: #87c040; color: #fff; } /* この記事が気に入ったらバナー */ .p-entry__push { margin-bottom: 20px; display: table; table-layout: fixed; width: 100%; background-color: #2b2b2b; color: #fff; } .p-entry__pushThumb { display: table-cell; min-width: 240px; background-position: center; background-size: cover; } .p-entry__pushLike { display: table-cell; padding: 20px; text-align: center; vertical-align: middle; line-height: 1.4; font-size: 18px; } .p-entry__note { margin-top: 15px; font-size: 12px; color: #fff; } @media screen and (max-width: 480px) { .social-icon li a { width: 40px; height: 40px; line-height: 40px; } }
以上です。
・画面右側のプレビューでデザインが問題なく反映されていること
・プレビュー画面でフォローボタンをクリックしてちゃんと機能するか確認
問題なければ上部の「変更を保存する」ボタンをクリックして完了です。
本家のミニマルグリーンさんもおっしゃっていますが、ボタンの大きさが小さいと思ったらサイズ調整ができます。
CSSコード内の上の方に
「/* 丸ボタンの幅 */」
「/* 丸ボタンの高さ */」
「/* 高さに揃える */」
という文字が横に付いているコードがあります。
そのコードのpx(ピクセル)の数字を変更することで大きさを変えれます。
初期コードでは「50px」になっていますが、私は「80px」にして大きめにしています。
フォローBOXカスタマイズのまとめ
フォローBOXを設置することで読者が記事を読み終わり気に入ってくれたらすぐフォローできるので自分も読者もWIN-WINですね。
また「BOX」というデザインがブログ自体をオシャレにしてくれます。
フォローボタンでも機能は同じですが、その記事のアイキャッチ画像が付いているのと「この記事が気に入ったらフォロー・購読お願いします」という後押しの文章があることによって分かりやすいのが良いですね。
はてなブログユーザーなら無料会員・有料会員関係なくできるカスタマイズなので是非チャレンジしてみてください☆