表示アーカイブ: モカモカ工房

Movable TypeにBJKitを導入→アンチエイリアスの効いた美しい文字に

　Movable Typeでは、ヘッダーのタイトルや記事ごとの見出しがテキストで表示されます。　普段Macを使っている私としては、WindowsでMovable Typeを見た時にテキストにギザギザが出るのが気になっていました。

　そんな中年乙女の悩みを解決してくれるのが、この「BJKit」です。
　指定したテキストをFlashを使って任意のアンチエイリアスのピリッと効いたフォントに変換してくれるのです！　　すごい！

続きを読む "Movable TypeにBJKitを導入→アンチエイリアスの効いた美しい文字に"

Movable Type3：PHP化しないでページ分割「PageBute」

　このブログ以外に私はモカの腹というブログをやっています。（こっちの方がはるかに繁盛しているのですが(^.^;)）

　そちらがまだMovable Typeの3.34なのです。
　近いうちにMovable Type4に上げたいとは思っているのですが、テンプレートを作り直さなければいけないので二の足を踏んでいます。

　しかし、そんな悠長なことを言られない問題が一つあります。
　全体のエントリー数が1300を超え、アーカイブあたりのエントリー数が非常に多くなってしまっているのです。
　カテゴリーによっては160もエントリーがあるものまであります。

　これではいけないと思い、ページ分割を導入することにしました。
　ページ分割はMTPaginateを使うのが一般的だと思うのですが、PHP化が必要です。
　「めんどーだわ〜」
　などと思って調べていたら、PHP化しないでページ分割出来るプラグインがありましたヽ(^。^)ノ

　さてさてその方法は...

続きを読む "Movable Type3：PHP化しないでページ分割「PageBute」"

Movable Typeに「syntaxhighlighter」を導入

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

　まずはあなたのソースコードを彩る、Syntax Highlighterまとめを読んで何を使うか検討。
　Yahooやコリス様などでも使われていて、デザインもきれいということで syntaxhighlighterに決めました。

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

<script type="text/javascript" src="http://mocamoca.biz/blog/dayChecker.js"></script>
<script type="text/javascript" src="http://mocamoca.biz/blog/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://mocamoca.biz/blog/" accesskey="1">モカモカ工房</a></h1>
<p class="blog-description">Web関連情報（CSS、SEO、ネットワーク等々）</p>
</div>

　といった具合にコマンドを色分けし、行番号をつけてソースコードを表示することが出来ます。
　plain textで表示させたり、印刷したりすることも出来ます(^-^)v

続きを読む "Movable Typeに「syntaxhighlighter」を導入"

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

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

Highslideの公式サイトからファイルセットをダウンロードします。（非商用サイトでは無料です）
ブログのディレクトリの中に「highslide」というディレクトリを作り、その中に「highslide.js」をアップロードします。
ダウンロードしたファイルセットの中のindex.htmlをブラウザで表示させると、いくつかの画像の表示パターン（白枠あり／なしなど）があるので、好きなのを選びます。
　私は「Drop shadow and no border, semi transparent close button」というのを選択しました。
そのサンプルファイルである「example-no-border.html」のソースコードからCSS部分を別ファイルにし、「highslidenoborder2.css」という名前をつけて「highslide」ディレクトリにアップします。

続きを読む "Movable Type4の画像表示用に「highslide.js」の導入"

モカモカ工房

カテゴリー「表示」の一覧

Movable TypeにBJKitを導入→アンチエイリアスの効いた美しい文字に

タグ:

Movable Type3：PHP化しないでページ分割「PageBute」

タグ:

Movable Typeに「syntaxhighlighter」を導入

タグ:

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

タグ: