世界の端っこ行き止まり (現在実験中)

X.改造３…スタイルシートはどこだ
さて、２の内容はとりあえず横においておくとして…。
スタイルシートとかテンプレート、操作できないですよね。
普通に管理画面から触ろうとしても。
でも、どんなスタイルシートを使っているかは分るんですよ。

Blogをブラウザで表示して、右クリックメニューから
[ソースの表示(V)]を選びましょう。
IEじゃない人は該当するメニューを選択して下さい。
表示されましたね？ソース。

<link rel="stylesheet" href="http://track-back.net/kourin/style.css" type="text/css" />

こいう行が上の方にあるはずです。
これは<link>タグといって、指定されたファイルを読み込め
とブラウザに命令しているものです。
relやtypeというのは読み込まれるファイルがどんなものか明示しています。
見ての通り、スタイルシートですね。
というわけで、こいつを表示してみましょう。
hrefの中身をブラウザのアドレス欄にぶちこんで[Enter]です。

恐らく、ブラウザにスタイルシートの内容が表示されるか、
既にダウンロード済みのスタイルシートの内容がソースを開く際に
使用するエディターで表示されるはずです。
とりあえず…　その内容を保存です。
ブラウザに表示された人は、まるコピーしてメモ帳にでもはっつけて
何か適当な名前に拡張子は"css"で保存して下さい。
とりあえず私は"maid2style.css"とでもしておきます。

で、まぁ、つらつらーっと見ていくと、見難いです。
ですのでたたーっと修正してみました。
どっか他の方にでもあげておきます。

さて、スタイルシートはゲットできました。
いつぞどっかで書きましたよね、スタイルシートを変えるだけで
画面ががらりと変わる…　と。

ではやってみましょー。
Blogの管理画面へ行き、スキンをフリースタイルに変更して下さい。
そして、スタイルシートとして、ついさっき保存したファイルの内容を
ぺぺっとコピペしましょう。
元の奴はきちんと上書きして消すなり、最初に消しておくなりする事。
保存してBlogを表示してみますと…

・
・
・

えーっと、ほとんどの部分では正常に表示されていますが、
どうやらＴＯＰのボタンの部分やBlog説明が巧くいっていないようです。
特にボタンや証券会社や署名が表示されてないのが問題っぽい。
ですが、ほとんどの部分で巧くいっている事に価値がある！
もしかしたら、使用している既製スキンによってはこの段階で巧く表示
されている人もいるかもしれませんね。
その場合はとりあえずそれはそれで問題ありません。

が、私の場合、これをどうにかしない事にはダメそうです…。
さてはて…。


XI.改造４…メインテンプレートの修正
スタイルは巧くいってそうです。
となると、恐らく問題はテンプレートの方でしょう。
とりあえずはメインテンプレートの内容をコピーしてファイル化します。
まずはこいつを土台にして問題点を調べていきましょう。

で、比較する対象が無い事には始まりませんので、
スキンは元のメイドさんの奴に戻して…ついでに左右のパーツは
今の作業にはちょっと邪魔なので外します…で、Blog表示。
うん、やっぱりずれてますね。
とりあえず、ボタンや証券会社とかの部分をどうにかしてみます。
この状態でソース表示、両脇のパーツが少ないのでソースもすっきり。
で、表示したソースをコピペしてファイル化します。
これでテンプレートファイルと見比べる事ができますね。
よっく見比べて、あるものと無いものの違いを探してください。



で、正解を述べますと…。
○ブログ説明文の場所
テンプレートファイルの<!-- title -->と書かれている所。
<!-- title -->
<div id="header">
　<h1><div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div></h1>
　<h2><div class="blog_description">{$BlogDescription$}</div></h2>
</div>
<!-- title -->
BlogName〜ブログの名前　BlogDescription〜ブログの説明　如何にもじゃないですか。
そう、ここがフリースキンにスタイルを適用した時、Blogの説明が上に出ていた原因です。
でもまぁ、これはこの方がいいかなー　と思うのでこのままにしておきます。

○ボタンとかロゴとかの場所
既製メイドスキンには以下の行がありますが、テンプレートにはありません。
btn…これよくbuttonの短縮形として使う文字です。
これのすぐ下にはブログの説明文があります。表示画面でもそうでしたよね？
十中八九、これがボタン部分と見て問題ないでしょう。
こいつをテンプレートの方に移植します。
位置は…見比べるとタイトルの下が丁度よさそうですね。こぴぺっと。
ついでに、テンプレートと既製ソースの違いで、このすぐ下に
<div class="clear"></div>
というのがあるかないかってのがあります。
よくわかりませんが、とりあえずこいつも一緒に移植して置きます。

<!-- btn -->
<div id="btn">
　<A href="http://spmax.jp/redirect/click_log.php?id=01881126000002" target="_blank">
　　<IMG title=himawari src="/template/118/img/himawari.gif"></A>
　<a href="http://track-back.net/kourin/profile">
　　<img src="/template/118/img/btn_profile.gif" title="profile"></a>
　<a href="http://track-back.net/kourin/biography">
　　<img src="/template/118/img/btn_bio.gif" title="biography"></a>
　<a href="http://track-back.net/kourin/">
　　<img src="/template/118/img/btn_blog.gif" title="blog"></a>
</div>
<!-- btn -->

ちなみに、会社とか書いた人の名前が書いてある部分はきっちり移植する事。
で、もしisaoからその伸張した素材消せ言われたら素直に従う事。


と、流石にこれ読んで興味もって作業してる人が
どの位のペースで進んでいるか分らないのでちゃっちゃと正解をだしましたが、
こんな感じでテンプレートと実際に出力されるhtmlソースを見比べて、
地道に齟齬を解消していくのが基本作業となります。
で、こっちの方がいいやと思ったら放置するのはＯＫなのですが、
これは気に入らないから直したいとかは現段階ではスルーして下さい。
一度にあれこれ弄ると絶対自爆しますので、とりあえずの目標は、
既製スキンに近づける…　でいきます。


では、ここらへんをコピペしたテンプレートソース＋保存したスタイルシート
で再度表示をして見ましょう。
その状態が、今のうちのBlogのメインテンプレート表示ページです。
ぱっと見、既製スキンみたいでしょ？
まぁ、既製スキンのスタイル使ってますしね、当然なんですけど。
BlogDiscriptionが上にいるのが既製スキンと違う証拠ですね。

あー　そうだ　フリースキンモードにすると、ログインボタンがなくなります。
自分で作らないといけません。
これやらないと、自分のページから管理画面にログインできなくなります。
Trackback-BlogのTopページからのログインが必要になります。
なので、スキンに併せてサイドバーの機能登録して下さい。
これも、テンプレートと既製スキンの出力ソースを見比べる事で見つかります。
ちなみに、現在私が作業対象にしてるメイドさんのスキンの場合…
<div align="center">
<a href="http://track-back.net/sec/MyPage.blog" target="_blank"><img src="/template/118/img/login.gif" alt="ログイン"></a>
</div>

こちらを機能追加してサイドバーにその機能を放り込めば
所定の位置に表示されます。
ちなみに、元々<div class="bunner">だかそんな感じですが、
それだとセンタリングされないので上記に変更してあります。
機能的に違いは無いので問題ないです。


と、駆け足でしたが、スタイルシートのぶっこぬき、
メインテンプレートへの反映、をやってみました。
次は他のテンプレートファイルもいじって見たいと思います。
続きを読む...

その５から１週間程あきましたが…
その６は実践編となります。
なので記事を書いてる間は画面も中途半端。
では順序だてていきましょー。

VIII.改造１…スキン選び
さて、画面は既にメイドさんなわけですが、何故メイドさんか？
だってメイドさんとか好きだから！　というのは50%位の理由でして、

今回改造するにあたって丁度いいスキンの１つだからといのがあります。
私がやってる改造は横幅の慎重と一部文字変更位のものですが、
正直な所見栄えはその程度で十分変わります。
というか、ぶっちゃけ今のメインコンテンツ表示幅が小さすぎるんです。
DCで見る事を前提にしてるならそれでもいいんでしょうけどね…。
ゲームハードとしてのDCはさておき、ブラウザーとしてのDCは、
はっきりいって、DCなんかで見てる奴が悪いで終了です。

この横幅では写真や絵をUPするのでも大きな足枷となります。
ただでさえ容量とサイズで抑制食らってるのにそりゃねーよって奴です(見栄え的に)。
かといって、既製スキンは制御できないので、
横幅伸ばしたい…程度の事すら指くわえて見てるしかありません。
横幅伸ばすだけでまともなものになるのに！なんで操作できないの！？
なら、やっちゃいましょう。

で、話を戻しますが、何で丁度いいかというと、TOP絵が修正しやすいからです。
横幅伸張するという事はTOP絵そのまま使えません。
横幅に併せて自動的にトランスフォームしてくませんからね。
つまり自分で絵を修正せなあかんのですが、絵が複雑ですと伸ばし難いのです。
規則的パターン、簡単な絵、誤魔化して不自然になりにくい絵…
そいうTOP絵をもったスキン程楽です。
逆に言えば、単に苦労の度合いや出来の不自然さ度合いの話ですので、
そこら辺、厭わない方やちょっとアレでもきにしなーい　という方は、
あえて複雑なパターンや絵のスキンを選ぶのもアリです。
私は面倒なの嫌だしメイドさん好きなのでこれで進めますけど。
とりあえず、改造楽そうなスキンを選んで決定しておいて下さい。


IX.改造２…横幅のあたりつけ
ここから作業が入ります。Ｏｋ？使うツールはWindowsのPaintツール。
Windowsユーザーなら誰しも持ってる使い辛いお絵かきツール。
ペイントツールでCopy&Paste使えればなんでよいですけどね。
まぁ、これWinユーザーなら皆もってますしね。
Linux勢は多分ヘビーな方が多いと思うのでこんな記事読むまでもなく
全部自分でやってるだろうから埒外とします。

とりあえず、己を知り敵を知らばなんとやら。
己の方は何とかしますんで、まず敵を調べてみましょう。
とりあえず、自分のBlogをブラウズして…[ALT + PrintScreen]
そして、Paintを起動して…[CTRL + P]。
自分のページがPaintにはっつけられたと思います。
そして、なんだか絵の周りに点線が表示されていると思います。
[ESC]のキーを１度押すと点線消えるので消してください。
で、デフォルトだと、左に並ぶアイコンのうち、四角点線のアイコンが
選択されていると思います。
これ、矩形を選択するツールです。
選択している領域は画面したのステータスバーに表示されます。
よく分らん人は、画面を左クリック＆ドラッグで選択しまくれば画面下で
数字がぺこぺこ動く場所があるので気がついて下さい。
ちなみに、ステータスバーの右下に２つ枠がありますが、左が現在位置。
右が矩形の範囲となっています。幅ｘ高さというやつですね。

では、Blogのサイズを調べてみましょう。
ＴＯＰ絵はほぼBlogの横幅と考えて問題ないのでこいつの横幅をメインに
つつーっとクリック＆ドラッグで囲いって右下の数字に注目します。
決定してしまうと数字が消えるので、ここだ！と思った数値を頭に叩き込むなり、
どっかにメモりましょう。
うちのメイドさんのＴＯＰ絵だと…　んー８００ドット位ですかね。
ありがちな数値ですので、まず間違いないでしょう。

次は、メインの記事を表示している幅です。
記事表示部分はラインで囲まれていますので分り易いですね。
同じような要領で調べます…　えーっとこいつは…４６０ドット位かなぁ…。
キリがよさげな数字ですしね。これもメモしておきます。
その差３４０ドット。これもメモ。
メインコンテンツ幅に３４０足せば、Blogの横幅が出るって事ですね。

さて、全体の横幅とメインコンテンツ幅が分りました。
ではメイン部どの位広げますかね…　広げた分だけＴＯＰ絵も広げる必要あります。
大体最近のＰＣは余裕で横幅1024以上出しますので、ちょっとやそっと広げた
程度でははみ出てみれねーぞ！ってのは多分ないでしょう。

とりあえず、今回はメインコンテンツ幅を６４０にしてみます。
どっから出た数字だって？ＶＧＡの横幅ですね。
SSやPSのハイレゾモード時の横幅でもあります　たしか。
で、これに３４０足したのが９８０。これがBlogの横幅ですね。
ここら辺の数値は、それぞれの好みで考えて置いてください。
実際に使うのはちょっと先の話になります。

とりあえず、長くなるので次の記事へ。

バッテリーぎれで干上がっていた私のR32ですが、
昨日JAFにHeeeeeelp！と連絡いれてバッテリーに喝を入れてもらいました。

で、その際現在の電圧とか電流とか計った所、
掛かった後も、電流０A状態…。
なんでも、電圧足らずで動かないというのが普通らしく、
電流まで０Aというのは滅多に無いと。
何か付けっぱなしだったのでは？と言われた。

あー　まぁ…
キーレス＆エンジンスターターで消費はしてますね…
でも別にライト付けッパとかはしない人なので、
それだけ長く放置しすぎたという事でしょう。
ちなみに、どれ位酷かったかというと、車の時計が狂ってました。
それ位電気なかったようです。かっつかつですね。
そのくせカーナビの時計は狂って無かったが不思議ですが。
こいつも待機電源くってるのだろうか。
でも、電源ONした時のラインだよなぁ…こいつの電源ラインは…。
はて…独自で充電機関でも装備してるんだろうか？

もうそんな有様ですので、エンジン掛かった後もすぐ走り出したりせず、
１時間はこのまま充電して下さいと言われ、さらに、ブレーキ時等は余計に
電気を消費するので、その時エンジンが止まってしまうかもしれない。
もうそうなったらバッテリー交換なので、もし止まったらまた呼んでくれと。
オイオイ信号とかでやっちまったらもうアウトだぞそれ…。
と流石に怖くなったので、充電後に一旦エンジンOFF。
再度点火して動くの確認。駐車場の出口まで少し出して、ブレーキパカパカ。
…よし　止まらない。多分、大丈夫。

という事で、そのまま久方ぶりに自分の車でドライブ。
自宅から車で４０分程離れた父方の実家の近くに気持ちよく走れる道路があるので
そこを走る事を目的に、ぐるーっと走ってきました。

久々に走らせると、やっぱり家のSPRINTERよりこっちの方がいいなぁ…。
ちょっとでだしの勢いは譲る所あるけど、一度動き出すと加速度が違うというか
背中から押されていく感覚みたいのが気持ちいいですね。
駐車場での充電時間あわせると、都合３時間埼玉南部をうろうろしてました。

で、今日も家の買い物に使用して昨日と逆コースでうろうろ。
今日は大体４時間程のドライブ。（昼食込み）
これで少しはバッテリー回復したかな？
今後は用がなくても少しは乗らないとダメですね。
ほんと　ガス代とっとと安くならねーかなぁ