スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Blogのテンプレートとかスタイルシートとか その7

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

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を表示してみますと…





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

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


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

で、比較する対象が無い事には始まりませんので、
スキンは元のメイドさんの奴に戻して…ついでに左右のパーツは
今の作業にはちょっと邪魔なので外します…で、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ソースを見比べて、
地道に齟齬を解消していくのが基本作業となります。
で、こっちの方がいいやと思ったら放置するのはOKなのですが、
これは気に入らないから直したいとかは現段階ではスルーして下さい。
一度にあれこれ弄ると絶対自爆しますので、とりあえずの目標は、
既製スキンに近づける… でいきます。


では、ここらへんをコピペしたテンプレートソース+保存したスタイルシート
で再度表示をして見ましょう。
その状態が、今のうちの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">だかそんな感じですが、
それだとセンタリングされないので上記に変更してあります。
機能的に違いは無いので問題ないです。


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

続きを読む

スポンサーサイト
プロフィール

神琳楓雅

Author:神琳楓雅
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。