解決済
タイトル部分の工夫について(独自画像のリンクを据え付ける等)
是非ともその道の先達にご教示願いたく、ご質問させて頂きます。例えば、
を、
のような状態にするにはどこをいじったらよいのでしょうか。ある程度のソースは出来ているのですが･･･。
もし説明が足りない部分が御座いましたらまた参りますので、何卒、その道の先達の方々、ご教示下さいますよう宜しくお願い申し上げます。
回答(1)
1.
では簡単に設置する方法を書いておきますね。
管理画面に入り、カスタマイズ/管理をクリックします。その開いたページの中の 『 ブログの説明 』 の中に、以下の HTML タグを書き込みます。（ サンプル画像を見れば、入れたいバナーは ４つ なので、それに合わしてタグを書いておきますね ）
<a href="リンク先アドレス（1）"><img style="margin-right:5px" border="0" src="バナー保存先アドレス（1）" width="幅" height="高さ"></a><a href="リンク先アドレス（2）"><img style="margin-right:5px" border="0" src="バナー保存先アドレス（2）" width="幅" height="高さ"></a><a href="リンク先アドレス（3）"><img style="margin-right:5px" border="0" src="バナー保存先アドレス（3）" width="幅" height="高さ"></a><a href="リンク先アドレス（4）"><img border="0" src="バナー保存先アドレス（4）" width="幅" height="高さ"></a>
ごちゃごちゃしててわかりにくいですね ^^;
img タグの中に書いてある、style="margin-right:5px" は、画像の右側に 5px の余白をあけなさいと命令しています。画像と画像がひっついたらカッコ悪いですものね。もう少し大きく空けたかったら、数字を大きくして下さい。一番最後の img には、その指示はしていません。右側に何も無いから必要ないですから。
これを書き込んだら、そのページの一番下の 『 設定を保存する 』 を押し保存して下さい。そして、トップページだけ再構築をしていただけますか。どうですか正しく表示されていますか？ でも、表示位置などが変なところにいっているでしょう？
これからそれの調整をします。この管理画面のブログの説明のところに書き込んだ HTML タグは、すべての HTML ページの ・・・
<div class="description"> ～ </div>
の中に書き込まれた事と同じ事となります。ですから、この中の位置を調整するには、CSS の中の ・・・
.description{ } の記述を変更して調整します。
※ 字数制限の為、続きはコメント >>#1 へ ↓
わーッ わーッ!!!
ご教示賜った通りにやってみました所、今までどうしても繋がらなかった部分が実に綺麗に解決致しました！
もう、本当にスッキリしました、心より感謝申し上げます☆
HTMLをブログの説明部分に･･･という辺りまでは何度かトライしてみていたのですが、如何せん問題はそこから先でした。今回お陰さまで「CSSのdescription部分を弄る」というテクニックに至り、やっと私の思っていたままの景色作る事ができました！
今、物凄く感動しています･･･！
初心者の愚問ながら、私などでも解り易い様、懇切丁寧に判りやすく書いて下さった事は本当に勿体無いばかりです。
素晴らしいご解説を、本当に本当に有難うございました☆(^^)
コメント(5)
あなたの現在の .description{ } の中はこうなっています。↓
.description{
font-size:13px;
font-weight:bold;
color:#fff;
padding-left:27px;
}
これをこう書き換えましょう。↓
.description{
text-align:center;
padding:○○px 0px □□px 0px;
}
これでセンター （ 中央 ） に表示されます。
あとは、縦の位置の調整だけだから、○○のところの数字を変えて調整して下さい。
padding:○○px 0px □□px 0px;
の左の数字から、上、右、下、左 となっています。
この説明では、上に ○○px 余白を、下に □□px 余白を、右と左に 0 （ ゼロ ）px の余白を与えるようにと書いてあります。センター表示だから、左右の余白はいりませんからね。下の余白も要らなかったら、□□px を 0px と書き換えて下さい。
これで CSS を保存。CSS の再構築をかけます。これでトップページの表示を見て下さい。どうですか？ 気に入る位置に表示されましたか？ そうなるように何度か繰り返して下さい。
トップページが正しく綺麗に表示されるようになったら、最終的に、『 全て再構築 』 をかけます。これで、全てのページにおいて、表示反映されます。ブラウザーを再読み込みして下さいね (^^)
＞ cit62120 さん
まずは、ベストありがとうございました。(^^)
サンプルに見せてもらった画像と仕上がりが違ったのであせりました ^^; バナーの数、左寄せ。回答を読んで、ご自身で工夫なさったのですね。いずれにしても綺麗に仕上がって良かったです。
ひとつ気になるのは、どこにリンクされていて、何のバナーかわからない部分です。カテゴリーページにリンクされているのは、表示されるアドレスを見ればわかるのですが、少し閲覧者に不親切な感があります。
こういう場合は、各バナーの img タグの中に、title という属性を記述します。例えばこうです。↓
<a href="リンク先アドレス"><img style="margin-right:5px" border="0" src="バナー保存先アドレス" width="幅" height="高さ" title="バナーの説明"></a>
img タグの最後に、title="バナーの説明" と入っているでしょ。これで、マウスカーソルをバナーの上に置くと、そのバナーの説明が、Windows、Mac、どちらの環境でも、説明が表示されます。頑張って下さい。(^^)
あ～それと、各画像の後ろについている、『 ?blog_id=1212477 』 は、ライブドアの管理用に必要な識別 ID です。画像に対する正式なアドレスではありませんので、今後この部分は付けないようにしておく事を覚えておいたほうが良いでしょう。
