一覧から詳細画面へ遷移するリンクが見づらいと思ったことはありませんか？
リンクをボタン化することで、ユーザーにとって直感的にわかりやすくなり、操作性（ユーザビリティ）の向上につながります。
本記事では、一覧機能の“裏ワザ”第七弾として、一覧の詳細画面リンクをボタン風にカスタマイズする方法をご紹介します。
※本手順では、jQuery と CSSを使用します。実装前には必ずバックアップをとるようにしてください。
反映イメージ
上記例では、詳細リンクをボタンに変えて表示しています。
以下では、デフォルトの一覧機能でリンクをボタン化する方法を説明します。
作業手順
1. リンク専用フィールドを追加する
DBにリンク専用のフィールドを追加します。
フィールド名は「一覧リンク」、差し替えキーワードを「link」とし、デフォルト値に「編集」や「更新」といった文字列を設定しておきます。
2. 一覧設定でリンクを追加する
一覧設定で「一覧リンク」を追加し、単票ページへのリンクを指定します。
項目名は「NULL」にしておくと表示がすっきりします。
3. 一覧のCSSをリセットする
後から独自のCSSを当てやすくするため、一覧リンク列のデフォルトCSSを一度リセットします。
背景色を白（#ffffff）、ボーダーを灰色（#999999）に設定しましょう。
一覧リンクの配置位置（左・中央・右）によってボーダー位置を調整します。
4. jQueryでクラスを付与する
検証ツールで、一覧リンクが属するクラスを確認します。
例：smp-cell-col-5 のように、自動生成されるクラス名を取得します。
そのクラスに対して jQuery で「編集」など特定の文字列を判定し、ボタン用のクラスを追加します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
<?php //ボタン色の設定 ?>
$('td.smp-cell-col-5 a').filter(function() {
return $(this).text().trim() === '編集';
}).addClass('list_button button_bgclor_01 list_button_w_104');
})
</script>
5. ボタン用CSSを作成する
<style>
/* button_bgclor_01 */
.button_bgclor_01 {
background: #46aace;
}
.button_bgclor_01:hover {
background:#7abcd4bd;
}
/* button_bgclor_02 */
.button_bgclor_02 {
background: #F29300;
}
.button_bgclor_02:hover {
background: #ffb546;
}
/* button_bgclor_03 */
.button_bgclor_03 {
background:#64b5f7;
}
.button_bgclor_03:hover {
background:#83c5fb;
}
/* button_bgclor_04 */
.button_bgclor_04 {
background:#0f2b5c;
}
.button_bgclor_04:hover {
background:#456296;
}
/* button_bgclor_05 */
.button_bgclor_05 {
background:#cf5a4a;
}
.button_bgclor_05:hover {
background:#e47e70;
}
.list_button_w_104 {
width: 104px;
}
.list_button {
display: block;
min-width: 80px;
max-width: 200px;
color: #ffffff;
letter-spacing: 2px;
padding: 6px 0;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
white-space: pre;
font-size: clamp(12px, 1vw, 16px);
}
.list_button:hover {
border-radius: 30px;
color: #ffffff;
text-decoration: none;
}
</style>
作成したCSSをHTMLファイルに追加すれば完了です。
一覧画面を開き、ボタンが正しく表示されているか確認してください。
まとめ
おわりに
ボタンに表示する文字列を変えることで、色や動作を連動させることも可能です。
例えば「登録」の場合はオレンジにしたり、リンクを非表示にする時は値を消したりなど、柔軟なカスタマイズができます。
一工夫すればさらに多彩な見せ方が可能です。ぜひ試してみてください。
【お知らせ】本実装の構築代行・カスタマイズを承ります
記事で紹介した内容や、貴社の要件に合わせた柔軟なカスタマイズを承っております。
SPIRAL専門チームが要件定義から実装まで一貫してサポートいたしますので、まずはお見積もりをご依頼ください。
