« 痩せても枯れても♪ | トップページ | 痩せても枯れても♪ »

「トガキュー」ココログでの設定

トップ画像共有プロジェクト(略して「トガキュー」)に参加しています。このページのタイトルの後ろの画像が、ランダムに変更されて表示されているのが、その仕組みです。

詳しくはプロジェクトのページを見ていただくとして、「ココログ」(プラスやプロでなくても可能です)でも設置できますので、ここでは私の設定を例にやり方をまとめてみました。もちろんご自分の責任の範囲で挑戦してくださいね。

まず、設定変更の画面へログインして、
トップ>ウェブログ一覧>お天道様は許しても>設定>ウェブログの基本情報
から「ウェブログのサブタイトル(キャッチフレーズ):」に以下のテキストを直接張りつけます。

<link rel="stylesheet" href="http://momo.cocolog-nifty.com/momo/styles.css" type="text/css" >
<script type="text/javascript" src="http://www.remus.dti.ne.jp/~sugiyama/headpic/getheadbanner.js"></script>
<script language="JavaScript"><!---
document.write('<table border="0" cellpadding="0" cellspacing="0" width="800" height="100" background=');
document.write(getHeaderPicFileName());
document.write('><tr><td align="left" valign="top"><img src="http://homepage1.nifty.com/mmiyata/backimages/titlelogo01.gif">');
document.write('</td></tr></table>');
// -->
</script>

1行目の、http://momo.cocolog-nifty.com/momo/styles.css は、私の場合デフォルトのスタイルシートのファイルを指定していますが、実際はあなたのココログの設定したスタイルシートを指定します。
下のほうのURL http://homepage1.nifty.com/mmiyata/backimages/titlelogo01.gif は、バックに重ねるあなたのページのロゴ画像を指定します。この例ではGIFファイルをしていしていますが、私のページでは透過PNGを貼っていますので、現在は以下のように書き込んでいます。詳しくは「Afternoon Cafe」さんの「ieでPNGを表示させる」で。
ロゴの位置は中ほどの align="left" valign="top" で左上に指定しています。

<link rel="stylesheet" href="http://momo.cocolog-nifty.com/momo/styles.css" type="text/css" >
<script type="text/javascript" src="http://www.remus.dti.ne.jp/~sugiyama/headpic/getheadbanner.js"></script>
<script language="JavaScript"><!---
document.write('<table border="0" cellpadding="0" cellspacing="0" width="800" height="100" background=');
document.write(getHeaderPicFileName());
document.write('><tr><td align="left" valign="top" ><a href="http://momo.cocolog-nifty.com/momo/" target="_top">');
var d = document.createElement('div');
if(d && d.runtimeStyle){
document.write('<img src="http://homepage1.nifty.com/mmiyata/backimages/blank.gif" border="0" hspace="0" width="400" height="100" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://homepage1.nifty.com/mmiyata/backimages/titlelogo01.png,sizingmethod=image);"/>');
}else{
document.write('<img src="http://homepage1.nifty.com/mmiyata/backimages/titlelogo01.png" border="0" hspace="0" width="400" height="100" />');
}
document.write('</td></tr></table>');
// -->
<cript>

だいぶ複雑になりました。どちらにしてもスクリプトの中身を私はちゃんと理解していませんが(笑)ちゃんと動いているようです。長い一行になっていますが、変な部分で行の折り返しが入ると、正しく動作しない場合があります。私はそれでかなり悩みました。
上から、スタイルシートの指定。ロゴの位置指定までは同じです。
そのあと、そのロゴをクリックするとページのMainにもどるれるようにリンクを指定しました、http://momo.cocolog-nifty.com/momo/ の部分がそうです。
以下、おまじない用の blank.gif を作って、どこか自分のページにおいておかなければいけません。大きさは私はロゴと同じ大きさにしています。http://homepage1.nifty.com/mmiyata/backimages/blank.gif ですね。
このあたりは、「catkick」さんの「覚書:透過PNGの貼り方」にありますので、参考にしてください。
さらに、新しく作ったロゴ用のpngファイルの場所を http://homepage1.nifty.com/mmiyata/backimages/titlelogo01.png で指定しています。私の大きさは width="400" height="100" ですね。

以上、どちらの方法でも良いですが、URLなどあなたの環境に変更したものを、先の「ウェブログのサブタイトル(キャッチフレーズ):」に入力保存してください。
もちろん努力した甲斐があって、やはり下のほうが綺麗に表示されますが、このままでは、スタイルシートを変更していないと変な表示になります。

もともと、サイトの両脇に帯があって本文が真ん中に入るものが、大きさからいって丁度ぐらいなので、はじめにその設定でデザインしたスタイルシートを加工した方がよろしいかと思います。
その中で、最低必要な変更だけ書いておきます。全体のなかで以下の部分だけ直せばたぶん正しく表示されると思います。

#banner {
font-family: 'Trebuchet MS', Verdana, sans-serif;
color: #FFFFFF;
background-color: #FFFFFF;
text-align: left;
padding: 0px; (数値を15pxから0pxへ変更)
height: 110px; (数値を40pxから110pxへ変更、100pxでも良いです)
}

#banner h1 {
display: none; (font-size: x-small を display: none に変更)
}

上は画像の高さにあわせて変更しました、下はサイトのタイトルが一番画面の一番上に表示されてしまうのを消しています。実際の私のページではもっと変更していますが、基本的にはこの二点だけで大丈夫だと思います。
スタイルシートの変更の仕方は、「詞織(si olli)」さんの「自作スタイルシートの適用」のエントリーが分かりやすいと思います。そちらを参考にしてください。

以上です。
興味のある方は、私のページのソースやスタイルシートなど参考に挑戦してみてください。

|

« 痩せても枯れても♪ | トップページ | 痩せても枯れても♪ »

コメント

ココログに参加しています。
トガキューに参加しようと考えているのですが、プログラムはさっぱりなもので、四苦八苦していた所、ココログでの活用のページをみつけ、なんとかやってみようと挑戦しています。
ただ、一カ所どうしても私の固い頭で理解できない箇所があり、よろしければメールでご相談したいのですが、よろしいでしょうか。
お返事頂ければ幸いです。

投稿: 五月 | 2004/07/28 18:44

五月さん、こんにちは♪

実を言うと私もそれほど分かっているわけではありません(^^ でも分かる範囲であればお答えいたしますし、不明な点は開発スタッフの方にも訊けますので、一度メールいただければと思います。ご遠慮なくどうぞ。

投稿: 7thHeaven | 2004/07/28 18:55

メールを送りたくてプロフィールなどを調べたのですが、メールアドレスが見つかりません。
一度メールを頂ければありがたいのですが・・・。
よろしく、お願いします。

投稿: 五月 | 2004/07/28 23:40

7thHeavenさん、初めまして。
この記事やソースを参考にさせていただいて(というか見よう見まねで)、トガキューに参加することができました。cocologでもできたんですね。本当にありがとうございました。

投稿: あーる | 2005/01/04 14:33

あーるさん、はじめまして&あけましておめでとうございます。

スクリプトに関しては、実は私もちゃんと理解しているわけではないのですが(^^; 設置ができたようでよかったです(嬉)

いろいろ楽しい画像がそろっていますし、不明な点があってももっと詳しい方がいらっしゃいますし、これからもどうぞよろしくお願いいたします♪

投稿: 7thHeaven | 2005/01/04 14:52

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: 「トガキュー」ココログでの設定:

» トガキュー [鍵盤まか勢]
トガキュー(トップ画像の共有プロジェクト)に参加しました。 昨年末から、ちょこち [続きを読む]

受信: 2005/01/04 19:01

» 皆さんに助けられて、デザインを新しくしました [i☆Letter]
以前からブログのデザインを変更したいと考えていたのですが、HTMLやCSSに関す [続きを読む]

受信: 2005/02/05 17:02

» コメントできない [断崖絶壁からの逆襲]
私のブログは見てもらった分かるとおりですが、ブログ人で(ある意味無理矢理)CSS [続きを読む]

受信: 2005/05/15 23:48

« 痩せても枯れても♪ | トップページ | 痩せても枯れても♪ »