私はCSSもHTMLもよくわからないので、いつもブログを作る時にかなり悩みます。

各社のブログでCSSの記述や設定方法は違いますし。

なので、今回のブログをカスタマイズした際の方法を覚えておきたいのでメモすることにしました。


元になっているテンプレートはWood(3カラム)です。

Image1

このテンプレートはトップ画像を変更したい場合はCSSを弄らないと出来ないタイプです。

最初は別のテンプレートを使っていたのですが、2カラムだったのが不便だったのでこちらに変更しました。


まずはトップ絵の変更。

ブログ設定→デザイン→PCでテンプレートを選んだ後、カスタマイズの項目で中身をざっと見ておきます。

Image3

どの画像がどれを表しているのかは、上の図の様にjpg、png、gifなどのファイル拡張子がついたアドレスをコピペし表示させて確認しています。

その画像を保存して大きさを見て、変更したい画像のサイズの参考にします。

このテンプレートの場合は

div.blog-title-outer {
 width: 900px;
 height: 125px;
 background: url(http://~~~

という部分がトップ画像の部分なので

div.blog-title-outer {
 width: 900px;
 height: 445px;
 background: url(http://(変更用画像のアドレス名)

に変更します。

画像を表示する範囲は width:とheight:で変更できるので、用意する画像は大きすぎたり小さすぎたりしなければ好きなサイズの画像でいいです。



さらにトップの画像をクリックすることでトップページに戻るようにする場合は、設定画面のHTMLを変更します。

まずトップページの下記の画像の赤線部分、これが元の内容。

Image4


<h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ"><$BlogTitle ESCAPE$></a></h1>
となっている部分をまるまる
<a href="ブログのアドレス" target=_self><img  src="画像のアドレス" border=0 hspace=0></a>
に変更。

Image5

同じように個別記事ページ、カテゴリアーカイブ、月別アーカイブも変更しておきます。

ここを変更した場合、この記述はいらないのでは?と思う部分もあるんですが、よくわからないので放置してます。


このままだと、タイトル文字とサブタイトルの文章が表示されたままになってしまうので非表示にします。

Image2

blog-title と blog-description があるところを捜して display:none; を追加します。
これで表示されなくなります。



スマホ版の画面の方はPC版のカスタマイズを元に構成されているようなので、こちら側でCSS等を弄る必要はありません。

Image6


忘れてはいけないのが、こちらではトップページ、アーカイブページ、レイアウト、画像ページに必ずブログタイトルの項目を追加しておくこと。

最初トップページだけ設定していて、ページ移動時に表示が変になってしまい、ここを追加していなかったのが原因でした。

大体この方法でヘッダー画像からのブログトップへのリンクが出来る・・・はずです。



□参考にさせていただいたサイト様

MellowのRadioBlog

ライブドアブログカスタマイズの覚書

気まぐれなブログ。


□テンプレートをカスタマイズする時に便利なサイト様

初心者のブログ作成 HTMLタグ研究所!

色見本






ブログランキング参加中です
ぽちっとよろしくお願いします