wordpress

wordpressテーマをCocoonに変更しました【感動レベル】

　現在ひすこ道ではDiverに変更しました。

ひすこ道では今まで超高機能テーマ、SANGOを使用していたのですが、この度…シンプリシティの製作者、わいひらさんがCocoonを開発されたとのことで。

心機一転テーマを変更しました。

それは初心に還って、再び会社で学んだことCocoonで活かしたい…！と思ったからです。あとは実際に使いながら触ってみたい…！という欲望の渦も(^^)

waideshu001

ひすこ
この記事ではかんたんなCocoonの紹介と、Cocoonに変更したときに、いじってカスタマイズをしたところを少しだけ紹介できればなと思います。

 

そして１番最後には、wordpressのテーマのCocoonのココが「わかってる…コレ欲しかったん…（泣）」という心の声を大にして語ります。

CocoonはSimplicity同様の無料テーマ

Simplicity同様、Cocoonは高機能な無料テーマです。

現在はベータ版という形で、フォーラム登録者限定でダウンロードが可能になっています。

…私事ですがさくらのレンタルサーバーのみで運用していたときはwordpress→使用テーマ、シンプリシティで同人サイト作ってたので、わいひらさんには頭が上がりません。そして友達にもSimplicityを薦めまくってました。

同人企画サイトも（笑）

simplicity

使い勝手がいい無料テーマでダイナミックサービング仕様で速度も良く、キャッシュプラグインの相性とピカイチなのはシンプリシティただ一つでした。

  • AMP対応
  • 有志の方々の様々なskin
  • サポートフォーラム
  • OGP対応
  • SEO対策済
  • ビジュアルエディター上での簡単文字装飾

この一つのうち、AMP以外はどれを抜かれても今じゃムリ…って思うくらい便利なテーマです。ソースも綺麗ですから改変したいなぁと思って中身を触ってみても◎。

CocoonはそのSimplicityの上位互換性を持つというのですから、これから長い年月を掛けてどのように繭が羽化するのか楽しみですね。

Cocoonをカスタマイズした箇所

まず、サイトキーカラーを御覧頂いてる色に設定したこともあり、未だに色が見辛い状態のままのパーツがあります。

AMP VERは50kb制限の影響もあり、一部省略しています。

カテゴリーバッジは個々で設定可能ですが、一括で調整したい場合参考にしてみてください。

Cocoonのフォントを変更

Windows用に遊GothicをMに変更します。

SANGOのフォントを太くする！という記事と重複するので記事へどうぞ。

headerロゴをRetina化

ひすこ道のロゴ

ひすこ道のロゴ

大きめのロゴをアップします。

/**　サイトロゴをRetina化**/
.site-name-text img{ max-width:300px; height:auto;}

Retinaに対応化は「重くなる」など賛否両論ありますが、ロゴはサイトの第一印象。つまり看板ですから対応させました。

色が薄くて見辛い部分を調整する

  • 全体のカテゴリーラベル
  • 記事下のカテゴリーラベル
  • 関連記事や新着記事などのホバー色（カーソル合わせるとホワァってなるやつ）

メインキーカラーが薄い方で一括で調整したい場合は以下のCSSで「マシ」になります

フッター部分や気になる箇所を調整なう。

header上部はアナログっぽいのに、footer部分が白いのは嫌なので透明化させました。

.footer {
background-color: rgba(33, 39, 98, 0);
}

数字リストol部分をクラス追加

理想の形に中々ならず途方に暮れていたところ、かうたっく様のCSSを拝借いたしましたところで無事反映されました…！ありがとうございます！

  1. こんな感じに
  2. 数字が表示されます。

参考サイトol番号付きリストのカスタマイズ！デザインをきれいに変更する方法。リストの数字を任意の番号3から始めたい時のCSS

ソースに付け足した部分
ol.linkle { padding-left: 0;}

cocoonはデフォルトで40pxの余白がありますので、それを解除します。

インフォメーションボックスを明るめに設定

インフォメーションボックスの色見を明るめに設定しました。完全に好みです。

.information-box::before, .question-box::before, .information::before, .question::before {
color: #ffd5a7;}
.information-box, .question-box, .information, .question {
background-color: #fffbdd;}

元も今もたまごの黄身みたいな色ですが、完熟から半熟くらいになったかな？と思います。

画像ページを強制リダイレクトさせる

これは他のテーマでも必ずやってるのですが、以下のファイルを作成し、子テーマにアップロードします。
attachment.php

<?php // 添付元(投稿、ページなど)のある添付ファイルページの場合、添付元にリダイレクト if ( $post->post_parent ) { wp_redirect( get_permalink( $post->post_parent ), 301 ); } // 添付元のない添付ファイルページの場合、トップページにリダイレクト else { wp_redirect( home_url(), 302 ); }

引用元-添付ファイルページを無効にする(添付元にリダイレクト) | WordPressカスタマイズ事典

現在ひすこ道ではデータベースの書き換えを怠ってしまったのでトップページへリダイレクトが掛かるようになってしまったのですが、データベースをきちんと関与して（投稿ページからメディアを追加すること）いれば、検索エンジンからの参入者が画像ページをクリックしても、投稿ページへ自動リダイレクトが掛かります。

waideshu001

ひすこ
画像サイトマップでSEO対策されてる方には最も有効だなと思っています

もっと有効な手段があればしっかり覚えるので教えていただきたいのですが…。

サイドバーの背景を薄くする

メインのコンテンツ（白）を目立たせたいのでサイドバーは薄くしました。

Cocoon　サイドバーの色味を薄く

クリック or タップで拡大します

.sidebar {
background-color: rgba(255, 255, 255, 0.48);
}

好みが分かれると思うので色を全く入れないほうが好き！という方は完全に透明化させてしまったもいいかと思います。

header部分の背景画像の大きさと繰り返し調整

ロゴの背景画像の大きさを指定し、繰り返しの表示に調整しました。

背景画像の縮小

クリック or タップで拡大します

.header {
background-repeat: repeat;
background-size: 300px 300px;
}

コンテンツの背景画像の調整

コンテンツ部分の背景画像の調整を行いました。

body.public-page {
background-repeat: repeat;
background-size: 250px 250px;
}

拡大されていたので整えました。（修正来そうな感じもしますが）

amp.cssを調整する

最後にAMP.CSSに自分に必要そうな上記コードをCSSを突っ込む。

Cocoonの素晴らしいと思った真の機能性

機能性って大事なんですが、機能性よりもっと大事なのは「わかりやすい」こと。

小難しいことをタラタラ喋るより誰にでもわかりやすく、誰にでも理解できる言葉で話すほうがずーっと難しい。

その配慮がSimplicity同様にCocoonにも現れています。

オリジナルウィジェットの秀逸さには鳥肌が立ちます。

ウィジェットの表示・非表示設定が超すごい

Cocoonhow-to

オリジナルウィジェットだけでなく、各ウィジェットの表示非表示に機能が可能です。
なんと、カテゴリー別、ページ別、非表示にしたければ簡単に非表示に出来ます。

特定のウィジェットを、このカテゴリーのみ表示。という感じに、wordpressを細かくカスタマイズできます。

もちろん、コードを触らないでも可能なので、今までずっと手作業でphpを触ってきたひとには大変ありがたい機能です。わたしの場合触れると行っても殆ど毛が生えた程度にしか触れないので、本当に助かってます。m(_ _)m

ランキング用ウィジェットなど、特定のカテゴリーに置きたい時なども出てくると思います。

CTAを置くウィジェットも。

臨機応変に対応できるのがうれしいですね。

参考例に、この記事も遊びを入れていますので、PCの方は→を見てください（笑）

スマートフォンの方は一番最後までスクロールしてみてください(^^)

ヴィジュアルエディターからテキストエディターに移るときのストレスがゼロ

Cocoonhow-to2

クリック　or　タップすると拡大します。

なんと言いましょうか…。

wordpressに普段から触っていても、なるべくわたしはビジュアルエディターで編集して見た目を整えてから作業したい派なんです。

下書き→wordpressへ持ってくる→ヴィジュアルエディターで装飾→テキストエディターで修正。

この作業で1時間以上掛かります。

1回、2回流し見して投稿…。とくにレビュー記事は、素直さも大事ですが人を不快にしない表現に直したり…書き足したり…消したり…と言うかたちで、かなり凝ります。

この作業をしているときに、他のテーマですと、
ビジュアルエディター→テキストエディターへタブをクリックすると…

一番はじめからスクロールされてしまうんですよ。

これ地味に面倒だったんで、わいひらさん…神かよ…って思っちゃいました。

Cocoonではビジュアルエディターで編集していた語句を、テキストモードでctlr+Fで検索して、そこまでワープする…という当たり前の作業をしなくてよいのです。

投稿画面をカスタマイズするプラグインを入れようかな…と諦めていたところでしたが、Cocoonを使うならもはやプラグインも１つ２つで事足りますね。

このブログは多めに入れてますけども(^^)

まとめ

Cocoonを利用してみたいと思った方、少しでも興味を持った…方は公式サイトへぜひ行ってみてください。

Cocoonの公式サイトへGO

わいひらさんをずっとずっっと応援したい！(^O^)

当サイトではCocoonの良さを最大限に活かせられていませんので、あくまでカスタマイズは参考程度にしてください。そして、バージョンアップに伴い不具合が生じても、ひすこ道では責任は取れません…。

そんでもって、現在もカスタマイズ中です！

P.S

最近、WordPressテーマをDiverに変えました。cocoonはアフィリエイトサイトにも使用していますのでこれからもガッツリ使っていきます。

2018年7月1日

この記事を書いた人
ひすこ（翡翠理子）
広告代理店で働く主婦です。ローズヒップティーにハマってます。馬顔っぽい目付きの悪い2次元男キャラに悶える。中二病設定が好き。
最近書いた記事
楽天お買い物マラソンが明日開催するのでVAPEリキッド買います
日記
楽天お買い物マラソンが明日開催するのでVAPEリキッド買います
完全無料！wordpress同人サイトにおすすめなテーマ5選
wordpress
完全無料！wordpress同人サイトにおすすめなテーマ5選
イラスト・漫画制作のご依頼を承ります
仕事
イラスト・漫画制作のご依頼を承ります
これからの私が漫画を描く理由
漫画のこと
これからの私が漫画を描く理由
おすすめの記事