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

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">だかそんな感じですが、
それだとセンタリングされないので上記に変更してあります。
機能的に違いは無いので問題ないです。


と、駆け足でしたが、スタイルシートのぶっこぬき、
メインテンプレートへの反映、をやってみました。
次は他のテンプレートファイルもいじって見たいと思います。
　
　
修正したスタイルシート。
無駄な改行は削ってあります。
{} の中は頭にTABが入っているんですが…きえてますね…
/*******************************************************
all
*******************************************************/
body {
background:url(/template/118/img/haikei.gif) repeat;
margin:0;
padding:0px;
text-align:center;
font-size:12px;
color:#63346E;
border:none;
scrollbar-3dlight-color:#80518B;
scrollbar-arrow-color:#80518B;
scrollbar-base-color:#FFF3F8;
scrollbar-darkshadow-color:#80518B;
scrollbar-face-color:#FFF3F8;
scrollbar-highlight-color:#80518B;
scrollbar-shadow-color:#FFF3F8;
}

HR {
color: #A682AE;
height: 1px;
}

a:link,
a:visited,
a:hover {
color:#63346E;
text-decoration:underline;
}

input,textarea {
border:1px solid #FBFDB;
background:#FFF3F8;
padding:3px;
font-size:12px;
}

form {
margin:10px;
padding:0;
text-align:left;
}

img {
border:none
}

.clear {
height:1px;
clear:both;
font-size:1px;
}

ul {
margin:0 0 0 16px;
padding:0px;
list-style:none outside;
}


/*******************************************************
layout
*******************************************************/
#container {
width:800px;
background:url(/template/118/img/bg.gif) repeat-y;
text-align:left;
margin:0px auto 10px auto;
border-bottom:1px solid #80518B;
}

#top {
background:url(/template/118/img/hr.jpg) no-repeat top center;
padding:0;
}

#bot { }

#left {
width:165px;
margin:0 ;
padding:0;
float:left;
text-align:right;
}

#right {
width:165px;
margin:0 ;
padding:0;
float:right;
text-align:left;
}

#center {
width:460px;
margin:0 auto 0 0;
float:left;
/*border:#80518B solid 1px;*/
}

#center_contents {
width:460px;
margin:0 auto 0 0;
float:left;
}

#profile {
margin:30px;
}


/*******************************************************
header * title
*******************************************************/
#header {
margin:0 3px;
height:200px
}

#btn {
text-align:right;
margin-right:8px;
}

H1 {
padding:6px 0 0 18px;
margin:0;
}

.blog_title {
color:#63346E;
width:500px;
padding-top:20px;
overflow:hidden;
word-break:break-all;
font-weight:bold;
font-size:16px;
letter-sapacing:1px;
}

.blog_title A:link,
.blog_title A:visited,
.blog_title A:hover {
color: #63346E;
text-decoration: none;
}

H2 {
width:780px;
margin:10px 0 10px 5px;
padding:0;
float:left;
text-align:left;
}

.blog_description {
font-weight:normal;
font-size: 12px;
letter-sapacing: 1px ;
color:#80518B;
}

/*******************************************************
entry
*******************************************************/
.entry {
margin: 0 0 15px 6px;
width:460px;
text-align:center;
overflow:hidden;
word-break:break-all;
border:1px solid #80518B;
}

.entry_top { }

.entry_bot { }

H3 {
padding: 5px 10px;
margin: 0px;
text-align:left;
border-bottom:1px dashed #80518B;
}

.entry_title {
width:400px;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
}

.date {
font-weight: normal;
font-size: 10px;
color: #A682AE;
white-space:nowrap;
margin:5px 0 0 0;
}

.entry_text {
width:390px;
font-size:12px;
margin:0 auto 15px 10px;
padding:5px 0;
line-height:1.3;
text-align:left;
overflow: hidden;
word-break: break-all;
}

#center_contents .entry_text {
font-size:12px;
margin:0 auto 15px 10px;
padding:5px 0;
line-height:1.3;
text-align:left;
}


/*******************************************************
comment
*******************************************************/
.comment {
margin: 0 0 15px 6px;
width:460px;
text-align:center;
border:1px solid #FBFDB;
}

.comment_top {
text-align:center;
}

.comment_bot {
text-align:center;
}

.comment H3 {
padding: 5px 10px;
margin: 0px;
text-align:left;
border-bottom:1px dotted #FBFDB;
}

.comment_title {
width:400px;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
}

.comment_text {
width:390px;
margin:0 auto 0 10px;
padding:5px 0 15px 0;
line-height:1.3;
text-align:left;
overflow: hidden;
word-break: break-all;
}

.comment_layer {
width: 390px;
overflow: hidden;
word-break: break-all;
text-align:left;
}

.comment_center {
text-align:center;
padding-left:40px;
}

.posted {
padding:5px 10px 10px 10px;
font-weight: normal;
font-size: 10px;
color: #A682AE;
line-height: 1.1;
text-align:right;
}

.posted A:link,
.posted A:visited {
color: #A682AE;
text-decoration: none;
}

.posted A:hover {
text-decoration:underline;
}


/*******************************************************
sidefunction
*******************************************************/
#left .side table {
width:155px;
margin:0 0 0 10px;
}

#right .side table {
width:155px;
margin:0 auto 0 0;
}

.side_title {
text-align:left;
FONT-SIZE: 10px;
PADDING:5px 30px 5px 10px;
OVERFLOW: hidden;
WORD-BREAK: break-all;
COLOR: #80518B;
LETTER-SPACING: 1px;
border-top:0px;
border-right:0px;
border-bottom:0px;
border-left:0px;
background:url(/template/118/img/side_bg.gif) no-repeat top center;
}

.side_text {
line-height:1.2;
text-align:left;
color: #80518B;
margin:0;
padding:3px 0 0 15px;
background:url(/template/118/img/icon.gif) no-repeat top left;
font-weight:normal;
font-size:10px;
}

.side_text a:link,
.side_text a:visited {
font-size:10px;
text-decoration:none;
color: #80518B;
}

.side_text a:hover {
text-decoration:underline;
font-size:10px;
color: #A682AE;
}

#left .fu {
width:155px;
margin:0 0 15px 10px;
text-align:center;
}

#right .fu {
width:155px;
margin:0 10px 15px 0;
text-align:center;
}

h4 {
padding:0;
margin:0 0 5px 0;
border-top:3px solid #FBFDB;
border-right:3px solid #FBFDB;
border-bottom:3px solid #FBFDB;
border-left:7px solid #FBFDB;
}

.fu_title {
padding:5px;
text-align:center;
font-size:10px;
font-weight:normal;
letter-sapacing:1px;
}

.fu_box {
width:155px;
margin:5px 0 0 0;
padding:0 0 5px 0;
text-align:left;
overflow:hidden;
word-break:break-all;
}

.fu ul {
margin:0px;
padding:0px;
list-style:none outside;
}

.fu li {
margin:0 0 5px 0;
padding:3px 0 0 15px;
background:url(/template/118/img/icon.gif) no-repeat top left;
}

.fu_text {
line-height:1.2;
text-align:left;
margin:0;
padding:0;
font-weight:normal;
font-size:10px;
}

.fu_text a:link,
.fu_text a:visited {
font-size:10px;
text-decoration:none;
}

.fu_text a:hover {
text-decoration:underline;
font-size:10px;
}

.banner {
padding-left:5px;
}


/*******************************************************
calendar
*******************************************************/
.calendar_bg {
width:155px;
text-align:center;
padding:0 0 5px 0
}

.calendar_bg table {
width:155px;
margin:0 auto;
}

.calendar {
color: #80518B;
width:20px;
padding:1px;
margin:0px;
font-size:10px;
text-align:center;
line-height:1.4;
}

.calendar a:link,
.calendar a:visited {
color:#A682AE;
text-decoration: none;
display:block;
border:1px solid #80518B;
}

.calendar a:hover {
color: #FFF;
background:#80518B;
text-decoration:none;
}


/*******************************************************
pagepreview
*******************************************************/
.page {
font-size:10px;
width:98%;
overflow: hidden;
word-break: break-all;
margin:10px 0;
text-align:center;
}

.page a {
font-size:10px;
}


/*******************************************************
footer
*******************************************************/
.footer{ }

.footer_jp {
font-size:10px;
}

.footer_jp a:link,
.footer_jp a:visited {
font-size:10px;
color:#666;
text-decoration:none;
}

.footer_jp a:hover {
text-decoration:none;
}


/*******************************************************
profile * biography
*******************************************************/
.bio_table {
width:600px;
font-size:12px;
border-bottom:1px solid #FBFDB;
}

.bio_title {
width:28%;
padding:5px;
}

.bio_text{
width:70%;
padding:5px;
}

.profile_table{
width:600px;
font-size:12px;
}

.photo {
margin:5px;
}

.profile_td {
width:70%;
}

.profile_m_table {
width:100%;
font-size:12px;
border-bottom:1px solid #FBFDB;
}

.profile_name {
width:28%;
padding:5px;
}

.profile_text {
width:70%;
padding:5px;
}

.profile_name_table {
width:120px;
}

.profile_name_text {
line-height:1.5;
font-size:10px;
padding:7px;
}

.profile_name_text ul {
margin:0;
padding:0;
list-style:none outside;
}

.profile_name_text li {
margin:0;
padding:3px 0 0 15px;
list-style:none outside;
background:url(/template/118/img/icon.gif) no-repeat top left;
}