スポンサーリンク

当ブログについて | 管理人プロフィール | コンタクト

スポンサーリンク

livedoorブログのタイトル背景画像を変更する方法

2007.10.10 サイト運営 C(4) TB(1) このエントリーを含む「はてなブックマーク」 この記事を「livedoorクリップ」! 「Yahoo!ブックマーク」に登録

写真ブログカスタマイズ出張個人レッスンが来週に延びたので、Seesaaブログに続き、こっちも簡単にまとめておく(予習兼ねて)。

「ブログサービス何使ったらいい?」と聞かれた時、自分が割とよくオススメするのが「Seesaaブログ」と「livedoorブログ」。

周りで使っている人も多いので、教えてもらいやすいし、そこから仲間作りもできる。
テンプレートはたくさん用意されているし、サイドバーのカスタマイズの自由度も高い。

さらに将来、「HTML&CSSで本格カスタマイズしたい」と思った場合にも、無料版でありながらHTML編集可能だ(ま、最近のブログサービスはどこもそうかもしれないけどね)

写真

今回、プチカスタマイズ実験用に使うのはこれ。
チワワもかわいいんだけど、「韓国カジノ」なイメージじゃない。

なんで、タイトルだけオリジナル写真に差し替えたい。

写真

管理画面にログインし

「カスタマイズ/管理」>「デザインの設定」

写真

そして、デザインのサムネイルがたくさん並んでいる画面の、一番下の右側にある

「カスタマイズ」

と書かれたところをクリック。

写真

そうすると、HTML(CSS)編集画面になる。
用意されているのは、スタイルシートの他、4つのテンプレートの編集画面。


  • スタイルシート(CSS)
  • トップページ
  • 個別記事ページ
  • カテゴリアーカイブ
  • 月別アーカイブ

写真

まずは「トップページ」をクリックして、
ブログタイトル部分のタグがどうなっているのか確認してみよう。

<body><a name="top"></a>
<$BlogHeader$>

<div id="container">
<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>
</div>

この「<div id="banner">」の部分だ。
(「H1」タグで囲まれた部分がブログタイトル、「<div class="description">」で囲まれた部分がブログ説明文になっている)

テンプレートのHTMLだとよくわからないという人は、
実際のトップページを開き、画面上で右クリックしてソースを確認してみてもいいだろう。

そっちのほうが、どこがブログタイトルで、どこがブログ説明文なのか、文字列で判断しやすいと思う。
(テンプレートの場合、「<$BlogDescription$>」といった変数になってしまっている)

写真

次に、実際に編集する「スタイルシート(CSS)」を開いてみよう。
ちゃんと「#banner」部分のスタイルを規定している箇所があるはずだ。

#banner,#subbanner{
 background:url('http://image.blog.livedoor.com/img/usr/chihuahua/chiwawa_p.jpg') no-repeat;
 width:710px;
 height:200px;
 margin:0 auto 20px;
 }

この「http://image.blog.livedoor.com/img/usr/chihuahua/chiwawa_p.jpg」が現在の背景画像だ。

URLをコピーして確認してみると・・・

写真

チワワ登場♪

写真

画像のプロパティを見てみると、710×200ピクセル。
高さは変えちゃってもいいんだけど(後でスタイルシートの「height:200px」部分を変更すれば)、とりあえず同じサイズで画像を用意してみよう。

写真

今回は、ブログタイトルもブログ説明文も「白色」のままいこうと思うので、文字がかぶる部分を少し暗くしてみた(ブラウザなどによって文字サイズや位置はずれるので、あまり賢明な方法ではないんだけど・・・)。

写真

そして、作りたての新しいタイトル背景画像をアップロードする。
ここは、普段ブログ記事に写真を入れる作業と一緒だ。

「ブログの投稿」>「ファイルのアップロード」

アップロードした画像ファイルのURLは「http://image.blog.livedoor.jp/wada0425/imgs/4/2/425c17a3.jpg」になった。

写真

ここで先ほどの「スタイルシート(CSS)」を開き、タイトル背景画像のURLを書き換える。

■BEFORE

#banner,#subbanner{
 background:url('http://image.blog.livedoor.com/img/usr/chihuahua/chiwawa_p.jpg') no-repeat;
 width:710px;
 height:200px;
 margin:0 auto 20px;
 }

■AFTER

#banner,#subbanner{
 background:url('http://image.blog.livedoor.jp/wada0425/imgs/4/2/425c17a3.jpg') no-repeat;
 width:710px;
 height:200px;
 margin:0 auto 20px;
 }

写真

そして、再構築。
この時、再構築する対象は「デザイン(CSS)」だ。
(もちろん「全てのページ」でもいい)

写真


完成♪


もし、「ブログタイトル」や「ブログ説明文」の文字色などを変更したい場合には、同じくスタイルシート(CSS)を編集する。
このあたりは、「Seesaaブログのタイトル背景画像を変更する方法」とも一緒なので、そっちを見てもらえたらと思う

#banner a{color:#FFF;text-decoration:none;}
#banner a:link{color:#FFF;text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:active{}
#banner a:hover{color:#FFF;text-decoration:underline;}

(途中省略)

.description{
 color:#FFF;
 font-size:12px;
 font-weight:bold;
 padding:0 0 0 35px;
 text-align:left;
}


ちなみに、上記「変更前のソース」は、チワワテンプレートをベースにした時なので、
最初に選んでいるテンプレートによって、細かな記述は異なる。
参考程度に。

あと、いきなり管理画面上でスタイルシートの記述を書き換えたりすると、
ひっちゃかめっちゃかになる可能性


「大」


だ。

石橋をたたきながら進めるなら、まず元々のオリジナルのものを、テキストエディター(メモ帳でもHTMLエディターでも何でもいい)にコピーして「スタイルシート(オリジナル)」などのファイル名で保存。その後、書き換えるたびに「スタイルシート(変更)_20071010_01」など日付と連番をつけたファイル名でこまめに保存してゆくと、どの段階で失敗して「うぎゃ~!!!」という事態になっても、すぐ逆戻りできて安心だ。

あとあと何が間違っていたのかなど確認することもでき、
行き当たりばったりで変更しながら「たまたま」うまくいくのを待つより、
確実に知識になると思う。(とくに自分たちみたいなスタイルシート素人の場合)



コメント

始めまして!九州在住アラサーのミネバと言います。パソコン初心者です。
私はlivedoorブログを利用して趣味であるゲームのブログを細々とやっているのですが、今回参考にさせていただいた背景画像の変更をずっとしたいと思っておりまして、ようやくこんなにわかりやすい記事をみつけることができました!
ただ、パソコン初心者のため少しでも文面に違いがあるとわからなくなってしまうため、管理人さまとまったく同じテンプレートを使わせていただき無事に画像変更することができました!
しかし、このテンプレートだとサイドバーがすべて左側に寄っていてすごく違和感があるので(記事とサイドバーの幅?は最高にいいです)横幅は同じままで単純に位置だけを左右入れ替えたいのですが、どうしたらよいでしょうか・・・
お忙しいとは思いますが、ご教授いただけたらと思います。

投稿者: ミネバ (2011.05.20 10:27)

ミネバさん、

参考になったといっていただき嬉しいです。
ありがとうございます。

それで、サイドバーの位置変更なのですが、
実はHTML知識があまりない場合だと、結構面倒で失敗しがちなんです。
左右変えるくらいだと簡単かなと思うかと思うのですが、実は

 * CSS
* トップページ
* 個別記事ページ
* カテゴリアーカイブ
* 月別アーカイブ

これ全部を書き変えなくてはいけなくて、
しかもタイトル画像変える時のように一行だけ書き変えればいいというものではなく、複数行にわたる「サイドバー部分の記述すべて」と「本文部分の記述すべて」をひっくり返す作業が発生します。

なので、私自身がこの作業をするとしたら、
最初からサイドバーが左にあるテンプレートを再度選び直し、
タイトル画像を差し替えるという方法をとると思います。
(ちょっと間違えただけで、配置ぐちゃぐちゃになるリスクあるため)

ただ自分自身、最近Libedoor blogをいじっていない人間なので、
実は上記以外にもっと簡単にテンプレ変更できる方法やツールがある可能性もあるかもしれません。
お時間あれば、他の人の記事なども探してみてください。
(回答こないかもしれませんが、サポートに相談という手も)

投稿者: わだ (2011.05.20 10:46)

お早いお返事ありがとうございます!
おっしゃる通り、簡単に考えておりました・・・。
内容を聞くかぎり、おそらく今の自分では無理な気がいたしますので
アドバイス通り別のテンプレートを使って
再度、コチラの記事を参考にさせていただいて編集してみようかと思います。
ありがとうございました。

投稿者: ミネバ (2011.05.21 21:24)

わかりやすい説明、ありがとうございます。トップページだけでなく、スタイルシートの修正が必要なのですね。

投稿者: Shaw (2014.01.10 06:19)





トラックバック
http://app.cocolog-nifty.com/t/trackback/5901/16718724

内容に関連性のある記事からのトラックバックは歓迎です。記事内リンクも特に必要ありません。過去交流のないブログでもまったく問題ありません。ただし「単に部分的なキーワードつながり(関連性が薄すぎ)」「自動で大量トラックバック送信」「自身がトラックバックを受付けていないブログからの一方的なトラックバック」は、削除します。

デザイナーズ ブログブックと疑いたくなるような「出来すぎな」ブログが多く、ブログカスタマイズ&デザインの本というよりは、「デザインのアイデアネタをブログの体裁に押し込んでみた」という印象が拭えない。ただ星つなのは、それを差し引いてもデザインとしてはカッコイ.....(2007.10.24 03:45)
最新の記事

管理人プロフィール

和田 亜希子

利根川流域に生息するアラフォー独女。ニッチなテーマで小さなサイトを作る「ミニサイト職人」で、主に運営サイトの広告収入で生計たてるようになり早10年経ちました。「パソコン一台携え、旅しながらサイト運営で生計立てる」ベドウィン・モバイラーの夢まであと一歩。大切にしたいのは「好奇心」と「向上心」。うさぎは2011年の干支、ヘビ年バージョンはこちらです。(詳細

Twitter

著書一覧(Amazon)
Yahoo!プロフィール
YouTube動画一覧

AMNパートナーブログ