スピリチュアルサロンで行ったCocoonカスタマイズ(CSS)

ビジネス:スピリチュアルブログ

これは2018/12/31現在の情報です。その後、新しいカスタマイズをしたり違うデザインにしたりテーマを変えている可能性もあります。

ブログシステム・ワードプレスの有能すぎる無料テーマCocoon
少しカスタマイズすれは、簡単に有料テーマ級のサイトがサクサク作れます。

ここでは、当リンデンバウム(スピリチュアルサロン)のサイトで行ったCocoonのCSSカスタマイズをご紹介します。

CSSのカスタマイズ

Cocoonでは、親テーマと子テーマをインストールして、子テーマのほうを有効にします。その上で必要に応じて、子テーマのほうのスタイルシート(style.css)にカスタマイズのCSSを追加していきます。

「 外観→テーマの編集→style.css」でこの画面になります。

今回わたしが追加したスタイルシート一覧は以下の通り。

/**************************
** 子テーマ用のスタイルを書く
***************************/

/* 新着記事表示 */

.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.new-entry-cards.large-thumb a {
width: 33.333%;
}

/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}

/* メインカラムとサイドバーの背景色指定 */

.main {
background-color: #e7efde;
}

.sidebar {
background-color: #f8f8f8;
}

/*フロント固定ページのタイトルを非表示 */
.home.page .entry-title{
display: none;
}

/* 固定ページの投稿日を消す */
.page .post-date {
display: none;
}

/* ブログカード */

.blogcard {
padding: 1rem;
color: #666;
position: relative;
border-color: #629b2d !important; /* 枠線の色 */
background-color: #f8f8f8;
}

うむ。いっぺんに並べられても、ようわからんゾイ。
というわけで、一つずつ解説していきますね。

新着記事表示

これはトップページのために記述しました。
まず、このスタイルシートを追加します。

/* 新着記事表示 */

.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.new-entry-cards.large-thumb a {
width: 33.333%;
}

/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}

次に、 ショートコードを新着記事を表示したい場所に記入します。サムネイル大(type=large_thumb)で。

そうすると、こうなる!(ジャジャーン)

もちろんレスポンシブ対応で、スマホ表示だとこんな感じに。

――なんてすごいドヤってますけど、わいひらさんの書いてくれたコードをコピペしただけでーす。エヘヘ。

メインカラムとサイドバーの背景色指定

Cocoonって、白をメインとしたテーマなんです。
作成者のわいひらさんは、このようにおっしゃっています。


テーマ名のCocoon自体にも、以下のような意味があります。

居心地のいい場所
繭に包む
(繭で包むように)保護する
新たな始まり
テーマ名をCocoon(繭)としたのは、繭のように白い、シンプルなテーマを作りたかったからです。
白いテーマが一番読みやすいと思うので。

https://wp-cocoon.com「シンプル」

素晴らしい!シンプルな白!いいですね!
でも、ウチみたいな仕事用サイトだとコーポレートカラーというものがございますので、Cocoonの理念自体はリスペクトしつつも変更させていただきました。白いいよね!私も大好きだよ!

サイドバーは普通に白やんと思われるかもしれませんが、ちょーっとだけグレーを混ぜてます。完全なオフホワイト(#fff)だと目が疲れるので。

/* メインカラムとサイドバーの背景色指定 */

.main {
background-color: #e7efde;
}

.sidebar {
background-color: #f8f8f8;
}

これもわいひらさんの書いたコードをいじっただけです。

フロントページをサイトらしくカスタマイズする

「ワードプレスみを消す」というのは、一般的なブログでは大して重要なポイントじゃなかったりするのですが、コーポレートサイトとなると重要です。「ブログっぽい」と軽く見えてしまいます。
もちろんその軽さは「親しみやすさ」にもつながるので、一概に悪いとは言えません。まとめサイトなんかはむしろブログっぽいほうが良いでしょう。あくまで適材適所という話です。

特定の固定ページをトップページに指定し、こちらのスタイルシートを追加すると「サイト」っぽくなります。
ついでにホームページだけじゃなくて固定ページ全般の投稿日も不要なので消しました。

↑ページ設定で1カラムを選択すると、サイドバーを消せます。より「サイト」らしく!

/フロント固定ページのタイトルを非表示/
.home.page .entry-title{
display: none;
}

/固定ページの投稿日を消す/
.page .post-date {
display: none;
}


Cocoon設定を見てもらえるとわかると思うんですが、投稿日に関しての設定は 投稿+固定ページで一括指定なんですよ。これが高速表示のキモなのかな。 page.phpとかsingle.phpとかで個別に指定してるわけじゃないから、子テーマにpage.phpコピペしてそこでカスタマイズするわけにいかないわけで。Cocoonの親テーマのpage.php見たらthe_timeのtの字も無くて「んおほおおおお!!??」ってオバチャンびっくらこいたべさ~。

それにしてもわいひらさんってば、php勉強してはじめて作ったテーマがSimplicityって天才かよ。わいひら、恐ろしい子…!!

ブログカード

これはなんでいじったんだっけ…枠線の色を変えたかったのか?
もうCocoon廃すぎてやれることやりたすぎてブルブルして来てるので、意味なくカスタマイズしたいわけです。機能的にはいじる必要は全くありません。

/* ブログカード */

.blogcard {
padding: 1rem;
color: #666;
position: relative;
border-color: #629b2d !important; /* 枠線の色 */
background-color: #f8f8f8;
}

最後に

このページではCSSでのカスタマイズにしぼってお伝えしています。Cocoonはデフォルトで色んなことができてしまうテーマなので、Cocoon設定でできることは以下の記事などを参照してください。

ところで、この記事がんばってグーテンベルクさん(新エディタ氏)を使って書いてみたんですけど、やっぱり使いにくいよ!!!もっと挙動改善してください……。

特にブロック消去時のソースが汚すぎる。唐突に挿入されるpタグ、そして意味のない空白。ソース汚いくらいならまだいいんだけど、カラムブロックやメディアブロック、根本的に消しにくい!!三点リーダーメニューから「ブロックを削除」してもまだ残ってる~~~。そして、再度形成される意味のない空白。意味のない空白好きすぎやろ、Gutenbergさんよ~。

あと、動かしたいブロックが選択できないのをどうにかしてくれ~!!ここ!ここ直したいのに、反応しない!アッアッアッ、アー!モー!ストレスが地球をダメにする!!!(突然の森高千里)

森高千里 『ザ・ストレス -ストレス 中近東バージョン-』 (PV)

ちなみに、クラシックエディター(プラグイン)を入れて投稿設定で「 ユーザーにエディターの切り替えを許可」しておくと設定(ネジアイコン)→文章→エディターで、グーテンベルクを使うか使わないか簡単にその記事ごとに設定できます。

ここでエディターを記事ごとに選択できる!

だから、こうやって「たまに使ってみるかな」なんてこともできるんですよ!Cocoon設定でも切り替え可能です。

他にもCocoonカスタマイズしてみた

タイトルとURLをコピーしました