バズ部が無料提供している
WordPressテンプレート「Xeory」が非常に熱い。
バズ部が提唱している様々なSEOの施策を、
テンプレート内で簡単に実践できるという意味で、
コンテンツSEOブログを運営している人にとっては、
有料のテンプレートよりも使いやすいのではないだろうか。
私も当ブログではXeoryをオススメしている。
インストールした後も使い方マニュアルが
テンプレート内に実装されているし、
初心者にも安心の仕様になっているので
こちらも自信を持って推奨できる。
今回は、Xeoryを使用していて、
- もっとSEO的に有利なデザインにしたい！
- ファーストビューを改善したい！
- 細かい部分を改善したい！
という方に、
私が行ったXeoryのカスタマイズをシェアしようと思う。
CSSなどを編集するので、
バックアップを取りながらぜひ試してみて欲しい。
ファーストビューを改善する！
まずは下記の画像を見て欲しい。これは私のブログの記事だ。
このファーストビューを見ると、
肝心の記事コンテンツ部分が十分に見えない。
もう少しひと目で文章を多く読ませた方が、
読者は記事を読んでくれる可能性が高まるはずだ。
ここで私が見なおそうと考えたのが以下の4点。
- ヘッダーメニューを外してサイト下に配置
- パンくずリストを記事下に配置
- ソーシャルブックマークボタンを記事下にのみ配置
- 記事タイトル周辺のpaddingを修正
一個一個実践してみよう。
ヘッダーメニューを外してサイト下に配置
まず、私はこのブログのヘッダーメニューが効果的ではないと考えた。
もちろんあった方がいい場合もあるが、
このブログの場合、
別にヘッダーメニューをここに置く
必然性は必ずしも無いと判断した。
それよりもファーストビューで
なるべく多くの文章を読ませたほうが効果的なはず。
そこで、
ヘッダーメニューをブログ上部から外し、
フッター部分に配置するようにカスタマイズ。
- ダッシュボード管理画面（の左サイドメニュー）>外観>カスタマイズ
開くと以下のような画面が開くので
「ナビゲーション」を展開してグローバルナビの部分を変更しよう。
するとブログ記事は下図のようになった。
先ほどよりもブログ記事が多く見えるようになった。
パンくずリストを記事下に配置
ブログ上にある上図・下記のようなものをパンくずリストという。
- ホーム / おすすめ映画 / 映画「ビリギャル」は単なる逆転合格の話じゃなかった件
これはGoogleのクローラーが、
サイトの構成を理解しやすくするためのものだ。
これがあることによってサイトの階層構造が分かりやすくなる。
しかしここが重要なのだが、
パンくずリストはあくまで
クローラーのためにあるものであって、人間のためでは無いということ。
つまり、私達人間がサイトを見る時に、
パンくずリストはさほど役に立っていないのだ。
もちろん見る人もいるだろうが、
よほど大きなサイトだったり、
ブログに詳しい人でない限りは、
パンくずリストはそこまで重要なものではない。
パンくずリストがあることで、
微妙に記事コンテンツが下に追いやられているので、
思い切って記事下に配置してみよう。
編集するのは「単一記事の投稿 (single.php)」だ。
- ダッシュボード管理画面（の左サイドメニュー）>外観>テーマ編集>単一記事の投稿(single/php)
開くと下記のようなソースがあるはずだ。
このソースの7行目くらいにある
<?php bzb_breadcrumb(); ?>
をカットまたはコピーした上で削除しよう。
次に同じphpソースの少し下をスクロールし、
45行目〜57行目のあたり。
<?php bzb_social_buttons();?>
<ul class="post-footer-list">
この間に貼る。
こんな感じ。
<footer class="post-footer">
<?php bzb_social_buttons();?>
<?php bzb_breadcrumb(); ?>
<ul class="post-footer-list">
<li class="cat"><i class="fa fa-folder"></i> <?php the_category(', ');?></li>
<?php
$posttags = get_the_tags();
if($posttags){ ?>
<li class="tag"><i class="fa fa-tag"></i> <?php the_tags('');?></li>
<?php } ?>
</ul>
</footer>
すると下図のように、
ブログ個別記事からパンくずリストが消え、
ソーシャルブックマークボタンの下に配置されるようになった。
これで更にファーストビューが
改善され多くの文章を読めるようになった。
スマホではまだまだダメ・・・
さて、PCではかなりファーストビューが改善されたが、
スマホで見るとどうだろうか。
私のiPhone5Sでブログ記事を見てみた。すると・・・
図のようにファーストビューで文章が表示されない。
タイトル文字とソーシャルブックマークが
かなり幅を取っているのが分かる。
ソーシャルボタンはシェアされた時に
「記事の信頼性」を高める事に貢献はするだろうが、
まずは読まれないと話にならない…。
ということでソーシャルボタンは
記事下のみに配置し、記事上は消す事にする。
ソーシャルブックマークボタンを記事下にのみ配置
先ほど同じように、
single.phpのソースコードを開こう。
- ダッシュボード管理画面（の左サイドメニュー）>外観>テーマ編集>単一記事の投稿(single/php)
25行目〜33行目。
<header class="post-header">
<ul class="post-meta list-inline">
<li class="date updated" itemprop="datePublished" datetime="<?php the_time('c');?>"><i class="fa fa-clock-o"></i> <?php the_time('Y.m.d');?></li>
</ul>
<h1 class="post-title" itemprop="headline"><?php the_title(); ?></h1>
<div class="post-header-meta">
<?php bzb_social_buttons();?>
</div>
</header>
この中の
<?php bzb_social_buttons();?>
これを削除する。
すると下図のように
ブログ記事上部からソーシャルボタンが消え、
さらにファーストビューが改善された。
スマホでも見てみると・・・
ソーシャルボタンは消えたが、
その部分が空白になっただけで
ファーストビューはあまり変わらない。
ここで新たな課題が出てきた。
- スマホ画面でのブログタイトル文字が大きすぎる
ということだ。PCならともかく、
スマホの場合はタイトル記事は大きくなくてもいいはず。
ということでスマホでのファーストビュー最適化をしていこう。
スマホの個別記事タイトルの文字サイズを小さくする
スマホ表示だとタイトル文字がやたら大きいので
font-sizeを修正して小さくしてみよう。
base.cssを開いて、ソースの最下部に以下のコードを追加する。
/*---------------------
追加修正情報
-----------------------*/
/*--スマホ表示のh1文字サイズ --*/
@media screen and (max-width: 767px) {
/* phone */
h1.post-title {
font-size: 16px;
}
}
ファイルの一番下が分かりやすいのでここにコピペしよう。
すると下図のようにスマホで見た時の記事タイトルの文字サイズが小さくなった。
スマホ表示時のタイトル下の余白を狭める
今度は、上図の空白部分をなくして
アイキャッチ画像が大きく見えるようにしよう。
先ほどと同じようにbase.css最下部に下記のコードを追加しよう。
/*---------------------
追加修正情報
-----------------------*/
/*--スマホ表示のh1文字サイズ --*/
@media screen and (max-width: 767px) {
/* phone */
h1.post-title {
font-size: 16px;
margin: 0 0 0px !important;
header.post-header {
padding: 42px 20px 0px !important;
section.post-content {
padding: 0px 64px;
}
}
※先ほどのコードの延長。
加えて、style.cssの最下部にも
以下のコードを追加しよう。
/*--スマホ表示のコンテンツ上部の余白を消す --*/
@media screen and (max-width: 767px) {
/* phone */
.post-content {
padding: 0 20px !important;
}
}
下図のように
記事タイトルの周りの余白が
キュッと絞られるようになった。
他にもブログタイトルや
日付部分の余白など細かい部分は多々あるが、
今回はこれくらいのカスタムで良しとしておく。
スマホのファーストビューカスタムCSSまとめ
ここにスマホでのファーストビューを
カスタマイズした追加CSSを貼っておく。
そのままコピペして貼り付けてみよう。
@media screen and (max-width: 480px) {
h1.post-title {
font-size: 20px;
margin: 0 !important;
}
.post-content {
padding: 0 20px !important;
}
.post-meta {
margin-bottom: 25px;
}
.post-header {
padding: 25px 20px 15px;
}
#header {
padding: 10px 0 15px !important;
}
}
iPhone5Sのサイズでギリギリ文章が
見えるかどうかくらいまでファーストビューを改善することが出来た。
ウィジェットをカスタマイズして見栄えを良くする
Xeoryを使っていて気になるのが、ウィジェットの「カテゴリー」において
- 投稿数を表示
- 階層を表示
と設定すると、
デザインが少し格好悪いものになってしまうということだ。
細かい所なので放置してもいいのだが、
ブログの見栄えを良くしたい私としてはぜひ修正したい所。
今回はカテゴリーウィジェットのデザイン修正方法を解説する。
CSSを編集し投稿数を右側に配置
このように、
カテゴリーの投稿数が下に来てしまい少し格好が悪い。
なのでこの投稿数を
カテゴリー名の右側に配置するようにカスタムしてみよう。
style.cssの3286-3292行目に黄色背景のソースを入れるだけだ。
body.color04 .widget_recent_entries a,
body.color04 .widget_archive a,
body.color04 .widget_categories a,
body.color04 .widget_meta a {
color: #5e6265;
background: url('lib/images/icont_arw_lit.png?1418372717') left center no-repeat;
display: inline-block; /*--追加編集 カテゴリーの投稿数を横に配置 --*/ }
するとカテゴリー部分が下図のようになった。
小カテゴリーが見づらいデザインを修正
しかし、これだと小カテゴリーの階層構造が分かりにくい。
本ブログのカテゴリーの階層構造は
- オススメディア
- おすすめアニメ
- おすすめ映画
- おすすめ本
- おすすめ漫画
このようになっているが、
ブログ表示では階層構造が分かりにくいので修正してみる。
base.cssの最下部に下記のソースを追加しよう。
/*--小カテゴリーの左内側余白を空ける --*/
li.cat-item .children {
padding-left: 30px !important;
}
すると下図のように小カテゴリーが
右に寄って階層構造がわかりやすくなった。
Xeoryのカテゴリーウィジェットのデザインが頗る微妙だったので、
これを参考にカスタマイズしてみて欲しい。