助太刀忍者(質問掲示板)

助太刀忍者

No.53221    タイトル画像の設置とタイトル文字の位置のズレを修正したい
http://hapi.v-kei.net/

どうしてもタイトルに画像を差し込みたくてなんとか取り入れることは出来たんですが、如何せん自分のHTMLタグやCSSの知識が低すぎてタイトル文字とサブタイトルが画像の右におかしな感じで表示されてしまいます。

完成したブログページのソースを表示させて元ソースを見比べてタグを足したり、自分なりに頑張ってはみたのですが。

どなたかお知恵を貸して下さい。
ちなみにベースにさせてもらったテンプレートは15_brownです。
投稿者:忍者ハピ丸 投稿時間:2013-01-29 00:51:20
投稿者 : No Name Ninja
投稿時間:2013-02-01 16:40:49
忍者の共有テンプレートのほとんどはユーザーから提供されたものです。
このためテンプレートによって構造が違います。
このテンプレートで字の大きさをいじって崩れそうなのは記事日付表示ぐらいではないでしょうか。

またここの回答者のほとんども忍者のユーザーです。
ここの書き込みだけで判断しますので、何をどうしたいのかを具体的に書かないと無駄なやり取りが増えるだけです。
なるたけ手を加えずに何とかしたいようなので一番手軽そうな解決方法だけ提示しておきます。
現在は画像という箱とブログタイトル&説明文という箱が横に二つ並んで置かれています。
これを縦2つ並んでいるようにするのはさほど難しいことではありません。

<div id="header">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>    ←(1)
<td width="200" align="center" style="padding-bottom:15px;">    ←(2)

<!/////////////class mainphotoのCSSを変更して写真を変更出来ます。//////////////-->
<!/////////////     写真のサイズは、160*120です。      //////////////-->

<div align="center"><img src="画像のURL"></div></td>    ←(3)
<td valign="bottom" style="padding-bottom:15px;"><div class="site_title"><a href="<!--$g_url-->"><!--$g_title--></a></div>    ←(4)
<div class="site_intro"><!--$g_explanation--></div>

</td>    ←(5)
</tr>    ←(6)


(1)と(6) すべて削除
(2)と(4) 行頭の <td を<tr に変更
(3)と(5) </td> を </tr> に変更


以上が終わったらテンプレートの名称の15_brownのあとになにか文字を付け加え
新規作成にチェックを入れてからデータ保存ボタンを押してください。
これで今使っているのとは別にもう1つ保存されます。
試しに適用してみて問題がなければそのままで
やりたいことはそうではないという場合は
具体的にどうしたいのかを明示してカスタマイズBBSにて質問してください。


>class mainphotoのCSSを変更して写真を変更出来ます。
CSSにこれがそもそも存在しないので紛らわしいですね。
投稿者 : 忍者ハピ丸
投稿時間:2013-02-01 13:37:20
写真のサイズはHTMLやCSSで最大サイズを変更しても無理ということですか。
写真については、もう少し考えないといけないんですかね。
下手に小さくすると画像が荒くなるし。
左2カラムで明るい感じのテンプレートを探したんですが、どれも字が小さくてCSSで大きくしても全体的にレイアウトがくずれそうなものばかりで、これでも妥協したんですがね。
投稿者 : No Name Ninja
投稿時間:2013-02-01 12:57:04
15_brownのトップにある鞄の画像は背景画像として置いてあるわけではありません。
左側に画像、右側にタイトル部分が置けるように2つに分割された表のようになっています。
このため画像をHTML内の説明にある「写真のサイズは、160*120です。」以上のものを入れてしまうと
その分タイトル部分が右に押し出されるのではないかと思います。

背景画像として現在のものを表示し、ブログのタイトルやその説明を上に被せるように表示するには
その部分にクラスが設定されていないので該当部分のHTMLにクラス指定をし、表組を変更するなど
かなり手を入れないといけないのではないでしょうか。
そのうえでCSSにそのクラスの装飾や背景画像指定などをしてやる必要があると思います。

以下は参考まで
No.17537 ブログタイトルを画像にする方法