Wordpress投稿用

目次

デザイン例

目次ここからです 記事の目次

  1. 印刷方式を選ぶ際の3つのチェックポイント
  2. オフセット印刷を選ぶ基準
  3. オンデマンド印刷を選ぶ基準
  4. オフセット印刷・オンデマンド印刷とは？
  5. まとめ

HTMLコード

<div class="topics topics-agenda">
<p class="topics-agenda__title"><img src="http://niigatainsatsu.co.jp/wp-content/uploads/2022/03/topics_mokuji_icon.svg" alt="目次ここからです" width="56" height="" class="aligncenter size-full wp-image-1068"> 記事の目次</p>
<ol class="topics-agenda__list">
    <li class="topics-agenda__list-box">
        <a href="#1">印刷方式を選ぶ際の3つのチェックポイント</a>
        <ul>
            <a href="#"><li><span class="topics-agenda__list-box--num">その1</span>部数が1000枚以上  or  1000枚未満</li></a>
            <a href="#"><li><span class="topics-agenda__list-box--num">その2</span>仕上がりを重視する  or  納期を重視する</li></a>
            <a href="#"><li><span class="topics-agenda__list-box--num">その3</span>印刷内容は全て同じ  or  一部異なる</li></a>
        </ul>
    </li>
    <li class="topics-agenda__list-box"><a href="#2">オフセット印刷を選ぶ基準</a></li>
    <li class="topics-agenda__list-box"><a href="#3">オンデマンド印刷を選ぶ基準</a></li>
    <li class="topics-agenda__list-box"><a href="#4">オフセット印刷・オンデマンド印刷とは？</a></li>
    <li class="topics-agenda__list-box"><a href="#5">まとめ</a></li>
</ol>
</div>

タイトル

タイトルデザイン1

デザイン例

印刷方式を選ぶ際の3つのチェックポイント

HTMLコード

<div class="topics topics-title">
    <h2 class="topics-title__h2">印刷方式を選ぶ際の3つのチェックポイント</h2>
</div>

タイトルデザイン2

デザイン例

印刷方式を選ぶ際の3つのチェックポイント

HTMLコード

<div class="topics topics-title">
    <h3 class="topics-title__h3">印刷方式を選ぶ際の3つのチェックポイント</h3>
</div>

タイトルデザイン3

デザイン例

印刷方式を選ぶ際の3つのチェックポイント

HTMLコード

<div class="topics topics-title">
    <h4 class="topics-title__h4">印刷方式を選ぶ際の3つのチェックポイント</h4>
</div>

テーブル

2列

デザイン例
タイトル タイトル
表のタイトルが入ります 説明文が入ります
表のタイトルが入ります 説明文が入ります

HTMLコード

<div class="topics topics-table">
    <table class="topics-table__table01">
        <thead>
            <tr>
                <th class="topics-table__table01-th">タイトル</th>
                <th class="topics-table__table01-th">タイトル</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="topics-table__table01-th">表のタイトルが入ります</th>
                <td class="topics-table__table01-td">説明文が入ります</td>
            </tr>
            <tr>
                <th class="topics-table__table01-th">表のタイトルが入ります</th>
                <td class="topics-table__table01-td">説明文が入ります</td>
            </tr>
        </tbody>
    </table>
</div>

3列

デザイン例
タイトル タイトル タイトル
表のタイトルが入ります 説明文が入ります 説明文が入ります
表のタイトルが入ります 説明文が入ります 説明文が入ります

HTMLコード

<div class="topics topics-table">
    <table class="topics-table__table02">
        <thead>
            <tr>
                <th class="topics-table__table02-th">タイトル</th>
                <th class="topics-table__table02-th">タイトル</th>
                <th class="topics-table__table02-th">タイトル</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="topics-table__table02-th">表のタイトルが入ります</th>
                <td class="topics-table__table02-td">説明文が入ります</td>
                <td class="topics-table__table02-td">説明文が入ります</td>
            </tr>
            <tr>
                <th class="topics-table__table02-th">表のタイトルが入ります</th>
                <td class="topics-table__table02-td">説明文が入ります</td>
                <td class="topics-table__table02-td">説明文が入ります</td>
            </tr>
        </tbody>
    </table>
</div>

テキスト装飾

段落

デザイン例

段落テキスト段落テキスト段落テキスト

使い方

『ここにテキストを入力』と書かれている部分にテキストを入力してください

<p>～</p>を複製することによって段落を増やすことができます

<br>を任意の場所に入力すると改行を行えます

HTMLコード

<div class="topics topics-text">
    <p>ここにテキストを入力</p>
</div>

アンダーライン1

デザイン例

アンダーライン1

使い方

段落内のアンダーラインをつけたい部分を下記のHTMLタグで囲むことによってアンダーラインが適用されます

HTMLコード

<span class="topics-text__under--blue">ここにテキストを入力</span>

アンダーライン2

デザイン例

アンダーライン2

使い方

段落内のアンダーラインをつけたい部分を下記のHTMLタグで囲むことによってアンダーラインが適用されます

HTMLコード

<span class="topics-text__under--yellow">ここにテキストを入力</span>

リスト表示

数字付きリスト

デザイン例
  1. タイトル

    2. 説明テキスト説明テキスト説明テキスト

  2. タイトル

    3. 説明テキスト説明テキスト説明テキスト

  3. タイトル

    4. 説明テキスト説明テキスト説明テキスト

使い方

4・5・6...と数字を増やしたいときは以下をセットでコピーしてご使用ください

<li class="topics-list__list01-text">タイトル</li>
<p>説明テキスト説明テキスト説明テキスト</p>

数字は自動的に付与されます

HTMLコード

<div class="topics topics-list">
    <ol class="topics-list__list01">
        <li class="topics-list__list01-text">タイトル</li>
        <p>説明テキスト説明テキスト説明テキスト</p>
        <li class="topics-list__list01-text">タイトル</li>
        <p>説明テキスト説明テキスト説明テキスト</p>
        <li class="topics-list__list01-text">タイトル</li>
        <p>説明テキスト説明テキスト説明テキスト</p>
    </ol>
</div>

Q&A形式

デザイン例
質問文がはいります
質問の答えがはいります
質問文がはいります
質問の答えがはいります

使い方

Q&Aを増やしたいときは以下をセットでコピーしてご使用ください

<dt>質問文がはいります</dt>
<dd>質問の答えがはいります</dd>

HTMLコード

<div class="topics topics-list">
    <dl class="topics-list__list02">
        <dt>質問文がはいります</dt>
        <dd>質問の答えがはいります</dd>
        <dt>質問文がはいります</dt>
        <dd>質問の答えがはいります</dd>
    </dl>
</div>