記事のコーディングに関して

はじめに

原稿を元に文字装飾等を行っていきます。
記事が入っていない雛形をお渡しいたします。
そこへ原稿を流し込み、HTMLタグを使用して装飾等を行っていきます。

目次

見出しタグのHTML

見出しの入力例

<h2>見出しの入力例</h2>

 

①中見出しの入力例

<h3>①中見出しの入力例</h3>

 

(1)小見出しの入力例

<h4>(1)小見出しの入力例</h4>

文字装飾のタグのHTML

赤字:否定・禁止・ネガティブな強調

<span class="red b f12em">否定・禁止・ネガティブな強調</span>

 

水色:肯定

<span class="aqua b f12em">肯定</span>

 

緑色:例示・用語の強調

<span class="green b f12em">例示・用語の強調</span>

 

オレンジ:単純な強調

<span class="orange b f12em">単純な強調</span>

 

黒太字:単純な強調(弱)

<span class="b">単純な強調(弱)</span>

 

灰色

<span class="gray">灰色</span>

 

CHECK

<span class="bg_orange">CHECK</span>
原稿上では「CHECK▶︎」と表現されているところに使ってください。
「詳細:」「参考:」とかにも使います。

 

都市銀行
インターネット
銀行など地方銀行(地域制限あり)
その他の金融機関(地域制限あり)

<span style="color:#cfe2f3;">■</span>都市銀行
<span style="color:#ead1dc;">■</span>インターネット
<span style="color:#fce5cd;">■</span>銀行など地方銀行(地域制限あり)
<span style="color:#fff2cc;">■</span>その他の金融機関(地域制限あり)

他の色のコードはこちら



箇条書き

番号なし

  • 本人確認書類
  • 収入の証明書類
  • 勤務先の証明書類
<ul>
        <li>本人確認書類</li>
        <li>収入の証明書類</li>
        <li>勤務先の証明書類</li>
</ul>

番号あり

  1. 1番目の項目
  2. 2番目の項目
  3. 3番目の項目
<ol>
        <li>1番目の項目</li>
        <li>2番目の項目</li>
        <li>3番目の項目</li>
</ol>

囲み枠

コラム

コメント
コメント
コメント

▲AddquickTagの「囲み枠:コラム」を押すと出てきます

1分でチェック!このページの概要

コメント
コメント
コメント

▲AddquickTagの「囲み枠:一分でチェック」を押すと出てきます

ポイント
  • コメント
  • コメント
  • コメント

▲AddquickTagの「囲み枠:箇条書き・まとめ」を押すと出てきます。
原稿最後の「まとめ」のところなどに使います。

 

 

・1列め


・2列め


<div class="frame black1">
 <table class="table" style="margin-bottom: 0px !important; border:none;">
  <tr style="border:none;">
   <td style="border:none; width:50%; vertical-align:top;">
   1列め</td>
   <td style=" border:none; width:50%; vertical-align:top;">
   2列め</td>
  </tr>
 </table>
</div>

 

引用文

<blockquote>引用文</blockquote>

引用文について

原稿中に引用の指示がない場合があります。
どこかのコピペの文章っぽいところに使ってください。(公式HPの記載など)
Google検索エンジンにいい評価をもらうのに必要なやつです。


フローチャート(申し込みや審査など)

フローチャートタイトル

テキスト入力
テキスト入力
テキスト入力
<div class="flowbox">
<h4>フローチャートタイトル</h4>
    <div class="flowframe">テキスト入力</div>
    <div class="flowframe">テキスト入力</div>
    <div class="flowframe">テキスト入力</div>
</div>

表組のHTMLタグ

  • 必要な分だけ <tr>~</tr>を複製すると行が増やせます。
黄色1列 黄色2列
青1行
青2行
<table class="table data">
  <tr class="nt1">
    <td>
    緑</td>
    <th>
    黄色1列</th>
    <th>
    黄色2列</th>
  </tr>
  <tr>
    <th>
    青1行</th>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <th>
    青2行</th>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <th>
    </th>
    <td>
    </td>
    <td class="thn">
    灰</td>
  </tr>
  <tr>
    <th class="thr">
    赤</th>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <th class="thp">
    紫</th>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>

※classの色指定がわかりにくいと思うので軽く図解するとこんな感じです。

  • 基本的に<th>(見出し)は<中央寄せ・背景色有>、<td>は<左寄せ・白背景>です。
  • 応用:Dreamweaverをつかって5分で表の作る方法

  • 青1行
    青2行
    <table class="table data">
      <tr>
        <th style="width:50%;">
        青1行</th>
        <td>
        </td>
      </tr>
      <tr>
        <th>
        青2行</th>
        <td>
        </td>
      </tr>
      <tr>
        <th class="thr">
        赤</th>
        <td>
        </td>
      </tr>
    </table>
    
    黄1 黄2
    <table class="table data">
      <tr class="nt1">
        <th style="width:50%;">
        黄1</th>
        <th style="width:50%;">
        黄2</th>
      </tr>
      <tr>
        <td>
        -</td>
        <td>
        -</td>
      </tr>
      <tr>
        <td>
        -</td>
        <td>
        -</td>
      </tr>
    </table>
    
    見出し黄1
    ↑高 1
    2
    3
    4
    5
    ↓低 6
    <table class="table">
      <tr>
        <th style="background:#fce5cd; width:%;"><br></th>
        <th style="background:#fff2cc; width:%;">見出し黄1</th>
      </tr>
      <tr>
        <th style="background:#ead1dc; border:none;">↑高</th>
        <td>1</td>
      </tr>
      <tr>
        <td style="background:#e7d2e6; border:none;"><br></td>
        <td>2</td>
      </tr>
      <tr>
        <td style="background:#dfd3e4; border:none;"><br></td>
        <td>3</td>
      </tr>
      <tr>
        <td style="background:#dcd8e6; border:none;"><br></td>
        <td>4</td>
      </tr>
      <tr>
        <td style="background:#d5dcec; border:none;"><br></td>
        <td>5</td>
      </tr>
      <tr>
        <th style="background:#cfe2f3; border:none;">↓低</th>
        <td>6</td>
      </tr>
      </table>
    

    colspan/rowspan

    セルを結合するときに数値を入れて使うものです。詳しい原理はここ↓
    http://www.tagindex.com/html_tag/table/td_span.html

    提携してる会社のスペック表は、ボタン付きのショートコードに置き換える必要があります。
    wp投稿ページ上のタグボタンの中にあるので余裕があったら探してください。

    【スマホ用】テーブルスクロール

    スマートフォンの画面で見たときに、セル数が横に多いと、テーブルが崩れてしまいます。
    そんなときは

    長い 長い 長い 長い 長い 長い 長い 長い 長い 長い 長い 長い 長い
    <div class="scroll-table">
    <table class="table data">
      <tr>
        <th>
        長いテーブル</th>
        <td>
        がここにあるとします</td>
      </tr>
    </table>
    </div>
    

    こんな感じに「divタグ」で挟むと、スマホで見たときに限りテーブルがスクロールできるようになります

    CHECK【コーディング】スマホで横スクロール機能


    口コミ枠

    口コミ【可決】

    • 年代:◯◯
    • 職業:◯◯
    • 年収:◯◯万円

    コメントコメントコメントコメント

    ▲AddquickTagの「口コミ枠」を押すと出てきます

    口コミ【可決】

    • 年代:◯◯
    • 職業:◯◯
    • 年収:◯◯万円

    質問 質問
    質問 質問

    ▲AddquickTagの「口コミ枠(テーブル組)」を押すと出てきます

     

    口コミ枠については複雑なので
    ここに使いこなし方をまとめました

    文字位置(キャプション)

    キャプション

    表上のキャプション
       
    表下のキャプション
    <table class="table data"><caption class="top">表上のキャプション</caption>
      <tr>
        <th></th>
        <td></td>
      </tr><caption align="bottom">表下のキャプション</caption>
    </table>
    

     

    詳細表上のキャプション
       
    <table class="table data"><caption><span class="bg_orange">詳細</span>表上のキャプション</caption>
      <tr>
        <th></th>
        <td></td>
      </tr>
    </table>
    

     

    ★囲み枠上のキャプション

    <p class="caption">★囲み枠上のキャプション</p>
    <div class="frame black1"></div>
    昔多用してたコードですが、今は見出しつきフレームというのを導入したのでこっちを主流で使ってください。

     

    文字を寄せる

    中央寄せ

    <p style="text-align:center;">
    中央寄せ</p>
    

    右寄せ

    <p style="text-align:right;">
    右寄せ</p>
    

     

    上寄せ 下寄せ
    <table>
      <tr>
        <td style="vertical-align:top;">上寄せ</td>
        <td style="vertical-align:bottom;">下寄せ</td>
      </tr>
    </table>
    

    サイト内キャラクターの吹き出し(山本さん、佐藤さん、オペレーター)

    【管理人】山本
    ここに山本さんのセリフ
    「speech_bubble type="drop" subtype="R1" icon="yamamoto.png" name="【管理人】山本"]ここに山本さんのセリフ[/speech_bubble]
    審査が不安な 佐藤さん
    ここに佐藤さんのセリフ
    「speech_bubble type="drop" subtype="L1" icon="sato.png" name="審査が不安な 佐藤さん"]ここに佐藤さんのセリフ[/speech_bubble]
    オペレーターの回答
    ここにオペレーターのセリフ
    「speech_bubble type="drop" subtype="L1" icon="telapo.png" name="オペレーターの回答"]ここにオペレーターのセリフ[/speech_bubble]
    ※最初の“「”を半角に変えて使ってください。

    よく使われるカラーコード

    #e6b8af #f4cccc #fce5cd #fff2cc #d9ead3 #d0e0e3 #c9daf8 #cfe2f3 #d9d2e9 #ead1dc
    #dd7e6b #ea9999 #f9cb9c #ffe599 #b6d7a8 #a2c4c9 #a4c2f4 #9fc5e8 #b4a7d6 #d5a6bd
    #cc4125 #e06666 #f6b26b #ffd966 #93c47d #76a5af #6d9eeb #6fa8dc #8e7cc3 #c27ba0
    #a61c00 #cc0000 #e69138 #f1c232 #6aa84f #45818e #3c78d8 #3d85c6 #674ea7 #a64d79
    #444444 #fffbf7 #eef8ff #ffeffc

    テーブル枠の背景色を指定したいとき

    <td style="background:#ここにカラーコード;">---</td>
    

    テーブル枠の枠線を消したいとき

    <td style="border:none;">---</td>
    

    コメントアウト

    <!–この形–>で挟むと、中身の部分はブラウザ上無視されます。表記修正などに多用します。
    例:文字文字文字文字文字文字

    例:文字文字文字<!--★★★-->文字文字文字