この記事の概要
●カテゴリー作り
●Cocoon設定
●サイドバーのカスタマイズ
●CSSに挑戦
投稿を追加してみた
【初心者がAndroid Studio+kotlinで電卓アプリを作ってみる】という記事を投稿してみました。
まとめサイトや芸能人のブログみたいに単発の記事を投稿しまくるならこれでもいいのだが、シリーズ物の備忘録として使用するには見づらいので修正したいです。
カテゴリーを作る
これでいいか？
【初心者がAndroid Studio+kotlinで電卓アプリを作ってみる】という記事のカテゴリーは「アプリ作成」でいいか。子カテゴリーを「kotlinで電卓アプリ作成」にしておこう。
Cocoon設定
インデックスタブ
Cocoon設定のインデックスタブ内で三か所変更する。
投稿タブ
関連記事要らないだろうということで。
表示→関連記事を表示する→チェックを外す。
SNSシェアタブ SNSフォロータブ
これも要らないかな？
メインカラムトップシェアボタンを表示→チェックを外す
メインカラムボトムシェアボタンを表示→チェックを外す
本文下のフォローボタンを表示する→チェックを外す
サイドバーをカスタマイズする
サイドバー全削除
シンプルにしたいので一回消すことにします。
削除！！
サイドバーにカテゴリーを追加する
カテゴリーは欲しいので追加します。
設定する。
CSSに挑戦
CSSは細かくデザインを変更できるようなものなのかな？
現在サイドバーにカテゴリーが追加されてると思いますが、なんか文字が大きいし。もっとシンプルにしたいけどCocoonの設定はないから難しそうだけどやってみよう！
google先生に聞く。「サイドバー デザイン カスタマイズ」
フィフきゅんとJAJAAANというサイトも参考にさせていただきました。
外観→カスタマイズ→追加CSS
ちまちま変更しながらこうなりました。
CSSどこに書く？
先ほど「外観→カスタマイズ→追加CSS」に書いていきましたが、「外観→カスタマイズ→テーマファイルエディター→style.css」でもOKっぽい。
「外観→カスタマイズ→追加CSS」
CSSを変更したらすぐに見れるのでお試しで使っていく感じにしよう。
「外観→カスタマイズ→テーマファイルエディター→style.css」
このデザインに決めた！！ってなったらこっちに切り取って移すようにしようかと思う。
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*【WordPressでブログ作成】第3回↓*/
/*------------------------------
サイドバーのカスタマイズ
------------------------------*/
.sidebar h3 {
background: none;
font-size: 14px;
position: relative;
padding: 0;
text-align: center;
border-bottom: 1px solid #CCCCCC;
}
/*--------------------------------
親カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
line-height: 1.3; /*行間を狭くする*/
font-size: 14px;
border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li a::before{ /*親カテゴリーのアイコン*/
font-family: "Font Awesome 5 Free"; /*バージョン指定*/
content: "\f07b"; /*FontAwesomeのユニコード*/
color: #CCCCCC; /*色*/
padding-right: 6px; /*右側空間*/
font-weight: 900; /*太さ*/
}
/*--------------------------------
子カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
line-height: 1.3; /*行間を狭くする*/
border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
font-family: "Font Awesome 5 Free"; /*バージョン指定*/
content: "\f07b"; /*FontAwesomeのユニコード*/align-content
color: #CCCCCC; /*色*/
padding-right: 6px; /*右側空間*/
font-weight: 1; /*太さ*/
}
/*【WordPressでブログ作成】第3回↑*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}完成
シンプルでいい感じじゃないでしょうか？
コメント