誰が呼んだか略して『ハロマビ』は、愛と感動のネタブログです。
スポンサーサイト
--年--月--日 (--) | 編集 |
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


web拍手
ハロマビ画像加工教室・特別編
2009年01月18日 (日) | 編集 |
フル
PM6:59.57





フル
PM6:59.58





フル
PM6:59.59





ムーン!
PM7:00.00






フルフルフルムーン♪
またまたやらせていただきましたぁんッ!
はぁーい、こんばんわ。うふ☆
今宵もハロマビ画像加工教室のお時間がやってまいりました!
・・・といいたいところなんですが、今回は特別編!
テンプレ改造教室のお時間となりました(*´ヮ`)

えー、というのもですね。
前回の記事で頂いたコメントで、
『どうやってブログのTOP画像を変えるの?』というお声を頂きましたので、
今回はそれについてのお話とさせていただきます。




オルヴィエ先生。
お送りするのは毎度おなじみ!
ロリでポップでキュートな画像編集界のカリスマ!(自称)
オルヴィエ先生とっ!




チェルヴァロ。
助手のチェルヴァロっスよォーッ!
ご主人先生!今日もバッチリレクチャーよろしくっス!





オルヴィエ先生。
はーい、ではまず基本的なお話から始めましょう!
といっても私も詳しくないんで、ある方々からの受け売りです・・・w

なんか不安になってきたっス・・・(^ω^;)






えーっと、まずブログのテンプレートはこの二つで構成されています。

HTML→内容の記述
CSS→デザインの記述


ブログのデザインや仕様を根底から変える場合は、この両方に手を加えなければなりませんが、
今回は画像を差し替えるだけですので、いじるのはデザインを構成するCSSだけです。
ではCSSはどこを見ればわかるのか?
順を追って説明していきましょう(*´ヮ`)






1.自分のブログのCSSを見る

最初に、私はfc2ブログしか扱ったことがないんで・・・
fc2ブログの仕様で説明させていただきます。
よそのブログサービスだと微妙に言葉が違うかもしれませんが、
そこはフィーリングで補完してください・・・(´ω`)

まずCSSを見る為に、管理画面を開いてテンプレートの設定をクリック!
すると現在使用しているテンプレートと、
HTMLとスタイルシートの編集画面が出てくると思います。
このスタイルシートってのが、CSSになるわけですね。




2.ヘッダーのデザインをしている記述を探す

よっぽど特殊なCSSでもない限り、
大概は「header」や「head」、もしくは「banner」とか「top」や「title」みたいな感じで、
さもそれがヘッダー部分ですよ~っと言わんばかりの名前を使って、
ヘッダー部分・・・つまりブログのタイトル部分のデザインを指定しています。

まあ大半は誰が見てもわかるように、簡単なメモなんかが記してあります。
それを頼りに、CSS内でTOP画像を構成する部分を探してみましょう。

ちなみに私が使っているテンプレートだと・・・
TOP画像構成CSS
こんな感じです。
head要素っていう、わかりやすい名前が付いてるのがわかるかな?
{}で囲んである部分が、TOP画像のデザインの内容になっています。
そしてもう一つ、赤い文字で画像のURLって書いてあるところがあるのもわかるかな?
そう、これが今回のキモなわけですね!
ということで・・・




3.画像を変える

さあさあ、ここからがいよいよ本題です。
画像を差し替える為には、まずここに注目してみましょう。
ばっくぐらうんど いめーじ !
この赤線を引いた部分!
background-image(ばっくぐらうんど-いめーじ)と書いてありますね?
これを直訳すると・・・

background=背景
image=画像


そう、つまりこれが背景画像を指定している訳ですね~(*´ヮ`)

background-image: url(画像のURL);
↑これが背景画像を指定する命令文となっており、
URLを指定して、そこから画像を引っ張ってきている訳ですね。
なので赤い文字で書いてある部分に、
自分の表示させたい画像のURLを代わりに入れてあげればいいわけですね!
あとは自分で用意した画像をファイルのアップロードなどでアップして、
その画像のURLを貼り付ければいいわけです。




4.画像のサイズ

ここまで読んだ人なら、画像を差し替えるだけなら完璧ですよね♪(〃v〃)
ところがどっこい、まだまだ困ったことがあったりするんです(・3・)
例えば適当に画像を差し替えたりすると、元の画像とのサイズの違いによって・・・
元の画像用に調整された画面構成が、めちゃくちゃになってしまうかもしれません。
もちろんそれも自分で調整可能ではありますが、
それよりも元の画像と同じサイズの画像を作って、差し替えたほうが早いですよね。
という訳で、元の画像のサイズを調べてみましょう!

ここで出てくるのが、さっきのこれ。

background-image: url(画像のURL);

わかりやすくする為に画像のURLと書いてますが、
実際にはhttp://以下略・・・と書かれています。
このURLにダイレクトにアクセスしてみましょう!
ブラウザを開いて、URLをコピペしてアクセスしてみると・・・?

こんな風に、TOP画像が出てくると思います。
TOP画像にアクセス!
この画像にマウスポインタを合わせて右クリック!
メニューのプロパティを選んでみましょう。
すると・・・?




はい!出ました!
画像のサイズ。
この赤いマルで囲ってあるのが、TOP画像のサイズになるわけですね!
この画像だと、画像のサイズは840×215ピクセルだというのがわかります。
あとは、これと同じサイズの画像を用意すればいいってわけですね~。
どう?意外と簡単でしょ?(〃v〃)

CSSは知識がなくてもそれなりに英語が読めれば、
なんとな~くではありますが、意外と解読できたりしちゃいます。
まあどこかをいじる度にプレビューを見れば、何かしら変化してるはずなので・・・
それを頼りにしてみるのもいいかもしれませんね(*´ヮ`)
また今回のを応用すれば、例えばメニュー部分の画像を差し替えたりだとか・・・
いろいろ出来ちゃうので、興味のある方はお試しアレ!
ただし下手に保存して取り返しが付かなくなる前に、予めバックアップをとっておきましょうね♪






チェルヴァロ。
これで自分のブログデザインを、好きにカスタマイズ出来るってわけっスね!
じゃあさっそく自分も、色々いじってみるっスよォーッ!!





オルヴィエ先生。
うんうん!
モニターの前のみんなも、チェルヴァロに負けないように頑張ってみてね♪
・・・と、いいたいところですが!
最後の最後に、一番肝心なお話をしておきます。
とっても大事なことだから、よぉ~く聞いてくださいね?




自分で一から作る場合は別ですが、
ユーザーさんの作った共有テンプレートなんかには、色々と約束事があります。
例えば私の使っているテンプレートの場合だと・・・

・画像の差し替えは可(ただし素材の流用や加工、再配布は不可)
・著作権表示の削除は不可
・文字の色を極端に見え辛い色にしない、また極端に小さくしない
・テンプレートの再配布は不可


※ただし例外として、以下の条件を満たした場合のみ著作権の削除や再配布も可。
・元の素材を全て消去、または差し替える
・カラーイメージを変える(元のイメージを完全に無くす)


・・・とまあ、こんな利用規約があったりします。
この辺は使用しているテンプレートによって変わってくると思うので、
カスタムする場合は、この辺りをよーく読んでからにしてくださいねヾ( 'ヮ'*)ノ"

間違っても・・・
『どうせわかりっこないだろ・・・常識的に考えて・・・』
・・・とかって考えちゃ絶対ダメですからね!




さて、可能な限りわかりやすく書いてみたんですけど、どうでしょうか(;´ヮ`)
ちゃんと伝わってくれたかな・・・??
私自身そんなに知識があるわけじゃ(というよりまったく)ないので、
言葉が足りなかったり、おかしなところがあるかもしれません。
よくわかんな~いって方は、グーグル先生にでも聞いてみてくださいませ(〃▽〃)
もう丸投げですごめんちゃーい・・・w




と、いうわけで。

今回はここまでっ☆

(゚∀゚)ノシ Bye Bye♪

※今回の記事は、某所にてエリンのネ申様から授かった知恵を元に構成しています。
ネ申様には感謝感激あめあられでございます(´ω`)


web拍手
コメント
この記事へのコメント
せ、せんせー!
今気づいたけど、更新するたびに、TOPの画像変わるんですね!
更新しまくっちゃったよw
2009/01/18(日) 21:07:23 | URL | ゼラフィーネ #d3xRQPUk[ 編集]
イラストかわいいなあ。
そして相変わらず加工にも手が込んでる…!

確かにTOP画像を変えると、ガラっと印象も変わりますよね。
季節ごとにそれっぽい絵に差し替えられるのは強み!
全部リニューアルって考えると重いけど、少しの手間で
印象が大きく変わるならお得ですしねー。
ここを読んでチャレンジしてくれる人が増えれば嬉しいなあ。
見る側の新鮮さとしてw
2009/01/19(月) 12:57:08 | URL | 椿屋 #3Vn3XHxI[ 編集]
どっかで見たことあるような解説だと思ったら俺が書いたヤツか!!(笑
そーいや、そんなこと書いたことあったねぇ。
活用されているようでなによりだ、ぜ。
2009/01/20(火) 16:54:04 | URL | 唐紅 #6mhiDe5.[ 編集]
オル先生〜とってもわかりやすいです〜^^
イラストもとってもかわいいで〜すw

ウチも変えてみたいと思いますw
2009/01/20(火) 18:09:38 | URL | チホ80 #-[ 編集]
(*ノ・ω・)ノオオオオォォォォ とってもわかりやすいです☆
ウチも先日模様替えしたんですが、適当にいじくってはプレビュー参照という感じでやってましたw

人に説明するって難しいことですよね。
かわいすぎるイラストがわかりやすくていい感じですー(*^w^*)

TOP画像見たくて更新しまくりましたw
2009/01/20(火) 18:46:25 | URL | ラルファリア #5fv3tx1o[ 編集]
オルヴィエせんせー
とっても分かりやすかったです(^ω^)
今度実践してみようかしら

しかし、なぜかブログ開けなくなってる・・・

パソコンからじゃないからかな〜
2009/01/21(水) 21:02:17 | URL | ragu #3fjFRtIk[ 編集]
お返事〜
>ゼラフィーネさん
お、よく気がつきましたね。
実は今回の記事を書く前に、
ランダムでTOP画像が変わるようにしてみたのでした(*´ヮ`)

>椿屋さん
TOP画像を変えるだけでも、結構雰囲気変わりますよね!
よりそのブログの個性が出るというか・・・
愛着も増すというものです(〃v〃)

>唐紅さん
えー、その節はお世話になりました(笑)。
9割ぐらい引用してますが、ご容赦くださいませ・・・w

>チホ80さん
伝わってくれたようで何より(*´ヮ`)
これを参考に、色々いじってみるのもいいんじゃないかと思います!

>ラルファリアさん
このTOP画像は、
前回の記事にも書いたジャズいお方から頂いたのです(*´ヮ`)
一度に3つも頂いたので、これは何とかしたいと思い、
ランダム表示にしてみた訳ですが・・・
理解するまでに結構時間がかかってしまいました(^ω^;)

>raguさん
TOP画像を差し替えるだけでもだいぶ変わるので、
機会があればお試しアレ〜(〃ヮ〃)
2009/01/22(木) 02:59:28 | URL | オルヴィエ #a5JjCMr6[ 編集]
イラスト可愛いですねーッ
TOP変えるような綺麗な画像がありまセンorz
ブログ移転シマシター
2009/01/26(月) 17:44:49 | URL | 莉御 #SQ2W7ndE[ 編集]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2009/01/29(木) 20:16:11 | | #[ 編集]
お返事〜
>莉御さん
TOP変えるような綺麗な画像がありまセンorz
お得意のイラストを描けばいいじゃないっ!(・3・)

>匿名希望さん
ご声援ありがとうございます〜(*´ヮ`)

さて、Allrightsの件についてですが・・・
そんなの書いた記憶も無ければ、
実際に書いてもいないので随分探してしまいましたが(笑)、
ブログの一番下辺りに書いてあるやつのことですね!w

これは別に私が書いたというわけではなく、
FC2ブログの仕様でこうなってるんですね〜。
なので、公式や共有テンプレなどを使ってる人のほぼ全てのブログに
同じことが書いてあったりします。

とはいえ、何か対策でもしてみましょうかね(*´ヮ`)
いじっていい部分なのかもわからないし(・3・)
2009/01/31(土) 02:02:06 | URL | オルヴィエ #a5JjCMr6[ 編集]
こんにちわはじめまして!
前からちまちま覗いていたのですが思い切ってこめんとっ!
あたしも以前からTOP画変えたくて…でもどの部分をいじればいいのかわからなくて、すごく助かりました><☆

よろしければリンクはらせてください(*´ω`*)ノン
2009/01/31(土) 10:12:21 | URL | raga #-[ 編集]
お返事〜
>ragaさん
お役に立てて何よりです。
応用次第で色々出来るので、頑張ってみてくださいな(*´ヮ`)

それとお返事が遅くなって申し訳ありません。
うちはリンクフリーなのでご自由にどうぞっ!
2009/02/05(木) 12:31:23 | URL | オルヴィエ #a5JjCMr6[ 編集]
せんせ〜!

解決しますた!!ありがとうでした!!
2010/02/12(金) 16:23:07 | URL | とかち #-[ 編集]
お返事〜
>とかちさん
お役に立てて何よりでございます(´ω`)
2010/02/20(土) 12:34:09 | URL | オルヴィエ #a5JjCMr6[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。