小粋空間  -  a cheap joke and a play on words site

≫ タイトルバナーの壁紙設定 from 私立大学職員の情報オフィス
PRmanです。 ブログカスタマイズ、タイトルバナーに画像を表示しました。 なんだかわからない画像ですが、 [続きを読む]

≫ CSSいじってタイトルバナーを画像に変更した from kncafe（ゲームの合間のコーヒーぶれいく）
やりたかったブログカスタマイズの一つ、 タイトルバナーに自分の好きな画像を設定する。 がようやくできた。 今まで好きな画像を使った事はあったけど、... [続きを読む]

　yujiroさん、いつもお世話になって居ます。つい先日、バージョンアップを機にスタイルもこちらのテンプレートを利用させていただき、liquidタイプを取入れる事が出来ました。
　その際、苦労したのがタイトルバナーでしたので、私にとってはとてもタイムリーなレクチャーでした。有り難うございます。
　現在は何とか希望に合うバナーにはなっているのですけど、出来ればバナーの縦幅をもう少しだけ広げたいと思っています。
　「5」のご説明を参考に「padding プロパティの上下方向の値を増加」させてみたのですけど、バナーの下部、alfa、beta、gammaがバナー部分にめり込んできます。バナーが垂直方向に広がった分、下の部分も素直に下がってくれるように設定するにはどこを直したら良いのでしょう。教えていただければありがたいです。
　尚、拙ブログではバナーの中に更にバナーインナー画像を表示させています。こちらの方はheightを指定する事で収ったのですけど、バナーの方はheithを指定しても、やっぱり下の部分がめり込みました。

＞路子さん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、「バナーの幅を変更しても左右サイドバーの（垂直方向の）開始位置が下がらない」ということでよろしいでしょうか（違っていたらご指摘ください）。
この件につきましては別途エントリーしたいと思いますので少々お時間ください。
それではよろしくお願い致します。

　yujiro さん、お返事有り難うございます。その御解釈で間違いありません。
　エントリーを作っていただけるとの事、恐縮ですけど、とても有り難いです。急いではいませんので、どうか宜しくお願いします。
　また新エントリーの「ASCII 文字のみのトラックバックをフィルタリングする プラグイン」もとても有り難いです。
　私の本日の課題になりました。いつも痒いところに手が届くサポート、感謝して居ます。

＞路子さん
こんにちは。
ご連絡ありがとうございます。
エントリーネタが増えて助かりますので、どうぞお気遣いなく。
プラグインもよろしければお試しください。
ではでは！

いつもお世話になります。

1つ質問させてください。
タイトルバナーの縦幅を大きくすると、タイトルの文字が中央にきてしまいます。

これを左上に持っていきたいのですが、なにか方法はありますでしょうか？

お忙しいところ申し訳ありませんが、よろしくお願いします。

＞ヒロさん
こんばんは。
ご質問の件ですが、

#banner {
    padding: 15px 15px 145px;
　　　　　　　：

としてください。
なお、６項を追記しましたので参考になれば幸いです。

それではよろしくお願い致します。

いつもお世話になります。

ありがとうございました！

＞ヒロさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようでよかったです。
ではでは！

お世話になっております。
このたびタイトルバナーに背景画像を入れました。そこで高さが足りなかったのでheight: 150px;と設定しました。

/* タイトルバナー */
#banner {
padding-top: 30px;
padding-left: 15px;
border-bottom: 1px solid #666699;
color:#000000;
background-position: left top;
background-repeat: no-repeat;
background-image: url("画像url");
height: 150px;
text-decoration: left;
}

このようにＣＳＳを変更したのですが、タイトル画像とborder-bottomとの間にスペースが入ってしまいます。これをなくすためにはどこを直せばよいのでしょうか？
宜しくお願い致します。

＞Ａｌｌｙ＆Ｍｏｎｋさん
こんばんは。
ご質問の件ですが、

height: 150px;

padding-bottom: 60px;

を追加されてはいかがでしょうか（値は調整してください）。
それではよろしくお願い致します。

いつも、お世話になっております。
おかげさまで、バナーに背景画像を入れることができたのですが、Ｆｉｒｅfoxで確認すると、なぜか、バナーの画像が表示されません・・・
スタイルシートは↓このようにしてるのですが・・・

/* タイトルバナー */
#banner {
padding: 35px;
border-bottom: 0px solid #666699;
color: #999999;
background-position: right top;
background-repeat: no-repeat;
background-image: url("http://event-gift.com/otoriyose/images/title2007.jpg");
text-align: left;
}

どのようにしたら、表示されるようになるのでしょうか；；

お忙しいところ申し訳ありませんが、よろしくお願いいたします。

＞chiさん
こんばんは。
ご質問の件ですが、スタイルシートの

ul li {
    list-style-type: circle;
     color: #996600;

の "}" が抜けているのが原因のようです。
それではよろしくお願い致します。

yujiroさん、こんばんは！

スタイルシートの"}"を付けましたら、firefoxでも、無事表示されるようになりました?！！！

お忙しい中、どうもありがとうございました！

感謝感謝です；；

＞chiさん
こんにちは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
ではでは！

はじめましてyujiroさん！すごく親切な解説で素晴らしいです！MT初心者の知花と申します！どうか教えて下さい。この３日間ず?とタイトルバナーに背景画像を表示させようとしているのですがなかなか出来なくて困っています、スタイルシートはMTデフォルトのテンプレート設定になっています、設定変更はスタイルシートだけでよいのでしょうか？お忙しいと思いますがアドバイス宜しくお願いします。

#banner {
width: 710px; /* necessary for ie win */
background-position: left top;
background-repeat: no-repeat;
background-image: url("http://nobuyuki.boy.jp/blog/images/p1010224.jpg");

｝

＞知花さん
こんにちは。
記事参照ありがとうございます。
ご質問の件ですが、background-image に指定されているURLの内容を確認したところ、HTMLファイルになっております。そこからさらに実際の画像を引き込んでいるので、background-image プロパティには

http://nobuyuki.boy.jp/blog/images/p1010224.jpg/P1010224.jpg

を設定すれば正常に表示されると思います。
それではよろしくお願い致します。

やった?（＾＾）/
yujiroさんありがとうございました！！
やっと出来ましたありがとうございます、
なぜできなかったのか不思議です？
　
本当に感謝感謝です！！
師匠と呼んでもいいですか？
これかれもお手数かける時があるとおもいますが
宜しくお願いします。

本当にありがとうございましたｍ（__)m

＞知花さん
こんにちは。
ご連絡ありがとうございました。
無事になおったようで良かったです。
是非呼んでやってください（笑）。
ではでは！

画像を表示することはできたのですが、
テキストでのタイトルとブログの説明が
画像に重なってしまいます。
消す方法はありますか？

＞まりっぺさん
こんにちは。
ご返事遅くなり申し訳ありません。
ご質問の件ですが、スタイルシートの最後に下記の設定を追加すれば画像のみ表示されるようになります。

h1, #banner-description {
    visibility: hidden;
}

なおこの方法ではSEO上、問題があるかも知れませんので、機会があれば別途エントリーしたいと思います。
それではよろしくお願い致します。

画像のサイズはどのようにして指定すればよいのでしょうか？

＞白鳥さん
こんばんは。
ご質問の件ですが、画像を CSS の背景画像に設定する場合には img タグの width や height のように画像サイズの指定はできません。background プロパティで指定できるのは、

• 画像ファイル
• 描画開始位置
• 描画を繰り返す・繰り返さない

のみです。
ただし、背景画像を表示するタグ（div 等）の CSS に width や height が設定できますので、それで調整することは可能です。

例えば下記の青色のプロパティを追加すれば、結果的に画像サイズを設定できます。

#hogehoge {
    width: 300px;
    height: 50px;
    background-position: right top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
}

ご質問の内容からどのような表示を希望されているか不明ですが、例えばバナーに1つの画像を目一杯表示するのであれば width は与えず、やや大きめの画像を背景画像に用いて height や padding で調整するのが良いでしょう。
それではよろしくお願い致します。

こんばんは。
タイトルバナーに画像を表示させる事に成功したんですが
タイトルと説明の文字がWinだと上手く表示されなくなりました。
どうすれば上手く表示されるのかアドバイスお願いしますm(_ _)m

それと、もう１つ教えて頂きたいのですが
http://yocco.sakura.ne.jp/archives/2007/07/05-194747.php
上のエントリーの文字色と、下の「トラックバックURL」「トラックバック」
「コメント」「コメントする」の所の文字色を合わせる場合、CSSのどの部分を
変更したら良いのでしょうか？
お忙しい所スミマセン・・・ﾍﾟｺﾘ(o_ _)ｏ))

こんばんは。
タイトルは無事に表示されました。
CSSとにらめっこしてましたw

＞yoccoさん
こんばんは。
ご連絡ありがとうございました。
自己解決されたようで良かったです。お疲れ様でした。
ではでは！

こんにちわ！
本を購入して、カスタマイズがんばってます。

さて、ヘッダに画像は無事に表示できたのですが、
この画像を押すとトップに戻るようにするには、
どうすればいいのでしょうか？

よろしくお願いします。

＞satoさん
こんにちは。
ご質問の件ですが、サポートサイト（サンプルデータダウンロードサイト）の「サポートブログ」に情報を追加しましたので、お試しください。
それではよろしくお願い致します。

[27] Posted by yujiro : November 19, 2007 6:08 PM

＞ yujiro　さん
ありがとうございます！
無事にできました！

URLを探すのに苦労しました…。

あと、シンプルタイプを使わせていただきましたが、
構文の、<$MTBlogURL$$>　となっています。
$　を１つ削りうまくいきました！

ありがとうございました！

＞satoさん
こんにちは。
ご連絡ありがとうございました。
色々不備があり、申し訳ありませんでした。
うまくできたようで良かったです。
ではでは！

[29] Posted by yujiro : November 20, 2007 8:14 PM

いつもいつもいつも・・・・・お世話になります。
質問場所がエントリー違いかもしれませんが、一応こちらで質問させていただきます。
スタイルシート内のheader設定部にて、画像を設定しているのですが、貴サイトの“Movable Type 4 の PHP 化で XML 宣言を自動的に切り替える”を適用させていただいたところ、IEではヘッダー部の縦幅が縮んだ状態になってしまい困っている次第です。加えて、以前質問させていただいた、ページ最上部にスペースが出来てしまう現象（IE&Firefox）も出てきている状況です。
最近ブログパーツやらの設定でアチコチ弄っているせいだとは思うのですが、どのタイミングでなるのかがどうもよくわからず、またタイトルバナー部に係わるのでこちらで質問させていただきました。当方でも検証中ではありますが、yujiroさんからもアドバイスいただければ幸いです。

ページ最上部のスペースという件は、ヘッダーの中のどこかに原因があることが判明しました。お騒がせしました。ただ、PHP化の際のXML宣言によるタイトルバナーの縮小という部分が謎です。一部自己解決コメントでした。申し訳ありません。

重ね重ねのコメント失礼いたします。
ページ最上部のスペースについては、metaタグの記述順を変えて解決出来ました。順番のせいなのか、記述自体をミスっていたのかは定かではありませんがとりあえずOKみたいです。
タイトルバナーの見え方については、どうらやFirefoxとIEとの違いのようです。XML宣言が何故影響してくるかまでは素人にはワカリマセンでした(笑)。
またまた参考にさせていただきます。

＞toycozyさん
こんばんは。
ご連絡ありがとうございました。
無事に解決されたようで良かったです。
ではでは！

[33] Posted by yujiro : December 23, 2007 2:33 AM

いつもお世話になってます。

バナー画像表示の確認なのですが、ｐａｄｄｉｎｇで色々と指定してみた所
Firefoxでは問題ない場合でも、IEで上手く表示ができずタイトルが見れないという事態になりました。
IEにあわせると、もっと酷い為
ｗｉｄｔｈ： 890px；
ｈｅｉｇｈｔ： 250px；
と、画像サイズをそのまま指定した所、IE＆Firefoxとも同様に表示されたのですが
ブログタイトルが一番上に来てしまって・・・もうちょっと下げたいと思うのですが（我侭ｗ）
上からの高さを指定する事は可能でしょうか？
私の認識では、ｐａｄｄｉｎｇで行う以外ないと思ってるのですが・・・・
何かいい方法があれば・・・・と思いまして、書き込み致しました。
背景画像様のｄｉｖを設定するのかな？と、漠然としたものしか浮かんで来ないので
いつも頼ってしまって、申し訳有りません。
お手隙の際にご教授頂ければ幸いです。

宜しくお願いします。

＞RiCOさん
こんばんは。
ご質問の件ですが、line-heightで指定する手があります。
それではよろしくお願い致します。

[35] Posted by yujiro : February 8, 2008 1:29 AM

　yujiro　さんお願いします。m(_ _)m
　お忙しい折、申し訳ない。
　公開テンプレートでは#bannerを#headerに書き替えてありました。headerをbannerに読み替えると、意味内容が分かり、公開テンプレートをカスタマイズできることが分かりました。HTML文書というのも何かと言えば、index文書とarchive文書とを指すとわかりました。

　フロントページには修正後のバナーが表示されました。ところがアーカイブページで表示されません、真っ白になっています。ソースの表示を見ると、修正後のバナーを呼んでいます。それでいてどうして、バナーが真っ白になるのか分かりません。
　バナーのカスタマイズ方法を掲示されてから、どうやらyujiroさんの方で公開テンプレートのHTML文書とcss文書は内容を手直しされたようで、バナーのカスタマイズ方法の基盤が変わっているようです。
　　申し訳ありません。ご確認いただけると大変ありがたいです。

　解決しました

こんばんは、
この記事を参考にスタイルシートを編集しようとしましたが
どこを探しても/* タイトルバナー */　や#banner の部分が見つからないため編集できません・・
こちらの４．１対応版のテンプレートを使用していますが対処方法を教えてもらうとうれしいです。
お忙しいところ宜しくお願いします。

＞トレインさん
こんにちは。
ご要望の件ですが、時間をみてMT4.x対応の内容をエントリーしたいと思います。
記事がそのまま利用できるかどうかわかりませんが、お急ぎであれば、id="banner" を id="header" に、#banner を #header に読み替えて試してみてください。
それではよろしくお願い致します。

[39] Posted by yujiro : August 28, 2008 3:01 PM

yujiro様

こんばんは。コメントありがとうございます。早速試しましたが、上手くいかなかったのでMT4.x対応のエントリーを待ちます。急がないので時間があるときで大丈夫ですよ！

こんばんは。

いきなりすみません、質問なのですが、
タイトルを画像にしてTOPに戻るようにリンクを貼ったのですが、
a hoverでリンクの背景を指定しているため、リンクのある画像全てに
適用されてしまいます・・・・。

背景を白にしたりと色々試してみたのですが、
リンクの色が下のほうにだけ表示されて
消えません；；

ブラウザはfirefoxを使っていますが、IEだと
なんの問題もなく表示されるらしいです。

リンク付の画像にa hoverが適用されないようにする
CSSはありますか？

お手数ですが、教えていただけませんか？
よろしくお願い致します。

＞かこさん
こんばんは。
ご質問の件ですが、img要素のa要素にclass要素を追加して、そのclass属性名をCSSセレクタにする方法jがあります。具体的には、

<a class="hoge"><img … /></a>

として、CSSに

a.hoge:hover{
  background: none;
}

を追加します。

それが面倒であれば、下記のスクリプトをbody要素の終了タグの直前に設定してください。

<script type="text/javascript">
ele = document.getElementsByTagName("img");
for (i = 0; i < ele.length; i++) {
  if (ele[i].parentNode.nodeName == 'A') {
    parent = ele[i].parentNode;
    parent.style.background = 'none';
  }
}
</script>

それではよろしくお願い致します。

[42] Posted by yujiro : February 7, 2009 1:15 AM

ありがとうござぃました
カウンターだけがなぜか直らなかったのですが、
その他のリンクは直すことができました！！

aタグをどこにいれていいのかわからず、
スクリプトを入れたのですが
今後の為、教えていただきたいのですが、

●<a class="hoge"><img … /></a>
はHTMLのほうに入れるんですか？

●<img。。。>の。。。は各画像ごとに指定しないと
いけないですか？

すみません、初心者の質問ですが、よろしく
お願いしますm(_ _"m)

＞かこさん
こんにちは。
ひとつめのご質問の件ですが、今、画像リンクを表示するために、HTMLに

<a href="..."><img … /></a>

というタグを埋め込まれてますよね。その埋め込んでいるaタグに

class="hoge"

というものを追加して、

<a class="hoge" href="..."><img … /></a>

としてください。

この「class="hoge"」に対応するデザインをスタイルシートで設定するのですが、「class="hoge"」を設定したaタグのデザインしか変更されないため、すべての画像リンクを対象にしたい場合は、すべての画像リンクのaタグに「class="hoge"」を設定しないとなりません（といっても多分20ヶ所程度だと思います）。

念のため、「hoge」という文字列は例なので、正式に設定する場合は意味のある半角英文字にしてください。例えば「image_link」などが良いと思います。

それではよろしくお願い致します。

[44] Posted by yujiro : February 9, 2009 12:48 PM

ありがとうござぃました！
丁寧なご説明すごくわかりやすかったです。

Yujiroさん、またまたお世話になります。貴テンプレートに戻した後、タイトルバナーを画像を表示させようとしております。　

　概ね上手くいったと思ってますが、気になる点がひとつ、ブログを開いたときは上手く表示されますが、ブログを読むためにストロークしていますと、タイトルバナー横一線に白い線が入ります。その高さはちょうどタイトル文字の高さとほぼ等しいのです。　リロードすればもとのように上手く表示されますが、またそのうち同じよう白い線が入ります。

　今回タイトル文字も画像化しているのでそのCSSの記述の仕方がおかしいのかと思い質問させていただいております。何かアドバイスできる点あればご助言いただきたくお願いいたします。なお、ブラウザはIE7しか試しておりません、よろしくお願いいたします。

＞harryさん
こんばんは。
ご質問の件ですが、下記の青色を追加してください。

#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
    height:100%;
    text-indent:-9999px;
}

それではよろしくお願い致します。

[47] Posted by yujiro : February 16, 2009 12:48 AM

yujiroさん、早速のアドバイスありがとうございました。助かりました、また質問があるときはよろしくお願いいたします

yujiroさん、もう一つ質問させてください。タイトルバナーに横幅850pxの画像にしましたが、IE6では右サイドバーが崩れ、左サイドバーの下のほうに表示されるようになってしまいました。IE7、firefox最新版では問題ありません。画像サイズを848とか852とか微妙に調節してみたのですが、状況は同じです。　気がつくことあればご教示いただけますようお願い致します。

＞harryさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の部分について、青色の内容に修正してください。

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #f6f6f6;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 85%;
    overflow: scroll;
}

それではよろしくお願い致します。

[50] Posted by yujiro : February 24, 2009 8:08 PM

yujiroさん、早速のアドバイスありがとうございました、今、会社PC（IE6環境）でちょんと表示される旨確認できました、。

preタグの修正と言うことは画像サイズはまったく関係なかったわけですね、大変勉強になりました。

yujiroさん、差し出がましく、もうひとつ質問させてください。　トップバナーの下に1pxほど白い空間が空くのはCSSでどこを直せばよろしいでしょうか？

＞harryさん
こんばんは。
ご質問の件ですが、下記の修正を行なってください。

変更前

#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
    height:100%;
    text-indent:-9999px;
}

変更後

#header {
    padding: 14px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
    height:100%;
    text-indent:-9999px;
}
html>body #header {
    padding: 15px;
}
*:first-child+html #header {
    padding: 14px;
}

それではよろしくお願い致します。

[53] Posted by yujiro : March 2, 2009 10:32 PM

yujiroさん、いつもながらありがとうございました。

お世話になります。以前、同じような質問がでておりますが、自己解決されて情報を確認できなかったので宜しくお願いします。

タイトル背景に画像を割り当てたところ、ファイフォックスでは問題ありせんが、IE（6）でタイトルおよび説明が表示されません。一度、スクロールしてタイトル部分を非表示にし、再度スクロールし表示させるとタイトル部分に白色のラインが入ります。繰り返すとそのラインの高さがその都度変わり、タイトルの上1/3くらい見えることもあります。

ご教授願えればと思います。

＞hiroさん
こんばんは。
ご質問の件ですが、可能であれば不具合が発生しているページのURLをご連絡ください。
なお、この事象については、[46]でも回答している通り、スクロールによって見えなくなる要素に対してスタイルシートに、

height: 100%;

を追加すれば解消すると思います。例えば、

<h1 id="header"><a href="http://.../">タイトル</a></h1>

で、タイトルが見えなくなるのであれば、

#header {
    height: 100%;
}

をスタイルシートに追加してみてください。
それではよろしくお願い致します。

[56] Posted by yujiro : July 3, 2010 9:22 PM