広告なし2

<スポンサーリンク>

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

スポンサーリンク

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

2007.10.08 サイト運営 C(60) 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)

I think that a supreme quality and reasonable fees suppose to be the most important advantages of the buy essays uk bestwritingservice.co.uk service.

投稿者: term paper services uk (2012.11.22 08:11)

Are you not matured in academic writing? Just Buy Research Paper primeessays.com if you are unsure just about your writing skills!

投稿者: essay writing service (2012.11.22 08:37)

View home page in order to order best papers to buy and relieve your academic life by coming for advice to our bona fide organization to receive cheap essay writing.

投稿者: term papers online (2012.11.22 09:09)

Students all over the world buy custom term paper and custom essay at the writing services. They heard about the essay writing from the paper writing services.

投稿者: professional custom writing (2012.12.08 13:27)

If you haven’t got a clue where to buy resume paper and are in need of resume services, check out Prime Resume company. You can glance over CV templates or buy CV from best resume writers.

投稿者: site (2012.12.10 08:46)

Really intereating information. Thanks because that’s the useful knowledge.If you need to get a fine paper about this good post you can use plagiarism checking "plagiarismsearch.com", and i'll advise you to check it in http://www.plagiarismsearch.com ! unlike those services, they offer exceptional quality guaranty that your work is free of plagiarism. Students like to order essay for sale at the plagiarism detection. They will give you an accurate plagiarism detection reporting without any delay.

投稿者: plagiarism check (2012.12.17 02:51)

As a rule I buy custom essays because I’m not completely certain of my writing skills that will provide me with the chance to create excellent assignments.

投稿者: essay writing (2012.12.20 08:41)

Don’t know which writing centre to choose to get assistance from? Look over SpecialEssays testimonials (best-writing-services.com), and come to a judicious decision.

投稿者: SuperiorPapers rewiew (2012.12.24 08:55)

Wish to know more about paper writing services? Seeking for respectful organization to receive help from? College-Paper rewiew will give you a register of firms from which students may pick the most qualified ones to purchase research paper from.

投稿者: EssaysService rewiew (2012.12.28 11:56)

This writing agency gives first-rate resume services. Thus, if you have no idea how to write a resume, would like to buy resume from best resume writers or just to have a look on CV sample, check out RESUMESLEADER company (resumesleader.com).

投稿者: link (2012.12.28 12:04)

Do you recognize that it is the best time to receive the home loans (goodfinance-blog.com), which will help you.

投稿者: loan (2013.01.08 23:42)

You still don’t know where to order term papers and essays of excellent quality? Don’t mull over, go to this Web page specialessays.com and aces will provide you with good college essay writing help.

投稿者: essay samples (2013.01.14 23:54)

Are you willing to get good grades? Therefore, all you need to do is to perform the English thesis of premium quality or just purchase thesis chapters from the dissertation (superdissertations.com) service.

投稿者: (2013.01.15 00:34)

The written essays writing improves a personality. But, if you buy term papers from the college essay writing services, this would make better the writing techniques also. Hence, this right to perform essays paper or just buy it.

投稿者: buy custom term papers (2013.02.17 15:54)

Don't be scared when buy essay online (essaysexperts.com), just because essays writing companies aren't allowed to use any kind of plagiarism. Thus, you can be completely sure that your term papers will be performed of premium quality.

投稿者: college research paper (2013.02.23 02:22)

It is good that you do such great theme related to this good topic. Thus I guess that that should be great if people order the history dissertation and buy dissertation with you help.

投稿者: buy dissertation (2013.04.01 18:58)

Choose this Web page if you are interested in ordering original written essay from the qualified organisation. You can be sure that you will get good cheap custom essay writing services.

投稿者: Check here (2013.04.07 01:16)

You do really very interesting investigation just about this post! Thence, the custom dissertation services or just the thesis writing "primethesis.com" services, would take as a main ground for the example thesis.

投稿者: buy thesis (2013.04.07 01:33)

It could be really executable to buy thesis project just about this post in the dissertation (exclusivethesis.com) service peculiarly if you do not have time.

投稿者: buy dissertation (2013.04.07 19:27)

Look here essayswriters.com if you decide to order essays online of standard quality. I guarantee that you will get essay custom writing.

投稿者: essays help (2013.04.07 21:20)

Searching for free United States essay paper (essaysbank.com)? That's not a big deal, simply check custom writing services, which offer the essay.

投稿者: psychology essays paper (2013.05.15 16:52)

All people deserve good life and mortgage loans (goodfinance-blog.com) or just term loan will make it much better. Just because people's freedom bases on money.

投稿者: loans (2013.05.18 07:37)

People can notice a drift of expanding of a number of custom papers writing corporations. Maybe, that is just because a lot of students became to buy essay in the web.

投稿者: this link (2013.05.18 08:24)

When you do want to a good academic grade, you should have the great wars essay paper. And the best term paper should be a right issue for custom essay help writing, I guess.

投稿者: social issues essays paper (2013.05.29 03:04)

This writing center delivers extraordinary resume writing services. Hence, if you don’t have a clue how to write a resume, want to buy resume from certified resume writers or simply to find resume formats, contact Prime Resume company.

投稿者: this site (2013.06.06 04:04)

Hire Flex Developers "soft-group.com" from our professional company to control your project remotely.

投稿者: click here (2013.06.23 20:10)

The researchers found that by lowering the pH level, the Lactobacillus strains were able to effect a complete inhibition of a type of salmonella bacteria. The probiotics also affected the lactic acid level and produced several anti-bacterial compounds on their own.

投稿者: digital transcription (2013.07.18 00:49)

Do you present the writers job service? Your research close to this good post can be premium.

投稿者: essay writers (2013.07.23 14:00)

In case you do not know where to buy resume paper, visit Marvelousresume company marvelousresume.com and get to know that buying resume is easier than you thought. Professional resume writers provide resume services, our CV templates can also give you a helping hand to write a resume by yourself.

投稿者: Web site (2013.08.29 01:46)

If you are hunting for how to write a resume or you desire to run over CV templates, contact Exclusive resume firm and you will also find professional CV writing services. Furthermore you are able to order resume from best resume writers.

投稿者: over here (2013.08.31 21:55)

In case you have no clue where to buy resume, visit Resumesexpert company (resumesexpert.com), read our samples of resume writing and receive qualified help with resume writing from the certified resume writers who know how to write a successful resume. It is of great worth buying resume with us!

投稿者: site (2013.08.31 22:04)

Professional resume writers review will give you a hint where to buy resume paper if you have no time to write a resume, simply visit Resumes expert company (resumesexpert.com), view resume writing samples and our expert resume writers will be ready to provide you best CV writing. Buying resume with us is pretty easy, buy resume now and stay satisfied about your career.

投稿者: this link (2013.08.31 22:05)

Don’t have the faintest idea which firm to pick to get assistance from? Look over EssaysService testimonials "best-essay-sites.com", and reach a good choice.

投稿者: StandoutEssay.com rewiew (2013.09.03 16:57)

College paper writing service reviews can easily help you to find out the needed services, just visit Best-Writing-Services company.

投稿者: Essayontime.com rewiew (2013.09.03 17:17)

Make certain that you will be supplied with authentic writes up at whatever time you buy resumes online.

投稿者: resume writing tips (2013.09.06 15:50)

Are you looking which service to choose for buying resume or where to receive resume writing samples and professional resume writing service? Or you simply would like to buy resumes from professional resume writers? Only get in touch with Resume company.

投稿者: click here (2013.09.06 16:06)

Don’t have the faintest idea which organization to pick to get help from? Look over GoldEssays testimonials, and take a sound decision.

投稿者: over here (2013.09.09 10:22)

Humanity evolves fast and at present time you don't need to write your writing assignments and can just tell: "I want to find someone to write my essay topwritingservice.com online.

投稿者: over here (2013.09.10 22:59)

Constantly asking yourself how to write a resume? Visit Prime Resume page to find CV writing services. Order resume from professional resume writers or view samples of resume writing to learn what professional CV writing is like.

投稿者: Click here (2013.09.13 06:51)

Follow the link essaysservice.com to get to know more about how to purachase term paper online and get the best of our marvelous company when it comes to best academic writing services.

投稿者: sociology essays writing (2013.11.17 14:47)

Is not it pleasant to approach high academic results? Is not it good to get an opportunity to buy essay? All that I have to say is: "Yes, Yes, Yes"!

投稿者: custom papers (2013.11.17 14:47)

Great site. online-essay-writer.org I am glad to find this place)

投稿者: Lora (2013.12.21 07:53)

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

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

I want to thank you for such useful paper. http://www.online-essay-writer.org/ Please,continue your work.

投稿者: Poppy (2013.12.29 01:27)

Cool post to read. Nice work! Keep it up!

投稿者: essaychart.com (2014.02.11 05:57)

Thank you for sharing. On my opinion, it is very interesting.

投稿者: termpaperwriter (2014.03.10 19:21)





トラックバック
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パートナーブログ