ワードプレスの新エディタに慣れるためCocoonを導入してカスタマイズ

ワードプレスの新エディタを試してみたくなって新たに導入。その後無料で使えるCocoonを導入してみました。
無料のテンプレートだけど素晴らしいですよね、わいひらさんが作られる無料のテンプレートって。

今回はCocoonを導入してからやったことをざくっとまとめておこうと思います。

CocoonChildのDL

本体をいじるとバージョンアップの時にいろいろと設定が変わってしまうおそれがあるので、子テーマをダウンロードしておきました。

今後カスタマイズは子テーマをいじることになります。
見出しの変更やその他、主にCSSをいじるのには子テーマでって感じですね。

下記サイトから親テーマと子テーマのDLができます。

テーマのダウンロード

Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

wp-cocoon.com

Cocoon Blocksを導入

ブロックエディター（Gutenberg）でCocoon用ブロックを利用する方法

Gutenberg対応プラグイン「Cocoon Blocks」インストールして利用する方法の紹介です。

wp-cocoon.com

CocoonBlocks用のプラグインを導入してブロックで記事をかけるようにしました。
Cocoonの設定はいろいろとセットされているのでとっても便利なんですよ。

Cocoonを使用してブロックの導入をされるのであればブロックも導入しましょう。
このプラグインを追加するだけで文字装飾とか色々簡単に追加できるようになりました。

例えばこんなん

メディアサイズの再生成

このブログに設定したのではなく、親ブログ「CoroLife」をCocoonに変更して画像サイズが気に入らなかったので変更をついでにしてきました。

ワードプレスのメディアサイズを再生成して最適化してみました

親ブログである「CoroLife」は他のテンプレートからCocoonに変更したので、画像のサイズがイマイチきれいじゃなかったんですよね。もっと綺麗に表示させたいなぁと思ったのでプラグインを使用して画像サイズを再生成してすっきり表示に成功する...

coro-life.com

2019.02.28

見出し変更

見出し変更には下記のブログを参考にして変更しました。
が思うようになってないのが現状なんだけど、これはこれで好きだったりするんです。笑

数日後思い通りになりました♪

【Cocoon】記事の見出しデザインをカスタマイズする方法（h2〜h6）

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は投稿記事の見出しデザインをカスタマイズしてみました。見出しを変えると手っ取り早くオリジナリティを出すことができるので、優先的にやっておきたい部分ですよね。それでは早速や

web-ashibi.net

見出しのデザイン変更

見出しのデザインは下記のサイトを参考に。
とんでもない数のデザインがそろっていますよ。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

saruwakakun.com

目次の変更

Cocoonにはすぐに目次を設置できるのでとってもありがたいんですが、見た目があまり好きじゃなかったんです。

で「これこれー!」って思える目次にであったので利用させていただきました。

【Cocoon】目次のデザインをカスタマイズしてアニメーションも追加してみた

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はCocoonに標準で備わっている「目次」のデザインをカスタマイズしていきたいと思います。開閉させる時にうぃーんとアニメーションさせてみました。完成するとこのようになりま

web-ashibi.net

目次以外にもCocoonのカスタマイズ色々書いていらっしゃるのでとっても役立つブログだなぁと思ってこっそり見させていただいてます。

今はまだこれぐらい

ほかにあれこれやってないのに見た目がとてもいい感じ。
無料のテンプレートなのにここまでできるのは本当にすごいなぁって思います。

今後何か追加していくことがあったらちょくちょく書き足していきます。
ここはまぁあくまでも私の備忘録って感じですけどね。