ブログ運営

【COCOON】私がCSSでカスタマイズしたことのまとめ♪

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

COCOONをかわいく、オシャレにカスタマイズしよう!

Hello! サイト弄るの大好き赫茄子(あかなす)です!

私のWordPressブログでは、無料テーマ「COCOON」を使用しています。
カスタマイズしているうち、何を、どこで、どう変えたのか? 
自分でも収集がつかなくなってきたので、ここにメモ_φ(・_・ しておきたいとおもいます♪

実際に貼り付けたCSS(カスタマイズするためのコード)もメモしていますので、
コピペして使ってみてくださいね♪

CSSを貼る場所は、
外観→カスタマイズから、追加CSSをクリックしてそこに貼り付けます。
すでに何か貼り付けてある場合は、下側に追加しましょう。

カテゴリーを見やすく、アイコンを可愛くする

デフォルトのメニューはかなりシンプルな表示です。
そこに可愛くアイコンを付け、わかりやすいように線で区切ってみました。

ビフォア

アフター

このブログと同じウィジェットカテゴリーにカスタマイズにする

/*親カテゴリーのカスタマイズ*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f005"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

/*子カテゴリーのカスタマイズ*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}

著者情報を消す

私はこのブログを自分一人で執筆しているので、毎回著者情報がでなくてもいいなあ、と思ってこのコードを入力しています。

/*固定ページの著者情報を消す場合*/
.page .author-info {
    display: none;
}

/*投稿ページの著者情報を消す場合*/
.post .author-info {
    display: none;
}

ページTOP、フロント固定ページの諸々を非表示にする

私は所謂「サイト型」というTOPページにしていて、固定ページをTOPにしています。
TOPページ上部にフォローボタンなどはいらないので、非表示にしています。

シェアボタンの非表示、フォローボタンの非表示、フォローボタンの非表示、投稿日の非表示、投稿日の非表示のCSSです。必要な部分のみコピーしてお使いください。

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
  display: none;
}

/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
  display: none;
}

/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
  display: none;
}

/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
  display: none;
}

吹き出しの枠の色を変える

COCOONデフォルトで吹き出しの枠を変えることは可能ですが、毎回設定するのがめんどうなのでテーマCSSで設定してみました♪

それからアイコンを枠ありにしたときの色も変更しています。
※現在こちらは適用していません。理由は、COCOONのバージョンアップで吹き出しの枠の色を簡単に変えられるようになったのと、アイコンの枠の表示自体を今していないからです。

/*デフォルトの吹き出しの色を変える*/
.sbs-stn .speech-balloon{
border:  2px solid #e55e82;/*吹き出しメインカラー*/
}
.speech-balloon::before {
border-right: 12px solid #e55e82;/*左アイコン時三角部分*/
}
.sbp-r .speech-balloon::before {
border-left: 12px solid #e55e82;/*右アイコン時三角部分*/
}
/*吹き出しアイコン枠の色を変える*/
.speech-icon img, .sb-id-25 .speech-icon amp-img {
  border: 2px solid #e55e82; /*形状・色*/
}

一旦ここで公開いたしますが、これから先変更があれば追記していく予定です! 最後までありがとうございました。それではまた!

赫茄子

Hello!
とまと大好き赫茄子(あかなす)と申します!
日米ハーフの20代女で、東京から愛知にきて農家の嫁やっています。
趣味はゲーム、生き物飼育です(*´ェ`*)
フェレット、ウロコインコ、爬虫類、たくさんの生き物に囲まれています。
グルメや旅行、美容にも興味あり♪

Follow Me !!
スポンサーリンク
Follow Me !!
にょろらぶ

コメント

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