賢威の記述リストデザインその１の下線を消す

※当サイトにはプロモーションが含まれています。

賢威には、次のような「記述リストのデザインその1」が用意されています。

記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。

このリストデザインを、ボックス内に記述すると、

【例】

記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。

にゃのらいと

ボックスの線もあるから、２番目（一番下）の下線は消したいにゃ

そんな悩みを解決するCSSです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.x
PHPバージョン：7.4.x
サーバー：さくらインターネット

※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます。

記述リストデザインその１の下線を消すCSS

「記述リストデザインその１」の下線を消すCSSです。

.dl_style01 dd.not-border {
border-bottom: 0;
}

ddに対して、クラスnot-borderを付与する事で、下線を消すことができます。

<dl class="dl_style01">
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd class="not-border">要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
</dl>

「記述リストデザインその１」の下線を消すCSS

これを記述すると次のようになります。

【例】

記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1: 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。

クラスnot-borderを付与した箇所の下線が消えました。

クラスnot-borderを付与すれば下線は消えるので、任意の下線を消すことが可能です。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

	Windows	Mac
Google Chrome	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Microsoft Edge	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Mozilla Firefox	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Safari(Mac)	‐	【Command＋Option＋R】

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]

2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザマナ発行年月：2022年03月24日予約締切日：2022年01月26日ページ数：344p サイズ：単行本 ISBN：9784815609405 Mana（MANA）日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

今すぐ使えるかんたん　WordPress　やさしい入門［6.x対応版］ [ 桑名

1,760円(税込)【送料込】

楽天ブックス

桑名由美はつみ技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバンクワナユミハツミ発行年月：2023年09月28日予約締切日：2023年06月02日ページ数：256p サイズ：単行本 ISBN：9784297136253 桑名由美（クワナユミ） 2023年8月、合同会社ワイズベスト

HTMLサイトをWordPressにする本 [ 久保田涼子 ]

2,640円(税込)【送料込】

楽天ブックス

久保田涼子西原礼奈ソシムエイチティーエムエルサイトヲワードプレスニスルホンクボタリョウコニシハラアヤナ発行年月：2023年08月29日予約締切日：2023年06月06日ページ数：360p サイズ：単行本 ISBN：9784802614214 久保田涼子（クボタリョウコ）「ワクワクするモノ・時間・場所を生み出す」をテ

ゼロから学ぶはじめてのWordPress [ 泰道ゆりか ]

1,980円(税込)【送料込】

楽天ブックス

泰道ゆりか SBクリエイティブゼロカラマナブハジメテノワードプレスタイドウユリカ発行年月：2022年10月12日予約締切日：2022年07月22日ページ数：352p サイズ：単行本 ISBN：9784815615222 泰道ゆりか（タイドウユリカ） Webデザイナー／株式会社CORELILY代表取締役。立教大学卒業後、銀行に就職。

たった1日で基本が身に付く！　WordPress 超入門［改訂2版］ [ 佐々

1,980円(税込)【送料込】

楽天ブックス

佐々木恵リブロワークス技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハンササキメグミリブロワークス発行年月：2022年04月14日予約締切日：2022年01月05日ページ数：192p サイズ：単行本 ISBN：9784297126957 佐々木恵（ササキメグミ） 2002年より独学でWe