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

スポンサーリンク

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

スポンサーリンク

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

完成品はこんな見た目。

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

上のHTMLの打ち方は以下↓

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

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

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

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

CSSにコピペでオッケー。

CSSのコピーの仕方
  • ステップ1
    「外観」→「テーマエディター」

    ダッシュボードの左の中にあるので探す。

  • ステップ2
    「スタイルシート(style.css)」を選択

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

  • ステップ3
    「子テーマ用のスタイルを書く」のところに貼り付け

    「必要ならばここにコードを書く」のところに、 ctrlCでコピーしたものをctrlVで貼り付ける

  • ステップ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;
}
スポンサーリンク

注意点

このままでは、説明したい単語の文字数が10文字を超えてしまうと見た目が崩れてしまう。そのときはdd{}の中にある『11em』のところの数字を増やすか、その部分を『30%』ぐらいに変更すると大丈夫だ。

コメント

タイトルとURLをコピーしました