またスタイルシートをいじってみた！！★タイトルに画像を使ってみた。
あまり記事も書かないで最近はCSSばかりいじっています。って言うものの、たいして変わり映えしないのですが、ちょっとある方から、「タイトルに画像を入れる方法教えて？？」と言われた。今まで私も何度もチャレンジしてみたものの、あまりうまくできなくて挫折していたのであるが、月額290円のアドバンスに申し込んでHTMLをいじれば、案外簡単にできることはわかっていた。しかし、優柔不断な私はいまだに申し込んでいない。そろそろ申し込んでみようかなんて思い巡らしてはいるものの、スタイルシートだけで、できることはそれでやってみたいと思い、何度もチャレンジしてみた。
それで、何とかできました。
今使っているのは、「カスタムテンプレート ブルーのCSS」です。
/* ブログタイトルのリンク */
.bTitleLink {
background-image: url(”http://www.flima.jp/back/title.gif”);
width: 400px;
height:80px;
text-decoration: none;
}
という感じです。
私の場合、幅400px 高さ80pxの画像を作って、アップしてみました。
すでにやっている方いると思いますが、チャレンジしてみてはいかがでしょう？？
案外簡単でした。
ただし、モジラ系Firefoxなどでは、反映されないようです。
Firefoxでも見れる方法知ってる人教えて？？
参考にします
参考にさせていただいています！
ソースを張るだけで
精一杯なので
タイトル画像もなかなか
変えられなくて
困っておりますが
少しずつがんばろうかと・・・
トラバありがとうございました。
これからも日記がんばってください。
コメント by タカシマショウコ — 05/03/20日 @ 17:13:49
オイラ
アドバンスにしたけど、アクセス解析しか見てない。
勿体無いから止めよかなと思っちゃうくらい。
なかなかデザインに手が出ないんですよ。
記事とコメントで時間が足りない感じです。
もっとゆったりとやればいいんでしょうけどね。
なかなか・・・
コメント by パーシー — 05/03/20日 @ 22:46:37
タカシマショウコさん
まずタイトル画像を作ってみてください。ただし、縦横サイズを決めてください。
それを画像フォルダにアップして、その画像のアドレスを
background-image: url(”http://…….”);
のところに記し、
width: ***px; ←画像の横幅サイズ
height:***px; ←画像の高さサイズ
を記してください。
あとは、タイトルフォントの大きさを指定してうまく重ならないように、微調整して画像を作ってください。
コメント by じゅん吉 — 05/03/21月 @ 9:41:50
パーシーィ～！！
いいな～！！アドバンス！！
ホントそろそろ申し込みしてみたい。。
アクセス解析は、気になるところ。。
でも、
> 記事とコメントで時間が足りない感じです。
これって、ブログ本来のあり方だと思うよ。記事がメイン。記事書かないブログってやっぱりつまんないかもね？？って自ブログのことだけど。。
記事書いてのブログだからね！！テンプレいじりは２の次だよホントはね！！
コメント by じゅん吉 — 05/03/21月 @ 9:47:09
すみません～・・・
これでやってみましたが
いやはや・・・
一応今日いっぱいこのやり方のまま放置しておきます。
このタグ（茶色）を一枚だけ
タイトルのところに貼って
タイトルやタイトル説明を
全て削除したいんですが・・・
どこが悪いのかお分かりでしたら
お教えください。
本当にすみません・・・
・なぜ、タイトルや説明がでてしまうのか
・なぜ、茶色のタグが連続で小さく出てしまうのか
この2点が最もわからないです・・・
/* ブログタイトルのリンク */
.bTitleLink {
background-image: url(”http://blogimg.goo.ne.jp/thumbnail/4c/da/998b777afd2327e8b704942e169677a7_s.jpg
“);
width: 400px;
height:80px;
text-decoration: none;
}
コメント by タカシマショウコ — 05/03/21月 @ 17:33:25
何度もすみません
http://blog.goo.ne.jp/takashima_nangyo/
自分のＨＰアドレスを入れるのを
忘れていました。
本当にすみません。
コメント by タカシマショウコ — 05/03/21月 @ 17:34:47
タカシマさん
まず、タイトル画像が、小さいようですね。
もちろんサイズはどんなサイズでもいいですが、
width: 400px;
height:80px;
で指定したいなら、高さ80PX 横幅400PXで作ってください。
それからブログタイトルフォントですが、その背景画像と重なりますので、できれば小さめに設定をお勧めします。そうすれば、重なり部分をうまく利用すればそれなりに見栄えのいいタイトル画像を利用できるはずです。
/* ブログのタイトル */
.bTitle {
color: #BF4B50;
font-size:10px;
font-weight: bold;
font-family: ‘Century Gothic’,VERDANA,ARIAL,SANS-SERIF,Helvetica,’MS P ゴシック’,Osaka;
}
コメント by じゅん吉 — 05/03/21月 @ 19:34:23
●タカシマサン
めちゃくちゃ苦労したぞ！！
いや、単に透過画像の作り方を忘れていただけなんですけど。
-お待たせ。
HTMLの編集画面から、
＜ヘッダー＞部分を探し、以下のように書き換えてください。
<!– ヘッダー –>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="headerLight">
<table border="0" cellspacing="12" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="6" cellpadding="0">
<tr>
<td align="left"><a href="{$blogurl}" class="bTitleLink"><img src="http://blogimg.goo.ne.jp/user_image/46/61/40c9d73e21c69d4e7b11aaac20833613.png" border="0"></a></td>
ただし、現状の背景画像では、読みにくいと思いますので、綾波風のイラストを、画像処理ソフトでモノトーンにするなどの工夫が必要です。
フルカラー画像では、どうやってもうまくいきません。
ブログの概要に、見やすい色で「イラストも毎日更新中」でできあがり。
—-
こんな題名画像でいかが？
http://blogimg.goo.ne.jp/user_image/46/61/40c9d73e21c69d4e7b11aaac20833613.png
背景に設定した画像の上に、文字だけ乗っかっているはずですが、背景画像を白っぽい画像に買える必要があります。
要は、透過画像を作れるかどうかです。
コメント by えっけん — 05/03/21月 @ 22:30:19
ありがとうございます！！
じゅん吉さま、えっけんさま、
ありがとうございます。
ブログの編集の件で
こんなに親身に答えてくださり
本当に感謝の気持ちでいっぱいです。
まわりが誰もブログをやっていないので
誰にも相談が出来ませんでした。
まだ、なかなか初心者の枠から
抜けることが出来ませんが
今後ともなにとぞ
ご指導願います。
じゅん吉さま、こういう質問の場所を
提供してくださり
ありがとうございました。
コメント by タカシマショウコ — 05/03/21月 @ 23:05:06
あー。
じゅん吉おじさんのところでこの話し続けるのもなんだけど、いまタカシマさんのブログ見てきたら、あの背景画像に赤字は良くないかもね。
背景画像を変えるつもりがなければ、青字とか、白い縁どりをつけたほうがいいかもね。
すまぬ、今似たような相談を数箇所で請け負っているので、透過画像の作り方を学んでください。
コメント by えっけん — 05/03/21月 @ 23:15:11
いいな～！！
ホントにいいな！アドバンスって！私にとってHTMLをいじれるってことがいいな～って思うよ。そろそろ決断のときだな！！
えっけんさん！！ホントにアリガトな～！！
助かるよ。
ところで、タカシマさん！！じっくりブログ生活を楽しんでくださいね！またわかんなかったら、えっけんおじさんとじゅん吉兄さんがついているからね！！
コメント by じゅん吉 — 05/03/21月 @ 23:59:48
Firefoxでは
じゅん吉さん、こんにちは。
こちらにコメントするのは初めてかもしれません。
私はFirefox遣いなんですが、確かにタイトル画像表示されませんね。
で、ソースを見てみたんですが、たぶん、タイトル部分のクラス設定を「span」タグで指定してあるからではないかと愚考します。その前に「a」タグにも別のクラス設定がされているので、そこのところの処理がうまく行っていないような…(インライン要素同士でぶつかってるとか?)。
うーん、素直に「h1」タグとか使えばいいのにと思うんですが…。
なので、htmlの方をいじらないと表示させるのは無理かもしれませんね。
ソース見て驚いたんですが、全部テーブルタグでのレイアウトなんですね…。(ってこれはgooブログの仕様なんでしょうが)。
せっかくCSS使ってるのに、なんだかもったいないなぁ、と思いました。
コメント by かれん — 05/03/22火 @ 15:27:27
かれんさん！！
いや～。私の疑問に答えていただけたなんて本当に嬉しいです。ありがとうございます。
実は私もFirefoxをブログ中心に使ってまして、IEとFFとのCSSの認識の違いにいつも悩まされているんです。サイドバーにスクロールを使ったら、ちょっとレイアウト崩れてしまって、また時間見つけて直して見ようを思っているんです。
今回のタイトル画像の件ですが、やはりCSSだけでは難しいんですね！！今私はgooのサービスを無料で使っているので、HTMLなどを触る事が出来ないんですよ。だから基本的に現段階ではあきらめるしかないですよね。
しかし、かれんさんがおっしゃったように、HTMLソーズ見ると、テーブルタグが多用されていて、CSS編集を非常に難しくしているように思います。ハイブリッドと言えばそれまでですが、そのあたり、私も同じ考えです。
まあ仕方がないですね。今度お金払ってからいじらせてもらいます。（笑）
今回は、本当にありがとうございました。このような私の疑問に応えていただいてとっても嬉しく思っています。
今後ともよろしくお願いします。。
コメント by じゅん吉 — 05/03/22火 @ 18:07:47
ちょっと、お尋ねします。
じゅん吉さま。
こんばんは！
わたくしのPC上では、この記事＆コメントの表示横幅がすごーーーく広いのですが・・。かなり右にスクロールしないと全記事が読めないのです！ちなみに画面は15型です。
・・わたくしのPCの不具合なのでしょうか？
◎他の日の記事＆コメントは横スクロールなしでOKです。・・今頃になってすみません。
ご解明よろしくおねがいいたします。
コメント by みやこ忘れ — 05/04/01金 @ 2:27:34
みやこ忘れさん
みやこ忘れさんのPCの問題ではありません。
これは、上から８っつ目のコメント下さった方のタグが、改行されずに、そのまま引き伸ばされてしまっているからです。
本来コメント編集ができれば、元に戻るのですが、それが出来ないのでこの状態となります。ですからみやこ忘れさんのPCの不具合ではありません。ご安心ください。
コメント by じゅん吉 — 05/04/01金 @ 12:44:05
そうだったんですかー。
じゅん吉さま。
こんばんは！夜行性のみやこ忘れです。。
早々のご解明ありがとうございました。（ﾔﾚﾔﾚ。）
わたくしは『カスタムフリー』でゴソゴソやっていますが、不自由ですねぇ～。
・・アドバンスも考えてはみたのですが、制約があるなかで、どれだけカスタマイズ出来るか『抵抗』してみるのも面白いし、勉強にもなるのではと思い無料のカスタムフリーを使っています。・・まだまだ修行が足りません。
では、お手数をお掛けして申訳ございませんでした。
ありがとうございました。
コメント by みやこ忘れ — 05/04/02土 @ 1:11:29
みやこ忘れさん
いえいえ、どういたしまして。
みやこわすれさんも、すごいですね！
カスタムフリーに挑戦ですね！CSSいじりは結構面白いですよね。わたしも記事書かないでそんなことばかりしている時期がありましたよ。
それでは、また！！
コメント by じゅん吉 — 05/04/03日 @ 18:50:21
usk_hさん
はじめまして！ようこそ！
この記事がお役に立てて本当に嬉しいです。
また互いにCSSチャレンジ頑張りましょう！！
PING:
TITLE: タイトル・背景に画像を入れてみる（解説＆訂正）。
BLOG NAME: usk_h.blog
昨日書けなかった↓の解説をしたいと思います｡
まず『ヘッダー背景に画像を貼る』方法です｡
ボクの現在使用しているのは『カスタムブルー』なんで『gooブログA to Z（第9回）』の方法を使わせてもらいました｡
あと画像の貼り方の基礎は『BLUE_SKY_BLOG』さんを参考にさせ
PING:
TITLE: ブログタイトルを画像にするCSS
BLOG NAME: むっしゅの戯言 SPEC-B3
gooブログ無料版でブログタイトルを画像にするCSS。HTMLが弄れない無料版でもタイトルを画像にしたい！という方へ。
コメント by じゅん吉 — 05/05/27金 @ 10:04:03
じゅん吉さん、
こんばんは。
ブログ初心者講座読ませて頂きました。
勉強したおかげか、こうした記事も理解しながら（半分くらい…）楽しく読めるようになりました。
タグを英和辞書などで調べると結構頭に入ってきますね。
ホームページの作成にも興味が湧いてきました。
またこうした記事を参考にさせて頂きます。
そういえば、
前このサイトにコメントした時「お問い合わせ」にいろいろと送信してしまいましたが…
最初の問い合わせ、わかりましたか？
もしかしたら…と思って送信しました、
わからなければスルーして下さい。
コメント by 芝村 — 08/07/17木 @ 19:17:57
芝村さん！
こんばんは！
タグを英和辞典で調べるっていいかもしれませんね。
ホームページに限らず、パソコン関連用語ってまったく理解できないような
外来語が多いので、誰でもそこで躓いてしまうんですよ。
わからなかったら調べるってとっても重要なことだから、
英和辞書は、いいアイデア。
また、これらの記事で参考にしてもらってこちらもうれしいです。
これからもよろしく。
コメント by じゅん吉 — 08/07/17木 @ 23:44:03