見出し付きリストボックスの作り方とサンプルコード【Cocoon】

こんな感じの見出し付きのリストボックスを作る方法を紹介します。

見出しが付いたリストボックス
  • まずリストを作って
  • それを「htmlとして編集」
  • 前後にコードを追加して完成

リストに限らず文章や画像を入れるのもアリですね。ただ、思うような位置に表示されない場合もありますので、その際はpadding等で調整してみてください。

スポンサーリンク

ボックスのサンプルコード

まずはCSSでボックスのカスタマイズコード作成しておきます。事前に何パターンか作っておけば汎用性も上がります。

ボックスの中にリストを表示する場合は、③の”boxw3″を参考に”ul” や”li” も合わせて定義しておくと便利です。

見出し付きボックス①

ここに見出しここに内容が表示されます。リストや画像を挿入するのも良いですね。まずはコピペですが、自分なりにカスタマイズしていくとより良いものが出来ると思います。
/*見出し付きボックス①*/
.boxw {
  position: relative;
  margin: 2em 0;
  padding: 1em 1em;
  border: solid 3px #79ceed;
  border-radius: 8px;
}
.boxw .box-title {
  position: absolute;
  display: inline-block;
  top: -8px;
  left: 13px;
  padding: 0 7px;
  line-height: 1;
  font-size: 14px;
  background-color: #fff;
  color: #6f89a2;
  font-weight: bold;
}

見出し付きボックス②

ここに見出しシンプルなデザインですが、それなりに目に留まります。全体感を損なわずにアクセントを付けたい場合などに使えます。
/*見出し付きリスト2*/
.boxw2 {
  position: relative;
  margin: 0;
  padding: 2.5em 1em 1em 1em;
  border: solid 3px #f0f0e0;
  border-radius: 1.5px;
  max-width: 600px;
}
.boxw2 .box-title {
  position: absolute;
  display: inline-block;
  top: 8px;
  left:13px;
  line-height: 1.5;
  font-size: 14px;
  background-color: #fff;
  color: #808080;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
}

見出し付きボックス③

ここに見出し見出しに色が付くとアクセントも強まって、かなり目立つものになりますね。特に見てほしいポイントに使えば注目して貰えると思います。
.boxw3 {
  margin: 1em auto;
  background: #fef9ed;
  border-radius:4px;
  border: solid #fc9db8 1px;
  max-width:600px;
  padding: 3em 1em 0.5em;
  position:relative;
}
.boxw3 .box-title {
  background: #fc9db8;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  line-height: 2.5em;
  padding: 1px;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  font-family: 'Noto Sans JP', sans-serif;
}
.boxw3 ul {
  margin-top: 0;
}
.boxw3 ul li {
  background: #fef9ed;
  color: #333;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
}
.boxw3 li::before {
  color: #fc9db8;
}

見出し付きリストボックスの作り方

ボックスのコードが完成したら早速記事に追加してみましょう。

①リスト作成

まずはWordpressで普通にリストを作成。

<ul>
<li>まずリストを作って</li>
<li>それを「htmlとして編集」</li>
<li>前後にコードを追加して完成</li>
</ul>

②見出し用コードを追加

先程のリストを「htmlとして編集」モードにし、先頭に以下のコードを追加します。私はほぼスマホだけでカスタマイズしているのですが、コードを辞書登録しておくと簡単に呼び出せて便利ですよ。

<div class="boxw">
<span class="box-title">ここに見出し</span>

③最後尾に締めのコードを追加

このままだと最初の<div>が閉じられていない為、最後尾に</div>を追加します。

</div>

完成

ひとつに纏めると以下の様なコードになります。「ここに見出し」の部分は見出しとなる文章に変えてください。

<div class="boxw">
<span class="box-title">ここに見出し</span>

<ul>
<li>まずリストを作って</li>
<li>それを「htmlとして編集」</li>
<li>前後にコードを追加して完成</li>
</ul>

</div>

<div class=”boxw“> この赤文字の部分を “boxw2” “boxw3” などにすれば簡単にボックスを切り替えることができます。

リストもカスタマイズしておけば尚良いですし、周囲の文章とは違うフォントを使うことでより差別化を図ることができます。フォントを変えたい場合は以下の記事を参考にしてください。

Comment

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