PGN MIL-LOG

テンプレートの編集について、一部気づいた点を修正します。

画像を変更するだけなら前回記事のやり方で簡単にできるのですが、それだとバナー画像をクリックしてもトップページに戻ることが出来ません。
スタイルシートでは見た目の変更はできても、リンクをつけたりは出来ないからです。
リンクを設定したければ、スタイルシートではなくHTMLのほうで a タグを用いてURLを指定する必要があります。

スタイルシートではタイトルバナーを表示させる位置等を指定します。

まずは、#banner
paddingでは、タイトルの表示位置を指定します。
4つの値を指定する場合は、順に上、右、下、左となります。時計回りです。
heightはタイトルが入るスペースの高さを指定します。挿入したい画像の表示サイズに合うよう適当な値を指定してやればいいと思います。

次にblogtitleでタイトルの表示について指定します。
ここではブログタイトルや説明の文字列を表示させないようにします。
行を削除してしまわないでフォントサイズを0に指定すれば、また元に戻すときに分かりやすいでしょう。

discriptionではブログの説明文の表示について指定します。
私の例では画像の中に説明文も入れてしまっているので、スタイルシートでは説明文を表示しないようにしたいと思います。
blogtitleのところと同じようにフォントサイズを0にしておけばいいでしょう。




HTMLのほうで、画像のURLを指定してやります。
下の画像のようにaタグでブログURLの指定をし、それに続いてimg srcタグで挿入したい画像のURLを指定してやります。画像のURLに続いてwidth、heightで表示させたいサイズ(px)を指定することも出来ます。








トップページ、個別記事、アーカイブのそれぞれに同じ変更を加えた後、登録して保存して完了です。

そうすると、画像部分にリンクが設定されてます。
画像をポイントしたらカーソルがちゃんと変わります。




CSSとかきちんと勉強したわけではないけど、ちゃんとできてるし、これでええんとちゃうかな…