zeroichi_jpの、グローバルナビゲーションを編集する手順です。
a-blog cmsのナビゲーション編集画面は、バージョン2.8からリニューアルされました。このページでは2.8以降の画面で解説します。

ナビゲーション編集画面へ移動する

ナビゲーションの編集ボタンの場所

ログイン中の状態で、トップページのグローバルナビゲーションにカーソルを置くと、右上に「モジュール」リンクが表示されます。
クリックすると、ナビゲーション編集画面へ移動します。

テキストとリンク先を編集する

ナビゲーションの編集画面

ナビゲーションの編集画面は、左側の入力欄が表示テキスト、右側の入力欄がリンク先URLとなります。
表示テキストにはspan等のHTMLのインライン要素、URLにはa-blog cmsのグローバル変数を入力できます。

例えば、以下のように入力すると、スマートフォンでは表示テキストを短くすることができます。

<span class="hidden-sm-down">zeroichi_lpの</span>特徴

リンクの追加

ナビゲーションのリンクの追加ボタン

各リンクの「追加」ボタンをクリックすると、そのリンクの下(次)に新しいリンクが追加されます。

「保存」ボタンをクリックすると、更新が反映されます。

ページ内リンクを作成した場合の挙動

グローバルナビゲーションでは、「#」ではじまるページ内リンクを作成すると、スムーズスクロールで移動する演出が追加されます。

属性を編集する

ナビゲーションの詳細設定

各リンクの「詳細」ボタンをクリックすると、以下の設定が表示されます。

ラベル 説明
公開 チェックを外すと、削除せずに非公開にできます。
_blank チェックを入れると、リンク先が別ウィンドウで表示されます。
属性・子要素属性 ナビゲーションのli要素、a要素に属性を追加できます。例えば、属性に class="hidden-md-down" と入力すると、タブレット以下で非表示となります。
削除 項目を削除します。

下層ナビゲーションを追加する

下層ナビゲーション

グローバルナビゲーションは、二段階までの階層表示に対応しています。ご利用の際は以下の点にご注意ください。

  • ログイン中は、a-blog cmsの編集機能の仕様の関係で、下層ページを表示できません。ログアウトしてご確認ください。
  • 「マウスオーバー」が前提となっているため、スマートフォンでは表示できません。
下層ナビゲーションを追加したときの画面

リンクを追加してから、各項目の「三」をドラッグすると、順番や親子関係を変更することができます。
右に一段階移動すると、下層ページとなります。

トップページ以外でナビゲーションを表示する

zeroichi_jpでは、トップページ以外のグローバルナビゲーションの表示に対応していません。表示したい場合は、以下のいずれかの方法をお試しください。

1) HTMLを直接入力する

テキストユニットの自由入力

最も簡単な方法です。独自のナビゲーションを作成したい場合や、メインビジュアルの後にナビゲーションを表示したい場合にも、この方法で対応できます。

本文に「テキスト」ユニットを追加し、フォーマットを「本文」から「自由入力」に変更してください。
グローバルナビゲーションのコードは以下の通りです。「js-fixnav」クラスを削除すると、ナビゲーションが画面上部に固定されなくなります。

<div class="globalnav js-fixnav">
    <div class="l-container">
        <nav class="nav nav-horizontal nav-justify">
            <ul>
                <li><a href="#">リンク</a></li>
                <li><a href="#">リンク</a>
                    <ul>
                        <li><a href="#">リンク</a></li>
                        <li><a href="#">リンク</a></li>
                        <li><a href="#">リンク</a></li>
                    </ul>
                </li>
                <li><a href="#">リンク</a></li>
                <li><a href="#">リンク</a></li>
                <li><a href="#">リンク</a></li>
            </ul>
        </nav>
    </div>
</div>

以降の方法は、zeroichi_jpのテーマを編集します。a-blog cmsでは、WordPressと同様の「テーマの継承」が可能です。差分テーマとして作成することをお薦めします。
https://developer.a-blogcms.jp/document/themes/inherit.html

2) トップページのナビゲーションを全ページに表示する

テーマ内の /include/header.html を、テキストエディタで開いてください。

グローバルナビゲーションが、「Touch_Top(ブログトップページのみ表示する条件分岐)」タグで囲まれています。このタグを削除して更新してください。
全ページに同じナビゲーションが表示されるようになります。

修正前

<!-- BEGIN_MODULE Touch_Top -->
<!--#include file="/include/parts/global_nav.html"-->
<!-- END_MODULE Touch_Top -->

修正後

<!--#include file="/include/parts/global_nav.html"-->

3) カテゴリー別、またはエントリー別に編集可能なナビゲーションを表示する

ここでは概要のみ解説します。上級者向けの作業となるため、本当に編集可能にする必要があるのか、1)の方法でも良いか、事前に検討してください。

  1. 管理ページ「モジュールID」画面で「navigation_globalnav」を複製し、それぞれの条件用のモジュールIDを作成する
  2. テーマ内の /include/parts/global_nav.html を複製し、それぞれの条件用のナビゲーションテンプレートを作成する
  3. テーマ内の /include/header.html をテキストエディタで開き、カテゴリー、またはエントリーの条件で読み込むテンプレートを変更させる
    (グローバル変数を利用する方法と、IFブロックを利用する方法があります)