【Cocoon】HTMLの定義リスト『dl dt dd』を矢印表示する方法（コピペ可）

Cocoon

2019.12.262020.01.10

「Cocoon」でそのまま定義リストの「dl dt dd」を使用した場合、なんの装飾も無いままなので何か装飾を付けたいなと思いました。調べてみても、矢印を画像で作っておいて貼り付ける方法しか出てこなかったので、どうにかCSSで工夫して作れないかなと思い試行錯誤。色んなサイトを調べた結果なんとか形になったので、まとめておきます。

CSSで工夫して矢印をつけよう。
1. 完成品はこんな見た目。
2. CSSにコピペでオッケー。
注意点

CSSで工夫して矢印をつけよう。

完成品はこんな見た目。

←に矢印表示: こちらに説明文
ここには説明したい単語: こちらに説明文
ここには１０文字まで: こちらに説明文
１１文字を超えるとずれてしまう: こちらに説明文

上のHTMLの打ち方は以下↓

<dl>   
<dt>←に矢印表示</dt>
<dd>こちらに説明文</dd>
<dt>ここには説明したい単語</dt>
<dd>こちらに説明文</dd>
<dt>ここには１０文字まで</dt>
<dd>こちらに説明文</dd>
<dt>１１文字を超えるとずれてしまう</dt>
<dd>こちらに説明文</dd>
</dl>

<dl></dl>の間に<dt></dt><dd></dd>を入れていけば作ることができる。

打ち込む場所は『カスタムHTML』だ。

⊕を押して、『一般ブロック』の下にある『フォーマット』→『カスタムHTML』を選択すれば使用できるようになる。

CSSにコピペでオッケー。

CSSのコピーの仕方

ステップ1
「外観」→「テーマエディター」

ダッシュボードの左の中にあるので探す。
ステップ2
「スタイルシート（style.css）」を選択

編集するテーマが「Cocoon Child」になっているか要確認。追加する前にスタイルシートのバックアップ（内容をコピーしてメモ帳（TeraPad）に貼り付ける）をとっておくといい。
ステップ3
「子テーマ用のスタイルを書く」のところに貼り付け

「必要ならばここにコードを書く」のところに、 ctrl＋Cでコピーしたものをctrl＋Vで貼り付ける
ステップ4
「ファイルを更新」を押せば終了

エラーが出なければそこで終わり。ちょいちょいエラーが出るのでそのときは入れ直すなどすると大丈夫。

以下をそのままコピーして貼り付けると良い。

/*定義リストの矢印表示*/
dt { 
	float: left;
	clear: left;
    position: relative;
    padding:10px 15px 10px 40px;
	text-align: left;
}
dd {
    padding:10px 15px 10px 11em;
    margin:0;
	border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #DDDDDD;
	text-align: left;
}
dt::before {
     position: absolute;
     content: '';
     width: 0;
     height: 0;
     border: solid 6px transparent;
     border-left: solid 8px #697b91;
     top: 50%;
     left: 20px;
     margin-top: -0.5em;
}