デザイン変更
デザイン変更してみました。どこが変わったか、わかるかな？
タイトルバックは私が撮った海の写真です。
サブタイトルがどうしても、左によるのはナゼなんだろう・・・
やっとリンクが貼り付けられるようになったし・・・
ほんとはもう少し手を加えたいのですが、今日は力つきました。
| 固定リンク
「日記・コラム・つぶやき」カテゴリの記事
- Bonne Année 新年おめでとう(2023.01.03)
- Clean up for Sarah in Naruto,Japan みんなの海岸清掃 その2(2019.10.12)
- Clean up for Sarah in Naruto,Japan みんなの海岸清掃(2019.06.12)
- 熊本地震のお見舞い(2016.04.18)
この記事へのコメントは終了しました。
コメント
Loudeacの方に少し縁があるfacetというものです。はじめまして(^^)。
＞サブタイトルがどうしても、左によるのはナゼなんだろう・・・
http://bretagne.air-nifty.com/anne_de_bretagne/styles.css
↑このファイルの#banner{〜}のところで、text-align: left;と指定されているからです。
それから、私のブラウザ(Netscape系)ではタイトル部分の下半分が隠れてしまっています。これは、そのすぐ下でheight: 40px;と指定されているのが原因なので、写真の高さ（83px）に合わせてみてください。
ということで。愛想のない書き込みですが(^^;。
投稿: facet | 2004.04.10 00:50
役立たずな書き込みでスミマセンでした。まずこれから聞いておくべきでした。ココログのコースはプラスですか？ プロですか？
投稿: facet | 2004.04.10 14:25
丁寧なご説明ありがとうございます。
プラスです。プラスとプロでもちがうとは。奥が深すぎる・・・
きのう本屋でデザインの本をしげしげ見ましたが、ホームページのデザイン集なるものはありませんでした。自分で何かつくるって、本当にむずかしいです。
投稿: 市絛 三紗 | 2004.04.10 15:55
プラスだとstyles.cssを自由に書き換えられないみたいなので、（文法的には正しくないのですが）以下のような方法でスタイルを変更するのが一番簡便かと思います。
「高度な設定」の「メモの表示」を「テキスト表示」に設定してあるマイリスト（たとえば「おすすめの本」）のメモ欄に、以下のコードを追加して保存＆反映してみてください。
<style><!-- #banner {text-align:center;} --></style>
そうすると、タイトルもサブタイトルもセンタリングされるはずです。サブタイトルだけをセンタリングするには、
<style><!-- #banner h2 {text-align:center;} --></style>
とh2を加えればOKです。あ。タイトル領域の枠の高さも変えた方が良かったですね。なので、
<style>
<!--
#banner {height:83px;}
#banner h2 {text-align:center;}
-->
</style>
としてみてください。
# 創作は、ホント難しいですね。
# webデザインならやっぱりweb上で探すのが一番のような気がします。
ホームページ理論系リンク
Key Person Q >> GOOD DESIGN SITE
css Zen Garden: The Beauty in CSS Design
# その他の件は私の方の伝言板にて、ということで。
投稿: facet | 2004.04.10 21:24
タイトルバックの画像、私のブラウザ(firefox）でも見られるようになりました(^^)。ブルターニュの海岸を見るたびに三陸海岸を思い出します。
# お節介ついでにもう一つ。↓
あそびをせんとやうまれけむ: [Tips] 表示に時間の掛かるモノは右サイドへ
投稿: facet | 2004.04.13 03:47
タイトルバックの写真も見れなかったんですか？
同じようにパソコンを使っていても、見れたり見れなかったりするんですね。せっかく、上記のやりかたおそわりましたが、
サブタイトル、左に残したほうがバランスがよかったです。
ところで、一枚海の写真を使ってみました。写真横にスペースを開ける方法ですが、教えてもらったマイリストの設定だけでalign="left"というのを入れないと、一行分だけしか横には表示されませんでした。align="left"を記事にいれると、表示のように出来ました。
投稿: 市絛 三紗 | 2004.04.13 08:16
サブタイトルが見えない状態でしたので、当然タイトルバックも下半分が隠れていた状態でした。Internet Explorerは、背景画像に合わせて勝手に枠をひろげてくれる（しまう）のですね。ウチのは枠の縦横指定値を忠実に守ってしまう（くれる）ブラウザですね。どちらが正しい解釈なのか良く分かりませんが。
ところで、写真のalignの件ですが、text-alignの部分はfloatの間違いでした。どうもスミマセン。うろ覚えじゃなく、ちゃんと確認すべきでした。_(._.)_
それから、写真周りのマージンですが、やっぱり下も入れた方がいいと思います。文字サイズを変えて見てみてください。
ということで、こんな感じ↓でしょうか。
<style type="text/css">
<!--
.content img {margin:0px 15px 15px 0px;float:left;border:none;}
#banner {height:83px;}
-->
</style>
投稿: facet | 2004.04.14 03:21
なんどもすみません。floatはちょっと問題ありです。適応は少し待ってください。本当にすみません。m(._.)m
投稿: facet | 2004.04.14 03:26
いろいろと他ごとまで調べていたら遅くなってしまいました。_(._.)_
まず、修正自体は、これ↓で良さそうです。
<style type="text/css">
<!--
#banner {height:95px;}
.content img {margin:0px 15px 15px 0px;float:left;border:none;}
.content p.posted {clear:both;}
-->
</style>
ここで、.content p.posted という部分が本文の記事のフッターを表していて、clear:both;というのがfloatを無効にする指定です。このclear指定がなかったため、記事の本文が短い場合にフッターの部分（「固定リンク」などがある部分）まで画像の横に回り込んでしまうという不具合がありました。
なお、#bannerのところもheight:95px;に修正しましたので、そちらも併せてご変更願います。
続きもあるんですが、長くなるので私の方の伝言板に書くことにしました。→こちら （少し重複してますが、流れということで御了承ください）
ということで、何度もコメント欄に書き込むことになってしまい、申し訳ありませんでした。今度は大丈夫だと思います。（……と思いたい(^^;）
投稿: facet | 2004.04.14 07:16
私にはさっぱりです・・・
「在仏熊猫日記」に以下の記事が出てました。
＞Dfactさんのコメントを見て、写真の入れ方真似してみたん＞ですけど、始め写真と記事がくっ付いちゃって、上手くいき＞ませんでした。そこで、hspace= （＝のあとは適当な数
＞字、僕は１２にしました）を挿入したら、写真と記事の間が＞キレイに空いて見易くなりました！
投稿: 市絛 三紗 | 2004.04.14 07:22
さっぱりですか。うーん。自分の説明力のなさを痛感。残念です。でも、最後にもう一度だけ。
お伝えしたかったことは、……
コメントアウトしたマイリストのメモ欄に今、
<style type="text/css">
<!--
.content img {margin:0px 20px 0px 0px;text-align:left;border:none;}
-->
</style>
<style>
<!--
#banner {height:83px;}
-->
</style>
と書いてらっしゃると思いますが、これを、
<style type="text/css">
<!--
#banner {height:95px;}
.content img {margin:0px 15px 15px 0px;float:left;border:none;}
.content p.posted {clear:both;}
-->
</style>
に差し替えてみてください。
……ということです。伝わったでしょうか……
あと、ひでさんのところの記事は見てました。毎回画像を挿入する度に「 align="left" border="0" hspace="20"」と書き足すのを苦としないならば、それでもいいかなとは思います。私は同じことを繰り返すのが苦痛なので、CSSを使う方法を御紹介させていただきました。
まあ、align,border,hspaceを使うことに関しては他にも問題があるのですが、それはひでさんのところに書き込むことにします。文法上の話ですので、ちょっと堅い話ですし。
ただ、その背景にはとても大事な思想があると私は思っています。今は、へぇ〜そういうのもあるのか〜とでも思っていただければ十分かと思いますが。（私が今回hspaceを使わずにCSSによるstyle記述方法を御紹介したのもその辺りが背景にあるということぐらい頭の片隅に置いておいていただけると嬉しいかな(^^)、という感じです。）
最後に、次のリンク先を御紹介しておきたいと思います。お暇な時にでも、是非。
ごく簡単なHTMLの説明
「ごく簡単」ではないと思いますが(^^;、とてもいいサイトだと思っています。特に、その中にある
ハンディがあっても利用できるページづくり：Webアクセシビリティについて
というところは一見の価値があると思います。
投稿: facet | 2004.04.14 09:14
すみません。言葉がたりませんでした。「さっぱり」というのは私にはできないことを、魔法のようにやってくれるfacetさんはすごいという意味のひとりごとでした。
指示どおりに変更すると、うまくいきました。ありがとうございます。もうちょっと、勉強します。
投稿: 市絛 三紗 | 2004.04.14 18:42