Cocoonで書いた記事の投稿日と更新日のアイコンを、Font Awesome 5のアイコンに変更するCSSカスタマイズです。

記事を書いたり更新したりすると、自動的にその日付が記事に表示されるようになっています。Cocoonではそこにアイコンも表示されるようになっているんですが、これがちょっと僕的に分かりづらかったんですよね。

こちらはいつか書いた記事。タイトルの上に投稿日と更新日が書かれていて、その左側にはそれぞれアイコンが表示されています。左側が記事の投稿日、右側が更新日ですね。こうして書くと分かると思うんですが、言われないと分かりづらいです。そのためにもアイコンがついていると思うんですが、このアイコン自体がそれぞれ似ているので、どっちがどっちか分かりづらかったんですよね。

調べてみたら詳しく書いてくれている方がいたので、参考にして変更してみました。

変更後はこちら！投稿日には「羽ペン」っぽいマーク、更新日にはブラウザなどで出てきそうな「更新」っぽいマークに変えています。

ちょっとアイコンを変えるだけでも分かりやすくなりますし、細かいところまでカスタマイズしている感が出せると思います！

Font Awesome 5のアイコンに変更

CSSだけで出来ます。Cocoonの場合は、子テーマの「style.css」に書いています。

/* 投稿日アイコンの変更 */ 
.fa-clock:before { 
content: "\f52d"; /* feather */
}

/* 更新日アイコンの変更 */ 
.fa-history:before { 
content: "\f2f9"; /* rotate-right */
}

“post-date”や“date-tags”にFont Awesomeのアイコンコードを適用するようなやり方でやってみたところ、元のアイコンと同時に表示されたりして上手くいきませんでした。

そこで、元のアイコン自体を変更するコードにしています（実はよく分かってませんがこれで上手くいきました）。

「fa-clock」「fa-history」というのがもともと表示されていたアイコンのコードで、これをFont Awesome 5のコード（f52d,f2f9など）上書きするようになっています。

Font Awesome 5のアイコンを使うためには、事前にCocoonの設定を変更しておく必要があります。「Cocoon設定」▶︎「全体」で、「サイトアイコンフォント」を「Font Awesome 5」にしておきましょう！

ウィジェットは別のCSSで

記事のアイコンだけだとこれで上手くいくんですが、フロントページや投稿下に置いているウィジェットには、最初からアイコンが表示されていないので適用されませんでした。

なので追加のコードを打っています。それがこちら。

/* 投稿日のアイコンの変更 */
.widget-entry-card-date::before{
font-family: "Font Awesome 5 Free";
content: "\f52d"; /* feather */
}

/* 更新日のアイコンの変更 */
.widget-entry-card-update-date::before{
font-family: "Font Awesome 5 Free";
content: "\f2f9"; /* rotate-right */
}

これを追加すると、フロントページの「新着記事ウィジェット」や、投稿下の記事一覧ウィジェットにもアイコンが表示されました。

細かいコードの仕組みは分かってないところもありながらやっているんですが、少しでも変更が上手くいかない方の参考になれば嬉しいです。

前回、「関連記事のリンクを、記事の中に手動で追加してみた。」という記事を書きました。
ブログの関連記事は同じカテゴリーのものがランダムで表示されるようになっています。自動で8つくらい表示されるんですが、必ずしもその記事に近い記事が表示されるわけじゃないんですよね…

なのでちゃんと関係がある記事にも行けるように「記事の最後に手動でリンクを貼ってみた」ということを書いた記事でした。やり方としては、タイトルとURLをコピーしてきて、記事の最後にひとつひとつ貼るというものです。

何かを読んだ方がもし続けて読んでくれるとしたら、可能性が大きいのは興味がある記事だと思います。なのでこれをやるのはとても良いと思います。ただ、ものすごく手間がかかるんですよ。記事と記事をお互いに結ぶ「相互リンク」は、それぞれの記事でリンクを貼るという作業をしないといけないし、どこか修正するなら一個一個探していかないといけないんです。

これ大変だなぁ…と思ってたら、この関連が強い記事を自分が選んで繋ぐための、ものすごく心強いプラグインを見つけました！

Custom Related Posts

見つけたのは、WordPressのプラグイン「Custom Related Posts」です！

ブログの中で、簡単に記事同士の相互リンクを作れるプラグインです。
記事のWordPress編集画面の中で、関係がありそうな記事を検索してボタンを押すと、記事から記事へのリンクが自動的に作られます。しかも片方の記事を編集するだけで、「リンクを貼った記事からのリンクも自動的に作られる」ので、ボタンひとつで相互リンクを作れるところが凄いんです！！

そして相互リンクだけじゃなくて、どちらか一方へのリンクも編集画面で簡単に作れます。
例えば記事Aから記事Bだけにリンクしたい場合。記事Aから記事Bへの一方向リンクを作れるだけじゃなくて、記事Bの編集画面で、記事Aからのリンクを作ることが出来るようになっています。

つかいかた

このプラグインは、Novellaさんの「関連記事を手動で作成する『Custom Related Posts』　自動相互リンク機能付き」という記事で見つけました。

詳しい設定の方法はこちらの記事をぜひ見ていただきたいと思います。

僕の方でも簡単に説明をすると…

基本設定

まずは初期設定。このプラグインは英語表記です。分かりづらい方もいると思うので、簡単に解説をします。

WordPressの管理画面にある「設定」から「Custom Related Posts」へ行きます。
そしたら設定画面が開きます。ここに表示されている項目の解説です。

【Documentation】

プラグインの簡単な概要が書いてあります。
“Custom Related Postsを使えば、関連記事を完全にコントロールすることができます。編集時に関連記事を手動で設定し、ショートコード、ブロック、ウィジェットを使って関連記事を表示することができます。”的なことが書いてあります。

【General】

「Post Types」
関連記事で表示できる投稿タイプを選べます。
僕の場合は公開している普通の記事を貼りたいので「post」を選んでいます。
他にも「page」を入れておけば固定ページのリンクを貼れるようになったりします。
僕はカテゴリーごとの記事一覧ページも表示させたいんですが、今のところやり方が分かりません…

「Cache Relations」
リストのキャッシュみたいです。表示などにも関わってきそうなので、ここはオンにしておくと良いみたいです。

【Search】

リンクを作る時に、記事の編集画面で表示する検索機能についての設定です。
「Number of Posts」
検索で表示する記事の数です。
記事を検索する時には何かワードを入れるんですが、ちょっとしたキーワードでもものすごく幅広くヒットするようになっているので、ここが少なすぎると目当ての記事を見つけづらいです。なので今のところは「100」にしています。
ちなみにどれくらいまで行けるか試したんですが、1000000とか入力できます。

「Post Status」
検索でヒットする記事のタイプをえらべます。「Publishd Only」だと公開した記事のみで、「Any」だと下書きなども（おそらく）表示できます。

【Relations】

「Open in New Tab」
関連記事に表示したリンクをクリックした時、新規タブで開くかどうかを設定できます。
オンにすると新規タブで開くようになります。僕はオフにしています。

【Template】

「Container」
コンテナのスタイルを設定できる項目らしいです。よく分からないので「Normal」にしています。

「Image」
リストのサムネイル（アイキャッチ）画像の位置を設定出来ます。
僕はタイトルの左に画像を表示する「Floated Left」にしています。
他にも「Avobe Text」だとタイトルの上、「Below Text」だとタイトルの下。「Floated Right」だとタイトルの右になります。

画像を非表示にしたければ「Don’t show」を選びます。

「Image Size」
表示するサムネイル（アイキャッチ）画像のサイズを指定します。
デフォルトでは「50×50」になっていて、他にも「thumb」「medium」「large」などのサイズで指定したり出来ます。

サイズ指定を数字で記述する場合に気をつけることは、「x（エックス）」を「×（かける）」と書かないことです。

一度消してから「100×（かける）100」と入力したんですが、ものすごくデカいサイズになってしまいました。この間違いに気付くまでしばらくかかったんですが、×（かける）をx（エックス）で書いたら上手くいきました。もしサイズの指定で上手くいかない方は、試してみてください。

「Disable pinning of images」
画像にnopin属性を付与するかどうかの設定です。
画像を非表示にしていると設定が現れません。

「Advanced」
「Custom Related Posts」専用のCSSを書けるところです。

【Import Relations】

XMLファイルを使って、記事のリンクを作ることが出来る設定のようです。
「Learn More」から使い方を読めます。
僕は今のところ使っていません。

リンクの作り方

パソコン版でのリンクの作り方を書きます。

まずはリンクを作りたい記事の編集画面に行きます。
画面の右上に「リンクボタン」があるので押します。

すると、現在のリンクの設定と、新しくリンクを追加するボタンが現れます。
リンクを追加する時には「Add Relations」を押します。

画面の真ん中に記事を検索する窓が現れます。
左の箱には「All Post Types」と書いてありますが、ここを押して「投稿」「固定ページ」などに変更すれば、ページのタイプを絞って検索出来ます。検索する時にはその左の箱の中にキーワードを入れます。

記事がヒットすればずらっと並びますが、ヒットしなければ「No posts found.」と表示されます。

使っていて感じるのは、このキーワードの入力の仕方がちょっとシビアだということですね。明らかにタイトルに含まれているキーワードを入れてもヒットしないことがよくあります。その場合は別のキーワードに変えるか、スペースを空けた検索をせずに、確実にタイトルの一部を打って検索すると上手くいったりいかなかったりします。天邪鬼…

ヒットした場合はこのような表示になります。左から、投稿タイプ、日付、タイトル、リンクボタンの順です。
リンクを作りたい記事の右にあるボタンを押すと、リンクが作成されるようになります。

「Both」は相互リンク。編集中の記事と、選んだ記事の両方にリンクが作成されるボタンです。
「To」は、編集中の記事から選んだ記事に向けてのみリンクが作られるボタンです。
「From」はその逆で、選んだ記事から編集中の記事に向けてのみリンクが作られます。

リンクを設定していると、記事の編集画面の中で確認できます。

「THIS POST LINKS TO」は、編集中の記事から作られているリンクです。
「THIS POST GET LINKS FROM」は、表示されている記事から編集中の記事へのリンクです。

両方に同じタイトルが表示されていれば、相互リンクになっているということです。
例えば一番下に表示されている「【2023年1月】signatureアクセス解析。」という記事は、「TO」にも「FROM」にも表示されています。
これは、「【2023年1月】signatureアクセス解析。」へのリンクが作成されていて（TO）、かつ「【2023年1月】signatureアクセス解析。」からもこの記事へリンクが作成されている（FROM）ということです。

作った関連記事を記事に表示させる

このプラグイン「Custom Related Posts」は「ショートコード」「ブロック」「ウィジェット」で記事の中に配置します。
僕の場合はウィジェットを使っているので、そのやり方を紹介します。

WordPress管理画面の中の「外観」から「ウィジェット」へ入ります。
左側のウィジェット一覧の中に「Custom Related Posts」があるので、「投稿本文下」などを選んで配置します。

設定できる内容は4箇所。

【タイトル】は、ウィジェットを配置すると一緒に書かれるテキスト。

【Order By】は、記事の並びです。
「Title」はタイトル順、「Date」は日付順、「Custom」は好みの順番、「Random」は設定している記事の順番が毎回ランダムになります。
「Date」にすると新しい記事が一番上に来るんですが、その記事に一番関連が強そうな記事を上に持ってきたりできるので「Custom」も良いかもしれないです。

【Order】は、昇順・降順の設定です。例えば日付順にしたときに「ascending」だと日付が古い記事が上に来て、「descending」だと日付が新しい記事が上に来ます。

【No related posts text】では、該当する記事が存在しなかった時に表示するテキストを設定できます。

こうして記事の中に配置すると、あとは設定したものが自動で表示されます。

相互リンクと、一方向リンクの違い

相互リンクに設定した記事を見てみます。

「関連記事のリンクを、記事の中に手動で追加してみた。」という記事を見てみると、中には「【2023年1月】signatureアクセス解析。」へのリンクがあります。

「【2023年1月】signatureアクセス解析。」の方に行ってみると、「関連記事のリンクを、記事の中に手動で追加してみた。」へのリンクもあります。

これが相互リンクの状態です。

リンクを作った後からでも、一方向リンクに変えることも出来ます。
編集画面のリンクの一覧にはゴミ箱ボタンがあるので、これで片方のリンクを削除すれば完成です。

例えば編集中の記事「関連記事のリンクを、記事の中に手動で追加してみた。」から、「【2023年1月】signatureアクセス解析。」へはリンクを作りたいけれど、「【2023年1月】signatureアクセス解析。」からはリンクを作りたくないという設定にしたい場合。
その場合は、「FROM」の方のリンクを消すと良いです。

歩きやすいブログを作ろう

という感じで、より関係性が強い関連記事リンクを作れるWordPressプラグイン「Custom Related Posts」の紹介でした。

やっぱり何か記事を読んだ時でも、興味がある記事にすぐ行けるか、探す手間がかかってしまうかでは、読みやすさに差が出来てしまいます。
そのブログのファンになると、むしろ記事を探す楽しみも出てくると思うんですが、全く知らないブログやサイトだと、まずはどうしても興味がある記事に行きたいものですよね。

このプラグインを使って、記事から記事へ歩きやすいブログを作っていけたら良いなぁと思います。

ちなみに、このカスタマイズなどはまだ試行錯誤中です。
僕の場合はほとんど配置しただけという感じになっています。
なんとか綺麗にカスタマイズしたいと思っているんですが、出来上がったらまた記事に書いてみたいと思います。その時はまた関連記事リンクを作りますね。

「Custom Related Posts」をWordPressでインストールする

ようやくリニューアルしました。

僕のブログには色々なカテゴリーがあるんですが、カテゴリーごとそれぞれのアイキャッチを作り直してみました。
そのカテゴリーごとにどんな記事を書いているのか、なんとな〜くイメージしてもらえたら良いなと思って作っているものですね。

前のブログ名だった時に作ったものが、ブログのあちこちに散らばっていたりしたので、それを整理した感じですね！

カテゴリーの一覧ページと、それぞれのカテゴリー記事一覧ページに行った時に見れます。

カテゴリー一覧ページを見る

せっかくなのでここでも軽く紹介。

アイキャッチ紹介

「MONO」はこんな感じ。

特に身の回りのモノとかを紹介してるので、なんとなく気に入ってるモノを写しました。
それにしてもこのテーブルと光の感じが本当に良いんだ…！

つぎー、「GADGET」

もっといろいろ持ってたら良いんですけれど、とりあえず良く使うガジェットとか。

「CAMERA」はこんな感じ。

これも一番使ってるモノかも。このストラップは好きなので、絶対入れようと思って、単体で置いてみました。

次は「CAFE」

僕が行って気に入ったカフェを紹介してるカテゴリーなので、好きなカフェの写真です。これはあんまり変わってないですね。

どこかに行った時のことを書いている「TRIP」

旅行した時に撮ったスナップで、気に入ってる写真にしました。

「Handflute」は変わってません。

「BLOG」は新しくなりました。

ブログ運営とかカスタマイズとかについて書いてるので、ブログを書いてる途中で撮った写真にしてみました。

「COLUMN」は、僕が思ったことについて書いているカテゴリー。

これはあんまり脈略がない写真なんですが、なんとなく好きな感じなので選びました。
（カテゴリーごとのイメージとは一体）

最後は「OTHER」

これも変わってないです。
というか、このカテゴリーは本当にいろんなことを書いているので、イメージに合った写真を選ぶの難しいですね。なんとなく雰囲気で！

ただ、こうしてそれぞれのアイキャッチを作ってみると、やっぱり「〇〇コーナー」みたいな感じが出て良いんですよね。カテゴリーごとの記事一覧に表示してる感じでも好きです。なんとなくカテゴリーごとのイメージが伝わったら良いなぁと思って作っています。

写真も文字も、また少しずつ変えていくと思うんですが、こうしてちょっとずつ出来上がっていく感も楽しいですね。

カテゴリーごとのアイキャッチを作るの、とてもおすすめです。

こんにちは！高山大知（＠daichihandflute）です。

今日はワードプレスの「ヘッダー」と「ヘッダーロゴ」の設定方法について書きます！

僕は今まで設定方法を間違っていました。
設定したい写真にブログタイトルを入れた画像を一緒に設定していたので、上下左右に余白の帯が出てしまっていました…

こんな感じになってしまっていた…！！

ただ、これで設定方法は合ってると思い込んでいて、逆に何かプラグインとかサイト幅が悪さしてるのかな…？というちょっとズレた調べ方をしていたので気付けませんでした。

それが超初歩的な方法で解決したので、同じ悩みの方のためになればと思い、書くことにしました。

ちなみに僕はcocoonを使用しているので、他のテーマだとやり方が違うかもしれません。

写真は背景、タイトルはロゴ

僕が間違っていたところは、ヘッダーロゴは設定していたけれど、背景画像は設定していなかったところ。
写真にブログタイトルを書いたものを作ったところはいいと思うんですが、設定方法が間違っていたんですよね。

こういう画像を作って、そのままヘッダーロゴとして設定していました。

正しい設定方法は、大きく表示したい写真は背景画像に設定し、ブログタイトル部分はヘッダーロゴとして設定すること。

まずは素材を用意します。

僕の場合、ブログのトップに大きく表示される写真は、カメラで撮って現像したものをそのまま使っています。

サイズは「3888×2592」みたいです。

そしてブログのタイトルになる文字部分は、サイズを「1400×600」で作りました。

フォトショップでこのサイズのキャンバスを作り、背景は透過設定に。透過にしておかないと、設定した時にまた白帯が出ます。
真ん中にブログタイトルを良い感じのサイズで書いて、それをpngファイルとして保存しています。jpgだと透過画像にならないのでここも注意です。

WP管理画面から、作った画像を設定

僕が使っているテーマはcocoonなので人によって微妙に違うかもしれませんが、僕の場合だと「cocoon設定」から「ヘッダー」タブへ。

「ヘッダー背景画像」に、大きく表示したい写真をアップロード。

ここで「ヘッダー背景画像の固定」にチェックを入れると、スクロールしても画像が背景としてついてくる設定になります。
僕はトップに固定されて欲しいので、チェックを外す設定！

「高さ」は、この設定した画像の高さの設定部分です。
僕は「600」にして、モバイル版は「150」にしてみました。
この辺のサイズは試行錯誤が必要そうです…！

ブログタイトルの部分は、「ヘッダーロゴ」の部分にアップロード。
「ヘッダーロゴサイズ」も、さっき作ったサイズの数字を入れます。（今回は1400×600に設定）

ちなみにここでヘッダーロゴ画像を設定しないでおくと、自分のブログのタイトルがテキストとして表示されるようになっています。
そのままだと細いテキストになってしまうので、こだわりたいならやっぱり画像として作った方がいいかもしれないですね！

ブログタイトル自体を表示しない設定にも出来ますが、そうするとトップ画像をクリックしてフロントページに戻れなくなります。
僕はやっぱり画像をクリックして戻れるようにしておきたいので、こうして設定してあります。

完成！

そして完成したのがこのトップ画面！

間違った設定だとこんな感じでした。

一目瞭然ですね。
モバイル版でもちゃんと大きさが調整されて表示されています。

あとはこれを基本にして、いろんな配置を試してみるといいかもしれないですね。
背景画像にブログタイトルや文字を入れて、ヘッダーロゴは単なる透過画像にしておくのも出来るのかな。
ちゃんとした設定方法が分かると、色々出来そうで一気に楽しくなりますね！！

このブログには、「RSSフィード」という機能がありまして。

「RSSリーダー」というアプリでこのブログを登録すると、新着記事がいつでも読めるというものです！
僕も「Reeder 5」というリーダーアプリで、気になるブログをたくさん登録して、こまめに読んでいます。

仕組みの説明はちょっと難しいので割愛しますが、ちゃんと設定しておかないとちゃんと表示されない部分があることに気付いたんですよね…

この間自分的に気になっていた部分をカスタマイズしたので、ここに僕がやった設定を書き残しておきます！

記事のアイキャッチを表示

まずはRSSリーダーで表示される記事にも、記事のアイキャッチが表示されるように設定しました！
アイキャッチは、記事のタイトルと一緒に表示される大きい写真のことです。

記事のアイキャッチ画像はとても重要…
何かの記事を読むにしても、どんな内容かを伝えるのにとても大事な役割があります。
モノについて書いていても、どんなモノについて書いているのかを大まかに伝えられます！

そんな重要なアイキャッチも、ちゃんと設定しておかないとRSSリーダーでは表示されないらしいので、表示されるように設定しました。

参考にしたのはこちらの記事。
そのままやってます。

https://takayakondo.com/post-18404/?utm_source=pocket_mylist

takayakondo.com

設定すると、こんな感じでRSSリーダーの中にもアイキャッチが出るようになりました！

記事を開いてみても、ちゃんと表示されています。

ファビコンを表示

ファビコンとは、ブログのアイコン画像のこと！
ツイッターとかインスタグラムとかAmazonとか、有名なページには大体表示されてます。

無くてもあんまり気付かないものだけど、これが初期設定のままだと意外と目立つんですよね。

そんな重要なサイトのアイコン的役割をしてくれるファビコンも、設定しないとRSSリーダーでは表示されず…

ちょっと手順が多いですが設定してみました。
参考にしたのはこちらの記事。

90phut TV - Xem Bóng đá Miễn Phí, TTBD Trực Tiếp HD Hôm Nay

90Phut TV là trang web không thể bỏ qua dành cho những tín đồ theo dõi bóng đá trực tuyến. Kênh đảm bảo mang đến chất lư

mechalog.com

こちらの記事では「.ico」というファイル形式ですが、僕は「.png」でも出来ました。
僕は「ConoHa」を使っているんですが、「コントロールパネル」にログイン後、サイト管理⇨ファイルマネージャーを開いて出てきたところに、そのまま画像ファイルをコピーしていけました。

設定すると、ちゃんと反映されるようになりました！
初期設定のままだと「たまごアイコン」なので、印象が全然違います。

記事の中だけではなく、ちゃんと登録してるブログ一覧にも表示されるようになりましたよ。

出ない場合は、アイコンだけ読み込み直すことも出来るようです。

全文表示

RSSリーダーでは、記事を読もうとしたときに「最初から全文が読めるもの」と「一部抜粋になっているもの」があります。
抜粋になっているものは、アプリで全文表示のボタンを押さないと、全部読めない形になっているんですよね。

僕的には、簡易表示だと毎回ボタンを押さないといけなくなるのが嫌なので、全文表示になるようにしました。ボタンも届きづらいところにあるんですよ…。

やり方は、WordPressの管理画面から、設定⇨表示設定と進みます。

「フィードの各投稿に含める内容」の「全文を表示」にチェックをいれて保存します。

これで、RSSリーダーでも記事を読もうと思ったときに全文が表示されるようになりました！

細かいカスタマイズを重ねよう

今回やったカスタマイズは

• アイキャッチを表示させる
• ファビコンを表示させる
• 全文表示にする

の3つ。

ブログ記事を書くのもいいけれど、こういった細かいところがあったらどんどんカスタマイズしていきたいと思います！