比較表はボタンアニメーションの種類を区別するためにAパターンとBパターンの2種類に別れますが、中身は同じです。（同じものを2つ作る理由は同一記事に同一のテンプレートを配置した場合、ボタンのアニメーションが動作しないことを回避するためです。）
目次
【最初にご注意】公式サイトのURLは「Pretty Links」のURLを使用してください
当サイトの公式サイトの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を使ってください。
比較表(Aパターン)を作成する手順
比較表サンプル-Aをコピーして作成します。
「テンプレート→比較表サンプル-A→新規テンプレートにコピー」をクリックします。
「比較表サンプル-A」が開きます。
新しく作成する比較表を確認しながら、「比較表サンプル-A」を改造していきます。
新しく作成する比較表：
「比較表サンプル-A」のセルの値を新しい値に書き換えてください。もし表の列や行が足りない場合は表を操作して「追加」してください。（反対に表の列や行が余る場合は「削除」してください。）
ランキングラベル、リンク先のタグを整えます。
赤線：アニメーションタグ
「target-A1」「target-A2」「target-A3」・・・と他と重複しないように最後の数値をインクリメントしながら、idを設定します。
青線：リンクタグ
アニメーションタグの直後に設定します。
緑線：ランキングラベル
リンクタグの直後に設定します。
テンプレートのタイトルを設定します。編集画面のURLの「post=9999」の9999の数字をタイトルの先頭に【】付きにした文字列を追加します。例では「【2808】転職サイト人気比較-A」となります。
表のサイズを調整します。
ショートコードとして挿入を「はい」に設定します。
比較表(Aパターン)の動作確認
下書きとして保存する。
[[template id=”2808″]]
プレビューボタンをクリックして、比較表が正常に動作していることを確認します。
＜確認ポイント＞
- アイコン画像が全てアニメーションしているか？
- ランキングラベルをクリックしたら、別ウィンドウで公式サイトが表示されるか？
- 商品(転職サイトの)画像をクリックしたら、別ウィンドウで公式サイトが表示されるか？
比較表(Bパターン)を作成する手順
比較表(Bパターン)は完成した比較表(Aパターン)を元に作成します。
テンプレート→「新規追加」をクリックします。
比較表(Aパターン)の【2808】転職サイト人気比較-Aの「編集」をクリックします。
【2808】転職サイト人気比較-Aの「テキスト」を選択して、文字列を全てコピーします。
先程の新規作成したテンプレートにコピーした文字列を貼り付けます。
- URLの「post=2845」の値をタイトルの先頭に【2845】として設定します。
- <div id=”target-A1″>の値の「A」を「B」に変換します。（全箇所）
- ショートコードとして挿入するを「はい」に設定します。
最後に、「更新」ボタンをクリックして、保存します。
比較表(Bパターン)の動作確認
既存の「テンプレート動作確認」の記事に、「[template id=”2845″]」を追加します。更新ボタンをクリックして保存します。
「変更をプレビュー」をクリックします。
比較表(パターンA)と比較表(パターンB)の全てのアイコン画像がアニメーションしていることを確認します。