loading ...

タグ「Customize」 の検索結果(1/2)

1   2   

January 9, 2009

So-netBlog フッタにCopyright ©をおく

フッタにCopyright ©をおく。
●管理ページ⇒デザイン⇒HTML編集⇒適用されているHTML選択(スタイルシート編集)

<div id="footer2">
Copyright © <% archives.createstamp | date_format("%Y") %> アプルの楽屋 by So-netBlog All Rights Reserved.
</div>
</body>

●管理ページ⇒デザイン⇒スキン管理⇒適用されているスキン選択(スタイルシート編集)

/*-----Footer2-----*/
#footer2 {
    margin-right: auto;
    margin-left: auto;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    height: 35px;
    color: #444444;
    background: #ffffff;
    font-size: 10px;
    text-align: center;
    line-height: 3.5;
}
#footer2 {
    width: 770px;
}

December 26, 2008

So-netBlog 3ペインの2つサイドバーを右におく

先日のエントリSo-netBlog 3ペインの2つサイドバーを左におくで今度は、
So-net blogブログデザインベーシックの通常の3ペインの
2つのサイドバーを右におくカスタマイズです。

通常の3ペイン ⇒ 2つのサイドバーを右におくカスタマイズ

●管理ページ⇒デザイン⇒スキン管理⇒適用されているスキン選択(スタイルシート編集)

・
・
・
#side-a {
float:left;
}
#side-b {
float:right;
}

通常は、上記のようになっているのを下記の青字を追加。

・
・
・
#side-a {
float:right;
}
#side-b {
float:left;
}
#main {
float:right;
}

December 13, 2008

So-netBlog 3ペインの2つサイドバーを左におく

So-net blogブログデザインベーシックの通常の3ペインの
2つのサイドバーを左におくカスタマイズです。

通常の3ペイン ⇒ 2つのサイドバーを左におくカスタマイズ

●管理ページ⇒デザイン⇒スキン管理⇒適用されているスキン選択(スタイルシート編集)

・
・
・
#side-a {
float:left;
}
#side-b {
float:right;
}
#main {
float:right;
}

上記の青字を追加します。

June 8, 2008

メインページのページ分割


小粋空間さまのyujiroさまにご指導頂きMTPaginate プラグインを使って
メインページのページ分割方法。
 参考:メインページのページ分割 for Movable Type 4
1.MT ExtensionsからMTPaginateをダウンロードする。
2.Movable Typeのインストール先のpluginsのあるディレクトリに丸ごとアップロード。
 plugins/MTPaginate/lib/MTPaginate.pm
 plugins/MTPaginate/MTPaginate.pl
ブログ管理画面の「システム」→「プラグイン」で MTPaginate が表示されれば
プラグインのインストールは完了。
3.ページ分割の設定
 ●デザイン⇒テンプレート⇒メインページ
 テンプレート編集画面のテキストエリアに、リストのように青色部分を追加。
 <MTEntries> の直前と </MTEntries> の前後に加える。
    :
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries>
    <$MTEntryTrackbackData$>
    <$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
</MTPaginate>
    :
4.スタイルの設定
 ●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート(メイン)
.paginate {
    text-align: center;
    font-size: 9px;
}

June 5, 2008

関連する記事一覧を表示する


WingMemoさまにご指導頂き関連する記事一覧を表示する事が出来ました。
参考:エントリーアーカイブに関連する記事一覧を表示する
●デザイン⇒テンプレート⇒テンプレートモジュール⇒モジュールテンプレートを作成する。
 下記コードをコピー & ペーストしてテンプレートモジュールを作成する。
 テンプレート名称:関連記事

<h3 class="related-header">Related Entries</h3>
<div class="related-entries">

<MTEntryIfTagged>
<MTSetVarBlock name="etag"><MTEntryTags glue=" OR "><$MTTagName$></MTEntryTags></MTSetVarBlock>
<ul>
<MTEntries lastn="10" tags="$etag">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTElse>
<MTSetVarBlock name="ecat"><MTEntryCategories glue=" OR "><$MTCategoryLabel$></MTEntryCategories></MTSetVarBlock>
<ul>
<MTEntries lastn="10" category="$ecat">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</MTElse>
</MTEntryIfTagged>

</div>

●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート(メイン)
/* 関連するエントリー */
.related-entries {
  margin-top: 3px;
}
.related-entries li {
    padding-left: 14px;
    background: url('画像URL') no-repeat 0px 0.3em;
    list-style: none;
}

May 29, 2008

Copyrightの西暦表記を自動で行う


WingMemoさまにご指導頂きエントリのフッター部分のCopyrightを 自動化する事が出来ました。
参考:COPYRIGHTの西暦表記を自動で行う(MT4~)
●デザイン⇒テンプレート⇒テンプレートモジュール⇒フッター
<MTSetVarBlock name="year"><MTArchiveList archive_type="Yearly"><MTArchiveListHeader><$MTArchiveDate 
format="%Y" language="en"$></MTArchiveListHeader></MTArchiveList></MTSetVarBlock>
<MTSetVarBlock name="year2"><MTArchiveList archive_type="Yearly"><MTArchiveListFooter><$MTArchiveDate format="%Y" language="en"$></MTArchiveListFooter></MTArchiveList></MTSetVarBlock>
Copyright &copy ;<MTGetVar name="year2"><MTUnless name="year2" eq="year">-<MTGetVar name="year"></MTUnless> <$MTBlogName encode_html="1"$> All Rights Reserved.

May 28, 2008

MTHatenaAuthプラグイン

MTHatenaAuthプラグインを使って、HatenaIDでMovableTypeにログインして
コメントをする。

参考:MTHatenaAuthプラグイン
    はてなIDでMovable Type 4ベースのブログにコメントを

1. HatenaAuth.zipダウンロードする。

2.Movable Typeのインストール先のpluginsのあるディレクトリにHatenaAuthディレクトリを
 アップロード。

3. はてな認証APIページで、ご自分のブログ用のAPIキーと秘密鍵を取得する。
 このとき、コールバックURLとして指定するURLは、mt-comments.cgiにします。

4.MovableTypeプラグインの設定画面で、3で取得したAPIキーと秘密鍵を設定し、保存する。

5.MovableType設定画面から登録/認証タブに進み、Hatena IDをチェックして有効にする。

May 15, 2008

追記文章の折りたたみ


小粋空間さまのyujiroさまにご指導頂きエントリの追記文章の折りたたみを設置しました。
 参考:追記文章の折りたたみ Web2.0
1.script.aculo.usからscriptaculous-js-1.7.0.zipをダウンロードする。
2.メインページ(index.php)と同じディレクトリにアップロード。
/scriptaculous
   /lib
      prototype.js
   /src
      controls.js
      effects.js
      scriptaculous.js
3.</head>の直前に下記を追加します。
 ●デザイン⇒テンプレート⇒テンプレートモジュール⇒ヘッダー
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/controls.js"></script>
 
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>
4.テンプレートに追加
 ●デザイン⇒テンプレート⇒テンプレートモジュール⇒ブログ記事の概要
変更前
<MTEntryIfExtended>
<div class="entry-more">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</div>
</MTEntryIfExtended>
変更後
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<div class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</noscript>
</MTIfNonEmpty>

続きを読むのテストです。

May 13, 2008

リンクを別窓で開く

リンクを別窓(target="_blank)で開くと・・・
HTML 4.01 Strict・XHTML 1.0 Strict・XHTML 1.1の
仕様ではaタグのtarget属性を含んでいません。Transitionalではまだ含んでいますが
近い将来に仕様から外されるのは間違いありません。と言われてしまう。

1.下記をexternal.jsで保存する。

function externalLinks() {
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i<anchors.length; i++) {
    var anchor = anchors[i];
    if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
      anchor.target = "_blank";
  }
}
window.onload = externalLinks;

2.デザイン⇒テンプレート⇒テンプレートモジュール⇒ヘッダー
 <head>~</head>内に以下のJava Scriptを記述。

<script type="text/javascript" src="<$MTBlogURL$>external.js"></script>

3.リンクのタグは、下記になります。青字が(target="_blank)

<a href="http://musashi.s201.xrea.com/" rel="external">むちゃとアプルの1日。</a>

October 11, 2007

今日は何の日?


今日は何の日?リンクウィキペディア(Wikipedia)を追加しました。
M's folderさまのMT 和風日付表示プラグインをダウンロードをして
Movable Typeのインストール先のpluginsのあるディレクトリに「mt-datej.pl」をアップロード。
表示させたい部分のテンプレートに下記を追加。
<MTDatej>
<a href="http://ja.wikipedia.org/wiki/<$MTDatejMonth$>%E6%9C%88<$MTDatejDay$>%E6%97%A5" target="_blank">今日は何の日?</a>
</MTDatej>

September 28, 2007

SCode導入

いつもコメントを入れてもらっているのに面倒なSCodeを入れてもらうのは とっても気が引けるのですが・・・弁慶の舞台裏ではコメントスパムの 荒らしでコメントを受け入れない状態にしてそのまま放置。 どこのサイトさまも悩みの種でしょう・・・。 コメントを入れて下さってから私が公開する!までの時間が悪いのでこの方法を 取らせて頂きました。 ご面倒でもSCodeを入力してコメントを入れて下さい。Preview(確認)の際も必ず SCodeを入力して下さいます様、宜しくお願い致しますm(._.)m MovableType4ではSCodeは使えません。

September 26, 2007

サムネイル画像テスト投稿

小粋空間Highslide JS でサムネイル画像を拡大表示するにて
画像が同一ウィンドウ上に画像を表示する事が出来ました♪
覚え書きは後で書こう!

テスト投稿です~。

長毛の時の武蔵くん 短毛の武蔵くん

むちゃの画像をクリックしてみて下さいませ。ウィンドウ上に画像が表示

されていると思いますが・・・(-_-;)

チワワの武蔵くんです。チワワって凄い毛が抜けると飼ってみて知りました。
ロングなのに丸刈り。ワハハヽ(^▽^)人(^▽^)人(^▽^)ノワハハ

ただ今は、Highslide JSではなくLightbox JS で画像を表示するで表示しています。

September 24, 2007

勝手にバトン。

koalaさまの記念すべき100話。。の記事で毎日歩いているのに
中々気づく事がないのに気づき・・・勝手にバトンを受け取り(-_-;)
私も家の前のマンホールを見てベイブリッジだ~と感動しました。

横浜マンホール

September 18, 2007

トラックバックURLのコピー


トラックバックURLをワンクリックでコピーする。
参考:
●デザイン⇒テンプレート⇒テンプレートモジュール⇒トラックバック
<div id="trackbacks-info">
<p>このエントリーのトラックバックURL:<br />
<$MTEntryTrackbackLink$></p>
</div>

<$MTEntryTrackbackLink$>部分に下記を入れます。
<input tabindex="1" accesskey="x" name="trackback_url" size="50"
value="<$MTEntryTrackbackLink$>" readonly="readonly"
class="edit" id="trackback_url" onfocus="this.select()"
/> <input type="button" value="copy(win+IE)" 
onclick="window.clipboardData.setData('text', '<$MTEntryTrackbackLink$>')"/>

size="50"=幅
value="copy(win+IE)" =ボタンの名前
ただし、使用可能なのはOS:Windows・ブラウザ:IEのみです。

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,"MS Pゴシック",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は、サブメニューがありますのでブルーの部分の
数字は必ず統一する。数字が違うと正しい動きをしません。

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;/*ホバー時のカラーを設定します */
}

September 12, 2007

スクロールバー

スクロールバーの色を変更する。
 ●デザイン⇒テンプレート⇒スタイルシート(メイン)
   下記コードをコピーして再構築

html { 
scrollbar-base-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #8fabbe;
scrollbar-3dlight-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}

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;
}

September 10, 2007

コメントに絵文字


The blog of H.Fujimotoさまの壱さまにご指導頂きました。
エントリーに絵文字を使えるように出来ました。
 参考:エントリーとコメントで絵文字を使えるようにするプラグイン(MT4専用版・その2)
コメントに絵文字
1.昨日のエントリエントリーに絵文字でInsertIcon_1_20.zipをインストールした
 前提とします。まだの方はまずエントリーに絵文字をインストールして下さい。
2.コメントでimgタグを使えるようにします。
 ●ダッシュボード⇒設定⇒ブログの設定⇒コメント
  HTMLタグを制限をカスタム設定にして下記をコピーしてペーストする。
a href,b,i,br/,p,strong,em,ul,ol,li,blockquote,pre,img src class width height alt


3.コメント入力フォームに絵文字入力機能を追加します。
 ●デザイン⇒テンプレート⇒テンプレートモジュール⇒コメント入力フォーム
  コメント入力フォーム内の<textarea>後に、以下を追加する。
<br />
<MTInsertIconListJS mode="tag">

<div id="comments-open-text">
    <label for="comment-text">Comments <MTIfAllowCommentHTML>(スタイル用のHTMLタグを使うことができます)</MTIfAllowCommentHTML></label>
    <textarea id="comment-text" name="text" rows="15" cols="50">
    <MTIf name="comment_preview_template">
        <$MTCommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$>
    </MTIf>
    </textarea><br />
<MTInsertIconListJS mode="tag">
</div>

September 9, 2007

エントリーに絵文字


The blog of H.Fujimotoさまの壱さまにご指導頂きました。
エントリーに絵文字を使えるように出来ました。
エントリーに絵文字
1.スクリプトのダウンロード・アップロード
  下記のスクリプトをダウンロードします。
  InsertIcon_1_20.zipを解凍すると下記のようなフォルダが出来ます。
  plugins
   └InsertIcon
    └lib
     └InsertIcon
      └L10N
  mt-static
   └plugins
    └InsertIcon
     └images
      └js
2.画像の用意
  mt/mt-static/plugins/InsertIcon/images内へ画像をアップロードする。
  当ブログは、1キロバイトの素材屋さんさまから画像をお借りしております。
3.InsertIcon.jsの書き換え
mt/mt-static/plugins/InsertIcon/js内のInsertIcon.jsを開いて下記のように書き換えます。
var mt_icons = [
    [ "ファイル名", "説明", 幅, 高さ ],
    [ "ファイル名", "説明", 幅, 高さ ]
];

var mt_icons = [
        [ "1.gif", "男の子", 11, 11 ],
        [ "2.gif", "女の子", 11, 11 ],
        [ "3.gif", "携帯", 11, 11 ],
        [ "4.gif", "パソコン", 11, 11 ],
        [ "5.gif", "ファイト", 11, 11 ],
        [ "6.gif", "ナイス", 11, 11 ],
        [ "7.gif", "グー", 11, 11 ],
        [ "8.gif", "チョキ", 11, 11 ],
        [ "9.gif", "パー", 11, 11 ],
        [ "10.gif", "くるま", 11, 11 ],
        [ "11.gif", "ひこうき", 11, 11 ],
        [ "12.gif", "でんしゃ", 11, 11 ],
        [ "13.gif", "?", 11, 11 ],
        [ "14.gif", "!", 11, 11 ],
        [ "15.gif", "ハート", 11, 11 ],
        [ "16.gif", "とけい", 11, 11 ],
        [ "17.gif", "おうち", 11, 11 ],
        [ "18.gif", "マイク", 11, 11 ],
        [ "19.gif", "♪", 11, 11 ],
        [ "20.gif", "しょくじ", 11, 11 ],
        [ "21.gif", "ケーキ", 11, 11 ],
        [ "22.gif", "ビール", 11, 11 ],
        [ "23.gif", "ゆき", 11, 11 ],
        [ "24.gif", "くもり", 11, 11 ],
        [ "25.gif", "はれ", 11, 11 ],
        [ "52.gif", "あめ", 11, 11 ],
        [ "26.gif", "つき", 11, 11 ],
        [ "28.gif", "ねこ", 11, 11 ],
        [ "29.gif", "ねずみ", 11, 11 ],
        [ "30.gif", "ニコ", 11, 11 ],
        [ "31.gif", "ニコニコ", 11, 11 ],
        [ "32.gif", "ブー", 11, 11 ],
        [ "33.gif", "シュン", 11, 11 ],
        [ "34.gif", "プレゼント", 11, 11 ],
        [ "36.gif", "でんきゅう", 11, 11 ],
        [ "53.gif", "$", 11, 11 ],
        [ "37.gif", "ドクロ", 11, 11 ],
        [ "38.gif", "おんせん", 11, 11 ],
        [ "39.gif", "かんらんしゃ", 11, 11 ],
        [ "40.gif", "CD", 11, 11 ],
        [ "41.gif", "DVD", 11, 11 ],
        [ "42.gif", "Zzz", 11, 11 ],
        [ "43.gif", "ハンバーガー", 11, 11 ],
        [ "44.gif", "ツリー", 11, 11 ],
        [ "45.gif", "クロバー", 11, 11 ],
        [ "46.gif", "Windows1", 11, 11 ],
        [ "47.gif", "Mac", 11, 11 ],
        [ "48.gif", "Windows2", 11, 11 ],
        [ "49.gif", "IE", 11, 11 ],
        [ "50.gif", "Netscape", 11, 11 ],
        [ "51.gif", "むちゃ", 11, 11 ]
];

4.Movable Typeのインストール先 mtディレクトリ内へアップロード。
   plugins/InsertIcon⇒mt/plugins内にInsertIconをアップロード。
   mt-static/plugins⇒mt/mt-static/plugins内にInsertIconをアップロード。

1   2