- date
- 050317
タイトルロゴを画像にする
そんなお嬢さま方にお贈りするタイトルを消すことなく隠し、画像のロゴを入れるカスタマイズ。（※画像はセルフサービスでご用意下さい）
▼参考記事
"いろは"の先のCSS 第3回
ロゴ画像はあらかじめアップロードしておいて下さい。
▼ベースHTML
<h1>のタグをこのようにします。<h1>を入れる場所はお使いのテンプレートによって多少異なると思いますので、テンプレに合わせて下さいね。
<h1><a href="URL" title="タイトル"><span>タイトル</span></a></h1>
小梅系のテンプレの場合は、<div class="description">～</div>と<div class="head">～</div>を消せばタイトル部分が一枚の画像風になります。
▼CSS
下記を追記します。
h1 a { display:block;
margin:0 auto; /* センタリングする場合 */
height:●●px; /* タイトルの高さ */
width:●●px; /* タイトル部の横幅 */
background:url(タイトル画像のURL);
background-repeat:no-repeat; /* リピートさせない場合 */
}
h1 span { display:none; }
テンプレートでh1やタイトル部分に他のスタイルが設定されている場合、スタイルが複数指定されて表示が思うようにならない場合があります。その場合は最初に指定されていたh1やtitle,headあたりのCSSを外してみて下さい。
どういう指定をされているかはテンプレートによって異なりますので、一気に削除するのではなくメモ帳にでもバックアップしながらやると、削除しすぎて困った時に元に戻すのも簡単です。
プレビューでちゃんと表示されているのが確認できたら再構築して終了です。
▼すっ飛ばす方法もあるようだ
hail2u.net - Weblog - Fahrner Image Replacement hacks
▼kyoさんはこんなこともやってた。さすが(´ω｀)
hail2u.net - Weblog - タイトル改造
Blog Feed
Comments
コメントエリアをスクロールする / スクロールを解除する
ただ単に消すだけではダメなんですか…難しいですね。＞タグ
もう少しで、知らずにやってしまうところでした(^^;)
いつもお役立ち情報を有難うございます。
では情報料の方は所定の口座に…(笑)
いいこと聞いちゃった
さっそく画像にしちゃいました
情報料は現金書留でもよろしいでしょうか
(*≧ｍ≦*)ププッ
こんばんは
また来ちゃいました。
早速画像に替えちゃいました。
ありがとうございました。
見た目だけの問題にしてマークアップを気にしないならば消してもいいんですが、そこを気にするかどうかですね（笑）
h1～h6はレベル順の見出しになていて、h1がその文書での最大の見出しにあたるため、タイトル部分に設定されることが多いです。文書の表題とでもいえばいいかな。
約束の金はチューリッヒ銀行へ。（ゴルゴ
どうしても突っ込みたくて初パピコはじめましてー。
ゴルゴってスイス銀行じゃなかったでしたっけ？？
あ、スイス銀行なんですか？(*´∀｀)
ゴルゴ読んだことないんで知りませんｗ
うお、そうでしたか。
自分結構ゴルゴヲタなんでｗ
空気読まず重箱のスミつついちゃってすいませーん。
ユヅさん、はじめまして。
テンプレをお借りしたり他にも何かとお世話になっている者です。
自分の心理が読まれてしまったかのようなエントリーに思わずTB送らせていただいてしまいました。
別に自分に直接ツッコまれた訳でもないのに、何故か非常に恥ずかしい気分が_|￣|○
これからも勉強させていただきます。どうぞよろしくお願いします！
●chaioさん
いえいえ、勉強になりました(*´▽｀*)wﾇ
某ゴルゴを使ったネタで、チューリｈｈ（ｒｙといっていたものがあって、それで覚えちゃったんだとおもいます（笑）
●智さん
あはは、見抜いてしまいましたかｗ
画像を背景として使いたいなら、divに背景でイラストを指定して、中身に1px*1pxの透過画像をヘッダ部分のサイズに拡大したものをダミーにしてトップへのリンクを貼らせるっていう手もあります＾＾
こんばんは。
こちらを参考にさっそく画像に替えて見ました♪
いつも参考にさせていただいてます、ありがとうございました☆
普通に
<h1><a href="{site_top}"><img src="ロゴ画像のURL" alt="{blog_name}" border="0" /></a></h1>
でいいんじゃないですか？
●アキさん
こんばんは。
タイトルロゴとボタンの背景が合って可愛くなりましたね＾＾
●tkk5000さん
altに{blog_name}は使えないんですよ～。{blog_name}は、それ１つで
<a href="サイトURL">サイト名</a>
というタグを書き出すので、altにいれると画像とh1サイズのテキストと、タグの一部分が出てくるはめになります＾＾；
この方法でやるとロゴの背景まで無くなってしまうので、<h1> </h1>の間だに <a href="～"></a>を入れてるのですがそれではダメなんですよね？
うーん難しいなぁ
●Juraさん
ダメなわけじゃないですよ＾＾やり方は人それぞれだと思いますし。
自分で納得のいく方法が一番ではないでしょうか。
id名などはテンプレで違うしと思って書いてないんですがベースHTML部分は、
<div id="head"> </div>
の間に入れる前提で書いています。
ヘッダに背景をつけたい場合は、#headでサイズと背景を指定して～という感じにしてるのがいまのblog*citronです。中身に余白をつけたければ#head imgで指定してもいいし、div入れ子にするのでも。
私はロゴと背景を別々に画像にしたくて、さらにGoogleは画像のalt属性の代替テキストをインデックスしていないためdisplayで隠すといった方法をとっています＾＾
なるほど……ダメだと言うわけではないのですね？
自分の納得の行く方法が一番っとφ（。。）wﾐwﾑwﾐwﾑ
何時も勉強させていただきます、ありがとうございました
いつもお世話になっています
今回も参考にさせて頂きました
ありがとうございました
初めまして＞＜
Sbの小梅を使わせていただいてます・ｖ・
どうしても詰まってるトコがありまして
教えて頂ければ助かりますw毆ﾝ(wﾝ´Д｀wﾝ)wﾝw・n同じ方法でやったんですが、再構築して
見たときにカレンダーと画像のロゴの間に
小さな空きが出来ちゃってるんです(´w｣ωw｣`)
ぴったりくっつけさせたいのに、
やり方がわからなくてw毆ﾝ(wﾝ´Д｀wﾝ)wﾝw・nどうすればいいんでしょうか＞＜
●ときねさん
書きにくければ拍手のほうからでも構いませんのでURLを教えていただけますかー？＾＾
Σ(wﾝДwﾝ；≡；wﾝдwﾝ)
あわわごめんなさいデス＞、
書き込んだ時にまだサーバーアップしてなくてw毆ﾝ(wﾝ´Д｀wﾝ)wﾝw・n色々いじってたら出来たのですが、
他のPCできちんとなってるか心配です(´w｣ωw｣`)
●ときねさん
じゃこうしてみてください。
▼HTML
<h1><a href="link title="The boundless sky"><span>The boundless sky</span></a></h1>
▼CSS
h1 {
margin:0 auto;
display:block;
background-image: url(link
background-repeat: no-repeat;
height:171px;
width:700px;
border-right: 1px solid #674f4c;
border-left: 1px solid #674f4c;
}
h1 span { display:none; }
画像の横線がちょっと邪魔になると思うので、画像側で消してあげるとよいですー；
（IEにあわせてボーダーをつけてしまうと、他ブラウザではボーダー幅分のズレが出てしまうのです）
出来ました！
あわわ、有難うございました.w毆ﾝ+.(wﾝ∀wﾝ*)w・.wﾝ
ユヅさん、はじめまして。
先日、sbを導入したばかりの初心者なのですが・・・
どうしてもタイトルロゴの画像が反映されませんー。（泣）
どうしてなのでしょう・・・
こちらの説明通りに行っているはずなのですが・・・
ちなみに設置したい画像のURLは
link
です・・・
何卒、よろしくお願いいたします。
●hitomiさん
CSSの方を、
background:url:(http～);となっているところを
background:url(http～);
に直してみて下さい。
多分それで表示されると思いますよ＾＾
うあーー♪♪♪
ユヅさん、ありがとうございましたーーー！
出来ました、出来ました！（笑）
こんなに早く対応して頂いて恐縮です。ありがとうございました。
カスタマイズ、楽しいですね♪
ユヅさん、はじめまして。
タイトルを画像にするのに悩み、
テンプレ配布元の作者様からこちらを紹介していただきまして参考にさせていただきました。
ユヅさんの素材はapeのスキン（空の画像のです）にお世話になったりとにかく昔から有名サイト
なのでblogに変化した今も
ちょくちょく勉強させていただいています。有り難う御座いました！
●riccoさん
はじめまして、こんにちは。
コメント有難うございます。
参考になれば良かったですー＾＾
sky collectors boardですね、なつかしい…（笑）うわぁ、作り直したくなってきました（恥）
今後ともごひいきにー！
はじめまして。
事後報告ですが こちらのページ参考にさせていただきました。
他の記事もとてもわかりやすく説明されていて
ブログ初心者にとってとても助かりました♪
ありがとうございました～！
（そのときの紹介記事にトラバさせて頂きたいと思いますm(__)m）
↑DiaryBlogのＯＰＥＮ前に更新したので先月の記事なんですが（汗
今からトラバ作業させていただきます。
●あーちゃんさん
こんにちは。
トラバ受け取りました＾＾
「テンプレでつまづく…」のエントリを拝見したのですが、うちのテンプレではエントリーナビの部分はid="entry_navi"ではなくclass="entry_navi"になっているはずなのです。
それにあわせてCSSもdiv.entry_naviとして指定してあるのですが、そちらで何かのカスタマイズをされた時にidに書き換えて、CSSの指定が無効になったと思われます。
デフォルトの状態で#entry_naviにしてしまうと、逆にCSSが効かなくなってしまうのでご注意下さい＾＾
ユジさま
こんばんは。さっそくのお返事＆トラバ了承ありがとうございます。
他の記事も読んでいただいたようで嬉しい限りです。
そしてＣＳＳの件ですが そうなんですか…
色々わからずいぢってましたので
途中でなにかしてしまったのかもしれませんね？
全くもって知識が無いので このようなご指摘トテモ嬉しく思います！
記事の追記しておきました。
これからもよろしくお願いいたします。
はじめまして。
いつも素敵なテンプレートや素材、楽しみに拝見しています。
今回お借りしたテンプレートでタイトルを画像にするカスタマイズをやってみたんですが・・・。
何度やっても、サイドバーが崩れてしまうんです・・・。
画像もはみ出してる気が。
なんか・・・根本的に間違ってるような気がしてならないです。
一応説明に沿って設置したつもりなんですが、どうしても解決方法がわかりません。
お忙しい時にごめんなさい！！！
どうかアドバイスをお願いします。
●のんさん
title_iconとかも削除しちゃっていいんですけど、とりあえずCSSだけで直す方法書きますね。
div.entryのmarginをmargin:0;にする。
h1 a のwidthを480pxにする。（記事幅より大きいサイズにしているためはみ出してるんです）
div.title_iconは{ }ごと削除する。
これで一応タイトルにぴったりはまるはずです。
タイトル画像の幅を記事幅より広く指定してはったので、はみだして、それが押し出してサイドバーも落ちたんじゃないかなと思います。
ユヅさん！！ ありがとうございます！！
無事にサイドバーも戻ってきたし、ちょっとはみ出た水玉が可愛くて(≧∇≦)ノ もう大満足です！！
こんなに早くお返事いただけるなんて思ってもいなかったので『メールフォームで送りなおそうかな～』とか思って覗いてみたんです。
そうしたら！！！
凄く感激しました。
本当にありがとうございます！！
いつもいろんなカスタム方法を教えてくださって、感謝してます。
ちゃんと使いこなせるようにしっかり勉強しますね！！
ショップ、大変だと思いますが頑張ってください♪
楽しみにしています。
ユヅさんこんばんは＾＾
やっとｓｂ設置してこちらのテンプレを入れれました(；-；）
さて、初心者の質問なのですが、画像が表示されません。
CSSはCSS内のドコ部分に入れ込んだらいいでしょうか？
もう1つ、水玉のテーブルはどうやったら出ますか？
お忙しいのに初心者質問で申し訳ありません＾＾；
ユヅさん、こんばんは！
画像UPできました！！
水玉のテーブルもわかりました＾＾； すみませんでした★
後ですね、ブログ内、右クリック禁止には出来ないのでしょうか？？
●sachiさん
こんばんは。
無事出来てよかったですね＾＾
右クリック禁止は不可能ではないですがおすすめしません…。
ソースを見られたくない、画像を保存されたくない等のご理由はあると思うのですが、右クリックを禁止してもどうにでも方法はありますし意味がないです＾＾；
また訪問者さんが右クリックメニューのすべてを使えなくなるので、折角来てくれるお友達にもとても不便を強制することになり、初めての方だと二度と来てくれなくなることもあります。
他にも、何かカスタマイズの質問をしても、右クリック禁止にしていたら誰も回答してくれないでしょう。
ユヅさんご回答ありがとうございます＾＾
前に画像を無断で取られた事があって そういうの止めて下さいって意味で右クリック禁止に出来たらな…と思いました★
また何かわからないことがありましたら ヨロシクお願い致します＾＾
ユヅさんこんばんは。いつもお世話になっています。
今回、こちらの「桜」を利用させていただいて、タイトルを画像にしたいと思ったのですが、どうしても画像が表示できません。
ベースHTMLのほうは<!--BEGIN TITLE-->と<!--END TITLE-->間に差し替えて置き、CSSのほうは/* タイトル */の一番下に追記しました。
拍手のほうでURLをお送りいたしますので、申し訳ありませんがアドバイスいただけますでしょうか。
お忙しいところ申し訳ございません。宜しくお願いいたします。
●YURIさん
説明書きの部分まで一緒にコピペされているのが原因かと。
「※センタリングする場合」とかのテキストは、必要に応じて追記/削除できるようにという解説なので＾＾；
基本として、CSSの中でCSSのルールにのっとった記述以外の文章を書く場合は（日本語なども）コメントアウトが必要です＾＾
こんにちは。初歩的なミスに丁寧にお答えくださってありがとうございました。無事に表示されました。あまりにも初心者丸出しのミスでお恥ずかしい限りです。本当にありがとうございました。お手を煩わせてしまって申し訳ありませんでした。
これからも応援しています。頑張ってくださいませ。
はじめまして、PONといいます。
こちらを参考にさせていただいてタイトルを画像にすることができました。
またモブログ導入もこちらを参考にさせていただきました。
ありがとうございました！
P.S トラックバックをさせていただきました
●PONさん
はじめまして。
モグログ導入・カスタマイズお疲れ様でした＾＾
トラバも確認しましたですー＾＾
こんばんわ
はじめまして
先日、やっと念願のSereneBachを設置できました
そしてこちらのテンプレ(蜂蜜ドロップ)をお借りしました
報告が遅くなり、申し訳ありません
タイトルに画像を使いたくて、こちらのカスタマイズを参考にさせていただいたのですが、画像はアップできたものの、その画像をクリックするとタイトル文字がデカデカと出てきてとんでもないことになっちゃってます
どうしたらよいのでしょうか？
お暇な時で結構ですのでアドバイスいただけたらうれしいです
よろしくお願いします
連続投稿ですみません
解決しました
お騒がせしました
ごめんなさい
これからもどうぞよろしくお願いします
はじめまして！
一昨日に桜のテンプレートをお借りして
タイトルを画像に変えたのですが、エラーが出てしまいました。何度か書き換えたりしたのですが直らなくて・・・。
よろしければご伝授お願いします(ＴдＴ）
HTML
<!-- BEGIN title -->
<div id="title">
<h1><a href="link title="blog"><span>blog</span></a></h1>
<div class="description">{blog_description}</div>
</div>
<!-- END title -->
SCC
/* タイトル */
#title {
BORDER-RIGHT: #d2a6a6 0px solid;
}
DIV.description {
FONT-SIZE: 10px;
MARGIN: 10px 0px 0px;
COLOR: #a75454;
TEXT-ALIGN: center
}
h1 a { display:block;
MARGIN: 10px 0px 0px;
height:100px; /* タイトルの高さ */
width:480px; /* タイトル部の横幅 */
BORDER-BOTTOM: #d2a6a6 1px dotted;
background:url(link
background-repeat:no-repeat; /* リピートさせない場合 */
}
h1 span { display:none; }
これで間違ってませんよね？？なぜページエラーが出るのか(ﾉД`)
●ゆりあさん
URLがかかれてないのでどういったエラーがでているのか存じ上げませんが、ブラウザで「エラー」としてステータスバーに黄色いアラートのアイコンが出るような類のものでしたらば、HTMLとCSSは関係ないと見てよいでしょう。HTMLやCSSではミスをして画面の表示がおかしくなることはありますが「エラー」と出ることはありません。
JavaScript関係ではないかと思われます。本体の設置側やJavaScriptを使ったカスタマイズでのミスの可能性が高いです。
パーミッションの確認や、アクセス解析やカスタマイズで導入したJavaScriptを疑ってください。
ユヅさんこんにちは。
いつもわかりやすいカスタマイズ方法をUPされていて私の様な初心者には大変助かります！
タイトルロゴを画像にするもほとんどコピペだけの簡単な方法なはずなのですが上手くいきません。機能は問題ないのですがどうしても画像が右寄りになってしまいます。センタリングしたいのですがどうすればいいのでしょうか？お忙しいとは思いますがご指導よろしくお願い致します。URLはこれから送信しますね
●nyoroさん
こんにちはです～
URLを拝見しましたが、今は元に戻していらっしゃるようですね。
お医者さんが健康な人を見ても病気の診断ができないように、質問されている内容の症状が実際に確認できるアドレスを教えてくださらないと、何がどうなって上手くいっていないのか原因を調べることが出来ません。（コメント時の注意書きにも記載しています）
コピペをそのまましたのであれば、同じ箇所（この場合h1やタイトル付近）に元々テンプレートに指定されているCSSが邪魔をしている場合があります。
同じ箇所に対して2つのCSSを別々に指定していても、どちらか1つが適用されるのではなく可能な限り両方が再現されます。
右よりになっているということは、書き加えた部分ではなく元々のCSSで左にスペースが設定されているのではないでしょうか。
こんばんは。
ごめんなさい！何とかならないかと自分でいろいろといじってた時にきっと訪問して下さったんでしょうね。
今は右よりの状態になっていますがきっとユヅさんのご指摘通り元々のCSSでスペースが入っているんでしょう・・・。もう一度CSSとにらめっこしてみます。
もしお手すきでしたら一度見てもらえると嬉しいです（！？）
ご迷惑おかけしてすみませんでした！
あ、それと余談ですが
こちらでおさわり探偵・・・を知って
すぐに予約してしまいました！（笑）
楽しみですねー♪
●nyoroさん
#title_area h1 {
margin:0px;
padding:20px 0px 0px 30px;
font-family:Verdana,Osaka,sans-serif;
font-weight:bold;
color:#333333;
font-size:20px;
letter-spacing:1px;}
これのpaddingが原因ですね。
まるっと削除するか/*と*/で囲んでエスケープさせてしまえば、右にずれる問題は解消されます。
このままだとカレンダーがタイトルにかさなってしまうので、
#title_area {
width:700px;
height:80px;
margin:0px;
padding:0px;
text-align:left;
background:#ffffff;
}
のheight:80px;を削除して下さい。
また、searchのボックスがタイトル部分に設置されていますが、float指定がかかっているため、カレンダーが折り返して2行になってしまったり、ブログの説明文に重なったりしています。
サイドバーに移動させてしまった方がヘッダがすっきりすると思いますよ～
ユヅさん、
こんにちは。
以前から隠れつつお邪魔していたものです。
今回、sbからSBへ移行したのですが、その際にとてもとても参考にさせていただいたので、いちばん最後にお世話になったエントリーにコメントさせていただきました。
本当にどうもありがとうございました。
一つ質問があるのですがよろしいでしょうか。
タイトル画像は表示できたのですが、その画像にリンクがはれないようなのです。
一応、指示どおりにURLも書き込んだのですが。
お暇なとき、気が向いたときに、よろしければ、ちょろっとみていただけることがあると幸いです。
それでは失礼いたします。
noelさん＞
こんにちは。移行お疲れ様でした。CSSの解説部分はご覧になっていただけましたでしょうか。いま拝見したURLでは、がこちらの解説とは違ったものになっているようです。
div#title_areaへの背景指定と、h1へのCSSの指定（それぞれおそらくテンプレートのデフォルトに近いものだと思いますが）に、h1 spanでテキストを隠しただけの状態に見えます。
背景があってもh1 a という中身がないのでリンクがクリックできない状態です。
・解説を参考にh1 aに対するスタイルを設定
・デフォルトのテンプレートについているh1に対するCSSを削除
・#title_areaを残す場合はbackground～を削除
と、してみてください。
htmlだけではなくて、CSSの設定も合わせないといけないので片方だけではうまくいきません＾＾；
ユヅさんへ。
こんばんは。
早速のお返事ありがとうございます！
＃title_area部分を全部削除してみました。
そしてよく見てみたところ、cssの”h1 a”の”ｈ”をコピペミスしていたようです。
なんとお詫びしたらよいのやら…；
＃title_areaを全部削除し、お教えいただいたcssを貼り付けたのですが、
（正確には”レイアウト設定”内の＃title_areaを削除し、そことは別項目の”ブログタイトル”部分のcssを書き換えました）
タイトル画像の横部分の線が消えてしまったので、
background-repeat:no-repeat;
の下に、
border-right:1px solid #bbbbbb;
border-left:1px solid #bbbbbb;
を入れてみました。
見た目は大丈夫なんですが、記述の面でちょっと心配です。
なにはともあれどうもありがとうございました。
また、BPのカスタマイズについてもありがとうございました！！
さっそく導入しました。
併せてお礼申し上げます！！
noelさん＞
お疲れ様でした＾＾
borderを左右に挟むのは問題ないですよ～。ばっちぐーです。
BPのカスタマイズも参考になったようでよかったですー＾＾
borderの件、問題ないとのことで安心しました。
いろいろとご迷惑をおかけしました。
ありがとうございましたー*^_^*
こんにちわ。先日はテキストの回りこみで、大変お世話になりました。
今日は、タイトル画像のことでお教え頂きたいのです。
書いている通りにしましたら、画像が微妙にずれていて、横の線もなぜか太くなってしまいました。
画像は縦１５９、横７００です。
どうぞよろしくお願いします。
miwaさん＞
こんにちは。
まず、</div>を１個消してしまっているのと、CSSで削除していないところがあってスタイルが重複しているのが原因です。
1: htmlで</h1>のあとに</div>を追記
2: CSSから/* タイトル部 */の４箇所を削除
div.description、h1、div.head、div.head hrの４つを削除して下さい。
これで試してみてくださいね。
わあ～はみ出さずに表示できました。ありがとうございました。
それで、後１つなんですが、左上のサイト名を消したいのです。
いろいろいじりましたが、まったく消えないんです。お忙しいところ申し訳ないんですが、宜しくお願いします。
miwaさん＞
<span>を入れ忘れていらっしゃるようです。
ベースHTMLのタグの書き方を参考にspanで囲むようにして下さい。
少し時間がかかりましたが、無事消すことができました。今回も助かりました。ありがとうございました。
はじめまして！
私はMTユーザーですが、
こちらの記事、大変参考になりました。
フォントに縁取りした物をどうしても使いたくて(^_^;)
うまく出来ました。ありがとうございます！
ユヅさん こんにちは
こちらの記事を参考にさせていただきました。
自分なりに変更してやってみたのですが、
ちらつきが出るようでうまくいきません。
確認のほどよろしくおねがいします。
お手数おかけいたしますm(_ _"m)
あちゅこさん＞
何度か見てみたんですが、一通りのモダンブラウザで試しても、ちらつきは確認できませんでした。普通にできているように見えるので、これといって問題があるようではなさそうですが、まだちらついているのでしょうか～。
仮に影響を与えるとすればテンプレートに元々設定されているCSSで、h1やヘッダ付近など関係しそうな部分のCSSのうち、今回追加したCSSとスタイルの指定が重複してしまって上手くいかない場合もあります。
その場合は元CSSの重複箇所を消すことで対応できます。
ユヅさん
確認のほどありがとうございます。
ちらつきのほう直ったようでよかったです＾＾
丁寧にありがとうございますたm(_ _"m)