Article ID : 104
Loggix 9.7.28 のカスタマイズ内容(まとめ)
旧Ganesha's Lab.(by SQLite2版Loggix)より移転転記。(2009-12-13)
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ファイル構成には欠点がある」と書き、その処方箋も提示しておいたが、今回のアップデートを機に、この処方箋を実行に移した。
-
まず、/theme/css/default/default.css をdefault_origin.css にリネームした上で、3行目~5行目までの@import構文を削除する。
-
新たな 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に対して、どんな修正を行ったのかが一目瞭然となる。
-
/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 と違って少ないので、直接追記してもどこを修正したか分からなくなる心配は少ない。
-
/theme/css/default/user_custom.css については、好みに合わせてカスタマイズすれば良い。一連の修正でCSS編集はこのファイルのみで行えるようになったので、後の管理は大変楽になると思う。
/theme/js/scripts.js のカスタマイズ
ここでは以前のエントリー、Loggix:imgタグのカスタマイズで行ったものと同じ修正を行う。今回のアップデートで scripts.js の内容も随分変わっているようだが、基本的には同じやり方で修正できた。
まず、修正が必要なのは266行目~267行目だ。
- 修正前
var attachCode = '<img src="./data/resources/' + file + '" alt="' + file + '" />';
- 修正後
var attachCode = '<img src="./data/resources/' + file + '" width="' + fileWidth + '" height="' + fileHeight + '" alt="' + file + '" />';
次に、273行目~276行目を修正する。
- 修正前(見やすくするために改行を追加しています)
attachCode = '<a href="./data/resources/' + file + '" class="colorbox">' + '<img src="./data/resources/' + file + '" alt="' + file + '" />' + '</a>';
- 修正後
attachCode = ''<a href="./data/resources/' + file + '" class="colorbox">' + ''<img src="./data/resources/' + file + '" width="' + fileWidth + '" height="' + fileHeight + '" alt="' + file + '" />' + ''</a>';
この修正により、最新版Loggix でも、タグボタンでimgタグを挿入する際に自動的に画像ファイルのwidth値とheight値を取得し、挿入するようになった。
ように見えたが、この機能、IEでないと正常に動作しない。以前のバージョンでも正常に動作しないブラウザがあったが、Safari、Firefox、Opera が全部ダメということは無かった。(ダメなのは一種類だけだったはず)今度のバージョンでは、IE以外のブラウザは全滅だ。IE必須ってのは、ちょっと困るなあ。
トラックバック (0)
< No Trackbacks >
コメント (0)
< No Comments >