PR

WordPress テーマ Cocoon をちょいといじったメモ

wordpress
記事内に広告が含まれている事があります。
秋田
秋田

お客様のサイトを WordPress & テーマ Cocoon で作っていまして、 Cocoon は使い勝手が良くて無料なのでありがたく今回使わせていただいてます。このサイトも Cocoon を使わせてもらってます。 今回、色々と Cocoon の設定をいじったので、その備忘録としてこの記事を残す事にしました。

各種SNS を非表示に

SNSへのボタンは後で必要になるかもしれないけど、とりあえず非表示にしました。

設定箇所

Cocoon 設定 -> SNSシェア -> トップシェアボタンの表示

Cocoon 設定 -> SNSシェア -> ボトムシェアボタンの表示

日付表示を投稿日のみ表示に

投稿ページの日付表示を投稿日のみにしてみました。更新日あってもいいのですが、なんだかちょっとうるさい感じがしたので。

参考サイト

Cocoonの投稿・固定ページの日付を非表示にする方法
無料WordPressテーマ「cocoon」の初期設定では、投稿と固定ページ右上には日付と更新日が表示されます。それを非表示にする方法を紹介します。 具体的には次のようにカスタマイズする方法です。 記

設定箇所

Cocoon 設定 -> SEO -> 日付の設定

固定ページの投稿日を非表示に

今度は固定ページ。固定ページに日付があると、将来なんだか古い情報っぽくなってしまうので、投稿日も非表示にしてみました。

参考サイト

cocoon(コクーン)固定ページの日付を非表示にする方法
WordPress cocoon(コクーン)の固定ページの日付を消したいと思ったことありませんか?固定ページの日付を非表示にする方法です。CSSにコードを追加するだけで簡単に非表示にすることができます。

設定箇所

外観 -> カスタマイス -> Additional CSS(追加CSS)

以下を記述

 /*固定ページの日付を非表示*/ 
.page .date-tags { 
   display: none; 
 }

投稿者をフォローするボタンを外す

投稿者をフォローする。ってのをはずしました。ブログとかをメインにやっている訳ではないので不要かなと。

設定箇所

Cocoon 設定 -> SNSフォロー -> フォローボタンの表示

本文下の投稿者名を非表示に

本文下の投稿者名があると、ユーザのログイン名が見えちゃうって事なのでちょっとよろしくないし、特にユーザー名やそれに設定されているリンクは不要なので、非表示にしました。

参考サイト

【Cocoon】投稿者IDを非表示にする【WordPress】
Cocoonの標準の設定では、投稿ページと固定ページの右下に『投稿者ID』が表示されます。 この投稿者IDを非表示にさせたいと思いました。 投稿者IDは、WordPressのログインで使用するIDなので、安全上表示したくありません。また、ブ

設定箇所

Cocoon 設定 -> 本文 -> 投稿関連情報

更新日の表示と投稿者名の表示のチェックをはずした

アイキャッチを非表示に

画像の無い投稿もあるので、アイキャッチを非表示にしました。

設定箇所

Cocoon 設定 -> 画像 -> アイキャッチの表示

本文上にアイキャッチを表示するをはずした

投稿コメントを非表示に

そもそもコメントは受け付けていないけど、なんらかのアタックでコメントが書き込まれるといけないので、投稿コメントを非表示にしました。

設定箇所

Cocoon 設定 -> 投稿 -> コメント設定

コメントを表示するをはずした

投稿等のサムネイル画像を非表示に

全ての記事にイメージを入れている訳ではないので、投稿一覧や関連記事等にアイキャッチが設定されていると全て画像無しになって格好悪いので、非表示にしました。

設定箇所

Cocoon 設定 -> 全体 -> サムネイル表示

サイト全体のサムネイルを表示するのチェックをはずした

関連記事表示数を2に

投稿の下に配置される関連記事、これまでのデザインだと関連記事がなかったので一番空くない設定の2つ表示にしました。

設定箇所

Cocoon 設定 -> 投稿 -> 表示数

関連記事枠線をつけた

関連記事に枠をつけた方が、サイトが締まって見えたので、枠をつける事にしました。

設定箇所

Cocoon 設定 -> 投稿 -> 関連記事設定 -> 枠線の表示

Cocoon 設定 -> 投稿 -> ページ送りナビ設定 -> 枠線表示

Web アイコンフォントを使う

これまではイメージでアイコンを作っていたのだけど、レスポンシブデザインでブレイクポイントになるとイメージのアイコンだと都合が悪いので、Webフォントを使う事にしました。 Cocoon では、Font Awesome がデフォルトで使えるようなので、Webアイコンフォントはそちらを採用する事にしました。

参考サイト

【Cocoon】アイコンフォントの使い方|Font Awesome
WordPressのCocoon(コクーン)でFont Awesome(フォント オーサム)のWEBアイコンフォントの使い方を解説します。サイトで見かける文章にアイコンを入れる表現ができます。動き(アニメーション効果)も可能です。

設定箇所

Cocoon 設定 -> 全体 -> サイトアイコンフォント

新しいバージョンの Font Awesome 5 にした

まとめ

色々な事ができる Cocoon。ここではできる事の一部(実際に使った設定)だけの紹介ですが、開発元の説明も充実しているし、色々な方が Cocoon の使い方を紹介してくれているので、安心して使う事ができています。とっても感謝です。 これからもしばらくは Cocoon を使って WordPress 運営をしていくんだと思います。

Cocoon 公式サイト

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
タイトルとURLをコピーしました