みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

FC2ブログのタイトルについて質問です

現在ブログのタイトルに画像をロゴとして使用しているのですが、タイトルを入力すると真ん中に表示されてロゴとかぶってしまうので現在は目立たないように.のみにしています。
そうするとブログの見た目はきちんとタイトルがついているように見えるのですがタイトルが表示されるウインドウの青い枠(OKwaveならOKwaveと表示されている部分)には.しか表示されません。
どうにかしてタイトルを表示されるようにしたいのですがどうしてもロゴの画像と重なってしまうのです。
文字を小さくしてみたり背景と同じ色にしようとしたのですがごまかしきれなくてダメでした。
どうにかタイトルを表示させる方法はありませんでしょうか?
分かりづらい文章で申し訳ありませんがよろしくお願いいたします。

マルチメディアファイルは削除されたか見つかりません。

投稿日時 - 2009-03-26 09:51:07

QNo.4827867

困ってます

質問者が選んだベストアンサー

使っているテンプレートにより記述を追加・変更する箇所が微妙に異なりますが、テンプレート編集で対応できます。
私の運営しているブログはタイトルは画像のみです。

まずは、テンプレート編集画面をみて、HTML編集欄内から
<%url>および<%blog_name>が含まれるところを見つけてください。
見つけたら、その前後10行ぐらいを補足してください。
変更すべき場所として正しければどこを変えればいいか指摘できます。

また、テンプレート配布元にてカスタマイズ例を公開していることもあります。
お使いのテンプレートの作者ページなどにタイトルを画像オンリーにする方法が記載されていないか確認してください。
できればお使いのテンプレート名を補足してください。
それがわかればソースを確認することができるので。

投稿日時 - 2009-03-26 10:18:02

補足

補足します。

<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml">

<title><%blog_name> <%sub_title></title>
</head>
<body bgcolor="#797979" background="http://templates.blog.fc2.com/template/hiphop/bg.gif">
<a name="pagetop">
<table cellpadding="0" cellspacing="0" border="0" width="770" align="center" bgcolor="#000000" class="table" style="padding:60px 0px 0px 20px">
<tbody>
<tr>
<td valign="top" width="100%"><br><br><br><br>

テンプレート名はFC2の公式テンプレートのhiphopというタイトルです。よろしくおねがいします。

投稿日時 - 2009-03-26 11:20:20

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

>縦幅の指定はできないのでしょうか?
tableタグの中に高さ指定を入れればいいのでは?
height=""でピクセル指定して。
そして使う画像をそれと同一サイズにすれば無駄な隙間はなくなるかと。

投稿日時 - 2009-03-28 01:34:26

お礼

table cellpaddingタグとtable borderタグ両方で試してみましたが変化無しでした。当初の質問は解決しましたし、これ以上jein様にご迷惑をお掛けするのも申し訳ないのでひとまず質問を締め切って新たに質問しなおしてみます。

最後までお付き合いいただき本当にありがとうございます。
大変助かりました。
また機会があればよろしくお願いいたします。

投稿日時 - 2009-03-28 04:06:34

ANo.3

以下の箇所でブログタイトルにあたる部分の位置が固定されて下に寄っているので
この記述を直せば位置が固定されることはなくなるかとおもわれます。

<table cellpadding="0" cellspacing="0" border="0" width="770" align="center" bgcolor="#000000" class="table" style="padding:60px 0px 0px 20px">
<tbody>
<tr>
<td valign="top" width="100%">

padding:60px 0px 0px 20pxの項目で、上側の余白を60ピクセル
右0ピクセル、下0ピクセル、左20ピクセル分とっているために
位置が右下寄りになっているので、この60pxと20pxを0pxにします。

タイトル画像として使う画像は、横方向のサイズが700であれば
収まりが良いのですが、これより横幅が長い画像の場合は
先に説明したIMGタグにて横幅を700pxに指定しておくことでも対処できます。

<img src="【画像】" alt="<%blog_name>" title="<%blog_name>" border="0">
これに以下のように横幅の指定を入れます。
<img src="【画像】" alt="<%blog_name>" title="<%blog_name>" border="0" width="700px">

黒背景の横幅ぎりぎりにタイトルロゴを表示させたい場合は
上記の横幅指定を770pxにすれば良いでしょう。

スタイルシート編集の欄でもいくつか修正が必要になります。

"メインテーブルの設定"で呼び出されている画像が、テンプレートの
デフォルトで画面上部に表示される部分です。
呼び出されている画像のサイズは770x221です。
この画像は背景として呼び出されるため、タイトルとして指定する画像の裏に配置されるものとなります。
タイトルに使う画像と重ねて違和感のない画像を770x221のサイズで
作ってしまうか、この"メインテーブルの設定"自体を消してしまえば
タイトル画像の裏側に画像が重なることはなくなります。
消す場合はコメント部分(/*~*/で囲んでいる部分)から
}までです。
コメント部とあわせて8行あるはずです。

"ブログのタイトルの設定"および"ブログの説明文の設定"のそれぞれの
定義内容のうち、line-heightの値は170%から100%に直します。
タイトルのほうはテキストを設定しないのでそのまま170でも大丈夫かとは思います。

その後のレイアウトの調整については、CSSの解説サイトなどを参考に
自身で微調整&確認を繰り返しながらやっていくしかないでしょう。

投稿日時 - 2009-03-27 09:55:19

補足

分かりやすい説明ありがとうございます。
おかげさまで大体は理想通りにできたのですが、横幅はぴったり収まったものの縦幅がギリギリではなくけっこう余っているんですが縦幅の指定はできないのでしょうか?
自分で試してみたのですがどうも分からなかったので教えていただければ幸いです。
よろしくお願いいたします。

投稿日時 - 2009-03-27 11:08:33

ANo.2

補足ありがとうございます。
が、その箇所じゃないですね。
テンプレート落として変更すべき場所が判明したのでお答えします。

まず、変更を加えるのは以下の部分です。
ソースを全選択してメモ帳などに貼ってから検索で探すと楽です。

<div class="site_title">
<a href="<%url>"><%blog_name></a></div>

これを以下のように変えます
例として、画像のURLを【画像】とします。
私の場合は読み込みが早いGIFファイルを使っていますが、JPEGでもPNGでもおそらく大丈夫です。

<div class="site_title">
<a href="<%url>"><img src="【画像】" alt="<%blog_name>" title="<%blog_name>" border="0"></a></div>

alt属性は画像にカーソルを載せたときのポップアップ文字を設定しているだけなので
不要ならば入れなくても問題はないです。

これで、ブログ名をブログの設定画面で正しく入れておけば、
画像がトップページのタイトル部分に置き換わるようになります。

投稿日時 - 2009-03-27 02:34:46

補足

教えていただいた通りに変更してみたのですがなぜかうまくいきません。変更したら画像が重なってしまったので添付した画像を見ていただけますでしょうか?
お手をわずらわせますがよろしくお願いいたします。

投稿日時 - 2009-03-27 03:30:57

あなたにオススメの質問