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

見出し付きボックス・見出し付きリストボックスのサンプルと作り方を紹介します。

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

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

スポンサーリンク

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

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

サンプルコードにある「ul」「ol」「li」用のコードは無くても大丈夫ですが、ボックスとその中身(リストや段落)との位置調整用ですので、必要に応じて値を変えるか削除してください。

ベーシックな見出し付きボックス

ここに見出し

ここに内容が表示されます。リストや画像を挿入するのも良いですね。まずはコピペですが、自分なりにカスタマイズしていくとより良いものが出来ると思います。

/*見出し付きボックス1*/
.boxw {
  position: relative;
  margin: 10px 0px;
  border: solid 2px #fc9db8;
  padding: 15px 5px 10px 10px;
}
.boxw .box-title {
  position: absolute;
  display: inline-block;
  top: -8px;
  left: 13px;
  line-height: 1;
  font-size: 15px;
  background-color: #fff;
  color: #6f89a2;
  font-weight: bold;
}

※boxwのpaddingで中の要素との位置関係を調整します

アイコン&見出し付きボックス

ここに見出し

シンプルなデザインですが、それなりに目に留まります。全体感を損なわずにアクセントを付けたい場合などに使えます。

/*見出し付きリスト2*/
.boxw2 {
  position: relative;
  margin: 1em auto;
  padding: 35px 5px 10px 11px;
  background: #ffe5ee;
  border-radius: 1.5px;
  max-width: 600px;
}
.boxw2 .box-title {
  position: absolute;
  display: inline-block;
  top: 0.6em;
  left:2.2em;
  line-height: 1.5;
  color: #444;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11pt;
}
.boxw2 .box-title ::before {
  font-family: FontAwesome;
  position: absolute;
  content: "\F27a";
  color: #696969;
  font-weight: bold;
  left : -1.3em;
}
.boxw2 li {
  background: transparent;
}

タイトルが目立つ見出し付きボックス

ここに見出し見出しに色が付くとアクセントも強まってかなり目立つものになりますね。特に見てほしい重要なポイントなど
 /*見出し付きリスト3*/
.boxw3 {
  margin: 1em auto;
  background: #fef9ed;
  border-radius:4px;
  border: solid #fc9db8 1px;
  max-width:600px;
  padding: 40px 5px 10px 10px;
  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 li {
  background: #fef9ed;
  color: #333;
  font-size: 15px;
  font-family: 'Noto Sans JP', sans-serif;
}
.boxw3 li::before {
  color: #fc9db8;
}

スマートな見出し×2個付きボックス

クリア条件
  • ウィルス×45 (赤・水色・緑)
  • コイン×20
ドクター・サポート
  • ドクターワリオ
  • キラー・マグナムキラー

いつもは人の真似から入るのですが、「こういうのを作りたい!」と思い頑張って作ってみました。

CSS
/*見出し付きリスト4*/
.boxm {
  position: relative;
  margin: 0.5em auto;
  padding: 1.8em auto;
  max-width: 600px;
  border: 10px #f2f2f2 solid;
}
.boxm .box-title {
  position: relative;
  display: inline-block;
  background: #f2f2f2;
  color: #5f5f5f;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9pt;
  font-weight: bold;
  border-radius: 20px;
  padding: 2px 1em;
  margin: 0.5em;
}
.boxm ul {
  background: transparent;
  font-size: 9pt;
  margin-left: 1em;
}
HTML
<div class="boxm">
<span class="box-title">見出し①</span>
<ul><li>リスト①</li>
<li>リスト②</li></ul>
<span class="box-title">見出し②</span>
<ul><li>リスト③</li>
<li>リスト④</li></ul></div>

※リスト自体もカスタマイズしてあるので、完成イメージは少し異なります

左右の余白も背景色で塗りつぶし

ここに見出し

例えば背景色を黒にして左右の余白も無くすとガラッと雰囲気も変わってかなり目立ちます。

/*見出し付きリスト5*/
.boxw5 {
  margin: 10px -13.5px;
  background: #000;
  position:relative;
  padding : 5em 0.5em 1em 1em;
}
.boxw5 .box-title {
  background: #000;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  margin-top: -3em;
  position: absolute;
  font-family: 'Noto Sans JP', sans-serif;
}
.boxw5 p {
  background: #000;
  color: #fff;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
}

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

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

①リストを作成する

まずはWordpressの投稿ページで普通にリストを作成します。

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

②リストの前に見出し用コードを追加

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

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

③リストの後に締めのコードを追加

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

</div>

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

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

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

</div>

完成イメージ

リストを入れたり
  • リスト作成
  • html編集
  • コード追加
数字リストを入れたり
  1. リスト作成
  2. html編集
  3. コード追加
文章を入れたり

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

リストを入れたり
  • リスト作成
  • html編集
  • コード追加
画像を入れてはみたけど
結局リストを入れたり
  • リスト作成
  • html編集
  • コード追加

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

皆さんもお世話になってると思うぽんひろさんのサイトで勉強してカスタマイズして備忘録的な意味で記事を作成したのですが、改めて見ると丸パクリ感が強めなので、是非プロのサイトをご覧ください(汗)

こちらはサンプルがメインではなく「コピペカスタマイズを脱却し、コードの意味を理解してオリジナルカスタマイズを目指す」を目的としています。※人にはそう言っといてよくコピペしてます

Comment

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