人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【再質問】ウェブページのサイドバーの表示をhttp://www.zaikyo.or.jp/info/のサイトの様にしたい、Movabletype4.2で再現できますか?

1.サイドバーを、グローバルナビ(以下グロナビ)で「大蔵財務協会について」(以下大蔵)と「出版物のご案内」にアクセスしたとき、それぞれ違うサイドバーを表示したい。

2.グロナビ「大蔵」をクリックした時、サイドバー協会概要・組織図(以下協会・組織)がover時(背景黄)にしたい。

3.グロナビの「大蔵」をクリックした時と、サイドバー「協会・組織」をクリックした時、同ページを表示したい。


以下、重要度は低いですが分かる方おねがいします。
サイトマップは、大蔵のページ作成し、サイドバーの協会・組織は大蔵にリンク? どうすればできますか?
仮に、
>会員名簿
>あ行
>か行
としたい時、会員名簿のページ作成し、あ行を会員名簿にリンクすると(上記と同様)
>会員名簿
>か行
とサイトマップ上であ行がなくなってしまい・・解決方法ありますか?サイトマップを自作しかないでしょうか。

解決回答の場合、それぞれ100pt付加します。どうかお願いいたします。。

●質問者: sakuma1
●カテゴリ:インターネット ウェブ制作
✍キーワード:アクセス ウェブページ クリック グローバル サイト
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●400ポイント ベストアンサー

テンプレートセットに「プロフェッショナルウェブサイト」を選択してある場合の方法を回答します。

※他のテンプレートセットを使用している場合、編集するテンプレートは異なる場合もありますが、記述に関してはそのまま使用できると思います。

http://www.movabletype.jp/documentation/professional/universal-t...


・事前準備

(1)各ウェブページにシークレットタグを設定します。

※例えば、「大蔵財務協会について」で属する各ページに「@info」を、「出版物のご案内」に属する各ページに「@publishing」を設定します。

(2)アーカイブテンプレートの「ウェブページ」を編集して、テンプレート上部(3行目くらい)に次の記述を追加します。

<mt:Ignore>@infoページ用</mt:Ignore>
<mt:PageIfTagged tag="@info" include_private="1"><mt:SetVar name="pages" value="info" />
</mt:PageIfTagged>
<mt:Ignore>@publishingページ用</mt:Ignore>
<mt:PageIfTagged tag="@publishing" include_private="1"><mt:SetVar name="pages" value="publishing" />
</mt:PageIfTagged>

※編集が完了したら「保存と再構築」を実行します。



1.メニューによって違うサイドバーを表示する

1-1.テンプレートモジュールの「サイドバー」を次のように編集します。

※ここでは右サイドバーに追加しています。

<div id="beta">
<mt:Ignore>ここから追加</mt:Ignore>
 <div id="sidebar-inner">
 <mt:If name="pages" eq="info">
 <$mt:Include module="infoサイドバー" $>
 <mt:Else name="pages" eq="publishing">
 <$mt:Include module="publishingサイドバー" $>
 </mt:If>
 </div>
<mt:Ignore>ここまで追加</mt:Ignore>
 <div id="beta-inner">

※編集が完了したら「保存」を実行します。

1-2.右側にあるインクルードテンプレートの一覧から「infoサイドバー」の新規作成をクリックして、テンプレートモジュール「infoサイドバー」を作成します。

<ul>
 <mt:Pages tags="@info" sort_by="created_on" sort_order="ascend">
 <mt:SetVarBlock name="this_page_id"><$mt:PageID$></mt:SetVarBlock>
 <li class="<mt:If name="nav_on" eq="$this_page_id"> on</mt:If>"><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
 </mt:Pages>
</ul>

※編集が完了したら「保存」を実行して、同じように「publishingサイドバー」を作成します。(上記の記述の「tags="@info"」を「tags="@publishing"」に変更するだけです。)



2.メニューがアクティブな時とマウスオーバーされた時に背景色を変更する

2-1.インデックステンプレートの「スタイルシート」を編集します。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>addons/Commercial.pack/themes/professional-black/screen.css);

/* 次から追加 */
#sidebar-inner ul {
 list-style-type: none;
 margin-left: 15px;
 margin-right: 15px;
}

#sidebar-inner ul li {
 border: 1px dotted #666666;
 margin-bottom: 2px;
}

#sidebar-inner ul li.on {
 background-color: #ffff99;
}

#sidebar-inner ul li a {
 display: block;
 padding: 3px 5px;
}

#sidebar-inner ul li a:hover {
 background-color: #ffff99;
}

編集が完了したら「保存と再構築」を実行します。

※色やその他配置等は好みで変更してください。

※手順1-2で、アクティブなメニューアイテムにクラス名「on」が設定されるようにして、「#sidebar-inner ul li.on」と「#sidebar-inner ul li a:hover」に背景色を指定しました。



3.メニューの表示順を変更する

3-1.手順1-2でMTPagesでウェブページの一覧を表示する際、「sort_by」で何を基準に並び替えるか指定し、「sort_order」で降順か昇順かを決めます。

※新しいものが下に表示されるようにしてあります。(※「sort_by="created_on"」と「sort_order="ascend"」を指定してあるので、ナビゲーションメニューをクリックした時に、先に作成したウェブページが表示されます。)

※「sort_by」に「modified_on」を指定すると、ページの更新日時が古いものが上に表示されますが、ページの更新の度にメニュー表示したい順番でその項目内のすべてのページを更新し直す必要がありますので、表示したい順番でページを作成し直す方が良いと思います。

※テンプレートモジュールの「ナビゲーション」でも、同じ条件を指定して、「limit="1"」を指定するといいです。

 <mt:Pages tags="@info" limit="1" sort_by="created_on" sort_order="ascend">
 <li class="<mt:If name="pages" eq="info"> on</mt:If>"><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
 </mt:Pages>

※上記は「大蔵」(@info用)メニューの表示用です。

http://www.movabletype.jp/documentation/appendices/tags/pages.ht...

上記で1?3に対処可能だと思います。


MTに標準でサイトマップを作成する機能があったでしょうか?

カスタマイズしているのでしたら、どのような方法でサイトマップを作成しているのかを教えていただかないと、回答がつかないのではないかと思います。

◎質問者からの返答

回答本当に有難うございます・・!返信遅くなり申し訳ありませんです。。仕事が深夜や朝までにわたりありまして、、中々時間がとれませんでした;

1、2、スムーズにできました!本当に感謝です。。説明がとてもわかりやすかったです。ありがとうございます。

私はプロフェッショナルウェブサイトのテンプレートからカスタマイズして作っているのですが、

  • on</mt:If>"><$mt:PageTitle$>
  • 上記の「nav_on」がどこにもない?と思い、新規ブログサイト作成し照らし合わせてみると、

    ウェブページテンプレートで以下記述を消していました。。わざわざプロフェッショナルウェブサイトでの例を出していただいて本当に助かりました。

    <mt:SetVarBlock name="nav_on"><$mt:PageID$></mt:SetVarBlock>

    (詳しくpageidなどで調べていると以下サイトで詳細ありましたので、自分用にリンクを貼っておきます。

    http://www.movabletype.jp/blog/universal-template-set.html)

    トラックバックもありがとうございます!回答の補足までしていただいて、、非常に助かります。。

    サイトマップですが、分かりづらくて申し訳ないです。文字数ぎりぎりで投稿していましたので・・書ききれませんでした;

    この返信欄に記述すると、枠ができてしまったりするので、コメント欄にサイトマップの内容を書きこみさせていただきます。

    どうか宜しくお願い致します。

    関連質問


    ●質問をもっと探す●



    0.人力検索はてなトップ
    8.このページを友達に紹介
    9.このページの先頭へ
    対応機種一覧
    お問い合わせ
    ヘルプ/お知らせ
    ログイン
    無料ユーザー登録
    はてなトップ