最終的に下記の完成イメージになるように仕上げ(装飾)作業を行っていきます。
完成イメージ(お手本記事):
https://career-atoz.com/archives/2502
目次
【注意点】作業を始める前にご確認願います
ブロックエディターではなく旧エディターを使用してください
現在、WordPressではブロックエディターの使用がデフォルトになっていますが、本サイトにおける作業は全て「旧エディター」で行ってください。
修正内容が反映されない場合はキャッシュをクリアしてください
当サイトではWP Rocketというキャッシュで表示速度を上げるプラグインを使用しております。そのため、キャッシュが残っていて、スーパーリロードを行っても、修正前の画像や内容が表示されることがあります。
その場合は、「WP Rocket」⇒「Clear cashe」でキャッシュを消した上でスーパーリロードを行って下さい。 
各ブラウザでの強制リフレッシュ(スーパーリロード)の方法
https://www.support.allmovie.jp/blog/20210527115217/
見出しを設定する
「H2:~」「H3:~」について、それぞれ「見出し2」「見出し3」を設定する。
※ただし「H2:導入」には何も設定しない。
キャラクター吹き出しにショートコードを設定する
キャラクターの吹き出し一覧:
https://career-atoz.com/comment-2
<設定ルール>
①キャラクターのセリフに合った表情を選択する。
②同じ表情を連続して設定せずに、1つの記事でできるだけ様々な表情を配置するようにする。
③話し始めのキャラクタは左に配置して、返事をするキャラクターは右に配置する。
完成お手本:
https://career-atoz.com/archives/2461
スライダーの設置
[[smartslider3 slider=”●”]]
●は「SmartSlider」のIDを設定します。
表の設定
具体例:列が2つの場合
左側のセルを選択する
テーブル→セル→セルのプロパティを選択する
セルのプロパティ→セルの種類で「ヘッダーセル」を選択する。
OKをクリックする。
↓
一番左上のセルだけ選択して、幅を50%に設定する
↓
具体例:列が3つの場合
基本的には、「列が2つの場合」と同じ手順です。
表のヘッダー項目に対してヘッダーセルを設定します。
あとの違いは列の幅の%の設定値だけとなります。一番上の行のセルだけ、幅をパーセントで設定します。
%の値は一番左の列が改行なしで表示できる幅に設定して、残りの2列は半々に割り振ります。この表では、左から20%、40%に設定しました。
- 一番左の空白セル=20%
- 転職サイトのセル=40%
- 転職エージェントのセル=設定なし
表にタイトルがある場合は太字(STRONG)に設定する
箇条書きをリストに設定する
箇条書きの部分はリストに設定します。
連番に設定して不自然がない場合は連番(①、②、③…)に設定します。そうではない場合はただのリスト(・印)に設定します。
どちらのケースでも太字に設定します。
具体例:

ショートコードやタグで装飾する
商品の特徴やまとめにショートコードを設定する
[box class="point_box" title="●●●の特徴"] [/box]具体例:


見出し用ランキングラベルのタグを設定する
H2の見出しに設定する場合:
<span class=”label-2″>第1位</span>
H3の見出しに設定する場合:
<span class=”label-3″>第1位</span>
見出し用POINTラベルのタグを設定する
H2の見出しに設定する場合:
<span class=”label-2″>POINT1</span>
H3の見出しに設定する場合:
<span class=”label-3″>POINT1</span>
公式サイトを見てみるボタンのショートコードを設定する
当サイトの公式サイトのURLは全て「Pretty Links」で作成されているURLをご使用願います。もし「Pretty Links」に該当のURLがなければご連絡願います。
<具体例>リクナビNEXTの公式サイトのURL
OK:
https://career-atoz.com/prettylinks_rikunavinext_2
NG例:
https://next.rikunabi.com/rnc/docs/cp_s11011.jsp?pr_nm=123-lp01
上記のNG例のように、直接、公式サイトのURLを使用してはいけません。必ず「https://career-atoz.com/prettylinks_XXXXX」のURLを使ってください。
公式サイトを見てみるボタン:
<無料>という文字列を最後に追加してください。(「無料」が付けられない商品やサービスについてはその都度、ご相談願います。)
「公式サイトを見てみるボタン」にアニメーションを付けるために、下記のタグで囲みます。
解説:
- [btn class="lightning big maru"]~[/btn]はボタンを表示するショートコードです。
- <div id=”target-1″>~</div>はボタンにアニメーションを付加するタグです。idの「target-1」は同じ記事内で重複してはいけません。「target-2」、「target-3」、「target-4」…と数字をインクリメントしていき、重複しない連番に設定する必要があります。
- <無料>は黄色(<span style=”color: #ffff00;”><無料></span>)に設定してください。
具体例:
ボタンがアニメーションしない場合:
キャッシュが更新されていない可能性があるので、「WP Rocket→Clear cache」を選択して、キャッシュをクリアして、その後、スーパーリロードをしてください。
スーパーリロードの方法:
https://uzurea.net/cacheclear-and-superreload-2018/
「\特徴/」「\こんな人におすすめ/」の装飾
キャラクターのセリフの中に「\特徴/」「\こんな人におすすめ/」の内容を記載します。キャラクターの表情は同じ記事内で重複しないように配置します。
リクナビNEXT:

えーかおキャリア:

見出し画像の設定
<h2>見出し用の画像を設定していきます。
文章で重要な箇所に黄色のマーカーを引いたり太字にしたりする
商品(orサービス)の解説文章に黄色のマーカーを引く
商品(orサービス)の解説文章の中で重要な箇所に黄色のマーカーを引いてください。
具体例(リクナビNEXT):
HTMLチェッカー
最後に「HTMLチェッカー」でチェックして、文法エラーをゼロにしてください。
参考サイト:
https://miya-system-works.com/blog/detail/80
一見、文法的に正しいのに文法エラーだと判定されることがあります。その場合は下記の対策方法を試してみてください。
- お手本の記事(既存の記事)のテキスト(HTML)を徹底的に真似して修正してみる。
- 文章やタグの前後に余分に改行を入れてみる。
- タグの改行の位置を変更してみる。
上記の対策で解決できるケースがほとんどです。既存の記事はHTMLチェッカーで正常だと判定されているはずなので、同じようにすればエラーは解決されるはずです。