- ベストアンサー
FC2ブログのタイトルの表示について
- FC2ブログのタイトルに画像をロゴとして使用している場合、タイトルがロゴと重なってしまうことがあります。現在はタイトルを表示しないようにしているが、タイトルを表示させる方法はあるのかを質問しています。
- タイトルを表示させるためには、ロゴの画像とタイトルが重ならないようにする必要があります。文字のサイズを小さくしたり、背景色を調整することでタイトルを表示させる方法を試したが、うまくいかなかったと述べています。
- 質問者はFC2ブログのタイトル表示に関して困っており、タイトルが表示される方法を教えて欲しいという疑問を持っています。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
使っているテンプレートにより記述を追加・変更する箇所が微妙に異なりますが、テンプレート編集で対応できます。 私の運営しているブログはタイトルは画像のみです。 まずは、テンプレート編集画面をみて、HTML編集欄内から <%url>および<%blog_name>が含まれるところを見つけてください。 見つけたら、その前後10行ぐらいを補足してください。 変更すべき場所として正しければどこを変えればいいか指摘できます。 また、テンプレート配布元にてカスタマイズ例を公開していることもあります。 お使いのテンプレートの作者ページなどにタイトルを画像オンリーにする方法が記載されていないか確認してください。 できればお使いのテンプレート名を補足してください。 それがわかればソースを確認することができるので。
その他の回答 (3)
- jein
- ベストアンサー率49% (2799/5705)
＞縦幅の指定はできないのでしょうか？ tableタグの中に高さ指定を入れればいいのでは？ height=""でピクセル指定して。 そして使う画像をそれと同一サイズにすれば無駄な隙間はなくなるかと。
お礼
table cellpaddingタグとtable borderタグ両方で試してみましたが変化無しでした。当初の質問は解決しましたし、これ以上jein様にご迷惑をお掛けするのも申し訳ないのでひとまず質問を締め切って新たに質問しなおしてみます。 最後までお付き合いいただき本当にありがとうございます。 大変助かりました。 また機会があればよろしくお願いいたします。
- jein
- ベストアンサー率49% (2799/5705)
以下の箇所でブログタイトルにあたる部分の位置が固定されて下に寄っているので この記述を直せば位置が固定されることはなくなるかとおもわれます。 <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の解説サイトなどを参考に 自身で微調整＆確認を繰り返しながらやっていくしかないでしょう。
補足
分かりやすい説明ありがとうございます。 おかげさまで大体は理想通りにできたのですが、横幅はぴったり収まったものの縦幅がギリギリではなくけっこう余っているんですが縦幅の指定はできないのでしょうか？ 自分で試してみたのですがどうも分からなかったので教えていただければ幸いです。 よろしくお願いいたします。
- jein
- ベストアンサー率49% (2799/5705)
補足ありがとうございます。 が、その箇所じゃないですね。 テンプレート落として変更すべき場所が判明したのでお答えします。 まず、変更を加えるのは以下の部分です。 ソースを全選択してメモ帳などに貼ってから検索で探すと楽です。 <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属性は画像にカーソルを載せたときのポップアップ文字を設定しているだけなので 不要ならば入れなくても問題はないです。 これで、ブログ名をブログの設定画面で正しく入れておけば、 画像がトップページのタイトル部分に置き換わるようになります。
補足
教えていただいた通りに変更してみたのですがなぜかうまくいきません。変更したら画像が重なってしまったので添付した画像を見ていただけますでしょうか？ お手をわずらわせますがよろしくお願いいたします。
補足
補足します。 <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というタイトルです。よろしくおねがいします。