はじめに
原稿を元に文字装飾等を行っていきます。
記事が入っていない雛形をお渡しいたします。
そこへ原稿を流し込み、HTMLタグを使用して装飾等を行っていきます。
目次
- 見出しタグのHTML
- 文字装飾のタグのHTML
- リンクタグのHTML
- 箇条書き
- 囲み枠
- フローチャート(申し込みや審査など)
- 表組の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>
「詳細:」「参考:」とかにも使います。
■都市銀行
■インターネット
■銀行など地方銀行(地域制限あり)
■その他の金融機関(地域制限あり)
<span style="color:#cfe2f3;">■</span>都市銀行 <span style="color:#ead1dc;">■</span>インターネット <span style="color:#fce5cd;">■</span>銀行など地方銀行(地域制限あり) <span style="color:#fff2cc;">■</span>その他の金融機関(地域制限あり)
他の色のコードはこちら
リンクタグのHTML
内部リンクの場合:サイト内の別ページのリンクを張る場合
<a href="https://www.y-cashing.com/リンクページ/">内部リンクの場合</a>
参考:内部リンクの探し場所
該当ページが無い(まだ出来てない)場合もあるのでその時はリンクタグをコメントアウトし、「未コーディング箇所」として報告する
外部リンクの場合:別タブで開きます。
<a href="//www.google.co.jp" target="_blank" rel="nofollow">外部リンクの場合</a>
ページ内リンクの場合:指定箇所にidをつけて飛ばします。
参考:h2のリンクid
ページ内リンクは手間が1つ増えるのでちょっと面倒ですが、
大見出し(h2)のidは、1から順に #i #i-2 #i-3 #i-4…と自動で名付けられるので、これを使うと便利です。
(ただ、h2の見出しタイトルに半角英数字が入った場合この順番が狂うので、
うまくいかなかったら目次からURLを拾い直したりするといいと思います)
ページ内リンクについて詳しい解説:http://www.tagindex.com/html_tag/link/a_id.html
箇条書き
番号なし
- 本人確認書類
- 収入の証明書類
- 勤務先の証明書類
<ul> <li>本人確認書類</li> <li>収入の証明書類</li> <li>勤務先の証明書類</li> </ul>
番号あり
- 1番目の項目
- 2番目の項目
- 3番目の項目
<ol> <li>1番目の項目</li> <li>2番目の項目</li> <li>3番目の項目</li> </ol>
囲み枠
コメント
コメント
コメント
▲AddquickTagの「囲み枠:コラム」を押すと出てきます
コメント
コメント
コメント
▲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の色指定がわかりにくいと思うので軽く図解するとこんな感じです。
青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>
コメントアウト
<!–この形–>で挟むと、中身の部分はブラウザ上無視されます。表記修正などに多用します。
例:文字文字文字文字文字文字
例:文字文字文字<!--★★★-->文字文字文字