こんにちはtaka(@taka26817539)です！
皆さんはWordpress無料テーマCocoonを使っていますか？
Cocoonは非常に使いやすいですよね！
無料でハイクオリティーなCocoonは最強ですね！
Cocoonで記事を書くときに使用する「ボックス」と「リスト」を組み合わせると
こんな風になってしまうことはありませんか？
本記事では「ボックス」の中に「リスト」を組み込んで
このようにする方法を紹介します！
なぜリストがボックスの外側になってしまうのか
なぜ「リスト」が「ボックス」の外側になってしまっているのかは、ビジュアル編集では原因がわからないのでHTML編集で確認してみましょう。
「HTMLが全然わからないよ〜」という方は読み飛ばしてもらって構いません！
HTML編集で確認するとこのようになっています。
- <ul>タグ：順序の無い「リスト」を作るときに使用する。
- <li> タグ：「リスト」の各項目を作るときに利用する。
- class : タグに名前をつける。
本記事の場合、「class=”blank-box”」と名前をつけた部分に「ボックス」が挿入されます。
つまり、「リスト」の項目の1つが「ボックス」になっているため、「リスト」が「ボックス」の外側になってしまっています。
「ボックス」の中に「リスト」を組み込むためには<li>タグではなく、<ul>タグの方にclassで名前をつけてあげれば良いのです。
それでは実際にやってみましょう！
リストをボックスの中に組み込む方法
さて、ここから行なっていく作業は<li>タグではなく、<ul>タグの方にclassで名前をつけるという作業です。
HTML編集に移動
クラシックエディタの詳細設定から[HTML編集]をクリックしたら完了です。
コードのコピー＆削除
このように表示されると思いますので、「class=”blank-box”」をコピーしましょう。
「class=”blank-box”」をコピーしたら削除しておきましょう。
コードの貼り付け
赤枠の部分に貼り付けましょう。
ビジュアル編集で確認
クラシックエディタの詳細設定から[ビジュアル編集]をクリックしましょう。
このようになっていれば完成です！
まとめ
本記事では「「ボックス」の中に「リスト」を組み込む方法」について書きました。
見やすいブログにできましたね！
一手間で見た目を整えることができますのでやってみてください！
コメント