<< かき氷
 |
 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
[ブログ]第三回 HTML―livedoorブログのHTML構造July 08, 2004
第三回は、livedoorブログをカスタマイズするために絶対に把握しておく必要のある、livedoorブログのHTML構造を説明していきます。 １．どうして構造を把握しなければならないのか
第二回では、CSSのはたらきと記述の仕方について説明してきました。
それではさっそく、livedoorブログのHTML構造を説明していきます。
３．「２．livedoorブログのHTML構造」の利用の仕方
ここまでlivedoorブログのHTML構造を詳しく見てきましたが、正直、「で、これをどうすればいいの？」「これ全部読まなきゃいけないの？」って思われた方もいらっしゃると思います。
２．livedoorブログのHTML構造は、「カスタマイズをしたいけれど、どの部分を変えればイメージ通りになるのかわからない」という人のために作りました。
1.自分のブログのここの部分をこうしたいというイメージを持つ。
といった感じを想定しています。ex）ブログのタイトルのフォントを明朝体にしたいなぁ 2.「２．livedoorブログのHTML構造」の「おおまかな構造」を見て、自分がカスタマイズしたい部分が何色の部分なのか確認する。 ex）ブログのタイトル部分は水色の領域だな。 3.次に2で確認した部分が詳しく書かれているところを読んで、CSSのタグ、id、class名を確認。 ex）#banner,#subbannerの部分を読もう。 ふむふむ。ブログのタイトルを装飾するには.blogtitleにCSSを指定すればいいんだな。 4.自分のブログのCSSを開いて3で確認したタグ、id、class名を探し、{××:△△}を記入する。 ex）管理画面の「デザインの設定」から「custom」を開いて、自分のイメージを読み込む。 .blogtitleを探して、{font-family:MS 明朝}を記入。 5.CSSを保存して、Blogの再構築をすれば、イメージ通りのブログが出来上がる。 ex）ブログのタイトルのフォントが明朝体になったぞ! かなり長い説明になってしまったので、必要な部分だけお読みください。 >>２．livedoorブログのHTML構造へ
また、livedoorブログの各テーマのCSS記述順序は「２．livedoorブログのHTML構造」の順番とはだいぶ異なっています。
４．カスタマイズを実践しよう
長かった第三回もようやく終わりが見えてきました。
今後のlivedoorブログカスタマイズ教室では、具体的な実践レッスンをしていきたいと思っています。 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
おおまかな構造
|
|
|
|
トラックバック
以前からレイアウトを整えるためいろんな箇所のmarginを指定したいと思っていたのですが、どこのmarginを改変し、どこにmarginを追記すればいいのかハッキリ分からなかったので放置していました。
しかし、またまた"すい"さんのBlog「食と日記とウェブログと」の「[ブログ
by CSS改造 marginいじってみました【新・気が向いたら更新する日記】at July 11, 2004 01:29
はじめまして。参考にさせていただきました。とても分かり易い説明で理解しやすかったです。これからも参考にさせていただきます。
by CSSをいじってみました【今日のいっぴん】at July 11, 2004 02:14
やっとできた〜！3カラム＼(^o^)／
このスタイルシートkerokeroでは3カラムは不可能!?
あぁ、もう別のデザインに変えてやる〜〜〜なんて思ってデザインを物色したりしてたけど、
何てことはない、おいらの設定ミス。
ごめんよ、カエル。
君のせいになんかして悪かった
by 進化【こぜ日記】at July 27, 2004 18:47
はじめて触るのなら、
やはり無料Blogがいいでしょう。
最近ではかなりたくさんあり、
どれを使用したらいいか、
迷うほどです。
そんな無料ブログ
について記述した記事からの
トラックバックをお願いいたします。
by 無料Blogの情報【ブログマーケティング・トラックバックセンター】at August 20, 2004 16:20
長い間更新をサボってブログを全面的に
リニューアルしました。いろいろとカスタマイズ
のやり方を検索していたら、すいさんのブログ
「食と日記とウェブログと」の「ブログのカスタマイズ教室」
という記事を発見。とても分かりやすくて参考に
なりました。( ＾ー^)ｂ
by 全体的にリニューアル【木漏れ日の射す散歩道】at September 10, 2004 23:13
サイドバー等、いろいろといじってみました。
ー参考サイトー
Now Playing
iTunesで聴いている曲の情報をウェブ上に画像でアップしてくれる
Audioscrobbler
過去に聴いた曲がデータ化されていろいろとすごいことになってる
Chocolate Vine
カテゴリ、月別アー
by カスタマイズ【サルなしジャム】at October 16, 2004 16:38
やっと自分の理想というかそんな感じになってきました。プラグインの設定する場所が大体わかれば最初考えていたよりは、だいぶ楽になりました。まあ時間的にはかなりかかりましたが・・・というわけでこのブログにもLinkeでブログカスタムの説明をしているサイトにリンクしま
by ブログカスタム【First Ｓtep】at October 24, 2004 12:12
ブログを始めて数ヶ月ですが、最初の頃とはだいぶ変わりました。
私自身はまともなスタイルシートの知識なんてなかったので
ひとえに親切な方々のおかげです。
正直、はじめはシンプルが一番だから
デフォルトのデザインでもいいやと思っていたのですが
あまりにも地.
by ブログの色やバランスを変える【なんとなく日記】at December 18, 2004 13:38
食と日記とウェブログと＞ブログ＞[ブログ]第三回 HTML―livedoorブログのHTML構造
地道にやります。趣味なんで。
...
by 第４次ブログ改造隊！【マルコ的資産運用計画】at January 19, 2005 17:57
ライブドアブログでの３カラム化のまとめとリンク
検索で来る人が多い見たいなので記事を修正してみました。。
by ３カラム化（livedoor Blog）【ブログカスタマイズ】at January 29, 2005 21:18
トップページや個別記事を3カラムにしてみました。
前からやりたかったのですが、大変そうだったので今までそのままにしてありました。
ようやくこの休みに半日ぐらい試行錯誤してなんとかできました。...
by トップページと個別記事を3カラムに【しげふみメモ】at February 12, 2005 18:59
|
||
|
|
|
|
|
|
コメント
Posted by
こん
at July 08, 2004 14:25
おー、流石♪
よくこの量をまとめましたね。とってもわかりやすいと思います。 おそらく各CSSから紐解いていったのだと思います、お疲れ様です（ふかぶか。 で、もし余計なお世話だったら申し訳ないのですが^ ^;; (livedoorブログ実際使っているわけではないので) テーマ「default」内の pre、blockquoteは階層的にも、 htmlのpreタグ、 blockquoteタグへの指定として説明したらわかりやすいんじゃないかと。 (多分、preは��コメント部分に、 blockquoteは�▲肇薀奪�バック部分にあたっていると思うけれど) ＆ �”週�はわかりやすくていいなと思うけれど、 webにおいては1.とかに置いて欲しいかなぁ。 表示、わかりやすさを優先しているのだったら、 本当に申し訳ないコメントしているのだけれど、ご容赦頂ければ。 Posted by Aos
at July 08, 2004 18:40
コメントありがとうございます。
> こんさん ゆくゆくはこのサイトだけでなんとかカスタマイズができるようにしたいと思います。 パンパさんのところは多少情報が古いのと、初心者向けではないような気がするので、こちらでは「初心者にもわかること」を目指していきます。 なにかおかしな点があったときなど教えてください。 > Aosさん えっとこれはHTMLの階層を紐解いていったので、 CSSファイルは参考程度にしか見ていません。。 で、「blockquote」タグと「pre」タグなんですが。 タグ自体の意味はもちろんわかっているのですが、そのタグがHTML内のどこにどういうときに出てくるのかがわかっていないんですよ。 なので、「どこに指定されているかわかりませんでした」と。 でも、タグ自体の意味を追記しておきました。 あと、丸付き数字はa,b,c･･･や1.,2.,3.･･･に変えときました。 確かにおっしゃる通りなので。 ご指摘ありがとうございました。 Posted by すい
at July 08, 2004 20:11
今回も大変参考になっています。分かりやすい文章と構成で助かります。
> これまでやみくもにCSSをいじって、よくわからないけどできた、という人は う、耳が痛い、やみくもに猿マネと、livedoor掲示板のピンポイントの質問でＣＳＳをいじくってきたので応用が利かずＣＳＳの壁にぶちあたっていました。理屈が分かっていないと技術が身につかず成長しないんですよね。 今回の記事は全部印刷して自分のＣＳＳと比較して使わせて貰います〜。 Posted by
teto1967
at July 08, 2004 22:58
> tetoさん
毎度ありがとうございます〜＾＾ 今見てきてそちらでもコメントしましたが、レイアウトきれいになりましたね。 この記事を活用してもらえてるのがよくわかって、私としても本望です。 ありがとうございます。 今後やってほしいこととかあったら教えてくださいね♪ Posted by すい
at July 09, 2004 00:32
すごく丁寧に書かれているサイトで、とても助かっています。
文字の大きさなど変えたかったけど、どこをいじればいいのか わからく、あきらめかけていたのですが、 こちらのサイトを参照してだいぶ思い描いたものに近くなってきました。 ありがとうございます！ 第5回も楽しみにしています。 現在は3カラムに挑戦中ですが、なかなか難しい。。。 どうももともとのスタイルシートの設定が頑固なのか、 まだまだ時間がかかりそうです。。。 Posted by
cozy
at July 27, 2004 17:26
cozyさんこんにちは。コメントありがとうございます。
ただいま第5回執筆中です。 近日中に公開いたしますので、お楽しみに♪ > 現在は3カラムに挑戦中 3カラムは、そんな〜には難しくないと思いますが、 3カラム化にともなっていろいろと調整しなくてはならないところが出てくるのでちょっと面倒なんですよね。。 ブログ教室でも第9回くらいで3カラムにするための記事を書こうかと思っていますが、ちょっと先のことになってしまいそうです・・・。。 BBSなどでご相談いただければ、私にわかる範囲でお答えしますので、お気軽にどうぞ☆ Posted by すい
at July 27, 2004 18:43
自己レスになっちゃいますが・・・。
sui_ventさんのページ何度も見直して、試したら、できました！ 自分の不注意で躓いていたようでした。 どうもありがとうございます！ 第5回も楽しみにしていますね！ Posted by
cozy
at July 27, 2004 18:49
cozyさんおめどとうございます☆
すごくかわいらいしくていい感じですね〜＾＾ ただ、ちょっと気になることがあるので、そちらにコメントしておきますね。 Posted by すい
at July 27, 2004 19:19
すいさん、
どうもありがとうございます。 ＞ちょっと気になること 直したいです！ ご指南お願いいたしますm(__)m Posted by
cozy
at July 27, 2004 21:24
すいさん、
おかげさまで、個別記事etcの3カラムもきちんと表示できるようになりました。 月別のページだけまだレイアウトが崩れてしまうのですが、 subbannerが関係あるのでしょうか？ Posted by
cozy
at July 28, 2004 00:15
すいさん、
月別のページもできました！！私の単純ミスでした(-_-;) ありがとうございます！ すいません、もう一つ伺ってもよろしいですか？ すいさんのblogのようにblogを投稿した時にIDではなく 自分で設定した名前を表示させるにはどうしたらよいのですか？ 私は「cozy」と表示させたいのですが。 よろしくお願いいたしますm(__)m Posted by
cozy
at July 28, 2004 00:52
cozyさん、3カラム化完全成功、おめでとうございます☆
よかったよかった＾＾ > 投稿者名の変更 Posted byの後の投稿者の名前を、livedoorIDではなく好きな名前で表示したい、ということですよね。 これは各HTMLの<div class="posted">の後の「Posted by <$ArticleAuthor$>」を「Posted by すい」に変えただけです。。 cozyさんの場合は、「Posted by cozy」とすればよいのですね。 ただし全ての投稿者名が同じになってしまうので、複数の人が投稿するブログではこの方法は使えませんが・・・。 とりあえず私のブログやcozyさんのブログはこの方法でOKだと思いますよ。 Posted by すい
at July 28, 2004 04:16
すいさん、おはようございます。
Posted by cozy できました！ありがとうございました〜＼(^o^)／ Posted by
cozy
at July 28, 2004 10:27
cozyさんおめでとうございます〜
そしてバナーリンクまではっていただいて多謝です。。 今後もよろしくお願いします♪ Posted by すい
at July 28, 2004 15:37
初めまして。
いつも参考にさせて頂いています。 いきなり申し訳ないのですが、質問です。 すいさんのBlogの様にカレンダーに背景画像を付けたいのですが、 .calendard{ background:url('http://blog.livedoor.jp/washu/eba26d51.jpg'); empty-cells:show; } と指定しても、画像の左上部分しか表示されません。 どういう風にやっているのか やり方だけでも 御指南いただけませんか？ よろしくお願いします。 Posted by
鷲羽
at September 10, 2004 04:44
> カレンダー背景に画像を
鷲羽さんこんにちは。 カレンダーの背景に画像を設定するには、「.calendard」ではなく、「.calendartable」に画像を指定してやります。 参考までに、私のブログでの指定を載せておきますね。 .calendartable{ margin:3px 30px; background-color:#FFFFFF; background-image:url(http://blog.livedoor.jp/sui_vent/464fe114.jpg); background-repeat:no-repeat; background-position:50% 0%; } .calendarwd{ border-bottom:1px solid #352F22; background-color:#FFFFFF; } .acalendar{ background-color:#FFFFFF; } こんな感じです。 背景画像の位置（background-position）は適当に調節してください。 また、「.calendard」や「.calendardbg」の背景色は指定しない方が、「.calendartable」で指定した背景画像がきれいに見えるのでよいと思います。 がんばってください〜＾＾ Posted by すい
at September 10, 2004 14:11
返信ありがとうございます。
無事 カレンダーに背景を付けることができました。 お早い返事ありがとうございました。 Posted by
鷲羽
at September 10, 2004 19:07
> 鷲羽さん
サイト拝見しました〜 カレンダー、とっても素敵な感じになりましたねぇ♪ お役に立てて何よりです。 これからもよろしくおねがいします＾＾ Posted by すい
at September 10, 2004 23:50
３カラム化はうまく行ったのですが
サイズなどの微調整に時間をとられていました。 しかし、こちらに詳しく書かれていたので とても助かりました。ありがとうございます。 これからも頑張ってください。 Posted by
stephen
at March 06, 2005 08:52
はじめまして。
カスタマイズの参考にさせてもらいました。 ありがとうございました。 凄く分かりやすい説明で、いつも利用させていただいてます。 Posted by ゆきじ
at March 31, 2005 21:37
はじめまして。
コチラを参照しつつ、CSSをいじっております。図や色分けなどで、本当にわかりやすくありがたかったです。 トラックバックをさせていただいたのですが、複数に送るつもりだったからか、失敗いたしました。コメントにて失礼いたします。 Posted by
キダガラス
at April 05, 2005 14:36
初めまして ３段カラム化とタイトルの壁紙変更をしたいのですが もう三日目になるが
どうしてもテキスト通りに表示できません。 ブログカスタマイズさんからリンクをたどって 詳細な説明に今度こそと喜んでいたのですが やっぱり出来ないままなんです コピーしたものを何処へハリコしたらよいのかが 判らなくなってきました。 その前後の部分が判れば迷わないと思いますが？ ここの次から〜って よろしくお願いいたします。 Posted by
hiro3107
at June 10, 2005 17:53
もう、何がなにやら〜 あれこれと触りすぎて初期化んも戻らなくなりました。
おまけにコメントもアバターだけ見えてコメントが全く見えなくなってます。 ３段カラムも二つともが左側に重なってくっついているし お手上げです。 それに 各パーツの境界線が白くなり 見ていておかしいし タイトルの壁紙だけがちゃんと表示されているのがせめてもの慰めです もう、グチャグチャのまま 昼から放置しています。 Posted by
hiro3107
at June 12, 2005 13:18
> hiroさん
hiroさんのブログで解決方法をコメントしておきました〜。 そしてできれば今後の質問はclverのBbsにお願いします。 clover http://suisui.moo.jp/ Posted by すい
at June 12, 2005 19:00
すい先生 ありがとうございました。★m（_ _）m ★
壁紙を作成しましたので これからご指導どうりに実行します 判りました 今後とも、よろしくお願いいたします。 Posted by
hiro3107
at June 12, 2005 20:45
お陰さまで 無事、３段カラム化できご報告です。 ありがとうございました。
Posted by
hiro3107
at June 12, 2005 22:02
|
||
|
|
これでカスタマイズしたい人はこのサイトとパンパでガウチョさんの所を見れば
理解できるでしょうね。
これで掲示板の質問者が少しは減るかも（笑）