loading ...

タグ「JavaScript」 の検索結果（1/1）

September 14, 2007

プルダウン式メニューバー


プルダウン式メニューバー
●デザイン⇒テンプレート⇒テンプレートモジュール⇒ヘッダー
　メニューを置きたいページの<head>～</head>内に以下のJava Scriptを記述。 
<script type="text/javascript">
<!-- 
function MenuOn(x){ 
obj=document.getElementById("submenu"+x).style.visibility="visible";
}
function MenuOff(x){ 
obj=document.getElementById("submenu"+x).style.visibility="hidden"; 
}
//-->
</script>

●デザイン⇒テンプレート⇒スタイルシート(メイン)
　スタイルシートに以下の記述を追加。 
/* menu */
.menu {
font-size: 10px;
width: auto;
font-family:"Osaka",Verdana, Arial,"ＭＳ Ｐゴシック",sans-serif;
margin-top: 1px;
padding: 0px;
background: #ffffff; 
color:#999999;
height: 2.0em;
text-align: center;
position: relative;
top: 0;
left: 0;
border-bottom : 1px solid #999999;
}

.menu a{
color: #999999;
background: #ffffff;
text-decoration: none;
display: block;
padding: 0px;
line-height: normal;
width: 65px;
border: 1px solid #999999;
}
.menu a:visited {color:#999999;}
.menu a:hover{color:#999999; background-color: #ffffff; text-decoration: none;}
.menu a:active {color: #999999;}

.submenu a{
color:#999999; 
background: #d1d1d1; 
font-weight: normal;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
}
.submenu a:visited {color:#999999;}
.submenu a:hover{color:#999999; background-color: #ffffff; text-decoration: none;}
.submenu a:active {color: #999999;}

#menu1{
position: absolute;
top: 2;
left: 156px;
}

#menu2{
position: absolute;
top: 2;
left: 225px;
}

#menu3{
position: absolute;
top: 2;
left: 294px;
}

#menu4{
position: absolute;
top: 2;
left: 363px;
}

#menu5{
position: absolute;
top: 2;
left: 432px;
}

#menu6{
position: absolute;
top: 2;
left: 501px;
}

#menu7{
position: absolute;
top: 2;
left: 570px;
}

#menu8{
position: absolute;
top: 2;
left: 639px;
}

div.menu span{
display: none;
}

div.submenu {
visibility: hidden;
position: absolute;
left: 0;
}

●デザイン⇒テンプレート⇒テンプレートモジュール
　モジュールテンプレートを作成する。
　名称：menu（任意）などにして以下の記述をする。
<div class="menu">

<div id="menu1">
<a href="<$MTBlogURL$>" title="Home" class="menuhead">Home</a><span>|</span>
</div>

<div id="menu2">
<a href="<$MTBlogURL$>profile.php" title="Profile" class="menuhead">Profile</a><span>|</span>
</div>

<div id="menu3">
<a href="<$MTBlogURL$>tagcloud.php" title="Tag" class="menuhead">Tag</a><span>|</span>
</div>

<div id="menu4" onmouseover="MenuOn(4)" onmouseout="MenuOff(4)">
<a href="<$MTBlogURL$>link.php" title="Links" class="menuhead">Links</a><span>|</span>
<div class="submenu" id="submenu4">
<a href="<$MTBlogURL$>drecomrss.php" title="DrecomRss" >DrecomRss</a><span>|</span>
<a href="<$MTBlogURL$>blogpeople.php" title="BlogPeople">BlogPeople</a><span>|</span>
<a href="http://shakuo.s31.xrea.com/" target="_blank" title="藤川流 宗家 藤川爵応">藤川爵応</a><span>|</span>
</div>
</div>

<div id="menu5" onmouseover="MenuOn(5)" onmouseout="MenuOff(5)">
<a href="<$MTBlogURL$>blog_accessories.php" title="Blog Accessories" class="menuhead">Accessories</a><span>|</span>
<div class="submenu" id="submenu5">
<a href="<$MTBlogURL$>harbot.php" title="Harbot" >Harbot</a><span>|</span>
<a href="<$MTBlogURL$>livly.php" title="Livly">Livly</a><span>|</span>
<a href="<$MTBlogURL$>myminicity.php" title="MyMiniCity">MyMiniCity</a><span>|</span>
</div>
</div>

<div id="menu6" onmouseover="MenuOn(6)" onmouseout="MenuOff(6)">
<a href="<$MTBlogURL$>blog.php" title="アプルの他のBlog" class="menuhead">Blog</a><span>|</span>
<div class="submenu" id="submenu6">
<a href="http://blog.so-net.ne.jp/apuru/" target="_blank" title="アプルの楽屋" >アプルの楽屋</a><span>|</span>
<a href="http://shaku129.blog44.fc2.com/" target="_blank" title="コツコツお小遣い♪ ">お小遣い♪</a><span>|</span>
<a href="http://shakulove.seesaa.net/" target="_blank" title="夢の続き・・・。">夢の続き・・・。</a><span>|</span>
<a href="http://curuhome.cururu.jp/shaku129" target="_blank" title="亜風瑠クルホーム">CURURU</a><span>|</span>
<a href="http://chakichaki.padotown.net/room.cgi?address=070101" target="_blank" title="ぱどタウン ">ぱどタウン</a><span>|</span>
</div>
</div>

<div id="menu7">
<a href="<$MTBlogURL$>mail.php" title="お問い合わせ" class="menuhead">Contact</a><span>|</span>
</div>

<div id="menu8">
<a href="http://musashi.s201.xrea.com/x/mt/mt.cgi" title="管理者ページ" class="menuhead">┌|∵|┘</a><span>|</span>
</div>

</div>

上記のプルダウン式ですと、menu4～6は、サブメニューがありますのでブルーの部分の
数字は必ず統一する。数字が違うと正しい動きをしません。

タグ:

Permalink | Category : Customize | Comments [0] | Trackbacks [0] | Edit | Top▲

September 13, 2007

タグクラウドページを作る。


Movable Type備忘録さまのbzbellさまにご指導頂き、タグクラウドのページが出来ました。
　参考：TagSupplementals プラグインでタグクラウドを作る
　1.TagSupplementals プラグインをダウンロードする。
　2.Movable Typeのインストール先　mtディレクトリ内（mt/plugins/）へアップロード。
　3.タグクラウド用の JavaScript を作成します。tagcloud.jsをダウンロードする。
　　　●デザイン⇒テンプレート⇒インデックステンプレート
　　　　インデックステンプレートを作成する。
　　　　テンプレート名称：JavaScript(tagcloud.js)
　　　　出力ファイル名称：tagcloud.js
　　　　編集部分にダウンロードしたものをコピーしてペーストする。
　4.タグクラウド用のテンプレートモジュールを作成する。
　　　●デザイン⇒テンプレート⇒テンプレートモジュール
　　　　上記コードをコピー & ペーストしてテンプレートモジュールを作成する。
　　　　テンプレート名称：タグ一覧
<MTIfArchiveTypeEnabled archive_type="Individual">
    <div class="archive-tagcloud archive">
        <div class="archive-content">
            <ul id="tags">
                <MTTags>
                <li title="<$MTTagName$>:<$MTTagCount$>:<$MTTagLastUpdated format="%Y-%m-%d"$>"><a href="<$MTTagSearchLink$>" rel="tag"><$MTTagName$></a></li>
                </MTTags>
            </ul>

            <script type='text/javascript' src='<$MTLink template="JavaScript(tagcloud.js)"$>'>"></script>
        </div><!-- archive-content -->
    </div><!-- archive -->
</MTIfArchiveTypeEnabled>

　5.タグクラウド用のインデックステンプレートを作成する。
　　メインページなどをベースに作成して、上記（4.）作成したテンプレートモジュールを
　　インクルードします。
<$MTInclude module="タグ一覧"$>

　6.これで再構築すれば完了なのですが・・・
私のブログの場合・・・タグがズラズラと並んでしまう為にスタイルシートを入れる事で
表示する事を教えて下さいました。
●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート（メイン）
#tags {
    margin: 0;/*ul タグのマージン／パディングを初期化します */
    padding: 0;
    list-style: none;
}
#tags li {
    margin: 0;/* li タグのマージン／パディングを初期化します */
    padding: 0;
    display: inline;/*各タグを横に並べます */
    line-height: 1.7;/* 各タグの行間を設定します */
}
#tags li a {
    padding: 0 .1em;/* タグ間の余白を設定します */
    text-decoration: none;/*アンカーのアンダーラインを消します */
    color: #8fabbe;/* リンク(タグ)の初期カラーを設定します */
}
#tags  li.rank-1 a {
    color: #192f60;/* レベル1 のカラーを設定します */
    font-weight: bold;
}
#tags li.rank-2 a {
    color: #003f8e;/* レベル2 のカラーを設定します */
}
#tags li.rank-3 a {
    color: #4753a2;/* レベル3 のカラーを設定します */
}
#tags li.rank-4 a {
    color: #7a99cf;/* レベル4 のカラーを設定します */
}
#tags li.rank-5 a {
    color: #bcc7d7;/* レベル5 のカラーを設定します */
}
#tags li.rank-6 a {
    color: #ff80c0;/* レベル6 のカラーを設定します */
}
#tags li a:hover {
    text-decoration: none;/*ホバー時のアンダーラインを消します */
    color: #8fabbe;/*ホバー時のカラーを設定します */
}

タグ:

Permalink | Category : Customize | Comments [0] | Trackbacks [0] | Edit | Top▲

September 11, 2007

Ajax 月送りカレンダー（横型）


小粋空間さまのyujiroさまにご指導頂き Ajax 月送りカレンダー（横型）を設置。
参考：Ajax 月送りカレンダー（横型）
Ajax 月送りカレンダー（横型）
1.スクリプトのダウンロード・アップロード
　下記のスクリプトをダウンロードします。
prototype.js
ajaxCalendar.js
dayChecker.js
　ダウンロードした ajaxCalendar.js・dayChecker.js・prototype.js はダウンロードした
　メインページと同じディレクトリにアップロード。
2.カレンダーテンプレート作成
　●デザイン⇒テンプレート⇒アーカイブテンプレート
　　アーカイブテンプレート（ブログ記事リスト）を新規作成
　　　テンプレート名称：カレンダー
　　　ファイルへのリンク：不要
　　　テンプレートの内容：下記をコピーする。
<div title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65310;</a>
</MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div>

　設定が終わったら保存する。
3.カレンダーテンプレートを月別アーカイブに関連付け
　上記を保存すると同じページの下に「アーカイブマッピング」の項目が表示されていますので
　「新しいアーカイブマッピングを作成」
　　「種類」から「月別」を選択して「追加」をクリック。
　　注：「月別」欄の右側にあるチェックボックスは絶対にチェックしないで下さい。
　　次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択し下記の内容を設定して
　　保存する。
calendar/%y/%m/%i

4.日別アーカイブの追加
　　●デザイン⇒テンプレート⇒アーカイブテンプレート⇒ブログ記事リスト
　　　アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリックする。
　　　「日別」を選択して「追加」をクリックして日別アーカイブが追加される。
5.外部ファイルのインクルード
　　●デザイン⇒テンプレート⇒テンプレートモジュール⇒ヘッダー
　　　<head>～</head>の間に下記を追加。
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

6.カレンダー表示部分の設定
　　●デザイン⇒テンプレート⇒テンプレートモジュール⇒ヘッダー
<div id="header">
<h1 id="blog-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<MTIfNonEmpty tag="BlogDescription"><p class="blog-description"><$MTBlogDescription encode_html="1"$></p></MTIfNonEmpty>
 
<div id="calendar">loading ...</div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="archives/calendar/%Y/%m/" $></MTEntries>");
</script>

7.CSS修正
　　●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート(メイン)
　　　下記をスタイルシートに追加します。既にカレンダー関係のスタイル設定が行われている
　　　場合は競合を避けるため、古い設定を削除（またはコメントアウト）して下さい。
#calendar {
    text-align: center;
    padding: 5px 0;
    border-bottom : 1px solid #999999;
    font-family: Verdana, Arial, sans-serif; 
    font-size: 10px; 
    color:#666666; 
}
#calendar a,
#calendar a:link,
#calendar a:visited {
    color: #8fabbe;
}
#calendar a:hover {
    text-decoration: underline;
}
#calendar a:active {
    color: #8fabbe;
}
#calendar .calendarHead { 
    color:#666666; 
    padding-right: 5px;
} 
#calendar .today { 
    border : 1px solid #444444; 
    padding: 0 2px;
} 
#calendar .holiday,
#calendar .holiday a:link,
#calendar .holiday a:visited {
    color: #e50003;
}
#calendar .saturday,
#calendar .saturday a:link,
#calendar .saturday a:visited {
    color: #0000ff;
}
#calendar .tholiday {
    border: 1px solid #444444;
    padding: 0 2px;
    color: #e50003;
}
#calendar .tholiday a:link,
#calendar .tholiday a:visited {
    color: #e50003;
}
#calendar .tsaturday {
    border: 1px solid #444444;
    padding: 0 2px;
    color: #0000ff;
}
#calendar .tsaturday a:link,
#calendar .tsaturday a:visited {
    color: #0000ff;
}

タグ:

Permalink | Category : Customize | Comments [0] | Trackbacks [0] | Edit | Top▲