カレント表示（リンクテキスト）
現在表示しているページと同じURLのリンクにアクセントが付きます。
| 追加可能パーツ | 変更可能箇所 | 同一ページに複数設置 | ページ複製・クリップボード 使用可否 |
|---|---|---|---|
※リンク追加のみ |
|
〇 | 〇 ※サイドバーの中身を持っていく形です。 |
| ※留意事項 | |||
|---|---|---|---|
| ※サイドバーは834px以下で縦並びになります。 ◆操作について
|
デモ
左サイドバー内のリストの挙動をご参照ください。
現在開いているページと同じURLのリンクテキストに、
アクセント（デフォルト：オレンジの背景色に白文字カラー）が付きます。
構造図・編集方法
リッチテキストパーツ使用の場合の編集方法になります。
設定方法
-
CSSをカスタムCSSに記述。
-
編集画面用CSSを適切な位置に記述。
- JavaScriptを共通フッターに配置。
-
クラス名を見本とあわせる。
- 共通パーツを新規作成し、リッチテキストパーツを配置。
or
共通サイドバー等でリンクリストパーツを配置。
※リッチテキストパーツは操作性が非常に悪いので、共通パーツで作成する必要がなさそうな場合はリンクリストを推奨します。 - 上記パーツに、クラス名「js-current_list current_list」を追加。
- 現在開いているページと同じURLのリンクテキストに、クラス名「current」が自動で付与されます。
- カレント表示時のアクセントスタイルはカスタムCSSで適宜調整してください。
注意点
- リンクを設定しないとインデントがつきませんのでご注意下さい。（デザインの構造上）
- [＃ページの一番上に遷移]に設定すると、どのページでもアクセントがついてしまうので、必ずページを指定してください。
- リッチテキストは操作上崩れやすいので、コピペでリスト追加するのはおすすめしません。
できるだけ一つ一つ設定するようにしてください。 - 編集画面では操作性を考慮し、デザインを反映させていません。公開画面と見た目が異なるのでご注意下さい。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2025-05-30更新（v1.0.0）
<script>
/* -------------------------------
カレント表示（リンクテキスト） v1.0.0
------------------------------- */
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const curretList = document.querySelectorAll('.js-current_list a'); /* カレント表示対象とするaタグ一覧を取得 */
curretList.forEach(function (link) {
/* aタグのパスと現在のページのパスが一致したらクラスを付与 */
if (link.pathname === location.pathname) {
link.classList.add('current');
}
/* TOPページかどうかを判定してカレント表示用クラスを付与 */
if (window.location.pathname === "/" && link.pathname === "/index") {
link.classList.add('current');
}
});
});
/* -------------------------------
カレント表示（リンクテキスト） END
------------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2025-07-02更新（v1.1.0）
/*----- カレント表示（リンクテキスト） v1.0.0-----*/
.theme-fo-base {
:is(
.main-visual,
.wrapper .contents,
.wrapper .side,
.foot
) {
// サイドバー等でも使えるようにネスト略
.component:not(:root:root) {
&:is(
.richtext,/*使用しないパーツは削除*/
.list/*使用しないパーツは削除*/
) {
&.current_list {
ul {
list-style-type: none;
margin: 0;
li {
a {
display: block;
text-decoration: none;
padding: 5px 30px;
&:hover {
background-color: #ffc72e;
color: #fff;
opacity: 1;
}
// 該当ページリンクにつくアクセント
&.current {
background-color: #ffad2f;
color: #fff;
}
}
ul {
li {
a {
padding-left: 50px;
}
}
}
}
}
}
}
}
}
}
/*----- カレント表示（リンクテキスト） END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-09-13更新（v1.0.0）
/*----- カレント表示（リンクテキスト）編集画面用 v1.0.0-----*/
:is(
.main-visual,
.wrapper .contents,
.wrapper .side,
.foot
) {
.component {
&.richtext/*リッチテキスト使用の場合、操作性が悪くなるので対策*/{
&.current_list {
ul {
list-style-type: disc;
margin-left: 40px;
li {
a {
display: initial;
text-decoration: underline;
padding: 0;
&:hover {
background-color: initial;
color: initial;
opacity: initial;
}
}
ul {
li {
a {
padding-left: 0;
}
}
}
}
}
}
}
}
}
/*----- カレント表示（リンクテキスト）編集画面用 END -----*/
リッチテキストver.
（共通パーツ）
旧リッチテキストver.
（共通パーツ）
リンクリストver.
© Basic Inc. All Rights Reserved.