目次
- 1 ①Amazonリンク
- 2 ②この記事が気に入ったら「いいね」しよう！ボックス
- 3 ③新着記事には「New!」バッジを表示
- 4 ④ページ全文の「読むのにかかる時間」を表示
- 5 ⑤「リファラ」を伝えることができる「Celtispack」ブログカード
- 6 ⑥サムネイル付きページめくり機能
- 7 ⑦個別記事にシェアカウントを合計して表示
- 8 ⑧トップページの最新記事を大きく目立たせる
- 9 ⑨カテゴリ一覧固定ページを作成
- 10 ⑩フォロワー数入りTwitter,Feedly,Push7フォローボックスを記事下に設置
- 11 ⑪関連記事をタイル風に並べて表示
- 12 ⑫カテゴリ別新着記事をヘッダー下に表示
- 13 ⑬個別記事下にアイキャッチ付きカテゴリリンクボックスを表示
- 14 さいごに
こんにちは。ちゃぼP（@chabo0429）です。
WordPressのカスタマイズが一段落したので、これまでやったカスタマイズをまとめてみたいと思います。
それぞれの効果も人によっておそらく異なりますし、このままガサっと全部コピーしてしまうと、風の羅針盤のコピーサイトが出来てしまいますので、あくまで機能や目的、サイト全体のデザインバランスをよく検討したうえで、ご利用くださいね！
スポンサーリンク
①Amazonリンク
【WordPress】Amazonリンクのおススメベスト3～TPOに合わせて最適なスタイルを！ | 風の羅針盤 | Destination of winds.
とくにAmazonアソシエイトに関しては、私のようなレビュー記事を書くブログを運営する上では、必須と…
風の羅針盤 | Destination of winds.アフィリエイトの定番、「Amazonアソシエイツ」。私のようにガジェット系のレビューをする人間にとって、大事なアマゾンへのリンクボックスですが、見た目がイマイチだと魅力も半減。ここはひとつ、魅力的な文章の最後に、ステキなリンクでAmazonへスマートに誘導しましょう！
ということで、goriさんのデザインをはじめ、いくつかのボックスを紹介しています。思えばこの記事から部長との縁が始まった記念すべき記事ですね。
②この記事が気に入ったら「いいね」しよう！ボックス
【WordPress】「この記事が気に入ったら いいね！しよう」を投稿ページに設置する方法 | 風の羅針盤 | Destination of winds.
 …
これはままはっくさんの元ネタの記事ですが、マテリアルだと「いいね」をしようとすると、サムネイルが切れてしまうという問題を抱えていたため、少しカスタマイズを加えました。
Simplicityを採用している部長のサイトでも使われています。見た目もイケてますね！
③新着記事には「New!」バッジを表示
【WordPress】WordPress用テーマ「マテリアル」新着記事に「New!」バッジを導入してみたよ | 風の羅針盤 | Destination of winds.
昨日の記事はこちら
&nbs…
新しい記事は目立たせたい！
ブログ記事は通常、新しい記事から順番に表示されますが、公開したばかりの記事はひと目で「新しい記事」と分かってもらえるとアクセスアップにつながる可能性が高くなります。
ここでは公開後3日間以内の記事に、赤い「New!」バッジを表示させる方法を記載しています。新しい記事を目立たせたい方は是非どうぞ！
④ページ全文の「読むのにかかる時間」を表示
【WordPress】WordPress用テーマ「マテリアル」に読む時間の目安表示を導入してみた | 風の羅針盤 | Destination of winds.
よく色々なブログサイトを見ていると、ページ上部に「約○分」という表示が出ていることがありませんで…
本文の長い記事は、忙しい合間に読みにきてくれた人には全部読んでもらえない可能性が高くなります。そんな記事は「Pocket」にクリップしてもらって、あとで読んでもらえるようにするのも親切な設計。
ここではタイトル部分に全文を読む所要時間を「約○分」という形で表示しています。リンクボックスやコードは含まずに計算するので、純粋に「本文」のみの所要時間を表示してくれるので、記事の長さをパッと把握するのに便利ですよ！
⑤「リファラ」を伝えることができる「Celtispack」ブログカード
【WordPress】Celtispackで直接リンク形式のブログカードを作ってリファラを伝えよう | 風の羅針盤 | Destination of winds.
以前このような記事でご紹介したことがあるのですが、
【WordPress】リンクにブログカードを使ってオシャレなサイトを | 風の羅針盤 | Destina…
これは主に「マテリアル」に使う感じですが、プラグイン「Celtispack」を使うと、リファラ情報を相手に通知することができます。
「リファラ」とは、どこからサイトに飛んできたのかを示す情報で、例えばこの風の羅針盤に貼られている部長ナビのページへのリンクをクリックすると、部長のGoogleAnalyticsに「風の羅針盤からリンクで飛んできた人がいたよ！」と記録されるので、リンクしていることが相手に通知できるというものです。
Simplicityは、標準で「はてなブログカード」を装備しているので、このプラグインを入れなくても、ブログカードは表示できますが、リンク元が「hatenablog-parts.com」になります。そのため、リンク先のサイト側ではどのサイトからやってきたのかが分かりません。
この「Celticpack」は、リンク元がそのままリンク先に通知されるので、もしかしたらリンク先のブロガーさんに気づいてもらえるかも！？
⑥サムネイル付きページめくり機能
【WordPress】前の記事・次の記事へのサムネイル付きページめくり機能導入記 | 風の羅針盤 | Destination of winds.
実は「マテリアル」にはページめくり機能が標準装備されておらず、何かいいものがないかと探していたところ、サムネイル付きのページめくり機能を紹介しているところがありました。
さっそく実装してみたところ、すごくいい感じ！
「直近のページを見たい！」という人には親切なページめくり機能。Simplicityには標準でページめくり機能は実装されていますが、ちょっと人と違った見た目がいい人におススメ。Simplicityでも多分実装できるはずです。試してないですが（笑）
⑦個別記事にシェアカウントを合計して表示
【WordPress】SNSシェア数を合計して表示する方法（マテリアル編） | 風の羅針盤 | Destination of winds.
Twitter
Facebook
Hatebu
Pocket
のトータルのシェア数を表示…
これは元々部長のオーダーで作った機能ですね。既に部長のページでもお馴染みかと思います。風の羅針盤では個別記事の右上、それから記事下中央のシェアボタン上に表示しています。
プラグイン「SNS Count Cache」を使い、Twitter、Facebook、Pocket、Hatenaでのシェアをカウントしてくれますので、割と簡単に実装できます。これはイチオシです。
⑧トップページの最新記事を大きく目立たせる
【WordPress】トップページで最新記事を大きく表示する方法 | 風の羅針盤 | Destination of winds.
こんにちは。ちゃぼP（@chabo0429）です。
このサイトではNobuoさん制作の「マテリ…
これは風の羅針盤のトップページに表示している大きなアイキャッチと、下半分の半透明なタイトルエリアの実装方法です。この記事を書いた時と現在は若干デザインを変えていますので、元記事を修正しました。
テーマのデフォルトですと、ちょっとトップページが寂しかったので、最新記事を大きくした感じですね！
PCでは2記事、モバイルでは1記事のみを大きく表示するようにデザインしました。
⑨カテゴリ一覧固定ページを作成
【WordPress】マテリアルとSimplicityでカテゴリ一覧ページを作成する方法 | 風の羅針盤 | Destination of winds.
私のサイトではマテリアルというテーマを使っていますが、このテーマは、カテゴリごとにボックスが並ぶスタイルになっているので、各カテゴリの最新記事…
カテゴリ一覧ページを固定ページとして作成して、それをグローバルメニューに表示しています。
記事がそれなりに多くなってくると、カテゴリをどうやって活かすかも重要になってきますので、簡単にわかりやすくカテゴリページにアクセスできるようにデザインしてみました。
⑩フォロワー数入りTwitter,Feedly,Push7フォローボックスを記事下に設置
これも一応オリジナルです。プラグイン「SNS Count Cache」がTwitterやPush7に対応したため、それを利用してフォロワー数を表示できるようにしてみました。
フラットなタイル調にまとめてみましたが、色が強いので、サイトを選ぶかもしれませんね。
⑪関連記事をタイル風に並べて表示
これまで関連記事は一番左にアイキャッチ、右に記事タイトルが表示され、それが縦に並ぶ表示方法でした。
これをよりアイキャッチを目立たせ、スクエア風に見やすい関連記事にしてみました。これは部長のサイトでも実装済みです。
⑫カテゴリ別新着記事をヘッダー下に表示
以前は横に3枚でしたが、5枚に増やしました。ここは部長も同じデザインになっています。中の日付などの位置がちょっと違いますが、インパクト絶大です！
暖簾みたいですけどね（笑）
⑬個別記事下にアイキャッチ付きカテゴリリンクボックスを表示
【WordPress】アイキャッチ付きカテゴリリンクを個別記事に表示する（Simplicity,マテリアル） | 風の羅針盤 | Destination of winds.
先日この風の羅針盤、それから部長サイトで、個別記事の一番下の部分にアイキャッチ付きのカテゴリページ…
これも部長のオーダーで実装済みです。アイキャッチがついたカテゴリリンクは、サイトの回遊率アップにとても効果的ですよ！
さいごに
これまで少しずつやってきたカスタマイズをまとめてみました。
改めて見ると、かなりいじってますね（笑）
でもかなり個性的＆見やすい状態になっていると思います。
WordPressのデザインに悩んでいる方も多いと思いますが、参考にしていただけると幸いです！
Feedlyの購読、Pocketの使用方法