• 締切済み

MTでJavascriptメニューを使いたいんですが…

http://www.webcitron.com/blog/sb.cgi?tid=15 Movable Typeではなくsbというブログツールでこのようなメニューを使われてるサイトさんを見つけました。 とてもスッキリしてていいなぁと思うんですが、MTでこんなふうに新規エントリや新着コメントなどを表示させるタグを探しきれませんでした（；_；） どなたか思い当たった方がいらっしゃいましたら、ぜひぜひ教えてください(>_<)!!

みんなの回答

  • s_hukami
  • ベストアンサー率66% (98/148)
回答No.3

どうやら解決していないようなので、トップページとCSSの記述例のみを記述してみました。 色の指定など適当なので、ご利用する際には、適宜カスタマイズすることをおすすめします。 参考になれば幸いです。 ------------------------------------- トップページのテンプレート記述例 ------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /> <meta name="generator" content="http://www.movabletype.org/" /> <title><$MTBlogName encode_html="1"$></title> <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" /> <link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" /> <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="<$MTBlogURL$>index.rdf" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" /> <MTBlogIfCCLicense> <$MTCCLicenseRDF$> </MTBlogIfCCLicense> <script language="JavaScript" type="text/JavaScript"> <!-- // Pulldown menu スクリプト（By ボムガール） function MenuOn(x){ obj=document.getElementById("submenu"+x).style.visibility="visible"; } function MenuOff(x){ obj=document.getElementById("submenu"+x).style.visibility="hidden"; } //--> </script> </head> <body> <a name="top01"></a> <div id="container"> <div id="header"> <h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> <div class="descriotion"><$MTBlogDescription$></div> </div> <div class="menu"> <div id="menu1" onmouseover="MenuOn(1)" onmouseout="MenuOff(1)"> <span>MONTHLY</span> <div class="submenu" id="submenu1"> <MTArchiveList archive_type="Monthly"> <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> </MTArchiveList> </div></div> <div id="menu2" onmouseover="MenuOn(2)" onmouseout="MenuOff(2)"> <span>ENTRY</span> <div class="submenu" id="submenu2"> <MTEntries lastn="10"> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> </MTEntries> </div></div> <div id="menu3" onmouseover="MenuOn(3)" onmouseout="MenuOff(3)"> <span>COMMENT</span> <div class="submenu" id="submenu3"> <MTEntries recently_commented_on="10"> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br /> <MTComments lastn="5"> 　└ <$MTCommentAuthor$> <a href="<$MTEntryPermalink$>#c<$MTCommentID$>">at <$MTCommentDate format="%Y.%m.%d"$></a><br /> </MTComments> </MTEntries> </div></div> <div id="menu4"> <a href="<$MTBlogURL$>index.rdf">RSS(XML)</a> </div> </div> <div id="content"> <MTEntries> <$MTEntryTrackbackData$> <MTDateHeader> <h2><$MTEntryDate format="%x"$></h2> </MTDateHeader> <h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3> <$MTEntryBody$> <MTEntryIfExtended> <p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p> </MTEntryIfExtended> <p class="posted">投稿者 <$MTEntryAuthor$> : <a href="<$MTEntryPermalink valid_html="yes"$>"><$MTEntryDate format="%X"$></a> <MTEntryIfAllowComments> | <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">コメント (<$MTEntryCommentCount$>)</a> </MTEntryIfAllowComments> <MTEntryIfAllowPings> | <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">トラックバック (<$MTEntryTrackbackCount$>)</a> </MTEntryIfAllowPings> </p> </MTEntries> </div></div> <div id="footer"> <div class="search"> <form method="get" action="<$MTCGIPath$><$MTSearchScript$>"> <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" /> <label for="search" accesskey="4">サイト内の検索</label> <input id="search" name="search" size="20" /> <input type="submit" value="検索" class="button" /> </form> </div> <MTBlogIfCCLicense> <div id="cc"> <a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" src="<$MTBlogCCLicenseImage$>" /></a> このウェブログのライセンス: <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>. </div> </MTBlogIfCCLicense> <div id="powered"> Powered by <a href="http://www.movabletype.org/">Movable Type <$MTVersion$></a> </div> </div> </body> </html> ------------------------------------- CSSのテンプレート記述例 ------------------------------------- /* 共通表示 */ body, html { scrollbar-3d-light-color: #6E9B8A; scrollbar-arrow-color: #6E9B8A; scrollbar-base-color: #6E9B8A; scrollbar-dark-shadow-color: #FFFFFF; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #6E9B8A; } body { background: #FFFFFF; color: #6E9B8A; margin: 10px; padding: 0px; } a { color: #0066CC; text-decoration: none; } a:visited { color: #009999; text-decoration: none; } a:hover{ color: #00FFFF; text-decoration: underline overline; } a:active { color: #6B8E23; text-decoration: none; } h1, h2, h3, h4 { margin: 0px; padding: 0px; font-weight: normal; } img { border: 0px; } /* フォーム設定 */ select, textarea, input { font-size: 10pt; color: #6E9B8A; } select, textarea, .button { background: #FFFFFF; } form { margin: 0px; padding: 0px; } /* ヘッダー設定 */ #header { width: 700px; margin: auto; padding: 10px; background-color: #FFFFFF; color: #6E9B8A; text-align: right; } h1, #header h1 a { font-size: x-large; color: #6E9B8A; margin: 0px; padding:3px 0px; text-decoration: none; } #header a:link { color: #6E9B8A; } #header a:visited { color: #6E9B8A; } #header a:hover{ color: #6E9B8A; text-decoration: overline underline; } #header a:active { color: #6E9B8A; } .description { margin: 0px; padding: 5px 0px 5px 10px; color: #6E9B8A; font-size: small; } /* メニュー設定 */ .menu { width: 720px; font-size: 14px; font-weight: bold; margin: 0px; padding: 0px; height: 2em; text-align: center; letter-spacing: 1px; position: relative; top: 0px; left: 0px; } .menu a, .menu span{ color: #FFFFFF; background: #6E9B8A; text-decoration: none; display: block; padding: 0px; line-height: 2em; width: 120px; font-weight: bold; } .submenu a { border-top: 1px solid #FFFFFF; color: #FFFFFF; background: #6E9B8A; text-decoration: none; display: block; padding: 0px; font-weight: normal; } .menu a:visited, .submenu a:visited { color: #FFFFFF; } .menu a:hover, .submenu a:hover{ background-color: #66CDAA; color: #6E9B8A; text-decoration: none; } .menu a:active, .submenu a:active { color: #FFFFFF; } .submenu { visibility: hidden; position: absolute; left: 0px; } #menu1{ position: absolute; top: 0px; left: 0px; } #menu2{ position: absolute; top: 0px; left: 121px; } #menu3{ position: absolute; top: 0px; left: 242px; } #menu4{ position: absolute; top: 0px; left: 363px; } #menu5{ position: absolute; top: 0px; left: 484px; } .seacret { display: none; } /* フッター設定 */ #footer { font-size: small; width: 720px; margin: auto; padding: 0px; clear: both; background: #FFFFFF; color: #6E9B8A; } .search { margin: 10px; } #powered,#cc { text-align: right; } /* コンテンツ設定 */ #container { width: 720px; line-height: 140%; margin-right: auto; margin-left: auto; padding: 0px; background: #FFFFFF; text-align: left; } #content { width: 700px; padding: 10px; font-size: small; } #content p { color: #666; font-size: small; font-weight: normal; line-height: 150%; text-align: left; margin-bottom: 10px; } #content blockquote { line-height: 150%; } #content li { line-height: 150%; } #content h2 { color: #228B22; font-size: small; text-align: right; font-weight: bold; margin-bottom: 10px; } #content h3 { color: #333; font-size: small; text-align: left; font-weight: bold; margin-bottom: 10px; } #content p.posted { color: #999999; font-size: x-small; border-top: 1px solid #999999; text-align: left; margin-bottom: 25px; line-height: normal; padding: 3px; }

全文を見る
すると、全ての回答が全文表示されます。
  • s_hukami
  • ベストアンサー率66% (98/148)
回答No.2

すみません。 もっと単純に、sb版ですが、プルダウンメニューテンプレートがDLできるところがありましたので、Movable Type用のテンプレートとテンプレートタグをつき合わせて書き換えれば、いけると思います。

参考URL：
http://bombgirl.sakura.ne.jp/sb/log/eid248.html
全文を見る
すると、全ての回答が全文表示されます。
  • s_hukami
  • ベストアンサー率66% (98/148)
回答No.1

「Tigra Menu Online Builder」というサイトで「Free Download」をクリックして移動したページの「Download Now」をクリックすると、JavaScrptメニューがDLできます。 この中の「demo1」というフォルダの中のCSSやJavaScrptやHTMLファイルがあなたの希望するスタイルのメニューなので、それをあなたのお好みに改造してください。 ちなみに以下の2サイトはMovable Typeでプルダウンメニューの例の改造です。 参考になればと思い、URLを記述します。 「hwp blog: プルダウンメニュー」 http://hwp-w.sub.jp/hwp_blog/archives/200406171544.php 「我楽: プルダウンメニュー化」 http://blog.garaku.cc/archives/2004/09/27_0024.php また、テンプレートタグについては 「Movable Type ユーザマニュアル: テンプレートタグ」 http://www.movabletype.jp/manual/mtmanual_tags.html を参考にしてください。

参考URL：
http://www.softcomplex.com/products/tigra_menu/
全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • ＭＴをトップページにしたい

    Movable typeでブログを開設したいのですが、ＭＴを使っている人は、http://www.****.com/blog　の様にブログをフォルダの中に入れていますよね？でも、自分はhttp://www.****.com/　のように、トップページにしたいですが、設定をいろいろと変えてみてもうまくいきません。トップページに、一番最近のエントリーだけでも表示させたいのですが、何かよい方法はないでしょうか？実験として、<link>等を<Head>部にコピーして、インデックスページに張ってみたのですが、動きません。どうすればよいか、教えてください。（多少CGI/Perlに関する知識はあります）

  • Movable TypeのMTタグをエントリーに埋め込みたい

    Movable TypeでMTタグをテンプレートに埋め込むのではなく、エントリーに埋め込みたいのですがうまくいきません。 エントリーに埋め込むとテンプレートのように置き換えられることなく、タグがそのまま表示されてしまいます。 エントリーにMTタグを埋め込んで、テンプレートのように置き換えられて表示する方法はあるでしょうか？ Movable Typeは3.3を使っています

  • MT4の検索パスについて

    MT4のタグ検索パス（<$MTTagSearchLink$>）についての質問です。 現在、MTをインストールしているドメインと違うドメインでブログを公開しています。 例： MT→ttp://abc.com/mt/mt.cgi ブログ→ttp://123.com/blog/ MT3.3を以前使っていたのですが、MT3の場合「<$MTTagSearchLink$>」を使うと、 MTがインストールされているURLを返していたのですが、 MT４ですとブログのURLが返ってきてしまいます。 どうにかしてMTがインストールされているURLを返したいのですが、設定方法などをご存知の方いらっしゃいましたら、アドバイスお願いいたします。

  • ＭＴ４の使い方（インディケーターの導入方法）

    為替鬼というブログから、インディケーターをダウンロードしたのですが、ＭＴ４への導入方法がわかりませんので教えてください。 http://kawaseoni.blog63.fc2.com/blog-entry-35.html

  • MT4.1で同一タグの付いた記事一覧表示から特定のタグだけ除外したい

    MT4.1をダイナミック・パブリッシングで使っています。 ブログ記事リストであるエントリーと同じタグがついた他のエントリーを並べて表示させたいのですが、そのなかでも特定のタグ（タグA）がついてるものだけは表示させたくないのです。 http://www.apstars.com/blog/211movable_type4/2_1.php ↑この辺りの記事を読んで真似してみたのですが、下記のやり方ではエラーになってしまいました。 <MTSetVarBlock name="entrytags"><MTEntryTags glue=" OR "><$MTTagName$></MTEntryTags></MTSetVarBlock> <MTEntries tags="$entrytags NOT タグA"><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></MTEntries> エラー Parse error: syntax error, unexpected '!' in /～/cgi-bin/mt/php/lib/MTUtil.php(1196) : runtime-created function on line 1 Invalid tag filter: $entrytags NOT タグA <MTEntries tag="$entrytags">だけなら問題なく動くんですが… MTテンプレートタグのみで実現させることはできますでしょうか。 よろしくお願いいたします。

  • javascriptでURLを取得するには？

    pcafeさん（http://pcafe.blog3.fc2.com/blog-entry-372.html）にあるようなことを、ブログ上でなくてホームページ上で実現したいと思っています。 上記のサイト様を踏まえた上で、どのようなことがしたいかと言いますと、下記のようなことをしたいと思っています。 サンプル図：http://lancerevolution.tuzikaze.com/sampletest.html (1)http://×××.blog×.fc2.com/blog-entry-1.htmlのリンクをクリックし、新規ウィンドウでmenu.htmlを開く (2)http://×××.blog×.fc2.com/blog-entry-1.htmlの「1」をインラインフレームの「src」に代入して、1.htmlのファイルを(3)に表示させる ＊子のウィンドウのURLではなくて、親のウィンドウのURLを対象にして、その数字に応じたhtmlファイルを(3)に表示させます つまり、 ◆http://×××.blog×.fc2.com/blog-entry-1.htmlと言うページがあった時に、子ウィンドウのインラインフレームに <iframe src="="./file/1.html"></iframe> ◆http://×××.blog×.fc2.com/blog-entry-2.htmlと言うページがあった時に、子ウィンドウのインラインフレームに <iframe src="="./file/2.html"></iframe> 　　　　　　　　・ 　　　　　　　　・ ◆http://×××.blog×.fc2.com/blog-entry-300.htmlと言うページがあった時に、子ウィンドウのインラインフレームに <iframe src="./file/300.html"></iframe> にしたいということです。 ＊インラインフレームがある部分は、menu.htmlと言うページしか使わないので、ページ１つ１つにsrcは設定できません。設定できるのは、menu.htmlのみです。そのため、pcafeさんのやり方がどうしてもしたいのです。 長くなりましたが、どうぞよろしくお願いします。

  • MTでのレイアウト崩れを直したい

    Movable Type 3.34でVicuna flatスキンを使用しています。 新規エントリーを書き込む際に文字を目立たせたいと思い、 <h1>や<h2>のタグを使ったら突然レイアウトが崩れました。 <h>タグと書き込んだエントリーを削除して cssやエントリーアーカイブの内容を アップロードしなおしたのですが元に戻りません。 ブログを削除して1から入れなおすしかないのでしょうか。

  • Movable Typeはmtフォルダにインストールしなければならないんですか？

    ブログサイトを構築するため、独自ドメインを取得し、サーバーをレンタルし、Movable Typeをインストールしました。 サーバーはロリポップで借りたのですが、 http://lolipop.jp/?mode=manual&state=blog&state2=mt によると、Movable Type本体は、「mt」フォルダに格納するということで、指示に従ってインストールを成功させました。 しかし、これだと、ブログのアドレスは http://（独自ドメイン）/mt/ というものになってしまいます。 http://（独自ドメイン）というアドレスでブログを運用することを考えていたので、mtフォルダを作らずルートフォルダにMovable Typeをインストールしたいのですが、それは可能でしょうか？ また、なぜmtフォルダを作る必要があるのか、そのメリットも教えてください。お願いします。

  • Movable Typeのディレクトリ（フォルダ）の設置の仕方を

    Movable Type 5を初めてインストールして設置するのですが、 一般的なディレクトリ（フォルダ）の配置方法がイマイチ分かりません。 まず、私のサーバが、www.AAA.comとして、 Movable Typeをインストールするフォルダは、 www.AAA.com/mt/ だと思うのですが、 ■ブログを設置する場合、普通は、 www.AAA.com/mt/blog/ にするのでしょうか？ www.AAA.com/blog/ にするのでしょうか？ ある説明サイトをみたら、 www.AAA.com/blog/　の様な事が書いてあったのですが、 これだと、/mt/ フォルダ内にブログを作成しない事になるので、 もしかして、間違いでは？と思ったしだいです。 ■また、Movable Typeの設定項目の「ウェブサイトURL」には、 （私のもともとのホームページURLの） www.AAA.com/ を設定したらダメなのでしょうか？ これだと上の階層になるので、やはり、 www.AAA.com/mt/ www.AAA.com/mt/フォルダ名/ などになるのでしょうか？ 説明サイトをパラパラ見ても、ちょっと分かりにくく、 ご教授よろしくお願いいたします。 （特に、ブログの方を教えてください）

  • アメブロで投稿したエントリーをＭＴに反映したい

    こんばんは。 Movable Type(MT)で、複数のブログで構成された(新着情報用のブログ、セミナーのお知らせ用のブログ、コラム連載用のブログ、など)企業ブログサイトを構築しようとしています。 MTの他に、現在すでにアメブロで記事を書いています。 新しく作る企業ブログサイトのトップページに、アメブロで新規に記事が投稿されるたびに、その記事のテキストの一部(最初の100文字まで、など)、画像が反映されるようにしたいです。 MTでは、同じサーバーに作ったブログから画像の一部、タイトルなどをHTMLのみで作成したトップページに反映するということはできたのですが、アメブロのような既成のブログから、エントリーの一部を反映できるのかどうかが疑問です。 そのようなことが可能なプラグインなどあれば、教えていただきたいです。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する