プライベートモードで閲覧中です。

sugar pot : 【私家版・はじめてのFC2ブログカスタマイズ】#4 ヘッダ部分(タイトル、サブタイトル表示部)

ほろ苦い夢のかけらのおすそわけ

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

trackback

【私家版・はじめてのFC2ブログカスタマイズ】#4 ヘッダ部分(タイトル、サブタイトル表示部)

2005年06月28日(火) コメント:6 トラックバック:0

ヘッダ部分(タイトル、サブタイトル表示部)

さてここからいよいよ本体部分。
ここでまずひとつ確認。
<!-- -->で囲まれた部分は、注釈。表には現れない。
<body>
ここからが本体部分ですよ~というマーク。<body>は相方が居るタグ。試しにhtmlをずーっと下までスクロールして相方の存在を確認してみるとよし。

さて<body>の中身を見ていく。図解したのでよろしかったらクリックして見ながら読んでいただきたい。

image 別ウィンドウで拡大して見る

<div id="container"><!-- container -->
説明文:<!--
///
/// containerはサイト全体を包含するブロックです
/// サイト全体の幅の調整やレイアウトのセンタリングなどはこのブロックに対してスタイルを設定する事で行います
///
-->

サイトの全体をまずひとつのコンテナ=ブロック、箱(container)と考える。大きな風呂敷を広げた感じ。あるいは引き出し、箱庭の箱。マンションの部屋でもいいね。自分が分かりやすいものをイメージすればいい。この中に、本文やサイドバー(マンションならベッドや椅子かな)を置いていく感じ。幅やセンタリング(位置寄せ)などはcssファイルで行うので、id=containerのhtml文はきわめてシンプル。大きな箱なので、相方は</body>のすぐ前辺りにいるはず。下にスクロールして確認。
</div><!-- /container -->
これ、これ。
<div id="branding"><!-- branding -->
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<p><%introduction></p>
</div><!-- /branding -->
説明文 <!--
///
/// brandingはタイトルやサイトの説明を記述するブロックです
/// タイトルには画像を使う事も可能です

<%url>はこのブログのURL。<%blog_name>はこのブログの名前。名前は環境設定の変更>ユーザ情報の設定>ブログの名前。欄に入っているものがここに出てくる。

これをクリックすると<%url>(トップページ)にリンクしますよ、という意味。すべてのページに表示されるので、ここをクリックすると必ずトップページに戻るというナビゲーションが実現する。大抵のwebページはこれを採用しているので、来訪者が直感的に操作が分かり、迷子になりにくい。

キーボードのctrl+0(Mac)/alt+0(win)でこのURLにジャンプできる(accesskey)。

タイトルで<%blog_name>このブログの名前を規定。ブラウザによってはこれでタイトルを読み上げる機能がある。

このタイトル部分を画像で表示することができる。

説明文
/// タイトルには画像を使う事も可能です
///
/// ■タイトルに画像を使用しない場合
///
/// <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
///
/// ■タイトルに画像を使用する場合
///
/// <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="タイトル画像のパス" width="画像の幅" height="画像の高さ" alt="画像が表示されない場合の代替テキスト"></a></h1>
///
-->

私もやってみたことがあるが、画像の大きさがミソ。

<p><%introduction></p> ここに、環境設定の変更>ユーザ情報の設定>サイトの説明。の部分に記載した内容が、ブログのサブタイトル的に表示される。ここは改行が反映されないので、あまり長い文章だとカッコがつきにくいかも。

最後タグを閉じて、branding部分、おしまい。

【私家版・はじめてのFC2ブログカスタマイズ】を検索

※このシリーズは、FC2公式テンプレートsampleをカスタマイズするという目的で、現在その構造を読んでいるものです。htmlの基礎知識については、おサポ上手のcyaimiさんが乱暴大雑把なHTML講座」を展開中。

※アクセスキーについては、まさに、鯖コップのギョさんが「アクセスキーを設定しよう#1」で取り上げ始めたところ。興味深いお話になりそう。

(初投稿:2005年6月28日午前3時43分)(更新日時:2005年6月29日午前6時00分)
#205
カテゴリ:107 ブログカスタマイズ

trackback

<<【私家版・はじめてのFC2ブログカスタマイズ】#3 | わはは>>

コメント(-6件)

:ちょっと蛇足かもしれないけど

sugarさん、凄い企画やってますね。
テンプレのソースを全て解説するのは、大変なことと思います。
頑張ってくださいね o(^ー^)o 
(エログへは誘ってません↑ 笑)
ところで、「タイトルに画像を使用する場合」のソースなのですが
画像を「作成した寸法のままで表示」する場合、<img>にwidth(幅)とheight(高さ)を指定する必要はありません。
むしろここを削除しておいた方が、あとでタイトルを変えたり違う画像に替えたくなったときに、画像を同じファイル名でアップロードしなおすだけでいいから楽ですよ~
あ、でも「sample」を解説するのが目的のコーナーだから、余計なことを書かないほうがいいのか…
失礼しました(逃)

  • 2005年06月29日(水)02:14:37
  • URL
  • 編集
sugar:あは。エールありがとうございます。

カスタマイズするにはソースのどの部分がどこを示しているかを知る必要があると思ったので、私にできるかな?と思いつつ、やってます(笑)。よく、ひとに説明すると自分の理解が進むと言われますが、実際、読むひとが居ることを想定して書くというのは、いい加減にでは済まされず、一番の勉強になっています(汗)。
ユーザサポートフォーラムでも、「どこにソースを入れたら良いのか」という質問が一番多いんですよね。無理もないです、初めてhtmlソースを見たひとに、ソースなんて、単なる文字、あるいは単語の羅列でしょうから。私だって全部意味が分かってる訳じゃない。だから、始めてみました。
予定では、ひとつではなく、いくつかのテンプレートを覗くつもりでおります。実際、カスタマイズも、ひとつではなくいくつかやってきて、多少ですが見えてきたことがあるので。ですから、変数も、そのテンプレートで使っていないものは無理にそこで取り上げるつもりはありません。参考にすることや番外編で取り上げることはあるかな、くらいに思っていますが。ま、思いつきで始めたもので、しっかりとした企画案があったわけでもないので、気の向くまま、悪く言えば行き当たりばったり、良く言えば臨機応変にやっていきたいと思っています。
ところで、画像は、どんな場合でも、widthとheightを指定した方が表示が速いと聞いたことがあるのですが、勘違いでしたか?

  • 2005年06月29日(水)02:25:45
  • URL
  • 編集
:あっ(汗)

>読むひとが居ることを想定して書くというのは、いい加減にでは済まされず、一番の勉強になっています
これ、わかります。
ブログをはじめてから、この点に特に慎重になった気がします。
教えることは教わることと同義ですね。
>widthとheightを指定した方が表示が速い
あ、そうか…表示するときに崩れにくくなるんだった(>_<;
この辺の判断は、DLした人の使い方でどっちが良いかが変わっちゃいますよね。
すみません~

  • 2005年06月29日(水)12:33:53
  • URL
  • 編集
sugar:画像の大きさを判断する必要がないためですよね。

特に間違った記述でないのなら良かったです(ほっ)。
ユーザサポートフォーラムで回答するときもそうですが、誤りがあってはいけないので、確実なこと(たとえば「htmlファイルは<html>で始まる」とか)以外は、大丈夫と思っても資料で再確認してから書くようにしています。結構時間がかかるんですが、確実を期するためと、併せてほかのことも勉強になることが多いためです。
ただ,width/heightの件は、一番最初の方に覚えたことだったので、確認しておらず、ひょっとして勘違いだったか?と焦りましたよ(笑)。
それにしても、この連載、かなり試されますね(苦笑)。

  • 2005年06月29日(水)15:52:51
  • URL
  • 編集
CHOU-FLEUR:無題

コメントの確認が遅れましてスミマセン(秘密投稿だったので気付きませんでした…)。
わざわざご丁寧にコメントありがとうございます。
VALIDマニアな人には割と好評なのですが、素人向けとは思えない「sample」を詳しく説明して下さり大変助かります。
頑張ってコメントを付けたつもりですが、素人向きではないと判断し、Box model hacksなどの説明は出来るだけ簡潔にしてあります。不備がございましたらご一報下さい。

  • 2005年07月02日(土)08:34:50
  • URL
  • 編集
sugar:素人向きではないのですか(汗)

CHOU-FLEURさん、お返事ありがとうございます。記事と関係のない内容だと、話の流れから、非公開コメントの方がいいかと思ってしまいます。たしかに、気付きにくいですよね。
私、素人ですので、いろいろ調べながらやっておりますが力が足りますかどうか。困ったら、泣きつくかもしれません・・・は冗談ですが、たまに覗いていただいて、誤りがありましたら、ご指摘くださいますようお願い申し上げます。(ほかの方も、どうぞよろしく・・・)

  • 2005年07月02日(土)09:37:48
  • URL
  • 編集
コメントの投稿

トラックバック(-0件)

http://bittersweetdreams.blog9.fc2.com/tb.php/205-9621cab6

Bookmarked

Blog Battler

ブログバトラー

Twitter

    フリーエリア

    上部の説明

    下部の説明

    Utilities

    Ad

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