当ブログについて | 管理人プロフィール | コンタクト
<スポンサードリンク>

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

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

写真「わださんって、ブログ詳しいんだよね?」「詳しくはないけど、3年ちょいやってるよ」「あ、じゃあ教えて! FC2ブログなんだけどタイトル画像の・・・」


知らんって!

そう。

実際に使っていたり、カスタマイズしたりしていないブログサービスは、全くわからない。「え~、3年もやってて知らないの~」「面倒くさがらずに教えてよ~」的な目で見られるとつらいが、無理なものは無理だ。

自分がメインで使っているここは「ココログ」。
TypePadベースなので、Movable Typeとも共通している。

あと使ったことあるのは、「Amebaブログ」「livedoorブログ」「Seesaaブログ」「Yahoo!ブログ」「So-netブログ」「TypePad」あたりだ(触ったというだけなら、gooもexciteもfc2も、今はなきstylogなんてのも)。デザインカスタマイズ経験があるのは、「ココログ」「livedoorブログ」の2つだけ。


で。


何故こんな記事を書いているかというと、今週、知人にブログカスタマイズを出張個人レッスンしに行くためだ。その人が使っているのは「livedoorブログ」と「Seesaaブログ」。前者は全く問題ないけど、Seesaaは、よう知らん。

ひととおり予習しとかないと、質問にあたふたしそうだ。
それで、この間の格安ホテルブログを、Seesaaで作ってみた。

写真

まず、これが「テンプレート“ほぼ”そのまま」。
(あまり目立たないけど、記事作成日付を消すなどのプチカスタマイズを施している─更新頻度の低いブログなので)

このままのデザインでもいいと思うが、せっかくなんで、タイトル部分の背景画像を、自分で撮影した写真に変更してみよう。

写真

まず、管理画面を開き

「デザイン」>「デザイン一覧」

を開く。

私が選んだデザインのテーマ「大航海(右サイドバー)」が、下のほうにあるので、そのタイトルをクリック。

写真

そうすると「スタイルシート」の画面になる。
説明はしょるが、「スタイルシート」は、装飾・デザイン面を司っている。タイトル部分の文字の大きさや色、背景画像などもここで規定する。

意味がわからないかもしれないが、とりあえず上からずっと見ていくと、こんな箇所があるだろう(選んだデザインによって内容は異なる)。


#banner{
margin:0px;
padding:0px 40px 0px 0px;
text-align:right;
height:170px;
background-image:url(http://blog.seesaa.jp/img/bg/navigation/header.jpg);
background-repeat:no-repeat;
background-position:top left;
}

よしよし、多分これだな♪
確認するために、「background-image:url」の後にある画像のURL「http://blog.seesaa.jp/img/bg/navigation/header.jpg」をコピーして開いてみると・・・

写真


ぴんぽ~ん♪


これを別の画像ファイルのURLに変更すればOKだ。

写真

右クリックで画像ファイルのプロパティを見るとこんな感じ。
781×170ピクセルの画像だ。

自分の写真をこれと同じサイズにして使ってもいいが、それだと、おそらく両脇の影の部分がちょっとしっくりこなくなる可能性がある。

写真

なので、画像編集ソフトに、先ほどの「header.jpg」画像を持ってきて、その上に使いたい写真を貼り付けることにした。

写真

できあがった画像はこれ
次にこの画像を、

「記事投稿」>「ファイルマネージャ」

でアップロード。
普段、写真などをアップロードしてるのと同じ方法だ。

写真

アップロードの結果、画像ファイルのURLは下記の通りとなった。

http://hotelreport.up.seesaa.net/image/header.jpg

さあ、いよいよ大詰めだ!

写真

再び先ほどの、スタイルシートの画面に戻ろう。
そして例の箇所のURLを変更する。

■BEFORE


#banner{
margin:0px;
padding:0px 40px 0px 0px;
text-align:right;
height:170px;
background-image:url(http://blog.seesaa.jp/img/bg/navigation/header.jpg);
background-repeat:no-repeat;
background-position:top left;
}

■AFTER


#banner{
margin:0px;
padding:0px 40px 0px 0px;
text-align:right;
height:170px;
background-image:url(http://hotelreport.up.seesaa.net/image/header.jpg);
background-repeat:no-repeat;
background-position:top left;
}

ごちゃごちゃにならないよう慎重に。
まあ、Seesaaの親切なところは、カオス状態にしてしまっても「初期値に戻す」ボタンでリカバリーがきく点だ。

写真

よっしゃ!
できたぜ!

ただ見た目的な問題がひとつ。
タイトル下にある「ブログ説明文」の文字色が黄土色で、非常に読みにくい。
タイトルの文字色が真っ黒なのも、ちょっと気になる・・・。

せっかくなので、先ほどのスタイルシートをもう一回いじって、この2箇所の文字色を変更しておこう。

写真

「そもそも、ここのタグはどうなってるのか?」

がわからないとスタイルシートはいじれないので、ちょっと中級者的作業になってしまうが、画面上で右クリックし「ソースの表示(V)」を選択。そしてソースを上のほうからつらつらと見てゆく。


<div id="banner">

<h1><a href="http://hotelreport.seesaa.net/" accesskey="1">3,500円以下で泊まる!東京の格安ホテル</a></h1>

<span class="description">カプセルホテルではありません。出張にも便利!女性も安心!きれい!<br>東京にもそんな大満足の格安ホテルが増えています。</span>

</div>

あった!

ブログタイトルは(大抵そうだが)「<h1>」という見出しタグ(Headings level 1)に挟まれている。
そしてブログ説明文のほうは、「<span class="description">」という「<span>」タグの「class="description"」で規定されている。

写真

スタイルシートを上から見てゆくと、それに該当した箇所があった。

<ブログタイトル>


h1 a{
color:#000;
text-decoration: none;
font-weight:bolder;
}

<ブログ説明文>


.description {
font-weight:bold;
padding:0px 0px 0px 0px;
color:#726600;
}

この「color:#000;」「color:#726600;」が、文字色だ。

そんな詳しくないのでさっくり書くが、HTMLで色を指定するには、RGB値を16進数で表した値を用いる。「#」の後に英数字(0~9、A~Fの16個)6桁というのがそれだ。「#726600」は、赤(R)の強さが「72」、緑(G)の強さが「66」、青(B)の強さが「00」という意味。「#000」は「#000000」と同じで、赤も緑も青も「00」、つまり「黒」だ。

間違えないように「#000」「#726600」の部分だけを変更しよう。

<ブログタイトル>

■BEFORE


h1 a{
color:#000;
text-decoration: none;
font-weight:bolder;
}

■AFTER


h1 a{
color:#663300;
text-decoration: none;
font-weight:bolder;
}

<ブログ説明文>

■BEFORE


.description {
font-weight:bold;
padding:0px 0px 0px 0px;
color:#726600;
}

■AFTER


.description {
font-weight:bold;
padding:0px 0px 0px 0px;
color:#F2EFCE;
}

写真

無事、文字色も変わった。
成功~!


3,500円以下で泊まる!東京の格安ホテル


+++


もっと簡単にやる方法があるのかもしれないけど(Seesaaのブログカスタマイズは今回が初めてで、普段あまり使ってないの・・・と先に言い訳しとく)、とりあえず自分のやり方はこんな感じ。

ブログの記事は、別に一文字くらい間違っても「誤字」ですむけど、HTML(スタイルシート)などは、括弧がひとつ抜けたりしても基本アウトだ。

普段、HTMLをいじるのに慣れていない人は、まずはテスト用にブログを作って、そこで練習してみるといいと思う。あと、勢いでやらず、自分の手順をひとつひとつ紙に書きとめてゆくなどして、どの段階からでもリカバリーできるようにしておいたほうが安全だ。



コメント

和田さんへ♪
新ブログ、ものすごい勢いで起動に乗ったようですね~お疲れ様です!(某SNSで見たときはこのような話の流れになるとは思ってませんでした)

>勢いでやらず、自分の手順をひとつひとつ紙に書きとめてゆくなどして、どの段階からでもリカバリーできるようにしておいたほうが安全だ。

全くそのとおりです・・・。
私は「アレアレ」と言っているうちに元に戻せなくクチです。やはりブログ画面で直接触らず、メモ帳やDWの画面などで段階を踏んで保存しつつやらないといけませんね。

慣れてくると余計にそれを省略してしまって、変なタグを消してしまって画面がズレたりします。本当に気をつけないといけませんね~(・・;)

投稿者: オレンジスカイ (2007.10.09 00:42)

ブロガーの方々はMovableTypeかTypePadの方が多いようですね。基本的にはHTMLとCSSなのでたいていのトコロは共通しているそうですが、MT形式はいかんせん書式が独自のモノに仕上がっているので…慣れるまでは果てしなく長い道のりになりそうですよね。

どこかのブログの初心者向けカスタマイズ用テンプレートみたいに「ここから●●」みたいなコメントアウトを入れて欲しいなぁ~…と無理な要求をしてみたかったりします(笑)。

投稿者: 彼方みこ (2007.10.09 06:28)

最近seesaaでのカスタマイズばかりやっているんですが、わださんのやっている通りですよ、私のカスタマイズ法は。

一つ一つ手順をメモっておくのは大事ですね。

ただ、seesaaのHTMLとCSSをプリントアウトしただけで、どのパーツがどれなのかをそれに書いておいたら、中3の娘が私を真似てseesaaのブログカスタマイズをやってのけましたよ。

やっぱりコツさえつかめばできるもんなんですよね。

投稿者: 瑠璃 (2007.10.09 09:17)

オレンジスカイさん、
私も、基本的にはすべてエディター上で保存しながらやってるのですが、だんだん慣れてくるとつい、「一部修正だから・・・」と管理画面上でやっちゃうことあります。たいてい、そういうときに限って、大きな間違いしちゃうんですが(笑
基本に忠実であれ・・・ですね。

彼方みこさん、
MTは、慣れるまでちょっと時間かかりますよね。
XML初心者向けの本とか少しでも読んでおくと、感覚的にわかる部分もあるのかなと思うのですが(あ、でも今は、MTタグのいい解説本もいっぱいあるか)
MTのデフォルトテンプレートに、コメント入れてほしいです!!!どんどん複雑化してるし、でもあれは、すごく工夫されているので、活用&参考にしたいんですよね。
(このブログのソース見るとわかりますが、私は結構な「コメントタグ魔」です)

瑠璃さん、
ああ、よかった。
実はものすごい簡単なタイトル背景画像変更方法とかあったら馬鹿みたいだよな・・・と思いながら書いておりました。
そして、瑠璃Jr恐るべし!さすがですね。挑戦心も旺盛なのは、血筋でしょうか(笑

投稿者: わだ (2007.10.09 16:19)

>出張個人レッスン

に、目が・・・(☆_☆)きらーん!
私の粗ブログもなんとかせにゃ・・・。
来年ゆっくり考えます。
その前にわださん誘い込まねば(笑)

待ちあわせには、ピースウィンズのカーキバッグ
アタマからかぶって現れる、ってことで♪

投稿者: ぷよメンコ (2007.10.09 18:49)

ぷよメンコさん、
> 待ちあわせには、ピースウィンズのカーキバッグ
> アタマからかぶって現れる、ってことで♪
思い出しちゃいましたよ、面識ない時の最初の待ち合わせ。携帯に届いたメールを読んで「鯉のぼりみたいな服装?」と思い切り首を傾げたのですが、それをそのまま伝えたimaさんが「いました~!」と即答したのにもびっくりしました(笑

投稿者: わだ (2007.10.10 00:06)

こんにちは、この記事を読んだおかげでseesaaブログのタイトル記事を変更することができたので、一言お礼がいいたくてコメントしました。

今まで何度か試みようとしたのですが、ここから変えるんですね・・・!
どこを変えるのか一目瞭然で、感動です。

本当にありがとうございます!!

ただタイトル画像にヘッドフォンの画像を透かして入れただけですが、もう少しいろいろいじってみようという気になりました。

投稿者: Naoko (2009.11.24 04:31)

Naokoさん、
わざわざコメントありがとうございます。
ヘッドフォン透かしたタイトル画像、とても格好いいし、まわりのデザインにもぴったり合っていますね!
同じやり方で、記事タイトルや、サイドバーの小見出しなども変えられますのでぜひ。
もし間違っても、SeeSaaは一番最初の状態に戻すのがとても楽なので、挑戦してみちゃって大丈夫だと思います。

投稿者: わだ (2009.11.24 12:01)

私のパソコンはXPでペイントを使ってます。
初期設定は、「読書:右サイド」です。
初期設定の女の子を消して、写真を入れたいのですが、GIFにできません。
GIFにできないと、上のお花が消えてしまします・・・

上手でも無いのに、ちょっと贅沢でしょうか・・・

できれば、教えて下さい(>_<)

投稿者: (2010.01.02 09:43)

無料のソフト(フリーウェア)で、JPEG→GIFにフォーマット変換するものがいくつかあります。自分が使った事ないのでどれがオススメかまでは言えないのですが、探してみるといいかもしれません。

http://www.vector.co.jp/vpack/filearea/win/art/graphics/conv/

投稿者: わだ (2010.01.02 12:20)

はじめまして!
とても分かりやすい説明でHTMLをいじったことのない私でも、タイトル画像を変えることができました♪

ありがとうございましたっ☆

投稿者: とも (2010.01.21 16:29)

こんにちは。はじめまして。
タイトル画像のカスタマイズ方法を探していたのですが、
なかなか理解できず…。
こちらのサイトは、画像付でとても判りやすい!感動!すばらしい!!
早速試してみます。ありがとうございました~!

投稿者: kerozo (2011.07.15 08:06)

People deserve good life time and loans or just short term loan will make it better. Just because freedom is grounded on money.

投稿者: home loans (2011.07.15 08:15)

ともさん、kerozoさん、
お役にたったようでよかったです。
わざわざコメントまでいただき、ありがとうございます。

投稿者: わだ (2011.07.15 09:54)

お陰様でタイトル背景画像を変更できました。
ありがとうございました。
トラックバックもさせて頂きました。
よろしくお願いします。

投稿者: カル (2013.12.28 06:07)

この記事へのコメントは終了しました。

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

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

アフィリエイトの無料レポートです☆アフィリエイトをする場合さまざまな方法がありますね!今回はSeesaaブログを利用してアドセンスや物販アフィリエイトで稼ぐ方法です!そのためのブログ量産方法、そのためのカスタマイズ方法が丁寧にテンプレート付き......(2007.10.14 18:56)
Seesaaブログのタイトル背景画像を変更する方法何故こんな記事を書いているかというと、今週、知人にブログカスタマイズを出張個人レッスンしに行くためだ。その人が使っているのは「livedoorブログ」と「Seesaaブログ」。前者は全く問題ないけど、Seesaaは、よう知らん。 .......(2007.10.16 17:12)
超初心者必見!ブログにアクセスを集める5つの方法ブログを作ったけど、アクセスが集まらない。どうしたらいいのかわからない。悩んでいませんか?そんなあなたのために、初心者向けのブログアクセス方法を解説します。このレポートに書かれている基本的な5つの......(2007.10.31 20:24)
最新の記事

管理人プロフィール

和田 亜希子

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

Twitter

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

AMNパートナーブログ