mysticdiary

vintage romantic web design

第17弾完成!

すっかりテンプレート製造マシンと化した管理人。
今度は、季節の感じられるものをと思い、ホリデーと思われる街の写真を使ってみることに。

townlight.jpg

しかしながら、写真をトリミングした所、ホリデーらしいところはみじんもなくなってしまった(爆)。
本当の写真は下の方にスノーマンがいるのだが、そこまで入れていると、上部の美しいネオンが入らなくなってしまう・・とさんざん悩んだ挙げ句スノーマンを泣く泣くカット。

あ~、無料素材からいい写真を探そうとするとなかなか見つからないので苦労するのである。
しかし、管理人は懲りずに無料素材を使い続けるであろう・・(笑)

あ、そうだ、このスクリーンショットにはカレンダーが入っていないが、今回はとうとうカレンダーを追加してみることにした。
もう少しいろいろ工夫してみよう・・。

追記:カレンダーを追加し、さらに検索窓もつけてみた!これが画像作ったりするのが面倒くさいのなんの。やっとのことで完成。なんか少し窓が大きすぎるような気がするが、ま、いいや(笑)

2月17日追記:

●記事タイトルが複数行にわたる場合、背景画像をきれいに表示する方法

このテンプレートのh2部分には背景画像が使われているため、タイトル部分が複数行になった場合に、
2行目以降が隠れてしまい、きれいに表示できない場合があります。
これを回避するには、HTMLとCSSを少々変更していただくことになります。
(つ~か、最初っからこう作っとけって感じですが、管理人がずぼらなのでスイマセン)

まず、HTML部分。
h2のHTMLの上の方を修正します。

デフォルト


これを下のように修正します。



2行目のHTMLを追加しました。

次に、CSSの修正です。
HTMLで追加した#kiziueのCSSを追加し、h2のCSSに変更を加えます。

#kiziue{
    background-position:center top;
    background-repeat:no-repeat;
    background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/townlightmainue.png);
    width:505px;
    height:35px;
    padding:0px 30px 0px 30px;
}


h2{
    width:505px;
    overflow: hidden;
    font-size:20px;
    text-align: left;
    line-height:1.2em;
    padding:0px 30px 20px 30px;
    font-weight:bold;
    font-family: "Century Gothic", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif;
    font-stretch:narrower;
    background-position:center top;
    background-repeat:repeat-y;
    background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/townlightmainnaka.png);
}


画像はすでにあるものを使いまわしてます(爆)。
今までh2の背景画像だったものを、記事全体の上部の背景画像として固定し、
h2の背景画像は縦幅(height)がいくら増えてもいいように、記事中に使用している背景画像を 縦に繰り返して表示されるように修正しました。
これで、タイトルが複数行にわたっても背景画像がきれいに表示されるようになります。
関連記事
baorin

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

3 Comments

小太郎 says...""
管理人様

はじめまして。
townlightのテンプレートを使用させて頂いています。
すばらしいテンプレートで、もう他のテンプレートに
変える事はなさそうです。本当にありがとうございます。

テンプレートの一部を変更したく、色々調べては
テンプレートのCSSなどを変更していましたが、なかなか
思うようにいかず、今回投稿させていただきました。
もしお時間があれば、ご教授願えませんでしょうか?

(1)記事タイトルが長すぎると、記事本文と被る。
記事のタイトルを長くしたい場合があり、
そうすると、記事タイトルは2行以上になるのですが、2行目以降が本文と被ってしまい、見えなくなってしまいます。

◆試した事
・h2のheightを大きくする。
・background-repeatをrepeat-yにする。

h2のheightを大きくすると、2行目以降も表示されるようにはなったのですが、背景画像が切れてしまいました。なので、repeat-yを試したのですが、これでも背景画像が本文の画像と綺麗に繋がりませんでした。

(2)記事本文内で、<font size="+数字">を使うと、前の行の文字と被る

記事中で、フォントサイズを一部大きく(馬鹿でかく)する事があります。その場合、文字が長すぎると複数行にわたって表示されますが、前の行の文字と次の行の文字が重なります。

◆試したこと
すみません、お手上げです。。。


私が無茶な使い方をしているのはわかっているのですが、お気に入りのテンプレートなので、なんとか変更できればと思っています。


お忙しい所申し訳ありませんが、宜しくお願い致します。
2010.02.17 11:18 | URL | #- [edit]
管理人 says...""
小太郎さん、こんにちは。

h2が複数行になった場合の、修正の仕方は記事に追記してみましたので、
そちらを参考になさってください。

それから、記事中の文字を大きくした場合に、文字が前後かぶってしまう問題
ですが、それでしたら、記事を編集している時に、
例えばfont-size:100px;としたら、その後にline-height:1.5em;
(数値はお好みで)と加えてみてください。

こんな感じにすると、多分重ならないようになると思いマス・・・。
2010.02.17 14:49 | URL | #- [edit]
小太郎 says...""
管理人さま

こんなに早く返答していただきありがとうございました!!
わかりやすい説明を追記していただいたおかげで、
簡単に上記の変更を反映でき、記事タイトルが重ならなくなりました。
また、文字が重なる件についても、
上記を使用するように変更してみます。

以上です。
2010.02.17 22:31 | URL | #- [edit]

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/118-9bd09885
← まだあるマイケルのテンプレート → マイケルのテンプレートを集めてみた