本文へジャンプします。

ココログサポート Top>>Questions List>>HTMLファイルの反映について (thr...

fixed_question

HTMLファイルの反映について

572．HTMLファイルについて
名前： ななみ・18歳　2007/01/20(土) 08:06
ブログも何もかも初心者の私に教えてください。
毎日、徹夜状態で色んなサイトを見てますが分かりません。
回りに聞ける人もいないので、書き込みしました。

プランはフリーで、ココログのオリジナルテーマです。カスタム。使ってるOSはWindows XPです。ブラウザはInternet Explorer 6です。

質問なのですが、今、私がやりたいことは、タイトルバナーの上に、新たなスペース(ヘッダー？？)を作りたいのです。
ココログ以外のブログを使ってる人で、それがあるのを見ました。でも、ココログにはないのを知り、作ろうと思ってます。
そもそも、作れないのですか？？

たくさんのサイトで勉強しました。
そうしたら、ヘッダーを作るには、
HTML記述とCSS記述が必要だと書いてました。
それは、理解できました。
実際に、Windowsのメモ帳で両方の記述を正しく(サイトで公開しているソース)書きました。
HTMLファイルは、文字コードUTF-8で、「nanami.html」、CSSファイルは「nanami.css」のファイル名で保存し、それをファイルマネージャーを使い、ココログにアップもしました。
CSS記述のファイルを呼ぶためのlinkタグも、サブタイトル欄に入れました。

そこからなんです。
HTMLで記述したファイルをどうすれば良いのですか??!!
ファイルマネージャの画面(ブラウザ上)では確認できます。
でも、ファイルマネージャー内にただ置いといても意味ないんですよね??
CSSファイルのようにlinkタグみたいのを使うのですか??
そこを知りたいのです。
どうすれば、反映させることができるんでしょうか??
デフォルトのhtmlに上書きするんでしょうか??
メインのHTMLファイルが二つある現状…
どうしたら良いのでしょうか??

詳しい方、教えてください。HTMLの行き場を…
---
奈々美

basic infomations
  • ご利用中のOSは？:unselected
  • ご利用中のブラウザーは？:unselected
  • ご利用中のプランは？:unselected

インポート | 2007/01/20 10:54(6723days ago) | permalink | その他

Please login to comment.

Re: [その他]HTMLファイルの反映について
いろいろ誤解されているような気がしますが……。

奈々美さんのご希望は
A. タイトルバナーの上に隙間を作りたいだけですか？
B. それとも何か文章を入れたいのですか？
C. それとも何か画像を入れたいのですか？

いずれかによってココログ・フリーで実現可能かどうか変わります。
---
JUMA
http://juma.cocolog-nifty.com/branch/

インポート | 2007/01/20 11:16(6723days ago) | permalink

Re: [その他]HTMLファイルの反映について
すみませんです…

タイトルバナーの上には、文章を入れたいです!!
出来れば、bodyと同じ幅の背景を入れて、それを枠線で囲みたいのです。
高さは、50pxぐらいです。
---
奈々美

インポート | 2007/01/20 11:19(6723days ago) | permalink

Re: [その他]HTMLファイルの反映について
ファイルマネージャーのファイルのところに
「blog」と書かれたフォルダがあって、そのなかに
「index.html」っていうファイルがあるんですが、これを消したらマズいんでしょうか??


---
奈々美

インポート | 2007/01/20 11:22(6723days ago) | permalink

Re: [その他]HTMLファイルの反映について
次から次へと、すみません。
説明が本当に下手ので。

やりたいことを明確に書きます…

ヘッダを作るには、
<body>〜</body>の間に、新しいclassを作らないとダメなんです。これです↓
<div class="header.nanami">文章</div>

フリーだとどこに入れれば、新しいclassが反映されますか??

サブタイトル欄ですか??マイリストですか??記事ですか??
それとも、CSSに直ですか??



---
奈々美

インポート | 2007/01/20 11:41(6723days ago) | permalink

Re: [その他]HTMLファイルの反映について
まず前置きとしてブログがどんなシステムかという話から書きます。

個人がホームページを作る場合に以前一般的だったやり方は、テキストエディタで一つ一つ書いたHTMLファイルやCSSファイル、画像ファイルなどを転送ソフトでサーバにアップロードする、というものでした。

ココログなどのブログツールではデータベースに投稿された記事やコメント・トラックバックなどをブログのプログラムが取り出し、これまたデータベースの中にあるテンプレートに当てはめてHTMLファイルやCSSファイルを自動生成します。
生成結果を変えたい時はテンプレートの方を変更します。

テンプレートをどこまで改造できるかはブログツールによって違います。ココログプロはかなり自由にできますが、ココログフリーやベーシックでできるのは基本的には選択肢の中から選ぶ程度です。
テンプレートを「カスタム・テーマ」にした時は少し自由度が増えて「カスタムCSS」を使えますが、それは新しい名前のCSSファイルを作るのではなく既存のstyles.cssファイルに追記されます。
メモタイプのマイリストにはHTMLタグやJavascriptが使えますが、置けるのはサイドバーの中です。

というわけで質問3)の“index.htmlを消すのはまずいですか”は、まずいと言えばまずいです。個別記事やカテゴリー別などのバックナンバーのページに書かれているトップページへのリンクをクリックするとindex.htmlに移動するようになっていて、それを変更することはできませんから。消すとトップページが表示されなくなります。
nanami.htmlは代わりになりません。
でも新規記事を投稿するたびにindex.htmlファイルは自動的に作り直されますから、取り返しがつかないほどまずいわけではありません。

そしてココログ・フリーでは質問4)の<div class="header.nanami">文章</div>をタイトルバナーの上に追加することはできません。
「ブログのサブタイトル」をブログタイトルよりも上に配置することはたぶんカスタムCSSで可能だろうと思いますが。

---
JUMA
http://juma.cocolog-nifty.com/branch/

インポート | 2007/01/20 22:00(6723days ago) | permalink

Re: [その他]HTMLファイルの反映について
index.htmlをファイルマネージャから上書きしても、次に普通に記事を書くと再上書きされちゃうので、面倒ですね。
（実験してみました。上のリンクを参照してください）

メモタイプのマイリストを作成してサイドバーの上の方に置いておき、メモ欄にお知らせを書いて、それをdivで囲って適当なidを付け、それを、JUMAさんのいうように、CSSで位置調整する、というのが一番よさそうじゃないかな、と思いました。

もしくは、今回の（有料コースの）バージョンアップでトップページに任意の記事を固定表示できるようになったので、フリーの場合も近日中に行われるであろうバージョンアップを待つのが吉、かもしれません。
http://info.cocolog-nifty.com/info/2006/12/116_8221.html
http://www.cocolog-nifty.com/tsushin/10/index.htm

バナーの上ではないので、ご希望に添えないかもしれませんが。

なお、index.html以外のページをトップにすることも一応できます。裏技…というかかなり強引な技ですけど(^^；
詳細は、下記をどうぞ。

風柳亭 - 別館：書庫のある庵 -: ブログのトップページをindex.html以外にしてみるテスト
http://furyu.tea-nifty.com/annex/2007/01/indexhtml_0706.html
---
facet
http://facet.cocolog-nifty.com/divers/2007/01/indexhtml_3c67.html

インポート | 2007/01/21 17:53(6722days ago) | permalink

Re: [その他]HTMLファイルの反映について
今、確認しました!!返事遅くなってすみませんです!!

JUMAさん、facetさん、本当にありがとうございました!!
これから、参考にして、マイリスト作成してみたいと思います!!

---
奈々美

インポート | 2007/01/21 18:45(6722days ago) | permalink

Re: [その他]HTMLファイルの反映について
既に、このスレッド終わっちゃいましたが、
Hachiも一つ方法を思いつきましたのでもし良かったら使ってくださぃ。

使用するクラスは、
背景以外の全体(#container)とサブタイトル欄(#banner h2)。
#containerの位置を全体的に下げ、
#banner h2の位置を#containerよりも上に持ってくる。
マイナス数値で位置付けてやる無茶なやり方です。

本文自体はサブタイトル欄での調整、
スタイルは全てCSSでのスタイル調整。

ポイントは、
#containerと#banner h2の内外余白調整。
#containerでborderを使用いているなら、#banner h2にも同じくborderを使用する。
その場合、
#containerのborder-top、#banner h2のborder-bottomをnoneか0pxで指定。
#containerとピッタリ位置付けることにヘッダーらしく、よりテンプレと一体化。

語るよりもコード見せたほうが早いですねぇ。
CSSに記述するソース

#container {
width:900px;
background-image: url(http://puchiofhachi.cocolog-nifty.com/custom/banner.013.jpg);
background-repeat: no-repeat;
background-position: left top;
border: solid 1px #ff80c0;
border-bottom: 0px;
margin-top: 70px;
}
#banner h2 {
　　width:900px;
background-color:#ffffff;
　　font-size: x-small;
border: solid 1px #ff80c0;
border-bottom: 0px;
　　margin-top: -100px;
margin-left: -16px;
　　}

widthは指定しなくても何とかなるけど、念のため。
3カラム(デフォルト)であれば800pxなので修正。2カラムはナンボだろ??w汗　使ったことないからなぁ。。。たぶん、600か700だと思う。

尚、現在、ココログ大変堕ちそうな状況にあり、アップロードする度にエラー出ますので、
marginやpadding修正諦めました。なので、数値は暫定??仮ですので、ご自分のスタイルに変更してあげてください。

こんな感じでやってみてください。
質問ありましたら、HachiのBlogでどうぞ。
また、Hachiが前日書いた記事”フッターの作成(2)”も合わせて読んで頂けると理解できると思います。
使用するクラスが、div#footerから#banner h2になっただけなので。

フッターの作成(2)
http://puchiofhachi.cocolog-nifty.com/blog/2007/01/2_2600.html



---
Hachi
http://puchiofhachi.cocolog-nifty.com

インポート | 2007/01/22 17:36(6721days ago) | permalink

Re: [その他]HTMLファイルの反映について
後日情報です。

まず、先日のメンテ（2007-01-16〜17）で採用された、記事を上部に固定する新機能ですが、これはトップページにのみ適用されるようで、奈々美さんのような、ヘッダーを設けたいという希望には向いていないようです。

また、同メンテの余波で、index.htmlを置き換える風柳さんの裏技が使えなくなったようです。残念。

以上、お知らせまで。
---
facet
http://facet.cocolog-nifty.com/divers/

インポート | 2007/01/23 22:40(6720days ago) | permalink