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

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

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

文章や画像を入れる事も可能です。シンプルなデザインの方が誇張が少なくて見やすいと思います。

スポンサーリンク

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

まずは何パターンかデザインを作成しておきます。追加CSSか子テーマのスタイルシートにコードを追加します。

コード内にある「ul」「ol」「li」などは無くても良いのですが、何かの役に立つかと思って載せました。必要に応じて削除か修正してみてください。

見出し付きボックス①

ここに見出しここに内容が表示されます。リストや画像を挿入するのも良いですね。まずはコピペですが、自分なりにカスタマイズしていくとより良いものが出来ると思います。
/*見出し付きボックス①*/
.boxw {
  position: relative;
  margin: 2em 0;
  padding: 1em 1em;
  border: solid 2px #79ceed;
  border-radius: 0px;
}
.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;
}
.boxw ul {
   margin-top: 0;
   padding-top: 0;
   padding-bottom: 0;
   margin-bottom: 0;
 }

※border-radius の値を変えると枠線の角を丸くできます

見出し付きボックス②

ここに見出しシンプルなデザインですが、それなりに目に留まります。全体感を損なわずにアクセントを付けたい場合などに使えます。 ※その後も色々カスタマイズを重ねているので、仕上がりイメージは若干異なります
/*見出し付きリスト2*/
.boxw2 {
   position: relative;
   margin: 0;
   padding: 2.1em 1em 1em 1em;
   border: solid 3px #f0f0e0;
   background: #f0f0e0;
   border-radius: 1.5px;
   max-width: 600px;
 }
.boxw2 .box-title {
   position: absolute;
   display: inline-block;
   top: 6px;
   left:10px;
   line-height: 1.5;
   font-size: 14px;
   background-color: #f0f0e0;
   color: #f546e7;
   font-weight: bold;
   font-family: 'Noto Sans JP', sans-serif;
 }
.boxw2 ol {
   margin-top: 16;
 }
.boxw2 ul {
   margin: 0 0 5px 5px;
 }
.boxw2 ul li {
   background: transparent;
 }

見出し付きボックス③

ここに見出し見出しに色が付くとアクセントも強まってかなり目立つものになりますね。特に見てほしい重要なポイントなど
.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>が閉じられていない為、今開いているhtmlモードの最後尾に</div>を追加します。

</div>

完成

ここに見出し
  • リスト作成
  • html編集
  • コード追加

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

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

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

</div>

ボックスのデザインを何パターンか作成しておけば、<div class=”boxw“> この赤文字の部分を変更するだけで簡単にボックスのデザインを切り替えることができます。

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

Comment

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