編集画面などで使えるあれこれをまとめました。
主に初心者向けの内容になっています。
SNS用のカスタムフィールド
SNSでは＠〜〜〜のような書き方をするときがあるため、リンクを全て書かなくてもいいように実装をしています。
a-blog cmsではacms-admin-form-sideというclass属性が既にあるためそちらを使用しています。
<div class="acms-admin-form-action acms-admin-form-width-medium">
<span class="acms-admin-form-side">@</span>
<input type="text" name="sns_twitter" value="{sns_twitter}" id="input-text-sns_twitter" class="acms-admin-form-width-medium"/>
</div><h3 class="acms-admin-admin-title2">SNS設定</h3>
<table class="acms-admin-table-admin-edit">
<tr>
<th><label for="input-text-sns_instagram">Instagram</label><i class="acms-admin-icon-tooltip js-acms-tooltip-hover" data-acms-tooltip="例）ablogcms"></i></th>
<td>
<div class="acms-admin-form-action acms-admin-form-width-medium">
<span class="acms-admin-form-side">@</span>
<input type="text" name="sns_instagram" value="" id="input-text-sns_instagram" class="acms-admin-form-width-medium"/>
</div>
<input type="hidden" name="field[]" value="sns_instagram" />
</td>
</tr>
<tr>
<th><label for="input-text-sns_twitter">Twitter</label><i class="acms-admin-icon-tooltip js-acms-tooltip-hover" data-acms-tooltip="例）ablogcms"></i></th>
<td>
<div class="acms-admin-form-action acms-admin-form-width-medium">
<span class="acms-admin-form-side">@</span>
<input type="text" name="sns_twitter" value="" id="input-text-sns_twitter" class="acms-admin-form-width-medium"/>
</div>
<input type="hidden" name="field[]" value="sns_twitter" />
</td>
</tr>
<tr>
<th><label for="input-text-sns_facebook">Facebook</label><i class="acms-admin-icon-tooltip js-acms-tooltip-hover" data-acms-tooltip="例）ablogcms"></i></th>
<td>
<div class="acms-admin-form-action acms-admin-form-width-medium">
<span class="acms-admin-form-side">@</span>
<input type="text" name="sns_facebook" value="" id="input-text-sns_facebook" class="acms-admin-form-width-medium"/>
</div>
<input type="hidden" name="field[]" value="sns_facebook" />
</td>
</tr>
</table>
ユニットの追加ボタンが遠い...
ユニットの追加ボタンは一番下にあり、ユニットが非常に多いエントリーになると下まで遡ったり途中で見出し追加したいんだけど...！
という場合にめんどくさいなという場合があります。
そういう時はユニットの上のグレー部分をダブルクリック
するとこんな感じにクリックしたユニットの下に追加ボタンが移動してきます。
意外とこれが便利で助かっています。
ユニットが全部開いていると見にくい
ユニットが多い時やがっつりカスタムユニットで組まれたエントリーだと新しいものの追加や順番を入れ替えたいなという時に億劫な時があります。
左の番号でも変更ができますが、何個目だっけ....？とよくなるので私はあまり使用していません。
ユニットの右上三角が2つ並んでいるアイコンにマウスを合わせると「このユニットのコンテンツ部分を閉じる」と表示されます。
こちらをクリックするとそのユニットが閉じるようになっています。
このアイコンをクリックするときにShiftを押しながらクリックをすると
このように一度に全てのユニットを閉じることができます。
開くときも同様でクリックでそのユニットが、Shift+クリックで全てのユニットが開くようになっています。
カスタムフィールドをアコーディオンでまとめる
案件によってはカスタムフィールドがすごく多くなってしまうことや、カスタムフィールドグループを使用することによってユニットまでが遠くなってしまう場合があります。
標準で「詳細設定」や「SEO設定」がアコーディオンになっているようにカスタムフィールドも同じようにアコーディオンにすることができます。
<div class="acms-admin-accordion"> <h3 class="acms-admin-accordion-title"> <a href="#ここにIDが入ります" class="js-fader acms-admin-accordion-title-link">設定<span class="acms-admin-icon-arrow-small-down"></span></a> </h3> <div id="ここにIDが入ります" class="acms-admin-accordion-inner"> ここにアコーディオン内に入れたい内容を記述します（table） </div> </div>
1つ懸念としてアコーディオンにするとクライアントさんが気付きにくい場合があるためあらかじめ説明をしておく or マニュアルなどで補足をするなど注意が必要です。
終わりに
なかなか気付きにくいことかなという部分などを数点まとめて見ました。
またこれは書いておいた方がいいなという部分があれば追記しておきたいと思います。