【Xeory Extension】DeFoM投稿記事カスタマイズ情報

梅津真琴さんの個人サイト「DeFoM」カスタマイズ情報の第二弾になります。
今回は投稿記事のカスタマイズ箇所と参考サイト様の紹介をして行きたいと思います。

投稿記事カスタマイズ情報

基本情報

今回は投稿記事（いわゆるブログ記事）のカスタマイズ箇所のご紹介です。基本的な部分は十分に設定されているテーマなので、要望を確認して機能を追加した感じです。

使用テーマ

上記が制作をしたサイトで、テーマはバズ部さんの「Xeory Extension」を使用しています。デフォルトでも十分に魅力的なテーマですが要望もあり、カスタマイズを行いました。

カスタマイズの方向性

使用している「Xeory Extension」は、企業サイト＋コンテンツマーケティングを可能にしたサイト型テーマとして制作されています。

同時にリリースされた「Xeory Base」がコンテンツマーケティング用のブログ型テーマとして制作され、差別化がされています。

カスタマイズの方向性としては「固定ページはXeory Extension」を「投稿記事はXeory Base」を使い、両方のテーマのいい部分を併せ持つサイトにするというものです。

要望に「ブログとしても充実させて行きたい」というものがあり、ベースをXeory Extensionに、様々なブログとしての機能を足していくかたちで変更を行いました。

参考にさせてもらったサイト様

株式会社LIG様

サイト制作会社なので当然ですが「洒落で使いやすいデザイン」のサイトになっています。企業サイトの側面とブログ情報サイトが見事に融合したサイトで、参考にさせて頂きました。

Simplicity

わいひらさん（@MrYhira）が開発したwordpressテーマです。非常に使いやすくブログに必要な要素が詰まっています。機能を考える際に大いに参考にさせて頂きました。

また、このサイトでも使わせて頂いてます。

具体的なカスタマイズ箇所

本文先頭まわりのカスタマイズ

上記がデフォルトの状態です。

これがカスタマイズしたものです。
ブログとして使いやすいようにカスタマイズをしました。
各項目ごとに説明をしていきます。

①投稿日の位置変更

投稿日を目立つように変更しています。
これは単純に好みの話だと思いますが、現在のように表示を変更しました。

②カテゴリカラーの変更とリンクを設定

デフォルトではカテゴリーがリンクになっていないので設定しています。
また、カテゴリーごとに異なるカラーを設定しています。

<ul class="cat-name">
<li class="cat-name">
<span class="<?php echo $catslug; ?>">
<?php the_category(', ');?>
</span>
</li>
</ul>

こんな感じで表示を行っています。

上記のサイト様を参考に各カテゴリーに対して固有のカラーを指定しています。

③タイトル下にタグの表示

カテゴリーと同様に記事先頭にもタグを表示してリンクを貼っています。
このデザインは「LIG様」のサイトを参考にしています。

<ul class="tag-area">
<li class="tag-button"><?php the_tags(' ', ' ');?></li>
</ul>

こんな感じでタグを呼び出して、CSSで装飾をしています。

④SNSアイコンの変更

公式アイコンは表示が重く、使い勝手が悪いので変更しています。
JETPACKのSNS表示機能+「Feedly Insight」というプラグインで各SNSを表示しています。

JETPACKのSNS表示位置はデフォルトでは変更出来ないので、修正しています。

上記のサイト様を参考に変更をしています。

⑤読む目安時間と更新日の表示

読む目安時間は、個人的に見る要素なので追加しました。
上記のサイト様を参考に導入しています。

更新日の設定も情報次第では、あった方が親切なので設定しています。
上記のサイト様を参考に導入しています。

⑥著者名にリンク

現在は梅津真琴さんだけで運営をされていますが増えた時のために
著者名にリンクを設定しています。

セキュリティ対策のために上記サイト様を参考に対策を行っています。

本文中のカスタマイズ

アフィリエイト表示ウィジェットの追加

PC上では確認出来ませんが、スマホ・タブレットではH2見出しの上に
アフィリエイト用バナーが表示されるようにしています。

Google AdSenseなどを貼り付けてもいいかもしれません。

画像のポップアップ機能

画像をクリックするとポップアップする機能をプラグインで実現しています。
個人的な経験から「Easy FancyBox」を選択して導入しています。

• Internet Explorer
• Google Chrome
• Firefox
• Safari

僕の環境では、上記の主要ブラウザでの挙動を確認しています。

上記のサイト様を参考に導入を行いました。

はてなブログカード風にリンクを表示

Simplicityでデフォルトで導入されている機能で美しくリンクを表示出来ます。
functions.phpでの設定、CSSでの設定を行えばどのサイトでも導入可能です。

わいひらさんのサイトで導入方法が丁寧に解説されています。

本文下のカスタマイズ

上記がデフォルトの状態です。

①SNSボタンの変更

先ほど紹介したJETPACKのSNS表示機能+「Feedly Insight」で行っています。
カスタマイズを行い複数位置に表示させています。

②フォローボタンの設置

拡散用のSNSボタンの下にフォローボタンを設置しています。
最近ではこのようなデザインが多いので導入したかたちです。

わいひらさんの記事を参考にアイコンフォントを導入しています。
適当にCSSでいじれば完成です。

関連記事の表示

記事下に関連記事を表示しています。
「ついで読み」を誘発するには関連記事がもっとも効果が高いと思います。

上記のサイト様を参考にプラグインで導入をしています。

前後記事の表示

前回の記事で導入方法に関して解説しています。
そちらを参照ください。

まとめ

かなり駆け足になってしまいましたが、カスタマイズ箇所と参考サイト様のご紹介でした。
他にも細かく変更などを行っていますが変更箇所を忘れています……

思い出したら記事に追加していくのでチェックをして頂ければと思います。
次回は「サイドバー」のカスタマイズに関して書かせて頂きます！

それでは、本日は失礼致します。