COCOONをかわいく、オシャレにカスタマイズしよう！
Hello！ サイト弄るの大好き赫茄子(あかなす)です！
私のWordPressブログでは、無料テーマ「COCOON」を使用しています。
カスタマイズしているうち、何を、どこで、どう変えたのか？
自分でも収集がつかなくなってきたので、ここにメモ_φ(･_･ しておきたいとおもいます♪
カテゴリーを見やすく、アイコンを可愛くする
デフォルトのメニューはかなりシンプルな表示です。
そこに可愛くアイコンを付け、わかりやすいように線で区切ってみました。
ビフォア
アフター
このブログと同じウィジェットカテゴリーにカスタマイズにする
/*親カテゴリーのカスタマイズ*/
.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; /*形状・色*/
}
一旦ここで公開いたしますが、これから先変更があれば追記していく予定です！ 最後までありがとうございました。それではまた！
コメント