【WordPress無料テーマ】LION BLOGからCocoonに変更したらかなりよかったのでおすすめです

ブログ運営
スポンサーリンク

こんにちは。そら(@sora0free0)です。

WordPress無料テーマを探していた時、一番はじめに使ったのが【LION BlOG】でした。

ブログの記事数も増えてきて流入が増えてきたタイミングで【LION BlOG】をカスタムしようと思って色々調べたのですが、【LION BlOG】をテーマにしてカスタムしているブログ記事があまり見つかりませんでした。

そこで、思い切って【LION BlOG】から口コミでの評判がとてもよかった【Cocoon】へテーマ変更しました。

変更したらしたらサイトがめっちゃかっこよくなりました。

今回は・・・ WordPressをはじめて導入した人、テーマの変更を考えているという人のために、WordPress無料テーマ【Cocoon】を導入してからカスタムした方法をご紹介します。

私が行った手順を行うだけカッコ良くなりますよ。ぜひお試しください。

自分の体験を踏まえながら「Cocoonへテーマ変更してよかったこと」をまとめてみたので、シャアしたいと思います。

Cocoonへテーマ変更してよかったこと

Cocoonへテーマ変更してよかったこと

Cocoonへテーマ変更してよかったことは、多くのブロガーさんがCocoonを使ってカスタムしております。

ググると参考になる記事がたくさんあり簡単に変更できます。

また、Cocoonの作成者【わいひらさん】も詳しく丁寧に使い方を解説しています。

個人的に有料テーマを購入しようか迷っていたのですが、Cocoonの無料テーマで十分だと思いました。

こだわった設計でユーザーに優しくわかりやすい。

しかも、適宜、アップデートを行っています。

ありがたや〜〜。最初から使っていればよかったです。

私がCocoonでカスタムした方法を記載しますね

cocoon設定

Cocoonには専用の【Cocoon設定】というものがあります。

全部で38項目もあります。

最初に設定するべきポイントをご紹介していきますね。

ヘッダーの変更広告の設定
おすすめカードの設定
カルーセルの設定

ポイントをやればいい感じのサイトができあがりますよ。

ひとつひとつ丁寧に解説していますので、手を動かしながら真似てみてください。

Cocoon設定を上手く活用しオリジナリティ溢れ、愛着あるブログを作成することができます。

とっても簡単に設定変更できるので安心して取り組めますよ。

【初心者向け】WordPressテーマ「Cocoon」のヘッダーの変更方法

私がまず最初に取り組んだのはヘッダーロゴと背景画像の追加です。

ヘッダーロゴと背景画像を変更するだけでオリジナルなサイトが出来上がります。

私はフリー素材でひとまず作ってみました。

そらいろブログがもう少し育ってきて収益化できるようになったらデザイナーさんに頼んでみたいと思います。いつになるかな・・・

 

Cocoonへテーマ変更してよかったこと

赤枠で囲った部分を変更すれば私のような設定になります。

ヘッダーロゴは透過画像にすることをお勧めします。

いろいろ試した結果、ヘッダーロゴサイズは 627 x 210ピクセルで落ち着きました。

ヘッダーの背景画像とマッチングさせるとおしゃれになりますよ。

ヘッダーロゴを作る方法として私はパワーポイント使って作成しました。

AdobeのIllustratorがあればいいのですが、有料のためパワポで作ることにしました。

こった作りではないのでパワポに文字を打ち画像で保存します。

パワポで作った画像を透過画像にする必要がありますので、無料ツールを使用します。

画像加工編集サイト - 無料で画像を加工、編集するならバナー工房
登録・インストール不要の無料WEBアプリです。2006年にサービスを開始した国内最大級の画像加工編集サイトです。誰でも簡単にオンラインで写真と画像を加工、編集できます。

ワンタッチで透過画像にしてくれるので楽チンですよ。

次に、ヘッダー背景画像の追加です。

Attention Required! | Cloudflare

canvaというサイトがあるのですがcanvaで簡単にヘッダー画像を作成することができます。

 

そらいろブログヘッダー背景画像

私はこんな感じで作り、中心に【そらいろブログ】のヘッダーロゴが入るように工夫しています。サイズは1499 x 363 ピクセル で作っています。

サイズはざっくりです。特に固定値はありません。

そして、次にご自身のテーマカラーに沿った文字色を変更してみましょう。

グローバルナビメニューで文字色や文字背景色を変更することができます。

私の場合は背景色を青にして文字色を白にしています。

サイトカラーのテーマに合わせて変更するといいですね。

私はそらいろブログということで空にちなんで青色をチョイスしています。

【おすすめカード設定】でトップページをおしゃれにしてみよう

【おすすめカード設定】でトップページをおしゃれにすることができます。

ご自身でアピールしたいブログ記事をピックアップしてトップページにすることができます。

LION BLOGではできなくてどうすればできるかなって色々調べたら、さくっとCocoonでできることがわかりました。

hitodeblog|完全初心者のためのブログの始め方
完全に何もわからない初心者でも、ブログを始められ、楽しめるようになるサイトです。 図解や画像、動画たっぷりで、楽しみながら稼げるブログの作り方をブログ収入で生活してる筆者が0から教えます。

好きなブログで【hitodeblog】のようなトップページにしてみたいとずっと思っていました。

アイキャッチ画像をヒトデブログのように可愛いキャラクターを載せたいのですが、私はキャラクターを作っていないので読んでほしい記事をピックアップしています。

おすすめカードを設定することトップページを簡単に設定することができました。

ピックアップする記事は4つで固定するのがおすすめです。

4つにすることでぴたっといい感じにはまります。

スマホの場合も4つにすると綺麗に配置されます。

設定変更する際はGoogle Chromeでスマホ画面に変更して、都度画面の見え方はチェックしていきましょう。

設定方法はめちゃくちゃ簡単です。

ワードプレス管理画面を開きます。

 

外観→メニュー新しいメニューを作成しましょう→メニュー名記載→メニューを作成クリック→ピックアップする記事を追加
 

 

おすすめカードの表示でどのページに表示させたいのか色々試してみてください。

私は全ページで表示させていたのですが、出しすぎるとちょっと邪魔かなと思い、フロントページのみで表示させています。

次はメニュー選択で設定したメニュー設定すればOKです!お疲れ様でした。

あとは、お好みで表示スタイルやカード余白を調整してみてください。

おすすめカードを追加するとこんな感じになりました。

【カルーセル設定】でトップページを充実させてみよう

おすすめカードの変更でトップページを変更しました。

全ページに出しても良いのですが、せっかくカルーセル設定があるので使ってみたいですよね。

私は投稿・固定ページ以外ではカルーセルが反映されるように設定を行なっています。

せっかくあるので使ってみてください。

不要であれば設定からはずしちゃえばOKです。

 

 

カルーセルを設定するとこんな感じになりました。

 

いかがでしたか?

Cocoonの初期設定でぜひ試してくださいね。

あと、記事は0件ですと反映したくても反映されませんので、最低5記事くらいは書いてみればいい感じのサイトにみえますよ。

引き続き、ブログ運営で役に立つ情報を発信していきます。

 

コメント

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