わたしは新卒で2年間、web知識ゼロの状態でwebデザイナーとして働きました。
まだ勉強中の部分もありますが、だいたいのHTMLとCSSの知識はあります。
そんなわたしのブログ「Room 339」は、WordPressのテーマJINを使用しています。
さらに「ちょっとここをこうしたい・・・！」をCSSを追加して調整してたりします。
その調整のために追加してるCSSをメモ代わりに公開しちゃいます！
同じように困っている方の助けになればいいな、と思うのと、初心者さん向けのざっくりとした解説もつけますので、参考にしていただけると嬉しいです。
CSSのバックアップを取ってからの調整をおすすめします。
動作確認はsafariで行なっています。
今回は、「特定のボックスの中にリストを作ると現れる罫線を非表示にしたい」です。
Contents
この部分をこうしたい
JINは様々なボックスデザインを利用できます。その数20種類！
ボックスの中にリストを作ることもできます。ブログが見やすくなりますね。
ボックスデザインの中には、リストを作ると自動的に罫線が現れるものがあります。
その状態がこちら。
今回は、その罫線を非表示にするCSSをご紹介します。
こちらのCSSを使用すれば解決！
/*解説ボックス内の点線*/
.○○ ul li { border-style: none; }
.○○ ol li { border-style: none; }○○の部分には、適用させたい部分のクラス名を入れます。
わたしが調べた限りだと、JINのボックステーマのうち、下記のボックスで下線が出ることを確認しました。
それぞれのクラス名は下記になりますので、これを入力すればOKです！
・ボックスデザイン17→kaisetsu-box2
・ボックスデザイン18→kaisetsu-box3
【メモ】追加CSSを入力する場所
WordPressのダッシュボードから、外観＞カスタマイズをクリックします。
メニューの下の方に追加CSSがありますので、そちらに入力しましょう！
簡単に解説
ここからは簡単な解説になります。
初心者向けの簡単ざっくりとした内容ですので、ご容赦ください。
スタイルが適用されている要素を調べる
まず、今回の場合どの要素に罫線のスタイルが入っているのかを知る必要があります。
わたしの使用しているsafariでは、右クリックで表示されるメニュー内の「ページのソースを表示」から調べることができます。
ブラウザによって方法は違うので、ご注意ください！
- 要素を選択をクリック
- 調べたい要素をクリック
- 適用されているスタイルを確認
指定は「border-bottom」の記述があるボックス内のリストタグにあることがわかります。
【余談】基本的に空要素はNG
空要素というのは、名前の通り「中身のない要素」のこと
例えば、今回の例でいうとリストタグとは別に、下線を作るために中身のない要素を作ることです。
やむを得ない場合や、どうしても必要な場合は仕方がありませんが、できるだけ作らないようにするとコードも綺麗に見えます。
要素がわかれば、そこに初期値を入力
今回の場合は「none」が初期値になります。
よって、追加で記入するCSSは「border-bottom:none」になるんです。
【余談】応用すればカスタマイズ可能
今回は非表示にしましたが、線をカスタマイズすることも可能です。
例えば点線にしたりとか、二重線とか、太くしたり、細くしたり・・・
調べるとたくさん出てきますので、ぜひ自分好みにカスタマイズしてみてください！
まとめ
いかがでしたでしょうか・・・少しでも理解していただければ幸いです。
「ここわからん！」とか、ほかにも「ここちょっとこうしたい！」みたいなのがあれば、Twitterからリプライ投げていただければ、わかる範囲でお答えできると思います。
