本業が忙しく記事の更新が出来てませんが、GWに毎日更新しますので楽しみにしていてください(_ _)
スポンサーリンク
スポンサーリンク

コクーンカスタマイズ|メニューをカスタマイズして自分の色を出そう!

Cocoon
スポンサーリンク

まいどおおきに!おおもと(@so88qa)です

いきなりですが、ワードプレス無料テーマCocoon(コクーン)はシンプルで使いやすいですよね!
でもちょっと、シンプルすぎて自分色に染めたいと思う人は多いはず

おおもと
おおもと

よく言えば、シンプル

ママ
ママ

わるく言えば、つまらない

今回の記事は、ワードプレス無料テーマCocoon(コクーン)のスマホ表示時のメニューをカスタマイズする記事です。

無料テーマCocoon(コクーン)の標準設定だけではどうしても満足ができないはぜひ参考にしてください。

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』
前回の記事がかなり反響があったので、その続きを書きました! 初めてCSSをいじる人が分かりやすいように、要点のみをまとめてあるので ぜひみてくださいね!
『Cocoon』CSSを使ってユーザービリティーをあげる方法
コクーンのカスタマイズ記事です! 今回のカスタマイズは、SANGOにも使われているマテリアルデザイン! このマテリアルデザインに必要ふかけるな影を使ったカスタマイズです! SANGOのようにカスタマイズしたいなら絶対読めよな!
【有名ブロガーが検証】ブログカードを100%活用するCSSカスタマイズ
有名ブロガーの「はたさん」が検証された結果 ブログカードのクリック率が高いという結果がでました。 さらに、マクリンさんがオススメする「ある一言」をCSSで入れると効果が倍増します! 今回は、そのカスタマイズを紹介する記事です!ぜひ参考にしてね
スポンサーリンク

Cocoon(コクーン)のメニューカスタマイズをするとどうなるの?

スマホ表示のメニューを変更するだけでこんだけイメージが変わります。

むすめ
むすめ

コクーンの標準はコレ

ママ
ママ

wとらのカスタマイズはコレ

たったこれだけ色を変えただけでイメージがガラッと変わる

これが無料テーマの醍醐味ですよ!

(CSSのカスタマイズの参考にしている本)

自分のブログなんだから、細かいところまでしっかりとこだわって行きたいですね

Cocoon(コクーン)のメニューカスタマイズのCSSコードはこれだ!

/*モバイルリッジメニュー変更*/
.mobile-menu-buttons {
	background:rgba(0, 0, 0,0.8);/*フッターメニューの背景を半透明化*/
	box-shadow:0 -5px 6px rgba(0,0,0,0.2);
}
.mobile-menu-buttons .menu-icon::before {
	font-size: 1.15em;/*フッターメニューのフォントアロウズの大きさを変更*/
	color:#002499;/*フッターメニューのフォントアロウズの色を変更*/
}
.mobile-menu-buttons .menu-caption {
	color:#002499;/*フッターメニューのフォントの色を変更*/
}

.slicknav_menu {
	background-color:#a9eee6;/*ヘッダーメニューの背景色を変更*/
}

.slicknav_menu .slicknav_menutxt {
	color:#555;/*ヘッダーメニューボタンのフォントの色を変更*/
	text-shadow:none;/*ヘッダーメニューボタンのテキストの影を非表示*/
}

.slicknav_btn {
	background-color:#fff;/*ヘッダーメニューボタンの背景色を変更*/
	box-shadow:0 3px 6px rgba(0,0,0,0.2)/*ヘッダーメニューボタンに影をつける*/
}

rgbaに関して、こちらの記事をごらんください。

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』
前回の記事がかなり反響があったので、その続きを書きました! 初めてCSSをいじる人が分かりやすいように、要点のみをまとめてあるので ぜひみてくださいね!

カラーコードから簡単に、rgb値を簡単に調べる方法を説明しますね!

方法調べたいカラーコードをググれば簡単にでてきます。

カスタマイズの参考にしてくださいね

Cocoon(コクーン)のメニューカスタマイズのまとめ

今回の記事は、スマホのメニュー画面のカスタマイズ記事でした。

Cocoon(コクーン)などの無料テーマは、こんな少しのところをイジるだけでも印象がガラッとかわりますね!

このようなカスタマイズが積もっていって、自分のブログだけのブログになっていくのが無料テーマの醍醐味だと思います。

CSSのカスタマイズに参考にした本

無料テーマで自分の色を出したい人は、この記事と関連記事を参考にしてください。

本日は以上です!またね!

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』
前回の記事がかなり反響があったので、その続きを書きました! 初めてCSSをいじる人が分かりやすいように、要点のみをまとめてあるので ぜひみてくださいね!
『Cocoon』CSSを使ってユーザービリティーをあげる方法
コクーンのカスタマイズ記事です! 今回のカスタマイズは、SANGOにも使われているマテリアルデザイン! このマテリアルデザインに必要ふかけるな影を使ったカスタマイズです! SANGOのようにカスタマイズしたいなら絶対読めよな!
【有名ブロガーが検証】ブログカードを100%活用するCSSカスタマイズ
有名ブロガーの「はたさん」が検証された結果 ブログカードのクリック率が高いという結果がでました。 さらに、マクリンさんがオススメする「ある一言」をCSSで入れると効果が倍増します! 今回は、そのカスタマイズを紹介する記事です!ぜひ参考にしてね
おおもと
おおもと

質問などがあれば、コメント覧に書き込んでくださいね!

スポンサーリンク
スポンサーリンク
Cocoonブログ

Relation

- Follow -
おおもとブログ

Comment

  1. 大変参考になりました。ありがとうございますm(__)m

    お尋ねなのですが可能であれば教えてください。

    右上の「MENU」を押した後の中の文字色は変更できますか?
    また、その中にTwitterアイコンなどのボタンは設置できますか?

    プラグインが別途必要であればどのようなものがよいか
    ご教授いただければ幸いです。

    よろしくお願いします。

    • シウベエさん
      ありがとうございます(^^)

      ボタンを押した時に色を文字色を変更することは可能です。

      .slicknav_menu .slicknav_menutxt:active{
      color:blue;/*文字色の変更*/
      }

      cssでアニメーションをつける場合

      :hover
      :active
      :focus

      の3種類の疑似クラスをつける事が一般的です。

      簡単に説明すると
      「:hover」はマウスを乗っけるとアニメーションを作動するクラス
      「:active」はクリックするとアニメーションを作動するクラス
      「:focus」はクリックなどユーザー操作でフォーカスされた際に作動するクラス
      です。

      今回は:activeでクリックした瞬間のみ文字色を変更するCSSを書いてますが、クリックした後も文字色を変更したいなら:active→:focusにするとうまくいくと思います。(試して無いので確信は持てませんが…)

      あと、ヘッダーメニューアイコンの中にTwitterアイコンなどを設置するにはPHPファイルを追加する必要があります。
      ワードプレスの知識(PHPの知識)があれば大丈夫だと思いますが、最悪ブログが壊れてしまいます。

      PHPの知識がある、もしくは、バックアップ体制がしっかりしていてブログが壊れてもすぐに復旧できる状態であれば
      調べてお教え致しますが、どう致しましょうか?

      • お忙しいところ誠にありがとうございますm(__)m

        私の説明が悪かったです。

        実際の現状(https://shiubee-blog.com)をみていただけるとわかると思うのですが
        「MENU」の文字を押した後の
        「プロフィール」だったり「記事一覧」等のヘッダーメニューが
        なぜか白文字となってしまっており
        まったく文字が見えない状態となってしまいました汗

        このヘッダーメニュー内の文字色を変更したいのですが
        可能性でしょうか?

        度々申し訳ございません。

        • シウベエさん確認できました。

          .slicknav_nav a{
          color:#000;
          }

          で文字の色を変える事が出来ると思いますので一度試してみてください。

          • できましたー!!!

            本当にありがとうございます!

            これからも応援しています!
            ありがとうございましたm(__)m

            ちなみにPHPはやめておきます・・・
            わざわざすみません。