Loggix 9.7.28 へのアップデート時点でカスタマイズしている内容のまとめ。内容的には以前のエントリーの焼き直しが多いけど、あちこち散らばってしまっているので、ここにまとめておきます。

/.htaccess のカスタマイズ

XREAサーバーの自動広告挿入スクリプトを止めるためのカスタマイズです。/.htaccess に次の一文を追記します。

LayoutIgnoreURI /loggixを設置したディレクトリ名/*

/theme/base.html のカスタマイズ

最新版のファイルを開くと、jQuery や ColorBox 関係のコードがどっと増えていてびっくりする。このファイルの変更点の多さが、今回のアップデートでバックアップ／上書き方式を採らなかった理由のひとつ。カスタマイズしてる部分の方が、修正点がずっと少ない。

38行目の <div id="header"> と39行目の <h1> ～省略～ </h1> の間に、XREAサーバーの手動広告挿入コードを追記します。こんな感じです。

<div id="header">
<!-- Begin #xrea_ad -->
<div class="xrea">
<a href="http://img.xrea.com/ad_click.fcg">
<img height="60" src="http://img.xrea.com/ad_img.fcg" 
width="468" alt="XREAサーバーの広告です" />
</a>
</div>
<!-- End #xrea_ad -->
<h1>　～省略～　</h1>

また、40行目のBlogサブタイトル部分を修正します。

<p>～私的な技術系・物欲系メモ。</p>

CSS関係のカスタマイズ

以前のエントリー、当BlogのHeader周りのデザインをようやく修正で「Loggix のCSSファイル構成には欠点がある」と書き、その処方箋も提示しておいたが、今回のアップデートを機に、この処方箋を実行に移した。

1. まず、/theme/css/default/default.css をdefault_origin.css にリネームした上で、3行目～5行目までの@import構文を削除する。

2. 新たな default.css を作成する。その内容は下記のとおり。

   @charset "utf-8";
   @import url(default_origin.css);
   @import url(../_import/text.css);
   @import url(text.css);
   @import url(modules.css);
   @import url(user_custom.css);
   

   1.と2.の変更の目的は、オリジナルの default.css 内で指定されているCSS指定を保持しながら、user_custom.cssで上書き指定可能にするためだ。これによって、オリジナルのCSSに対して、どんな修正を行ったのかが一目瞭然となる。

3. /theme/css/default/win_ie.css の修正

   同じ目的で、win_ie.css の修正を行う。 オリジナルの win_ie.css では、default.css を@importしているが、@importの階層化はパフォーマンスが落ちるそうなので、各CSSファイルを直接@importするように改める。

   @import url(default_origin.css);
   @import url(../_import/text.css);
   @import url(text.css);
   @import url(modules.css);
   @import url(user_custom.css);
   

   上記の通り、@import構文の部分は default.css と同じになる。 なお、以前のバージョンの Loggix では、当Blogのデザインだとヘッダー周りのCSS指定をIEのみ微調整する必要があったが、最新版ではその必要が無くなった。 また今度微調整が必要になった場合は、win_ie.css に追記して行えばよい。 win_ie.css の記述内容は、オリジナルの default.css と違って少ないので、直接追記してもどこを修正したか分からなくなる心配は少ない。

4. /theme/css/default/user_custom.css については、好みに合わせてカスタマイズすれば良い。一連の修正でCSS編集はこのファイルのみで行えるようになったので、後の管理は大変楽になると思う。

/theme/js/scripts.js のカスタマイズ

ここでは以前のエントリー、Loggix：imgタグのカスタマイズで行ったものと同じ修正を行う。今回のアップデートで scripts.js の内容も随分変わっているようだが、基本的には同じやり方で修正できた。

まず、修正が必要なのは266行目～267行目だ。

• 修正前

    var attachCode  = '<img src="http://monolog.devgiri.org/data/resources/'
                    + file + '" alt="' + file + '" />';

• 修正後

    var attachCode  = '<img src="http://monolog.devgiri.org/data/resources/'
                    + file + '" width="' + fileWidth
                    + '" height="' + fileHeight
                    + '" alt="' + file + '" />';

次に、273行目～276行目を修正する。

• 修正前（見やすくするために改行を追加しています）

        attachCode  = '<a href="http://monolog.devgiri.org/data/resources/'
                    + file + '" class="colorbox">'
                    + '<img src="http://monolog.devgiri.org/data/resources/'
                    + file + '" alt="' + file + '" />'
                    + '</a>';

• 修正後

        attachCode  = ''<a href="http://monolog.devgiri.org/data/resources/'
                    + file + '" class="colorbox">'
                    + ''<img src="http://monolog.devgiri.org/data/resources/'
                    + file + '" width="' + fileWidth
                    + '" height="' + fileHeight
                    + '" alt="' + file + '" />'
                    + ''</a>';

この修正により、最新版Loggix でも、タグボタンでimgタグを挿入する際に自動的に画像ファイルのwidth値とheight値を取得し、挿入するようになった。

ように見えたが、この機能、IEでないと正常に動作しない。以前のバージョンでも正常に動作しないブラウザがあったが、Safari、Firefox、Opera が全部ダメということは無かった。（ダメなのは一種類だけだったはず）今度のバージョンでは、IE以外のブラウザは全滅だ。IE必須ってのは、ちょっと困るなあ。