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

残念ながら、制作したサイトは現在閲覧が出来ません。

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

スポンサーリンク

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

基本情報

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

使用テーマ

https://xeory.jp/

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

カスタマイズの方向性

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

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

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

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

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

株式会社LIG様

株式会社LIG(リグ)は東京都台東区上野でウェブ制作を行うクリエイティブ集団です。ホームページ制作、プロモーション、システム開発、Webマーケティング、シェアオフィス運営などをおこなっています。

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

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

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

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

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

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

150530-064500

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

defom-post-customize02

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

①投稿日の位置変更

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

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

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

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

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

WordPressで企業サイトを作成するときに、トップページに新着記事を表示することはよくあることかと思います。 この時に、ただ新着記事をズラ~と表示するのではなく、記事のカテゴリー名も併せて表示、さらにカテゴリーごとに色分けして表示したいと思います。 テンプレートの記述 新着記事を5件表示

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

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

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

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

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

④SNSアイコンの変更

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

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

Wordpressプラグイン「Jetpack」を使うと、上のような共有ボタンを簡単に設置できます。 ただ標準のままだとボタンを配置する場所を自由自在に選べるというわけではありません。 調べてみると、add_filterにて「the_content」「the_excerpt」にフックされているようなので、テンプレ

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

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

記事を読み終えるのに必要な時間の目安を表示する方法を紹介します。読者が記事の処遇を決めるための情報をあらかじめ提供することで、判断にかかる時間を短縮し、全体として情報収集を効率化します。

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

WordPressの記事に「最終更新日」を表示する方法を紹介します。 一般的なWordPressテーマでは、記事の公開日を表示する機能はありますが、最後に記事を変更した日付を表示する機能はありません。記事に「最終更新日」・・・

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

⑥著者名にリンク

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

ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォー...

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

本文中のカスタマイズ

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

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

Google AdSenseのコードなどをテキストウィジェットを使って、本文中の見出し手前に表示するWordpressカスタマイズ方法の紹介です。編集箇所が減るので、PHPのカスタマイズに慣れてない人でも、手軽にできるのではないかと思います

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

画像のポップアップ機能

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

  • Internet Explorer
  • Google Chrome
  • Firefox
  • Safari

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

WordPressプラグイン「Easy FancyBox」は、jQueryのFancyBoxを使いスムーズにかっこ良く画像を拡大するプラグイン。非常に簡単な設定で「Lightbox」系のふわっと感を演出出来るのでサイトのグレードが上がります。このふわっと感が病み付きになる。

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

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

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

自分のブログ内のURLを、Wordpressのブログエディターに貼り付けるだけで、簡単にブログカード表示できるカスタマイズ方法です。

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

本文下のカスタマイズ

defom-post-customize03

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

defom-post-customize04

①SNSボタンの変更

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

Wordpressプラグイン「Jetpack」を使うと、上のような共有ボタンを簡単に設置できます。 ただ標準のままだとボタンを配置する場所を自由自在に選べるというわけではありません。 調べてみると、add_filterにて「the_content」「the_excerpt」にフックされているようなので、テンプレ

②フォローボタンの設置

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

日本のブログでの利用頻度は高いけど、アイコンフォントがないfeedly、はてブ、ポケット、LINEフォントなどをダウンロードできるようにしました。あとそれの利用方法です。

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

関連記事の表示

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

WordPress Related Postsは、記事の下に関連記事を表示できるプラグインです。簡単にWordPressに関連記事を表示する機能を導入できます。 PC用とモバイル用テーマが複数用意されており、好きなデザイ・・・

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

前後記事の表示

Xeory Extensionを使用した「動画制作サイト:DeFoM」のカスタマイズ記事第一弾です。

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

まとめ

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

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

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

この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク