Category Archives: 表示

Movable Typeに「syntaxhighlighter」を導入

Movable Typeに書いたソースコードをきれいに見せたいと思い、syntaxhighlighterを導入してみまいした。

まずはあなたのソースコードを彩る、Syntax Highlighterまとめ を読んで何を使うか検討。

Yahooやコリス様などでも使われていて、デザインもきれいということで syntaxhighlighterに決めました。

これを導入することにより

<script type="text/javascript" src="http://elmosuki.m50.coreserver.jp/biz/dayChecker.js"></script>
<script type="text/javascript" src="http://elmosuki.m50.coreserver.jp/biz/highslide/highslide.js"></script>
</head>
<body class="layout-two-column-right" onload="mtEntryOnLoad()">
<div id="box" class="clearfix">
<a name="pagetop" id="pagetop"></a>
<div id="header">
<h1 id="blog-name"><a href="http://elmosuki.m50.coreserver.jp/biz/" accesskey="1">モカモカ工房</a></h1>
<p class="blog-description">Web関連情報(CSS、SEO、ネットワーク等々)</p>
</div>

といった具合にコマンドを色分けし、行番号をつけてソースコードを表示することが出来ます。

plain textで表示させたり、印刷したりすることも出来ます(^-^)v

続きを読む

Movable Type4の画像表示用に「highslide.js」の導入

今までこのブログでは画像の拡大表示に「Lightbox」を使っていたのですが、小粋空間様のJavascript(menufolder.js、ajaxCalendar.js、dayChecker.js)とぶつかってしまうようなので、「Highslide」に変更しました。

  1. Highslideの公式サイトからファイルセットをダウンロードします。(非商用サイトでは無料です)
  2. ブログのディレクトリの中に「highslide」というディレクトリを作り、その中に「highslide.js」をアップロードします。
  3. ダウンロードしたファイルセットの中のindex.htmlをブラウザで表示させると、いくつかの画像の表示パターン(白枠あり/なしなど)があるので、好きなのを選びます。

    私は「Drop shadow and no border, semi transparent close button」というのを選択しました。

  4. そのサンプルファイルである「example-no-border.html」のソースコードからCSS部分を別ファイルにし、「highslidenoborder2.css」という名前をつけて「highslide」ディレクトリにアップします。

続きを読む