SimplicityのCSSカスタマイズ【箇条書きリストと補足情報】

どうも、ぶちくまです。

Simplicityの箇条書きリストと補足情報をカスタマイズしました。 箇条書きリストは入れ子が複雑でかなり手間取りました。 補足情報はかなりシンプルな形になりましたが、 さらに背景色を変えるとだいぶ目立つと思います。

今回のカスタマイズはかなり時間がかかりました。

補足情報は良かったんですけどね、箇条書きリストの入れ子システムが全く理解できず、どういうセレクタを用意したらいいのかわかりませんでした（汗）。

今回も、相変わらずサルワカ先生にお世話になりっぱなしです。

目指せ、SANGO！（買えっ！！）

ちなみに、サンゴとは

サンゴはイソギンチャクの仲間

沖縄のサンゴ礁が死にかけている、というニュースは何度かみた。

ぶちくま

ちなみに、サンゴって動物なんだぜ？　知ってた？

イソギンチャクとかと同じ括りらしい。

それがあの一面に広がっていると思うと、ちょっぴりぞっとしちゃうよね。

サンゴ自体は光合成しない

ぶちくま

サンゴは植物じゃないってことは、光合成はしてないってことだよね？

まさにその通りで、サンゴ自身はしっかり呼吸しています。

んで、その二酸化炭素やアンモニアなんかを取り込んで光合成をしているのが、共生藻という、サンゴの中に住んでいる奴。

共生藻は光合成によって酸素を産み、産生されたエネルギーを利用して成長します。

超絶ウィンウィンな関係なんですね。

白化は深刻な問題

んで、サンゴ礁が死ぬっていうのは、サンゴが「白化」してしまう現象が起きていて、これは海が汚れたり、地球温暖化で変化した水温によって、サンゴおよび共生藻がやられてしまうからなんですね。

これによって、本来は透明なサンゴの体が、共生藻がいなくなって、体の奥の骨が白く透けて見えるようになる、これが「白化」なんですね。

しろくまさん

へー。

話が逸れました。（離脱率急上昇！！）このパターン、何回かやってます。

WordPress有料テーマ「SANGO」とは

SANGO｜心地良さを追求したWordPressテーマ

WordPressテーマSANGOのデモページです。

saruwakakun.design

WordPressの超優良な優良テーマ。

ぶちくまが喉から手が出るくらいに欲しいけど、金を惜しんで無料テーマをひたすらカスタムする毎日。

でもね、途中で気付くよね、やっぱり有料の優良テーマには一生届かない。

今からブログ始める人は、絶対に有料テーマで始めた方がよろし。

SANGOのお勧めポイント

SANGOいいよ、SANGO。

表示が早い、めっちゃ早い！

ほとんどCSSで書かれてるから、余計な負荷がかからずに、爆速で表示される、らしいよ。

プラグインとか、JavaScriptとかで目立つアニメーションとか作ると、読者を惹きつけるサイトは作れるけど、一方で、サイトが重たくなって、結局Google先生の評価を下げるからね。

サポート充実！

あとね、サポートが充実。

わからなくても、サルワカ師匠が優しく説明してくれる、らしいぜ？

ぶちくま

いや、知らんよ？
ぶちくま、使ってないからね？

指くわえて外から眺めてるだけだからね。

ちなみに、サルワカ先生って呼んでるけど、「サルワカ 」はサイト名だからね。

中の人は、また別の名前らしいぜ。

⚡️ “これまでに作ったもの・書いた記事”を一部まとめてみました。https://t.co/blEo1x3uob

— CatNose (@catnose99) 2017年12月7日

値段はWPテーマとしては安い

ちなみに、お値段は現在のところ、10800円。

ぶちくま

えっ、高くないの？

この値段ね、ブログを始めたばかりの人だと、高い、って思うんだよね。

これが全然違いますからね。

CSS・HTMLの勉強する時間が勿体無い

無料ブログで意気がって自分らしさ出そうとして、やったこともないCSSとHTMLの勉強し始めると、まじで年単位でかかるから。

その時間と、労力、1万円で買えるなら安いもんですよ。

その時間で記事を書けば、大丈夫、1万円ならすぐに稼げるよ！

このお値段、据え置きではなくて、ダウンロード数によって価格変動あるから気をつけて。

ぶちくま

せっかく買ったのに似たようなサイトばっかり！

ってことにならないための、サルワカ氏の配慮らしい。

はい、ボランティア宣伝終了です。

今回もしっかりCSSの勉強させていただいたので、勉強料として書かせてもらいました。かしこ。

本題行くよー

あっ、Simplicityは無料テーマで最高だから

散々、SANGOの宣伝しましたが、ぶちくまが使用しているSimplicityも最高です。

カスタマイズしやすくて涙が出るね。

基本的な機能は補って余りあるし、それでいてデザインがシンプルだからCSSが生きる。

Simplicityのカスタマイズ記事を探していても、「えっ？　これが同じテーマ？」ってのによく出くわします。

About Lifeさま、ありがとう

今回、一番お世話になったサイト様です。
https://aboutlife-blog.com/simplicity-customize/
かなり一体感のある、クールなデザインが印象的です。

しかも、フォントを要所要所でいじる、というのがメインとなっているので、「結構違うというオリジナリティがありながら、ごちゃごちゃしていない」という、Simplicityのカスタマイズのお手本のようなお方です。

とりあえず両手合わせてありがたやー。

Simplicityで箇条書きリストをカスタマイズ

さて、箇条書き。

ぶちくまは今まで一度も使ったことなかったのです。

ぶちくま

普通に、中点「・」でごり押ししてたし。

順序とかも、１から手打ちでやってたよね。

これさ、自分が他の人の資料とか手直しするときとか、Wordとかだと、「なにこいつ①とか手打ちしてるんだよ、間になんか挟まったら全部打ち直しじゃねぇか」となりますわね。

そのくせ、WordPressならOKとしていた自分が恥ずかしい。

ぶちくま

穴があったら冬眠してやりたい。（願望）

今回は、そんな箇条書きリストをカスタマイズ。

カスタマイズの必要性

これが、真実は定かではないものの、Googleさんが巡回に回ってきたときに、箇条書きで書いてあると、「このサイトは論理的（ロジカル）に構造化されていていいね！」って感じでFacebookでいいねしてバズらせてくれるって噂。

んなわけはないんだけど、論理的構造がAI的には好物っていうのは本当らしいよ。

重要な情報がわかりやすく整理されているね、って評価になる。

ただ、そのまま出力しちゃうと今度は味気なくて、ユーザビリティが下がってしまうという。

そういうわけで、CSSで味付けしてやりましょう。

日本の構造

• 東北地方
• 北陸地方
  • 新潟
  • 長野
  • 石川
  • 福井
• 関東地方
• 中部地方

まぁ、こんな感じで箇条書きすることがあるじゃないですか。

新潟県民は、東北地方に入りたがらないところがあるのだけど、北陸地方ならいいのか、という疑問はみんな持ってる。

そして、新潟のそんなわがままに巻き添えを食らう、近隣県の方には申し訳なく思う。甲信越とか、山梨を同じ地方としていいのか、と。

箇条書きはセレクタの設定が難しい

さて、セレクタがややこしいんですよね。

今回は、ulだの、olだの、liだの、短いけどいっぱい重なってなんだかわからんセレクタを使用しています。

箇条書き全体をボックスらしさを出したりしたい場合は、olあるいはulに対して、borderを入れたり、背景色を入れたりすればいい。

背景色や線で囲む方法はCocoon見出しの作り方で丁寧に解説しています！

ただ、olやulだけをセレクタにすると、他の箇条書きを使用したCSSまで崩れる可能性があるから、#contentや　.articleなどでちょっと限定してやったほうがいい。

ここまでは簡単。

入れ子システムが難解

ぶちくま

入れ子システムがいまだによくわからん

この箇条書きリスト、さらに下層のリストを作ることももちろんできます。

みたいなことですね。Wordとかでよくやるインデント下げみたいな。

これが、結局、それぞれの階層にセレクタ指定して、色付けしていかないといけないみたいなんだ。

一個だけならいいんだけど、ulとolで二つある。

ぶちくま

えっ、これ４パターンも作らないといけないの？

多分、もっとスッキリしたCSSが書けると思うのだけど、ぶちくまにはちょっとわからなかったです。

途中で面倒になって、数字を入れ子にするパターンはやめた。

黒ポチ入れ子も数字でカウントしてしまう不具合勃発

ここで嫌になった。

みたいなことにしたかったんだけど、

みたいなことになる不具合が起きました。

ぶちくま

誰か助けて。

これは、入れ子に入った時点で、カウントをリセットして、数字を表示しないようにすることで回避したけど、正しいかどうかはわからん。

まぁ、そんなこんなでなんとかできました。

1. BUMP OF CHICKEN
   • 藤くん
   • ます
   • 増川
   • ちゃま
2. JOY

箇条書きリストのカスタマイズをやめた

ちなみに、現在はテーマをCocoonに変更して、箇条書きリストのカスタマイズは一部無くしました。

ぶちくま

と、いうのも、これ、かなりカスタマイズが面倒なんです。

実は、セレクタの設定を間違えると、表示ミスが頻発します。

ブログが育ってくると、箇条書きは本当にたくさんのところで使用することになります。記事本文だけに設定したかったり、ウィジェット内でも使用したり、吹き出し内に挿入したり。

表示がうまくいかないと、かなり汚いサイトになって、Googleの評価も下がってしまうし、そもそもカスタマイズするメリットは自己満足みたいなところがあるので、箇条書きリストをカスタマイズした表示は限定的なものに変更しました。

Simplicityの補足情報「！」「？」をカスタマイズ

全然知らなかったんだけど、よそのブログとか見てて、「注意！」みたいなボックスがあって、それいいなぁ、と思ってよだれたらしてたら、普通にSimplicityにもありました。

背景色の色を変えるとごちゃごちゃしちゃうかなぁと思ったけど、薄めの色なら変えてもいいかも。
→背景色を薄めの色に変えてみました。

こちらの方が地の色と差別化できて少しだけ目立ちますね。

サルワカCSSを参考に、「引用」の時に使用したデザインをもとに作りました。

「インフォメーション」だけ、上記の箇条書きに対応しました。

ちょっとしたまとめなんかにいいかもね。

information

question

alert(exclamation)

こんな感じです。

セレクタはシンプルに.information .question ,alertなので、CSSはしやすいかと思います。

入れ子はちょっと面倒なので、ぜひ参考サイト様をご覧ください。

カスタマイズコードをコピペしよう！

はい、2019年バージョンです。今はCocoonを使用しているので、Simplicity利用時のコードを参考にしていただくために書いておきます。

Simplicityの箇条書きリスト

コピペは自己責任でお願いします。

/* リストのスタイル */
/*リスト全体*/
#the-content > ul,#the-content > ol {
  background: #f8f8f8;/*灰色に*/
  border-radius :8px;
  box-shadow :0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
}

#the-content > ul li,#the-content > ol li {
  margin: 0 0 7px;
  line-height: 1.7;
  position: relative;
  left: -10px;
}
/*順序なしリスト*/
#the-content > ul > li {
 list-style-type: none;
}
#the-content > ul > li:before {
  font-family: "FontAwesome";
  content: "f138";/*アイコンの種類*/
  position: absolute;
	left: -1em;/*左端からのアイコンまでの距離*/
  color: skyblue;/*アイコン色*/
}
/*順序ありリスト*/
#the-content >ol >li {
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em;
  padding-left: 3em;
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
}
#the-content >ol >li:before{
  /* 以下数字をつける */
  position: absolute;
	counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
	    margin-left: 1em;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
}
/*入れ子リスト*/
#the-content >ul li>ul,#the-content >ol li>ul{
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
}
#the-content >ul li>ul>li,#the-content >ol li>ul>li {/*疑似要素*/
padding-left:1em;
}
#the-content >ul li>ul>li,#the-content >ol li>ul>li :before{/*疑似要素*/
  font-family:"FontAwesome";
  content: "f00c";/*アイコンの種類*/
  position: absolute;
  left : -1.5em;/*左端からのアイコンまでの距離*/
  color: #2d8fdd;/*アイコン色*/
  font-size: 0.9em;
  padding-top: 0.15em;
	padding-left: 1em;
}

補足情報（アイコンボックス）のCSSカスタマイズコード

アイコンボックスは、新しく設定されたセレクタを追加しているので、Cocoonでも流用できると思います。

/*infomationなどのスタイル全体*/
.information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before {
	padding-right: 0em;
	margin-top: 0em;
}
.information-box, .question-box, .alert-box, .information, .question, .alert{
    position: relative;
	padding: 1.5em 0.5em 0.5em 1em;
    box-sizing: border-box;
    background: #f7f7f7;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}
.information:before,.question:before,.alert:before,.information-box::before,.question-box::before,.alert-box::before{
	display: inline-block;
    position: absolute;
    top: -8px;
    left: 9px;
    width: 40px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
}
.information:after,.question:after,.alert:after,.information-box::after,.question-box::after,.alert-box::after{
    position: absolute;
    content: '';
    top: -8px;
    left: 49px;
	border: none;
}	
.information p,.question p,.alert p,.information-box p, .question-box p,.alert p{
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}
.information cite,.question cite,.alert cite,.information-box cite,.question-box cite,.alert-box cite{
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/*infomationのスタイル*/
.information-box,.information{
background: #f4f6fd;	
}
.information-box::before,.information:before{
	content: "f05a";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 18px;
    line-height: 30px;
    background: #6fcdd9;
}
.information-box::after,.information:after{ 
	border-bottom: solid 8px #6cacb5;
    border-right: solid 9px transparent;
}
/*questionのスタイル*/
.question,.question-box {
background: #fdfcf0;	
}
.question:before,.question-box::before{
	content: "f059";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 18px;
    line-height: 30px;
    background: #fba532;
}
.question:after,.question-box::after{ 
	border-bottom: solid 8px #de8001;
    border-right: solid 9px transparent;
}
/*alertのスタイル*/
.alert-box, .alert{
background: #f7e7e7;	
}
.alert-box:before,.alert::before{
	content: "f071";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 18px;
    line-height: 30px;
	background: #f75b5b;
}
.alert-box::after,.alert:after{ 
	border-bottom: solid 8px #cc3939;
    border-right: solid 9px transparent;
}

ではでは。