コンテンツ下(記事直下)をデザイン-SNSボタンや関連記事の表示

公開日: 2014年07月09日
最終更新日: 2015年07月22日

share

記事直下にSNSボタンや関連記事を表示させ、CSSでデザインしました。関連記事はプラグイン「Yet Another Related Posts Plugin(YARPP)」で表示。また、ソーシャルのJavascriptを1つにまとめて非同期化処理を加え、表示速度向上の対策なども。

もくじ

はじめに

わりと記事も増えてきた(と言っても40記事以下)のと、ページビューもほんのちょっと増えてきた(と言っても1日200PV前後)ので、コンテンツ下部分のデザイン調整をしたいと思います。

今は、Google AdSense広告とSNSボタンがあるだけです。

私は基本的にどのブログでも、Yet Another Related Posts PluginYARPP)というプラグインをインストールして、記事下に関連記事を表示させることが多いです。

が、inosh blogは記事がとにかく少なかったので、とりあえず放置してました。

今もまだ十分少ないのですが、一応は関連記事が表示されるくらいの数にはなったかな~というのと、これからはどんどん記事を投稿していきたいと思ってるので、もう導入しちゃいます。

関連記事を表示させる目的は、訪問別ページビューを増やす目的と内部SEO対策です。

またそれに併せて、ソーシャルボタンのデザインおよびコード等の変更、フォローボタンやLike Boxの設置などを行いたいと思います。

ソーシャルボタンは現在、賢威のデフォルト機能で実装されているので、これをもう完全にオリジナル(まぁオリジナルではないんだけど)にしたいと思います。

ちなみに、YARPPをインストールしてみたところ、何も設定しないとこんな感じになりました。
inosh blogの記事下

ここからカスタマイズしていきます。

イラストレーターでラフデザイン

私は結構、ラフデザインとかを作ったりせずに、頭の中でイメージしたものを直接コーディングしながらブラウザ上で確認しつつ微調整していくことが多いです。

が、今回はわりと変更点が多くてややこしいので、完全に完成形を決めておいた方が良いと思ったので、先にイラストレーターでデザインを完全に決めてしまいました。

イラレで作成したラフデザイン

これを元に、PHPやCSSの記述、およびプラグインの設定などをしていきます。

ソーシャルボタンの変更

賢威では、以下のコードでソーシャルボタンを呼び出しています。

<?php get_template_part('social-button'); ?>

まずは、これを全て変更しました。
「social-button」などで検索し、該当するファイルは全て編集。

私が使用している賢威のバージョンだと、次の5つがHITしました。

index.php
page.php
single.php
archive.php
404.php

小さいサイズのボタンにしたいところ(タイトル下の抜粋部分のソーシャルボタン)は以下のコードに変更。

<div id="top_share">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<div class="fb-like" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<div class="g-plusone"></div>
</div>

大きいサイズのボタンにしたいところ(記事下部分のソーシャルボタン)は以下のコードに変更。

<div id="bottom_share">
<div class="share_4"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a></div>
<div class="share_4 fb-like" data-width="150" data-layout="box_count" data-show-faces="false" data-send="false"></div>
<div class="share_4"><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></div>
<div class="share_4 vt"><div class="g-plusone" data-size="tall"></div></div>
</div>

次は、それぞれに紐づくjsファイルを作成し、footer.phpで読み込みます。

inosh blogの場合は、以下のようなjsファイルを作成(てかコピペ)しました。

share.js

(function(w,d){
        w.___gcfg={lang:"ja"};
        var s,e = d.getElementsByTagName("script")[0],
        a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");
        s.src=u;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
        a("//b.st-hatena.com/js/bookmark_button.js");
        a("//platform.twitter.com/widgets.js","twitter-wjs");
        a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
        a("https://apis.google.com/js/plusone.js");
})(this, document);

上記のコードは、最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…を参考にさせていただきました。

footer.phpで、賢威デフォルトのソーシャルボタン用のjsを読み込んでいるので、それを削除して上記で作成したjsファイルを読み込むようにします。

footer.php(デフォルト)

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/socialButton.js" charset="utf-8"></script>

下矢印

footer.php(修正後)

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/share.js" charset="utf-8"></script>

これで、表示が変わりました。
※大きいサイズのソーシャルボタン部分。
記事下のソーシャルボタン

関連記事の表示

Yet Another Related Posts Plugin(YARPP)をインストール・有効化しているのを前提に進めていきます。

関連記事一覧を任意の位置に表示させたいので、そのための設定変更を加えるため、Wordpress管理画面の「設定 > YARPP」をクリックし、YARPPの設定画面を開きます。

YARPPの設定画面で、「Automatically display related content from YARPP Basic on」と書かれた部分のチェックを全て外します。
YARPPの設定画面

それで、以下のコードをテーマファイル(single.phpなど)の任意の位置に記述すると、そこに関連記事一覧が表示されるようになります。

<?php related_posts(); ?>

ちなみに、私はその他にYARPPの設定画面で「関連スコア設定」の「表示する最低関連スコア」を2にし、タグを「検討しない」としました。※タグを使用していないため。

また、「表示設定」の中にリスト・サムネイル・カスタムと3つ選べるようになっているので、その中からサムネイルを選択しました。

その下の「ヘッダー」という部分には英語のテキストが入力されていたので、日本語で「関連記事」としました

フォローボタンとかLike Boxとか

フォローボタンは、Twitterボタン | Aboutから作成します。
「ボタンを選択」画面が出るはずなので、その中から「フォローする」を選択。

するとボタンのオプション画面が追加で表示されるので、ユーザー名を入力します。

そして、私の場合は「ユーザー名を表示」と「ボタン(大)」にチェックを入れ、言語設定から「日本語」を選びました。
フォローボタンの作成画面

で、右側にあるテキストエリアの中のコードをコピーして、テーマファイル(single.phpなど)の任意の位置に貼りつけます。

Like Boxは、三十路男子さんの記事([Blogger] ブログにFacebook Like Box(ライクボックス)を設置する方法 | Bloggerをカスタマイズするときに見るブログ)などを参考に作成します。

私の場合は、以下のコードの「data-href(FacebookページのURL)」と「data-width(幅)」と「data-height(高さ)」を変更していつも使いまわしています。

<div class="fb-like-box" data-href="https://www.facebook.com/inosh.jp" data-width="300" data-height="220" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

必要に応じて、data-header(「Facebookもチェック」という部分を表示するかしないか)をfalseにしたりしますが、その他の部分はあまり変えないです。

で、このコードをフォローボタンと同じくテーマファイルの任意の位置に貼りつけます。

まとめ&仕上げ

最終的に、私はsingle.phpのコンテンツ下部分に以下のようにコードを追記しました。

<div id="contents_bottom_area">
<h2 id="share_h2">\(^o^)/ <span class="mycolor">ぼっけぇ</span>シェア \(^o^)/</h2>

<div id="share_area">
<div id="bottom_share">
<div class="share_4"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a></div>
<div class="share_4 fb-like" data-width="150" data-layout="box_count" data-show-faces="false" data-send="false"></div>
<div class="share_4"><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></div>
<div class="share_4 vt"><div class="g-plusone" data-size="tall"></div></div>
</div>

<div id="follow_me">
<p class="follow_top">フォロワーさん絶賛募集中</p>
<p class="follow_bottom"><a href="https://twitter.com/inosh_man" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large">@inosh_manさんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></p>
</div>
</div><!-- share_area end -->

<div class="contents_bottom_left_ad">
<?php if (wp_is_mobile()) :?><!-- ▼モバイル -->
<span>スポンサーリンク</span><br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- inosh_bottom_mb -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php else: ?><!-- ▼パソコン -->
<span>スポンサーリンク</span><br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- inosh_bottom_pc -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php endif; ?>
</div>

<p class="contents_bottom_right_fb_title">Facebookページ</p>
<div class="contents_bottom_right_fb fb-like-box" data-href="https://www.facebook.com/inosh.jp" data-width="300" data-height="280" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="true"></div>

</div><!-- contents_bottom_area -->

<?php related_posts(); ?>

また、結果的に最初にイラストレーターで作成したラフデザインとは多少異なる形となりましたが、CSSファイルには以下のように記述しました。

#top_share{ text-align:right; margin-bottom:30px; }
#bottom_share .share_4{ float:left; margin-right:10px; }
#contents_bottom_area{ border:2px solid #222; margin:50px 0; padding:10px; overflow:hidden; }
#main-contents #share_h2{ background:none; border:none; text-align:center; margin:0 0 20px; padding:0; font-size:21px; }
#share_area{ background:#fff; padding:25px 0 10px; margin-bottom:10px; }
#bottom_share{ float:left; margin:0 30px 0 35px; }
#main-contents .follow_top{ margin-bottom:0; }
.contents_bottom_left_ad{ float:left; margin-right:7px; text-align:center; }
.contents_bottom_right_fb_title{ margin-bottom:0 !important; text-align:center; }
.yarpp-related{ border-bottom:5px solid #e41858; padding-bottom:20px; }
.yarpp-related h3{ background:#e41858; border:none; margin-bottom:20px !important; padding:1px !important; text-align:center; line-height:4px; height:4px; font-size:21px; }
.yarpp-related h3 span{ background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/bg.png) repeat; padding:0 20px; margin-bottom:50px; }
.yarpp-thumbnails-horizontal .yarpp-thumbnail{ margin:15px !important; padding-bottom:5px; border:1px dashed #222 !important; }
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title{ color:#e41858; text-decoration:none !important; }


@media (max-width:640px) {
#top_share{ overflow:hidden; }
#top_share .share_4, #bottom_share .share_4{ float:left; margin-right:5px; }
#top_share .fb-like, #bottom_share .fb-like{ width:74px !important; }
#bottom_share{ margin:0 0 15px 10px; }
#main-contents #share_h2{ font-size:16px; }
#follow_me{ margin-left:20px; }
.contents_bottom_left_ad, .contents_bottom_right_fb{ float:none; margin:0; text-align:center; }
.contents_bottom_right_fb_title{ margin-top:15px; }
.contents_bottom_right_fb{ margin-bottom:10px; }
}

ですが、YARPPのデフォルトCSSが効いてしまって私が記述したCSSが適用されませんので、function.phpに以下のコードを記述し、デフォルトのCSSを読み込ませないようにします。

//YARPPのCSS消去
add_action('wp_print_styles','lm_dequeue_header_styles');
function lm_dequeue_header_styles(){ wp_dequeue_style('yarppWidgetCss'); }
add_action('get_footer','lm_dequeue_footer_styles');
function lm_dequeue_footer_styles(){ wp_dequeue_style('yarppRelatedCss'); }

このコードは、デココさんの記事(Yet Another Related Posts Plugin (YARPP)がヘッダーとフッターに勝手に追加するCSSを外そう | シロデココ)を参考にさせていただきました。

ただ、これでも以下の1行だけは消えませんでした。

<link rel='stylesheet' id='yarpp-thumbnails-yarpp-thumbnail-css'  href='http://inosh.jp/wp-content/plugins/yet-another-related-posts-plugin/includes/styles_thumbnails.css.php?width=120&#038;height=120&#038;ver=4.2.2' type='text/css' media='all' />

サムネイル部分のCSSです。
プラグインの編集から直接消すことも出来るのですが、面倒なので、今回は!importantで対応しました。

(もしもどなたかfunction.phpへの追記でこのCSSを読み込ませないようにする方法をご存知でしたらご教示くださいT_T)

以上で、コンテンツ下部分はこのようになりました↓
inosh blogのコンテンツ下部分(カスタマイズ後)

思いのほか時間がかかっちゃいました~。

またいつかカスタマイズするとは思いますが、今回はひとまず終了です。
(ちなみに、ぼっけぇは岡山弁です)

7/10追記 – 色々と微調整

YARPPでサムネイル部分のCSSを削除する方法が分からなかったのですが、適当にfunctions.phpに記述してみたら、出来ちゃいました(!)。

詳細は、Yet Another Related Posts Plugin (YARPP) の設定とCSS削除にまとめています。

しかしデフォルトのCSSが削除されてしまったので、当然見た目のデザインは崩れます。

なので、元々読み込まれていたCSS(http://inosh.jp/wp-content/plugins/yet-another-related-posts-plugin/includes/styles_thumbnails.css.php?width=120&height=120&ver=4.2.2)の中のコードから、必要なものだけ自分のオリジナルCSSにコピペしました。

また気付いていなかったのですが、関連記事内の記事タイトルが途切れてしまっていたので、そこも修正。

最終的に、CSSファイルへの記述は以下のようになりました。

#top_share{ text-align:right; margin-bottom:30px; }
#bottom_share .share_4{ float:left; margin-right:10px; }
#contents_bottom_area{ border:2px solid #222; margin:50px 0; padding:10px; overflow:hidden; }
#main-contents #share_h2{ background:none; border:none; text-align:center; margin:0 0 20px; padding:0; font-size:21px; }
#share_area{ background:#fff; padding:25px 0 10px; margin-bottom:10px; }
#bottom_share{ float:left; margin:0 30px 0 35px; }
#main-contents .follow_top{ margin-bottom:0; }
.contents_bottom_left_ad{ float:left; margin-right:7px; text-align:center; }
.contents_bottom_right_fb_title{ margin-bottom:0 !important; text-align:center; }
.yarpp-related{ border-bottom:5px solid #e41858; padding-bottom:20px; margin-bottom:50px; }
.yarpp-related h3{ background:#e41858; border:none; margin-bottom:20px !important; padding:1px !important; text-align:center; line-height:4px; height:4px; font-size:21px; }
.yarpp-related h3 span{ background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/bg.png) repeat; padding:0 20px; }
.yarpp-thumbnails-horizontal{ overflow:hidden; }
.yarpp-thumbnails-horizontal .yarpp-thumbnail, .yarpp-thumbnail-default, .yarpp-thumbnail-title{ display:inline-block; *display:inline; }
.yarpp-thumbnails-horizontal .yarpp-thumbnail{ width:130px; height:200px; margin:15px; padding-bottom:5px; border:1px dashed #222; float:left; }
.yarpp-thumbnail > img, .yarpp-thumbnail-default{ width:120px; height:120px; margin:5px; }
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title{ font-size:80%; color:#e41858; text-decoration:none; max-height:70px; line-height:1.4em; margin:0 7px 7px; width:116px; overflow:hidden; }

@media (max-width:640px) {
#top_share{ overflow:hidden; }
#top_share .share_4, #bottom_share .share_4{ float:left; margin-right:5px; }
#top_share .fb-like, #bottom_share .fb-like{ width:74px !important; }
#bottom_share{ margin:0 0 15px 10px; }
#main-contents #share_h2{ font-size:16px; }
#follow_me{ margin-left:20px; }
.contents_bottom_left_ad, .contents_bottom_right_fb{ float:none; margin:0; text-align:center; }
.contents_bottom_right_fb_title{ margin-top:15px; }
.contents_bottom_right_fb{ margin-bottom:10px; }
}

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む