【前編】CSSコピペ可!初心者でも簡単にできる「Cocoon」のカスタマイズ

WordPress無料テーマ「Cocoon」をカスタマイズ

こんにちは!投稿にもだいぶ慣れてきたサボちゃんです。

初投稿「初投稿!記事が書けるようになるまでの道のりを振り返る(自己紹介つき)」でも少し触れていますが、このブログではWordPressの無料テーマ「Cocoon」を使用しています。

Cocoonには既存のデザインを簡単に適用できるスキンというものがあり、このスキン使うことで初心者でも簡単に素敵なサイトを作ることができちゃいます。(スキンについては、この記事の最後に詳しく載せています。)

でも初心者とはいえ、「もっと自分流にアレンジできたらなぁ……」と思ってしまいますよね(笑)

実際、先日もくもく会でお話しした人は「WordPressでブログを始めた頃は、CSSが分からず散々なデザインだった」「CSSが弄れて羨ましい」とおっしゃっていました。(私は名刺と同じデザインにしたかったので、Cocoon既存のCSSに少し追記しデザインを変更しています。)

そこで!

今回は、私がカスタマイズした部分のコード(2019年8月10日現在)を備忘録として残しつつ、共有して行きたいと思います!

思ったより長くなってしまったので、こちらの前編にはホームと投稿ページのメインカラム、後編でサイドバーの中身と、2回に分けました。

はじめに

冒頭にも述べた通り、自己流のアレンジをそのまま公開しているに過ぎません。それぞれ仕様が違うと思いますので、必要であればご自身のサイトに合うよう書き換えてください。

色までまるっとコピーするのはNGです。使用する際は必ず色を変えてくださいね。使いたい色の数値(#000000やRGB)を知るには、「原色大辞典」がおすすめですよ!

色を変えていただくこと前提でコピペは自由ですが、全て自己責任でお願いいたします。

「コピペしたから見にきて!」「ここもっと良いコードの書き方があるよ!」という場合は、ぜひTwitterで教えてください(笑)

どこにコピペしたらいいの?

子テーマにコピペします。「外観」→「テーマ」から現在有効化されているテーマを確認することができますので、コピペする前に一度、必ず確認しましょう。

初めは警告が出るので気づくだろうと思いますが、テーマエディターのCSSを編集するのではなく、追記することをおすすめします。

理由は簡単、テーマエディターだと「どこを消して、どこに追加して……」が分かる人しか弄れないからです。間違って余計な部分を書き換えてしまうと大変なことになるので、今回は子テーマに追記していきます。

「外観」

「テーマエディター」

「テーマの編集」

「外観」

「カスタマイズ」

「追加CSS」

背景を全体に適用させる

/*メインカラム、カルーセル、サイドバーの背景色を白から薄橙に*/
.main, .carousel-in, .sidebar {
    background-color: #f7eed3;
}

ホーム上部のカルーセル(スライドするカード)部分

/*カードの外枠を白色に*/
.carousel-entry-card-wrap {
    background-color: #fff;
    border-radius: 4px;
}
/*カードをマウスオーバーでふわっと浮かせる*/
.carousel-entry-card-wrap:hover {
    box-shadow: 0 2px 8px -3px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: #fff;
    transition: all .3s ease;
}
/*正確には擬似要素はコロン2つ(::after)、擬似クラスはコロン1つ(:hover)ですが、Slickスライダー既存のCSSで使用されている擬似要素はコロン1つでしたので、そのままコロン1つで書いています*/
/*スライダーのドット色をデフォルトより少し薄く*/
.slick-dots li button, .slick-dots li.slick-active button:before {
    color: #333;
}
/*スライダーの< >ボタンの色を茶色に*/
.carousel .slick-arrow:before {
    color: #5f4b3b;
}
スポンサーリンク

ホーム下部エントリーカード(大きなカード)部分

/*カードの枠を白色に*/
.entry-card-wrap {
    background-color: #fff;
    border-radius: 4px;
}
/*カード左上のカテゴリー名の枠線をなくす*/
.cat-label {
    border: none;
}
/*カードをマウスオーバーでふわっと浮かせる*/
.entry-card-wrap:hover {
    box-shadow: 0 8px 16px -6px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: #fff;
    transition: all .3s ease;
}

投稿ページメインカラム(記事部分)の見出し

2019.09.27 h4(4番目の見出し)のスタイルを追加しました!

/*h2(タイトルの次に大きな見出し)を吹き出し風に*/
.article h2 {
    position: relative;
    border-radius: 8px;
}
.article h2::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 10px solid transparent;
    border-top: 12px solid #f7b643;
    width: 0;
    height: 0;
}
/*h3(その次に大きな見出し)を左側丸く、先に葉っぱつける*/
.article h3 {
    border: none;
    padding: 12px 16px;
    background: rgba(247,182,67,0.2);
    border-radius: 26px 4px 4px 26px;
}
.article h3::before {
    content: '\f06c';
    color: #f7b643;
    margin-right: 8px;
    font-family: FontAwesome;
}
/*h4(その次の見出し)に、文章に応じた長さのアンダーラインを引く*/
.article h4 {
    border: none;
    border-bottom: solid 2px #f7b643;
    width: fit-content;
}

投稿ページメインカラムの目次

/*サイズとミシン目*/
.toc {
    width: 80%;
    background-color: rgba(255,255,255,0.8);
    border: dashed 2px #f7b643;
    box-shadow: 0 0 0 12px rgba(255,255,255,0.8);
    border-radius: 12px;
}
/*上の指定の一部がサイドバーの目次で適用されないように*/
.nwa .toc {
    box-shadow: none;
    border-radius: unset;
    background-color: #f7eed3;
    margin: unset;
    width: unset;
}
/*目次の丸い番号*/
ol.toc-list {
    counter-reset: number;
    list-style-type: none! important;
}
.toc-list.open {
    padding-left: 0px;
}
ol li {
    position: relative;
    padding-left: 0px;
    line-height: 1.5em;
    padding: 0.3em 0.3em 0.3em 32px;
}
ol li::before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    background: #f7b643;
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

投稿ページメインカラム上部(アイキャッチ下)のSNSシェアボタン

/*キャプションなくす*/
.sns-share.ss-high-and-low-lc a .social-icon.button-caption, .sns-share.ss-high-and-low-cl a .social-icon.button-caption, .sns-share.ss-high-and-low-lc a .button-caption.button-caption, .sns-share.ss-high-and-low-cl a .button-caption.button-caption {
    display: none;
}
/*背景を白から薄橙に*/
.bc-brand-color-white.sns-share a, .bc-brand-color-white.sns-follow a {
    background-color: #f7eed3;
}
/*ブランドアイコンサイズを大きく*/
.sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
    font-size: 24px;
}
/*SP時2列から1列表示に*/
@media screen and (max-width: 834px){
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
    width: 16%;
}
}
スポンサーリンク

投稿ページメインカラム記事下(この記事が気に入ったら〜)

2019.09.04 テキストの高さがおかしくなっていたので、コードを追記しました!

/*右の四角の背景を黒から茶色に*/
.fb-like-box {
    background-color: #5f4b3b;
}
/*2019.09.04 PC時の高さ調整*/
@media screen and (min-width: 481px) {
.fb-like-content {
    padding-top: 32px;
}
}
/*2019.09.04 SP時の高さ調整*/
@media screen and (max-width: 834px){
.fb-like-content {
    padding: 8px 0;
}
}

投稿ページメインカラム下部(関連記事)

/*関連記事のh2だけ色を黒から茶色に*/
h2.related-entry-heading {
    color: #5f4b3b;
}
/*各関連記事の角を丸く、マウスオーバーで背景白*/
.related-entry-card-wrap{
    border-radius: 4px;
}
.related-entry-card-wrap:hover {
    background-color: rgba(255,255,255,0.8);
}

投稿ページメインカラム下部(前の投稿/次の投稿)

/*< >の色を茶色に*/
blockquote::before, blockquote::after, .pager-post-navi a.a-wrap::before {
    color: #5f4b3b;
}
h2.widget-below-comment-form-title.main-widget-label {
    color: #5f4b3b;
}
/*マウスオーバーで背景白に*/
a.prev-post.a-wrap.border-element.cf:hover {
    background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
}
a.next-post.a-wrap.cf:hover {
    background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
}
/*PC時だけ1列に収める*/
@media screen and (min-width: 481px) {
a.prev-post, a.next-post {
    width: 50%;
}
.pager-post-navi {
    flex-direction: initial;
}
}

Cocoonには着せ替え機能が標準搭載されている

そもそもCocoonには、「スキン」というWordPress初心者でも簡単にデザインを変更する事ができる仕組みが存在します。LINEでいう、着せ替えのようなものです。

こちらがその一覧。すごい数!(笑)

WordPress無料テーマ「Cocoon」のスキン一覧

スキンのおかげで「CSSって何?」レベルの人でも、あっという間に見映えのいいサイトが完成しちゃいます。無料ですよ!すごいです(笑)

スキンを設置しても色など各項目を変更することができるので、人と被る心配もなさそうですね!めんどくさい人、コピペするのも怖い人は、単純にスキンを変更するだけに留めることをおすすめします。

ちなみに私は「[Child]スキンテンプレート」を使用しています。スキン自作用の、スタイルが何も入っていないひな形です。

Cocoonスキン紹介」にて詳しく紹介されています。PCだとサイドバーの「スキン動作デモ」で各スキンを適用した様子を再現することができますので、ぜひ試してみてください!

それではまた!