Category Archives: 表示

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」ディレクトリにアップします。

  1. 「ヘッダー」テンプレートにJavascriptへのリンクを記載して保存します。
    <script type="text/javascript" src="<$MTBlogURL$>highslide/highslide-with-gallery.js"></script>
    <script type="text/javascript">
    hs.graphicsDir = '<$MTBlogURL$>highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    //hs.dimmingOpacity = 0.75;
    
    // Add the controlbar
    if (hs.addSlideshow) hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: false,
    overlayOptions: {
    opacity: 1,
    position: 'top right',
    hideOnMouseOut: false
    }
    });
    </script>
  2. 「スタイルシート」テンプレートに
    CSSのスクリプトを追加します。

    この外部CSSファイルはダウンロードしたファイルの中で自分が目的とする表示方法のものから書き出しました。

  3. Movable Typeの管理画面から画像ファイルをアップロードし、タグの中に
    class="highslide" onclick="return hs.expand(this)"

    を記述します。
    ちなみにこれは
    Movable Type4→mt/lib/MT/Asset/image.pm
    Movable Type3→mt/lib/MT/App/CMS.pm
    を修正すると今後自動的に付加されるようになります。参考サイト

  4. 拡大画像にキャプションを入れる場合はの後に
    <div class="highslide-caption">
        キャプション文
    </div>

    を入れます。

[サンプル]
エルモ(Highslideデモ)

いい年してエルモ大好き〜♪

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


  1. まずGoogle codeよりスクリプトをダウンロードします。
  2. 解凍して出てきたファイルのうち「dp.SyntaxHighlighterエStylesエSyntaxHighlighter.css」の内容をスタイルシートテンプレートに転載します。
  3. ブログディレクトリに「syntaxhighlighter」というディレクトリを作り、そこにjavascriptをアップロードします。

    私はxhtml、CSS、Javascriptを掲載したいので

  4. shCore.js

    shBrushXml.js

    shBrushCss.js

    shBrushJScript.js

    をアップロードしました。
    さらに

    clipboard.swf

    も同じディレクトリにアップロード。

  5. ブログの入力の際に、公開するコードを例えばxhtmlの場合
  6. で囲みます。

  7. さらに「フッターテンプレート」にjavascriptのリンクコードを挿入します。
      <script type="text/javascript" src="<$MTBlogURL$>syntaxhighlighter/shCore.js"></script>  
       <script type="text/javascript" src="<$MTBlogURL$>syntaxhighlighter/shBrushJScript.js"></script>  
       <script type="text/javascript" src="<$MTBlogURL$>syntaxhighlighter/shBrushCss.js"></script>  
       <script type="text/javascript" src="<$MTBlogURL$>syntaxhighlighter/shBrushXml.js"></script>
       <script class="javascript" type="text/javascript">  
          dp.SyntaxHighlighter.HighlightAll('code');  
          dp.SyntaxHighlighter.ClipboardSwf = '<$MTBlogURL$>syntaxhighlighter/clipboard.swf';
       </script>  
  8. 公開するコード部分はこのままでは表示されないので、実体参照に変換する必要があります。

    私はMovableType用EntityRefButtonプラグイン v0.2.2を使わせていただいています。(後述)

  9. これできれいにソースコードが表示されるようになりましたヽ(・ω・)ノ

参考サイト