この記事は、無料のWordPressテーマ・Cocoonを使用してブログをおしゃれにカスタマイズした際の、私自身の体験記となります。
CSSやHTMLに関する知識が少なくても、ブログをおしゃれにしたい方にぜひ読んで頂きたい記事になっています。
カスタマイズにあたり、はっちゃんさん(@hacchan_415)のブログ・Turiccoを参考にさせて頂きました！ありがとうございます。
はっちゃんさんのブログ・Turiccoはこちらから↑↑↑
- とにかくCocoonをおしゃれにカスタマイズしたい。
- CSSやHTMLの知識がなくてもカスタマイズができるか知りたい。
- カスタマイズする際にどんな準備が必要か知りたい。
※この記事にはコードは含まれていません。
カスタマイズを決意したきっかけ
Cocoonはわいひらさんが開発した、無料のWordPressテーマです。有料テーマに勝るとも劣らずな豊富な機能と使いやすさから、愛用者が絶えないテーマでもあります。
そんなCocoonのデザインを、もっとおしゃれにしたい！無料のテーマだけれど有料テーマみたいに見せたい！！という思いで、広いインターネットの世界を探し回っていたところ、はっちゃんさんが運営する・Turiccoと出会い、同じCocoonを使っているとは思えない様なデザインに衝撃を受けました。
私もはっちゃんさんのように、素敵なデザインにしたい。
それがCocoonをカスタマイズするきっかけになりました。
従来のブログ型からサイト型のトップページにカスタマイズ
Cocoonをおしゃれにカスタマイズするに当たり、従来のブログ型からサイト型のトップページに変更する事を決めました。
私自身、ブログをサイト型のトップページにカスタマイズする事は未経験。
しかもCSSやHTMLに関する知識は、過去にスマートフォン向けの創作サイトを運営していた頃の、おぼろげな知識だけ。
果たしてそんな私が、サイト型トップページを作る事はできるのだろうか……正直に言うと不安で仕方がなかったです。
まずは、テーマ決めから
実際にCocoonのカスタマイズを始める前に私がした事は、どんな雰囲気にしたいかイメージを掴む事でした。
テーマはずばり「シンプルだけれどもおしゃれ」
トップページで使用する色も、発信する内容に合わせて、温かく柔らかい色合いにしたいと考えました。
カスタマイズする上で事前に自分なりのテーマを決めておくと、イメージが膨らんで作業効率も上がると思います！
イメージが固まったらメインビジュアルとなる写真を探す
テーマが決まったら、次はトップページのイメージに合う写真を探します。
私は写真を探したり加工するのにCanvaを使っていますが、他にもUnsplashやPixabayといった無料で高画質な写真を探す事ができるサイトがありますので、ぜひ自分好みの写真を見つけて下さいね。
併せてアイキャッチも、テーマに合う様に作って行きます。
Cocoonを実際にカスタマイズして行く
使用する写真が決まったら、次はWordPressで実際にCocoonをカスタマイズしていきます。
基本的には、公開されているコードをコピペするだけで簡単に出来ます。(コードは一部有料のものもあります。)
私は今回、ブログ型ではなくサイト型のトップページにしたかったので、固定ページを使用しました。
細かい部分のカスタマイズに関しては、自分が実装したい事をGoogleで検索して、その都度コピペして行くという手法を取りました。
Cocoonは有名テーマなだけあり、たくさんの方がインターネット上でカスタマイズ方法を紹介されていますので、自分自身に合ったカスタマイズ方法も見つけやすいかと思います。
カスタマイズを終えてみての感想
ブログのトップページ自体は、40分程度で出来上がりました。(細かい部分のカスタマイズは含みません)
完成まで何度も試行錯誤を繰り返しましたが、カスタマイズを終えてみての感想は思っていたよりも簡単に出来たという印象。
CSSやHTMLの知識がおぼろげな私でも、特に難しいと感じる事はありませんでした。
ただ、カスタマイズをする上でCSSとHTMLに関する知識は、少しでもある方が作業は大幅に楽になる事は確かですので、あらかじめ知識を持っておいた方が良いと思います。
まとめ
以上が私のリニューアル体験記になります。
この記事が、Cocoonをもっとおしゃれにカスタマイズしたいと思っている方の参考になれば幸いです。
はっちゃんさんのブログに出会えた事で、デザインへの興味やカスタマイズの楽しさを知る事ができました。
改めて、感謝を申し上げます。
