〈〈Instagramでもイラスト公開中〉〉

初心者もコピペで簡単!ワードプレス【Cocoon】CSSカスタマイズの参考まとめ

サイト作り
スポンサーリンク

ワードプレス無料テーマCocoonはいいぞ!

moiちゃん
moiちゃん

こんちにちは!ワードプレスでブログを書いて3年目のkahumoiです

ワンちゃん
ワンちゃん

ワードプレスでブログやホームページを作っている方は多いけれど、CSSやHTMLがサッパリわからないとカスタマイズしにくいよね。

moiちゃん
moiちゃん

そうそう。だから最初のテーマ選びは本当に大事!!

cocoonを選んだ理由

ワードプレスは公式の無料テーマがたくさんあります。

テーマをダウンロードして有効化するだけで簡単にブログができちゃうので楽ちんですよね✨

私も最初は公式の無料テーマを使っていましたが、

「ここの色を変えたいな~」とか「もうちょっとおしゃれにしたいな~」とかだんだんカスタマイズに興味が出てきました。

そんなとき「○○(テーマの名前) カスタマイズ」で検索をかけて調べてみたら、

参考になるサイトが少なくて一体何をどうしたらいいのかわからない~~!

なのでカスタマイズの情報が多いテーマへ変更を検討した結果、選んだのが現在使用しているテーマ【cocoon】

  • 無料で使える!
  • 日本語対応のテーマなので操作がわかりやすい!
  • CSSなしでもカスタマイズできる項目が多い!
  • 使っているユーザーが多いからカスタマイズ情報がいっぱい!
  • 高速で表示される!
  • レスポンシブデザイン(スマホ対応)!

などなど、無料でこんなにいいんですかぁ~!!ってくらい素晴らしいところがたくさんある神様のようなテーマ。

私のようなワードプレス初心者さんから、自分でがっつりカスタマイズできるプロレベルの方まで、とにかくたくさんの方が利用しています。

スポンサーリンク

CSSをコピペで見た目をランクアップ!

無料のワードプレステーマ【cocoon】を使えばCSSを使わなくてもある程度のカスタマイズが可能ですが、

私がやりたいカスタマイズはCSSに記述が必要なものでした。

moiちゃん
moiちゃん

CSSっていうのはデザインを作る言語のことだよ~。

ワンちゃん
ワンちゃん

必ずダウンロードして有効化している子テーマに記述してね!

CSSやHTMLがよくわかっていない初心者の私でも、コピペすれば簡単にカスタマイズができました。

このブログのどこをカスタマイズしたのか参考にしたサイトと合わせてご紹介しますね。

トップ画面&サイドバーのカスタマイズ

ホームページのトップ画面は、いわば「顔」だと思います。

ブログメインだと文章が一番大事だと思いますが、トップ画面もブログの雰囲気を左右するとても大事な要素のひとつです。

あと、単純にイイ感じのトップ画面が作れると自分のホームページ、ブログに対してテンションが上がります。(笑)

グローバルメニューカスタマイズ

グローバルメニューはブログのトップ画面だけじゃなくて、どのページを開いてもずっと上部に表示されています。

私の現在のグローバルメニューはPCから見ると、カーソルを合わせたときに黄色い線が出て、選択している箇所が薄くなります。

このカスタマイズに参考にしたサイトはこちら↓CSSコピペで一発です。

【WordPress】Cocoonのヘッダーメニュー簡単カスタマイズ集
連続でカスタマイズ記事ですが、今回はCocoonにおけるグローバルメニューのカスタマイズです。グローバルメニューを使っていない人には意味がないですが、使っている人にっては、サイトの印象に大きく影響を与えるのがこのグローバルメニューの見た目で

サイドバーの見出しカスタマイズ

サイドバーの見出し部分

サイドバーの見出しっていうのは、この水色で囲んだ部分です。

上下に線で囲んだデザインに変更しました。

カスタマイズに参考にしたサイトはこちら↓ CSSコピペしたあと文字色を変えて文字を中央ぞろえにしました。

Cocoonコピペ一発!サイドバー見出しアップグレード!
SEOに優れ高機能な無料テーマ「Cocoon」のサイドバーの見出しのカスタマイズを行います。サイドバーのウィジェット毎の見出しは共通なクラス名なので見出し一か所変えるだけで全て変わります。本文の見出しと基本的な方法は変わらないので以下の記事

検索窓のカスタマイズ

検索窓の部分

検索窓をオシャレにしました。こちらのサイトを参考にCSSコピペした後色を変えました。

【Cocoon】検索窓をカッコよくカスタマイズしてみた
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は検索窓(検索ボックス)のデザインをいじってみました。サイドバーに設置した場合はこんな感じで表示されます。モバイルのスライドインメニューで表示しても同じデザインで表示され

カテゴリー一覧のカスタマイズ

カテゴリー一覧部分

サイドバーに表示されるカテゴリー一覧部分もおしゃれに。こちらのサイトからCSSコピペ一発です。

【Cocoon】サイドバーのカテゴリーのデザインをカスタマイズ
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーのカテゴリーウィジェットをCSSでカスタマイズしました。サイドバーの見出しデザインのカスタマイズはこちらの記事で紹介しています。子カテゴリーを設定している場合

記事内のカスタマイズ

ブログの記事を読んでもらうためには、見やすさ、読みやすさはかなり大事な部分ですよね。

デザインを変えると印象が大きく変わってくると思います。

見出しのカスタマイズ

記事内の見出し部分

文章の見出し部分を柔らかいイメージにしたかったのでちょいっと変えました。

こちらのサイトを参考にCSSをコピペ。文字色は後から変えました。

【cocoon】初心者向け見出しカスタマイズ!コピペだけで簡単にできるよ
cocoonはワードプレスの無料テーマの中で、 無料テーマで1番使いやすい!!これ以上の無料テーマはない!!! とわたしが敬愛してやまないテーマです。   &nbsp ...

箇条書き(リスト)のカスタマイズ

箇条書きリストの部分

箇条書きリストの部分もホームページのイメージカラーを適用してパッと見やすく。

こちらのサイトからCSSをコピペして色は後から変更しました。

Cocoon|コピペで簡単JIN風のカワイイ箇条書きを作ってみた!
ワードプレス無料テーマCocoon(コクーン)の箇条書きを、ワードプレス有料テーマJIN風にカワイくカスタマイズをしてみました! 今回も、コピペで簡単に誰でも出来るカスタマイズなので参考にしてくださいね

プロフィールのカスタマイズ

サイドバーや記事下に表示しているプロフィールもかわいくしました。

こちらも参考サイトからCSSコピペ一発です!文字は後から中央ぞろえにしました。

【Cocoon】プロフィールボックスをJIN風にカスタマイズ
WordPressテーマ「Cocoon」のプロフィールボックスを、人気のWordPressテーマ「JIN」風にカスタマイズする方法を紹介します。

カスタマイズ参考サイトまとめ!

Cocoonのテーマをカスタマイズすることで、私らしい雰囲気が出せたように思います。

何よりもぐっとおしゃれになりました!

CSSのカスタマイズを掲載してくれているブロガーの皆様に感謝感謝です( ;∀;)

今回CSSをさわらずにCocoon設定から設置できる「アピールエリア」「通知エリア」も追加したので、一気に華やかな雰囲気になったんじゃないでしょうか( *´艸`)

これからワードプレスをなんとか自分で色々やってみたいという方は、無料のテーマ 【cocoon】 を使ってみてはいかがでしょうか。

Cocoon設定でカスタマイズできる項目も多いですし、CSSのカスタマイズもたくさん情報があるので本当に本当にオススメですよ~!

それでは最後にCocoonのカスタマイズをご紹介しているサイトをまとめましたので、CocoonのCSSカスタマイズの参考にご活用くださいね。

Cocoonのカスタマイズまとめ
当ブログでは2018年4月からWordpressテーマ「Cocoon」を使用させてもらってます。無料なのが信じられないぐらい良いテーマですよね。マイペースにポチポチとカスタマイズしているのですが、記事が溜まってきたので分かりやすいようにまと
【コピペ可】「Cocoon」まるごとカスタマイズ講座【簡単】
コピペで簡単に導入できる、無料WordPressテーマ「Cocoon」の便利なカスタマイズ方法をまとめたページです。基本的なCocoonの設定から細部のカスタマイズまで。見やすく使いやすく、それでいてオシャレなデザインを心がけています!ユニークなカスタマイズで他のCocoonブログに差をつけよう。
【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
Cocoon
「Cocoon」の記事一覧です。
WordPressテーマ「Cocoon」カスタマイズまとめ!初心者でもCSSコピペでおしゃれに
こんにちは!無料WordPressテーマ「Cocoon」を超おすすめしているはまちゃん(@wakuwakukeigo)です。この記事は、 この記事を読むべき人 Cocoonのカスタマイズ方法が知りたい! Simplicity2からCoc
タイトルとURLをコピーしました