ぷにるたんスタートをバージョンアップ
変更点とか
先週、公開したSleipnir Start×ぷにるたん(通称：ぷにるたんスタート)ですが、思いのほか好評だったようでありがたいことです。
公式Twitter垢の@Fenrir_newsにも取り上げていただきました。
で、コメントに画像が左寄りになるというのが来ていて、IE8環境で起こるみたい*1だったので少し遅くなりましたが確認および修正しました。*2
また、フォクすけバージョンを作成し同梱しています。
ついでに、元から個人個人が自由に改造してオレオレデザインなSleipnir Startを作ることを念頭にスクリプト書いてたんですが、もう一段改良を加えて一層改造に手を出しやすくしてみました。
改造についての詳しいことは後述します。
※それに伴い各種設定をiniファイルから読み込むようにしてみました。*3
ダウンロード
※そのまま上書きしても問題ないとは思うんですが、念のために以前のバージョンは一旦削除してからインストールしてください。
※念のため旧バージョンも残してあります。
ダウンロード
改造について
ここからはぷにるたんスタートを改造して、自分用にカスタマイズする方法です。
基本的な情報を書くにとどめていますので、詳しいことを知りたい方は人に聞く前にまず自分で検索するといいでしょう。
モデル名決定
最初はどういうものを作るか、そしてそのデザインの名前を決めましょう。*4
ぷにるたんスタートの場合は"pnir_tan"です。
決まったら、"SleipnirStartDesignHack"フォルダにモデル名でフォルダを作ってください。
画像編
※画像を作成・加工するのに不慣れな人も多いと思うので、ボディ部のフレームに関しては"16色×2パターン(不透明/半透明[50%])+透明"の計33パターンを用意しておきました。ダウンロード*5
先ほど作ったモデル名のフォルダに"pnir_tan"フォルダから画像を全部コピーしてきましょう。
そして、"pnir_tan_◯◯.png"となっていますので先頭の"pnir_tan"の部分をモデル名に変更してください。*6
※上述の"33パターン"のを使う場合は先頭にモデル名を追記してください。
あとは好きなように画像を差し替えたりしてください。
※画像を変えるとどうなるか簡単に試せるように上記の"33パターン"を利用して、動作確認用を作っておきました。DL、解凍＆フォルダ配置後にiniファイルのGeneralセクションのModelキーの値を変えてSleipnir Startをリロードしてみてください。ダウンロード*7
※面倒だったんで、png形式だけにしか対応していませんので注意してください。
なお、私個人はPictBear SEとPaint.Net(ともに無料)を主に使用しています。
iniファイル編
iniファイルはこんな構成になっています。
[◯◯]
△△=□□
△△△=□□□
◯◯の部分がセクションです。
△△=□□、△△△=□□□の部分がパラメータといいます。*8
パラメータの内で"=(イコール：等号)"の左側つまり△△、△△△の部分をキーとか名前とか言います。
そして"="の右側の□□、□□□の部分を値だとか言います。
※今回は"値"の部分だけを変更します。
※"値"に空白文字(スペース)が含まれる場合は""(ダブルクォーテーション：2重引用符)"で括りましょう。
※値に関しては【】内のCSSプロパティを調べると参考になると思います。
※色に関してはCSSで記述可能な方法ならどれでも行けるとは思いますが、テストしてないのでRGB16進数表記以外での保証はしません。
※《》はぷにるたんスタートでの値
1.Generalセクション
Model：モデル名
2.Backgroundセクション
BodyBackgroundColor：背景色【background-color】
BodyBackgroundImageRepeat：背景画像の繰り返し方法【background-repeat】
BodyBackgroundImagePositionX：背景画像の配置場所。横方向【background-position-x】
BodyBackgroundImagePositionY：背景画像の配置場所。縦方向【background-position-y】
SetBodyBackgroundImagePosition：背景画像の配置場所の使用方向(x,y それ以外だと両方向)
3.Headerセクション
HeadBackgroundColor：ヘッダ部の背景色【background-color】
HeadTextColor：ヘッダ部のテキストカラー【color】
HeadGoogleTextColor：ヘッダ部の"Google Links"の部分のテキストカラー【color】
※ヘッダのホバー時の色はどこを上書きすれば書き換えられるのかがわからない。判明したらアップデートします。
4.BodyLogoセクション
BodyLogoPopupTitle：ボディ部ロゴのポップアップテキスト《 ぷにるたん 》
BodyLogoHref：ボディ部ロゴのリンクURI《 http://twitter.com/pnir_tan 》
5.BodyFrameセクション
SetBodyFrame：ボディ部の外周フレームに背景色を使用するか(true,false)
BodyFrameBackgroundColor：ボディ部の外周フレームの背景色【background-color】
SetBody：ボディ部のメイン部分に背景色を使用するか(true,false)
BodyBackgroundColor：ボディ部のメイン部分の背景色
※基本的には"false"で。ボディフレーム部の画像作るの('A`)ﾏﾝﾄﾞｸｾって場合は、ボディフレーム部を透明にしてこちらで設定するといいんじゃね。
6.Footerセクション
FooterLinkTextColor：フッタ部の各種リンクのテキストカラー【color】
FooterCopyrightTextColor：フッタ部のコピーライトのテキストカラー【color】
7.BackgroundLogoセクション
ImgRightExpression：ロゴ画像(右側)を使用するか(true,false)
ImgRightWidth：ロゴ画像(右側)の横幅(px：単位の必要なし)【width】
ImgRightHeight：ロゴ画像(右側)の高さ(px：単位の必要なし)【height】
ImgRightX：ロゴ画像(右側)の右端からのマージン(要単位)【margin-right】
ImgRightY：ロゴ画像(右側)の上端からのマージン(要単位)【margin-top】
ImgLeftExpression：ロゴ画像(左側)を使用するか(true,false)
ImgLeftWidth：ロゴ画像(左側)の横幅(px：単位の記述なし)【width】
ImgLeftHeight：ロゴ画像(左側)の高さ(px：単位の記述なし)【height】
ImgLeftX：ロゴ画像(左側)の左端からのマージン(要単位)【margin-left】
ImgLeftY：ロゴ画像(左側)の上端からのマージン(要単位)【margin-top】
※IE9以外は2つの画像をともに"true"にして同時に表示させようとすると崩れます。
8.Textセクション
WordStringExpression：テキストを挿入するか(true,false)
WordString：テキスト《あなたのスタートページに》(innerHTMLのためタグの使用可)
WordStringTextColor：テキストのテキストカラー【color】
WordStringFontFamily：テキストのフォント指定(フォント名に空白がある場合は"'(シングルクォート)"で括る。例：'ＭＳ ゴシック')【font-family】
WordStringFontSize：テキストのフォントサイズ(要単位)【font-size】
WordStringMarginTop：フッタ部分からのテキストの縦方向マージン(要単位)【margin-top】
WordStringMarginLeft：文字列のテキストマージン(要単位)【margin-left】
WordLinkExpression：リンクを挿入するか(true,false)
WordLinkHref：リンクのURI《http://www.sleipnirstart.com/》
WordLinkString：リンクのアンカーテキスト《Sleipnir Start》
WordLinkTextColor：リンクのテキストカラー【color】
WordLinkFontFamily：リンクのフォント指定(フォント名に空白がある場合は"'(シングルクォート)"で括る。例：'Arial Black'【font-family】
WordLinkFontSize：リンクのフォントサイズ(要単位)【font-size】
WordLinkMarginTop：リンクの縦方向マージン(要単位)【margin-top】
WordLinkMarginLeft：リンクの横方向マージン(要単位)【margin-left】
SetHomePage：リンククリック時のホームページ設定ダイアログを使用するか(true,false)
9.B_Readerセクション
SetReaderHack：B!リーダー展開時に背景画像を使用するか(true,false)
HiddenText：B!リーダー展開時に挿入テキストを隠匿するか(true,false)
※Textセクションの表示をfalseにしている場合は、"HiddenText"はfalseにしておかないとエラーが出ます。
*1:それ以下でも起こる気がするが環境無いから∩( ・ω・)∩
*2:Windows XP SP3+IE8+Sleipnir 2.9.6で確認
*3:iniファイルの読み込みはSHOJI's Code（Wiki）のコードを一部改造して利用しています。
*4:Sleipnirにおいて"デザイン"という語は被って紛らわしいので、以下"モデル"と呼称します
*5:色名がついてますが、CSSだとかJISだとかで定義されている色見とは異なるものがあります
*6:画像はモデル名ごとにフォルダが分けられていて、名前の衝突の心配は無いはずなのになんでこういう仕様にしたんだっけか？ｗ
*7:zipだとファイルサイズが大きくなって怒られたので、これだけ7zipで圧縮しています
