So-net無料ブログ作成

タイトル画像を自分好みにしてみよー! [HTML&CSSの小枝]

追記 2006/08/10
現在、たくさんの方がこの記事を元に、スキンカスタマイズを楽しまれているので、
関連する記事を記載しておきます。
タイトル画像に関しては、本記事含めて3つの記事を熟読されることをオススメします。
続き
おかわり

また、自分のブログの表現の幅を広げるのにHTML&CSSの小枝としてカテゴライズしていますので、興味のある方は、読んでみるのもよいかもです



ってことで、久しぶりのこのカテゴリー。

巷(ちまた)で、噂のタイトル画像変更!

で、参考にしましたのは、
みつなりさんの「オリジナルスキンの作成方法」という記事です。

で、ここでも、その方法をご紹介。

まずは、もう実例がこのブログのタイトル変更で行っていますが、
できることは、以下の3つ。(←真面目に解析してませぬ...。)

1.タイトル画像の差し替え
2.タイトル文字のサイズ変更
3.タイトル文字の色変更

まずは、1。
まずは、基本(ベース)となるスキン(So-net提供)をご自分のブログで設定します。
で、↓の箇所のサイズをなんとかして算出します。


これがねー、結構、思うようなフリーツールがなかなかないんですよねー。
Necoがサイズ抽出に使用したのは、SusieとVix。
※VixはSusieのプラグインを使用しているので、単体だと動作が限定されます。
もっと、お気楽極楽ツールもあるのだけれど、インストールが面倒に感じるかも...。
で、Necoのスキンだと、横770px、縦136pxぐらい。

で、ご自分の好きな画像から好きな箇所を、算出したサイズに切り出して保存します。
で、とりあえず、「もう、サイズなんか、わかんないよ!」という方は、
横770px 縦200pxぐらいの画像を準備してください。
※↑の方が楽かも(笑)ちなみに画像の下の方は見えなくなりますけどσ(^^)

で、↓のCSSをサイドバー編集のどこかに記述します
※もうすでにサイドバーを編集している方は、その編集した箇所に記載してください。
※サイドバー自体は変化しませんので、ご安心を♪

<style>
#banner {background:url("") no-repeat 0px 0px;}
</style>


↑で注意したいのが、画像のリンク先!(赤文字①の箇所)
通常ですと
<img src="/blog/_images/blog/_f42/NecoYanagi/pekepeke.jpg" />
と表示されますが、
/_images/blog/_f42/NecoYanagi/pekepeke.jpg
↑のように余計な箇所を除去して、記入してください。

これで、タイトル画像が変更されていると思います。
また、下に隙間ができてなんかバランスが悪い場合は、
「0px 0px」の箇所の後ろの「0px」の数値を変更してみてください。
※ちなみに、「0px 0px」は「横開始位置 縦開始位置(画像の左上を基準)」となっています。
※またまたちなみに、変更する数値は、正の数(+)のみで大丈夫だと思います。

で、たとえば、横のサイズが770px以下の画像で真ん中に表示したい!
って時は、以下の書き方の方が楽かも(笑)


↑は↓な感じ

<style>
#banner {background:url("~/pekepeke.jpg") no-repeat fixed 50% 50%}

</style>

で、右に寄せる時は、↓。

<style>
#banner {background:url("~/pekepeke.jpg") no-repeat fixed 100% 100%}

</style>


↑な感じ。

これは、コレで結構、厄介?(かな?)
fixedに続くパーセンテージ(%)だけれども、これってば、背景画像の位置調整なので、説明も微妙(苦笑)
画像の縦サイズがぴったりならば、以下の方法で無問題。
中央:fixed 50% 0%
右端:fixed 100% 0%

で、「0%」の方って何?ってことになりますよねー...。。。
こっちの方は「画像自体の表示するパーセンテージ(縦方向)」になります...。。。
って、わかりにくいよねー...orz
イロイロ試してみるとわかります。上2つの桜の画像は、同一画像なんですけど、表示されている画像が異なるのよね、わかりにくいけど...。。。つまり、「ささーーっ」と流し読みしてねということかな(笑)

次に2と3。
コレは以前、紹介しようと思っていた単語がでてきますので、ちょうどよいかなと(笑)

<style>
#banner {background:url("~/pekepeke.jpg") no-repeat 0px 0px;}
#banner h1 a{font-size: 12pt; color: #FFFFFF }
</style>


↑で、太字の箇所です。
ココの「font-size」と「color」を変更することで、ベースの文字色が背景色と被っても、
見やすい色に変更できます。
※Necoのタイトルは文字色だけ変更しています。(ちなみに以下のよう↓)
#banner h1 a{color: #4444FF }

で、オマケで、タイトル下のブログ紹介文も変更してみましょう♪
と思いましたが...どうやら、ベースCSS内でなにやらしている模様...。
「さささーーっと」
はいかなかった...orz(能力不足...orz)
一応、タイトルと紹介文の表示位置は、移動(左、中央、右)できることは確認しましたが、
方法は、載せません(笑)

ってコトでよいかなー?>barbieさん

で、どうして、変更できるかは、またの機会にでも<ネタないときとか(笑)

註:
このタイトル変更は僅かながらもサーバーに負荷をかけますことを、
忘れないようにしてくださいねー♪
と、今までと異なり、CSSのみの記述なので、HTMLとは文法が違うことにも注意ですなd(^^*)

追記:2006/04/14 17:20
一応、タイトルと紹介文の位置調整の方法も記載しておきます。
※ちょっとしたことで、表現の幅が狭まるのもヤだしね♪

まずは、以下↓。

<style>
#banner {background:url("~/pekepeke.jpg") no-repeat 0px 0px;}
#banner h1 a{font-size: 12pt; color: #FFFFFF; text-align:center}←タイトル
.lead {text-align:center}←紹介文
</style>


おなじみ(笑)の「align」ですが、今回はCSS書式なので、書き方が異なります。
text-align
文字の横位置を指定します。指定できる値は以下。
left:左端(デフォルト)
center:中央
right:右端

で、
「あれれ?「.lead」の説明は?」
という方もいるかもしれませんが、この「.lead」はSo-netが提供しているCSSファイル内に定義された単語ですので、CSSの命令ではありませぬ。
なので、とりあえず、深追いせず、これはコレで終了ということで。

また、時間を取ることができたらイロイロ書いていきますので~~(笑)


nice!(61)  コメント(58)  トラックバック(13) 
共通テーマ:パソコン・インターネット

nice! 61

コメント 58

これ、聞きたかったです!やったー。
そのうちトライしまーす♪
by (2006-04-14 19:38) 

jasper

文字色の事はわからなかったw
よかったw後で設定しよぉ~
by jasper (2006-04-14 20:25) 

HAL

TBありがとうございます〜
オリジナルスキンの輪が広がって、ソネット自体がオリジナルの設定をしやすいような改良してくれるといいですよねー(^_^)
by HAL (2006-04-14 22:57) 

あやこ

かすたまいず、かすたまいず♪
by あやこ (2006-04-14 23:08) 

molihua

トラックバック、ありがとうございました。
いや~すごいですね。
どんどん、複雑になっていくぅ~
でも、こうしてみんながやっていくと、
どんどん負荷があがっていくことになるのでしょうか?
ドキドキ。
by molihua (2006-04-15 02:23) 

papa007_

やー勉強になったわ〜
サーバの負荷が多大になってしまうようだとアレだけど
お試しでやってみました。
HALさんがコメントされてるように、ソネット側で機能を持たせてくれるのが
理想なんだけどね。
by papa007_ (2006-04-15 04:16) 

barbie

Necoさん、早速に記事にしていただいてありがとうございました。画像を右に寄せるやり方とかもわからなかったので参考になります。今日こそ桜+ハーレーの画像を嵐山に撮りに行こうと思ってたのに、また雨に降られてしまいました。お気にの画像ができ次第トライしてみますね。またわからないことがあったら教えてくださいね。
by barbie (2006-04-15 15:21) 

クロロ

はじめまして なんかわからないけど凄い!凄すぎます!!
「この一つ一つに意味があるんだろなぁ…」( ̄- ̄;)と感心することしきりです
そのうち私も、小僧(中学生)が興味を示すようになったら、
させてみようかと思います(←すでに放棄している自分がちと情けない…(笑;)
by クロロ (2006-04-15 16:19) 

happy

勉強になりました。私もやってみたいな~。
by happy (2006-04-16 00:13) 

loiter_about_on_the_way

そのうちに挑戦してみます♪
by loiter_about_on_the_way (2006-04-16 11:56) 

NecoYanagi

>to All
コメント、「nice!」、TBありがとうございますm(_ _)m

>yuiさん
うぬ、やってみて♪

>jasperさん
やってみてみてみて(笑)

>HALさん
ですねー。
サクサク動いてから、イロイロ変えられるとよいですねー♪

>あやこさん
かますたいず
って読んじゃった(苦笑)
イロイロ簡単に変更したいですよね。

>茉莉花さん
理解すれば簡単ですよー。
負荷は経験上、そんなでもないです<たぶん(笑)

>papa007_さん
ですよねー。
専門的な知識がなくても設定できるようにしてほしいですね♪

>barbieさん
うんうん、自分のお気に入り画像が撮れるまでがんばってください!

>クロロさん はじめましテ♪
ちょっと、やればできますよ!
がんばってください!!

>happyさん
やってみてください!
Sampler写真なんかイイ感じかもよ?

>にっしぃさん
挑戦してみてください!
案外簡単ですよ♪
by NecoYanagi (2006-04-16 21:16) 

Sweet*Witch

はじめまして、こんばんは。
フラフラとたどり着いたら、すごいことがのってて感激です☆
早速試してしまいましたー!
by Sweet*Witch (2006-04-17 23:06) 

ナシウタ

なるほど~サイドバーに置くんですね。
CSS‥ 勉強しようとして投げ出してから苦手意識が‥
いつも詳しく分かりやすい解説ありがとうございます。
早速設置!の前に画像を作らなきゃですね。ここでかなり悩みそうです(ノ∀`)
by ナシウタ (2006-04-18 00:23) 

yamaxxx

はじめまして。
丁寧で分かりやすい説明で簡単に出来ました!
by yamaxxx (2006-04-18 10:10) 

NecoYanagi

>to All
コメント及び「nice!」判定ありがとですm(_ _)m

>Sweet*Witchさん はじめましテ♪
試してください、試してください♪

>ナシウタさん
あはは、こだわると、悩んでしまうよね(笑)

>judyxxxさん はじめましテ♪
できましたか!
Z33よいなー、街中で見かけると振り返ってしまいますよ。

>yoshitkさん
「nice!」判定ありがとですm(_ _)m
by NecoYanagi (2006-04-18 20:04) 

Shuffler

はじめまして!諦めていたスキン変更ができるとは!
有益な情報、ありがとうございました。
by Shuffler (2006-04-18 20:54) 

761

はじめまして。
コレはすばらしいですね! 
Blogスキンに 個性のスパイスを効かせる事ができました☆
大変勉強になりました!!
by 761 (2006-04-19 20:06) 

わ〜ちん

勉強&参考になりました!
さっそく・・・画像を探しに行きたいと思います!
(そっからです。)
by わ〜ちん (2006-04-20 11:47) 

NecoYanagi

>to All
コメント及び「nice!」判定ありがとですm(_ _)m

>Shufflerさん はじめましテ♪
どういたしまして。
皆さんがやりはじめれば、So-netも編集機能つけてくれますかね?(笑)
LEXUSかー、まだあんまり街中では見かけないなー。

>じょーさん はじめましテ♪
ですね、決められたスキンでもよいのでしょうけど、さらにアレンジできると
頑張っちゃいますよね♪
Z33よいなー。

>c_y_wadaさん
ですね、お気に入りの画像を見つけてください。
横長サイズとイメージを決めてご自分で撮影してもよいかもです。
by NecoYanagi (2006-04-21 09:08) 

かこ

はじめまして
にっしぃさんの記事経由でおじゃましました。
とりあえず(コレ!と言う写真も無いのに…)やってみました!
出来ました!!すご〜い(笑)です。
by かこ (2006-04-21 16:02) 

NecoYanagi

>かこさん はじめましテ♪
できましたか?
いちおーアフターケアのやつでいければよいけれど。
by NecoYanagi (2006-04-21 19:08) 

umineko

はじめまして。
とても詳しく解説されていて、勉強になりました!
さっそく挑戦してみました。ありがとうございます♪
by umineko (2006-04-23 17:51) 

NecoYanagi

>uminekoさん はじめましテ♪
コメント及び「nice!」判定ありがとですm(_ _)m
AIBOが二匹も!!
よい感じですねー♪
by NecoYanagi (2006-04-23 18:27) 

チヨロギ

はじめまして!
いろいろな方の記事を参考に、最近オリジナルスキンに変えたのですが、
写真・スキン・タイトル文字の相性が悪くて困っていました。
でも、こちらの解説を見つけて、無事解決しました。
ありがとうございました!!
で、勝手ながら、リンクとTBをさせていただきました。
by チヨロギ (2006-05-22 02:02) 

NecoYanagi

>チヨロギさん はじめましテ♪
コメント及び「nice!」判定ありがとですm(_ _)m
ばしばし変えていきましょー♪
by NecoYanagi (2006-05-22 18:17) 

初めまして☆
じゅんぺいさんところで拝見し、お邪魔してお勉強させていただきました。
いろいろな方のオリジナルスキンを見て、うらやましく指をくわえていました。
おかげさまで、ちょっとごちゃごちゃしちゃいましたが、
オリジナルスキンが出来ました。

ありがとうございます。
感謝します~m(__)m
by (2006-05-23 12:54) 

まるちゃん

はじめまして!
参考にさせていただきました。
お陰様で、苦労の末 なんとかできました。ありがとうございました。
by まるちゃん (2006-05-24 00:50) 

NecoYanagi

>seaさん はじめましテ♪
コメント及び「nice!」判定ありがとですm(_ _)m
できましたか?
よかったよかった。タイトル変わるだけでも印象違いますしねー♪

>まるちゃんさん はじめましテ♪
コメント及び「nice!」判定ありがとですm(_ _)m
できましたか?
よかったです。
この記事書いた甲斐がありますよ♪
by NecoYanagi (2006-05-24 10:26) 

sknys

NecoYanagiさん、はじめまして。
上記と「続」の記事を参考にスキンを自作しました。
タイトルの大きさや、サブタイトルの色も変えられるんですね。
情報ありがとうございました。
by sknys (2006-06-02 21:19) 

NecoYanagi

>sknysさん はじめましテ♪
できましたか!
やー、よかったよかった♪
by NecoYanagi (2006-06-06 16:09) 

TAN

はじめまして。
別のブログからたどり着きました。
ナイスな情報ありがとうございます。
自分も前からやろうと思っていたんですが考える手間が省けました(^^;
by TAN (2006-06-06 16:59) 

NecoYanagi

>TANさん はじめましテ♪
So-net側から正式アナウンスがあればよいんですけどねー。
でも、いまさらですが、放置しているということは、
許可してるのかな?(笑)
by NecoYanagi (2006-06-08 16:57) 

soft_carpenter

So-netではこうやるんですね…
勉強になりました。
by soft_carpenter (2006-06-13 07:01) 

yyorosikubarubirivu

同じこと?をやったのですができませんでした・・・今度私のブログのコメントの所にやり方を書いてもらえませんか?ブログ名:リヴリーイロイロマイニチ です・・・でゎ
by yyorosikubarubirivu (2006-06-24 12:16) 

robo

初めまして。ここのブログの記事を見て参考にさせて頂きました。とても丁寧でわかりやすかったです!ありがとうございました。
by robo (2006-06-26 18:30) 

はじめまして。
スキンの変更参考にさせていただきました!
すごくわかり易くて丁寧な説明!
ありがとうございます♪
by (2006-06-29 17:00) 

NecoYanagi

>soft_carpenterさん
というよりは、内部を覗いてイジっただけですのでσ(^^)

>レアさん
そちらにコメントしますね♪

>roboさん
しましまの猫さんだぁ~♪
目線はずしてるのが、なんとも♪

>TAROさん
まだ、変更されていないのかな?
フツーに見えるのは気のせいかな。。。
by NecoYanagi (2006-06-30 17:25) 

こんにちは!
ちょっとだけ変更しました(笑) 
見に来てくださったんですね。
徐々にいろいろ変更しようと思います。
これからも参考にさせて下さいね!
by (2006-07-02 14:46) 

lenore-_-kitty

初めまして^^
オリジナルタイトルがどういったものなのか調べていて辿り付きました。
PCもタグについても全くの初心者なのですが、
とてもわかりやすい説明、参考になりました。
まだ似合うスキンに迷っていて直に設置はしておりませんが、
試し画像で成功したので嬉しいのと感謝でいっぱいです。
どうもありがとうございます♪
by lenore-_-kitty (2006-07-11 12:20) 

NecoYanagi

>TAROさん
ホントにちょっぴりなよーな(笑)
焦らずゆっくりやるのも楽しみですね♪

>卯月 かんなさん
新作スキンかと思ってしまいましたよ。
やー、よいじゃないですか♪
by NecoYanagi (2006-07-14 11:18) 

papa007_

もう見たかも知んないけど、またタイトル画像変えたので、ここにリンク貼らせていただきました~m(_ _)m
by papa007_ (2006-07-20 18:30) 

NecoYanagi

>papa007_さん
無問題ですっ!!
by NecoYanagi (2006-07-20 19:00) 

●トントン●

初めまして♪
ここのブログの記事を見て参考にさせて頂きました。
とても丁寧でわかりやすかったです!ありがとうございました!
参考にしたということで、ブログにリンクを貼ってしまったのですが、
よろしかったでしょうか?
by ●トントン● (2006-07-26 13:18) 

NecoYanagi

>●トントン●さん はじめましテ♪
リンクは無問題です!
自分好みにしてくださいねー♪
by NecoYanagi (2006-07-26 17:07) 

馬子

初めまして。先ほどから、この記事を参考にさせていただき、自分のブログのカスタマイズのテストを楽しんでいます。他のソネブロ仲間にも紹介したいと思います。
ありがとうございました。
by 馬子 (2006-08-10 00:01) 

NecoYanagi

>馬子さん
一度できると何度も試したくなりますよね♪
ご参考になったのなら、ウレシイ限りです。
by NecoYanagi (2006-08-10 14:00) 

ちわみ

はじめまして!
私もこちらを参考にさせていただき、自分のブログをカスタマイズしてみました。
タグの知識のない私にもとても分かりやすかったです。
ありがとうございました(^^)
by ちわみ (2006-08-10 16:09) 

NecoYanagi

>ちわみさん
お絵かきできる人はそんけーに値します!
ごゆるりとカスタマイズしてくださいねー♪
by NecoYanagi (2006-08-11 09:52) 

sknys

NecoYanagiさんの記事を参考に「タイトル画像」を自作。
‥‥その後、他の皆さんのスキンのCSSを見よう見真似で、
カスタマイズ〜改良を加えてみました。

〈猫にも出来るオリジナル・スキン〉という記事の中で、NecoYanagiさんの方法を紹介したいのですが、引用しても良いでしょうか。
UPしたらTBしておきますね(タイトルはNecoさんへのオマージュ?)。
by sknys (2006-08-14 22:59) 

NecoYanagi

>sknysさん
できましたねー。
タイトルは。。。
リンクは無問題です!
by NecoYanagi (2006-08-17 14:39) 

バティー

これをみて、作れましたありがとうございました
僕も、作り方を、書かせていただきたいです
by バティー (2006-08-25 17:20) 

NecoYanagi

>まー君さん
無問題です♪
by NecoYanagi (2006-08-27 11:16) 

よーたん

はじめまして。 ちわみさんのところから来ました。
ちわみさんのブログがかわいいイラストになっていたのでどうやったのか
不思議でした。
そしてNecoYanagiさんのブログのこと教えていただきました。
ソネットのスキンに飽きてきたので、すごく参考になりました。
ありがとうございました。
by よーたん (2006-10-15 10:36) 

NecoYanagi

>よーたんさん はじめましテ♪
どーいたまして♪
by NecoYanagi (2006-10-21 11:48) 

わた菓子

画像が表示されないんです・・・
by わた菓子 (2006-11-28 16:21) 

NecoYanagi

>ミカンとわた菓子♪さん
??
表示されているように見えますが...。
「自由帳」とオレンジで書かれたモノが...。
具体的にコメントなり、ご自分の記事なりに書いていただけると
協力できますので。
by NecoYanagi (2006-11-29 17:11) 

tukurinaosi

オリジナルスキンのやり方参考にさせてもらってます♪
by tukurinaosi (2006-12-08 19:37) 

NecoYanagi

>苺さん
どうぞ、ご自由に~♪
by NecoYanagi (2006-12-11 17:58) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 13

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。