人気ブログランキング | 話題のタグを見る
多忙なため、コメントへのお返しができなくてごめんなさい。温かいコメントは更新の励みです。どうしても解決できない問題がある...という場合に限っての質問箱を設けましたので、よかったらご利用ください。いつもAnimal Skinを愛用してくださってどうもありがとう~♪
Top
★自分で撮った写真等をブログのトップ画像として使いたい人へ (初心者向け解説)★
シンプルスキンのトップ画像に自分で撮った写真を使いたいけれど、
HTMLやCSSの知識がないので編集の仕方がわからない...
という人はここを読んでみてください。






スキン編集に必要なHTMLやCSSの知識はまったくないけれど、自分で撮った写真をスキンに使いたいな~...という人は結構いるのではないかと思います。

たとえばトップ画像に飼っている犬や猫の写真を使いたい。
でもどうしたらいいのかわからない...という人、きっと少なくないですよね。

★自分で撮った写真等をブログのトップ画像として使いたい人へ          (初心者向け解説)★_f0165338_14315483.gif

単純に説明すると、現在使っているスキンのトップ画像の部分にカーソルを当て、プロパティを見て、画像のURLを知り、スキン編集ページを見てその画像が使われている部分を探し、元の画像と自分がアップロードした画像を入れ替えることができます。(画像のサイズが同じじゃないとスキン崩れします)
私が一番最初に自分でした「スキン編集」が、まさにそれでした。


けれど、これさえも初心者にとってはチンプンカンプンだという場合も少なくないことでしょう。
★自分で撮った写真等をブログのトップ画像として使いたい人へ          (初心者向け解説)★_f0165338_14324423.gif

そんな初心者のために、ここで私が配布しているスキンを使って、トップ画像だけを簡単に入れ替える方法を、初心者向けにステップバイステップで説明します。

とっても簡単なので誰にでもできますよ。^^

ただ、私が写真に加工している「縁のぼやけ」とか、スリムトップ型のスキンに見られる「画像の外側にさらに線描きのフレーム」までは引き継げません。
(フォトショップ等のソフトをお持ちのかたは、画像のサイズ合わせをする時点でこうしたおまけを入れることができます)
★自分で撮った写真等をブログのトップ画像として使いたい人へ          (初心者向け解説)★_f0165338_1448196.gif

では、説明に入りましょう。^^

最初にいっておきますが、ここではあくまでも「Animal Skinで配布しているスキンのトップ画像写真を入れ替える」方法について説明しています。

エキサイトからは数多くのスキンが配布されていますが、それらのどのスキンも、ここで説明する方法とまったく同じようにして画像が入れ替えられる...というわけではありません。
使用する画像のサイズもそれぞれ違いますからね。
基本は似ていますから、HTMLやCSSを勉強すれば、そちらも簡単にできるようになる人も多いとは思いますが。
★自分で撮った写真等をブログのトップ画像として使いたい人へ          (初心者向け解説)★_f0165338_14364219.gif

ここで配布している超シンプル系のスキンでもOKだよ...という方、ここから先をどうぞ♪
★自分で撮った写真等をブログのトップ画像として使いたい人へ          (初心者向け解説)★_f0165338_14374657.gif

★ノーマルタイプのスキンに、自分で撮った写真を使用したい場合★

ここでいうノーマルタイプとは、トップ画像がやや太めの、基本形スキンのことです。
例:
★自分で撮った写真等をブログのトップ画像として使いたい人へ          (初心者向け解説)★_f0165338_1342768.jpg
このスキンのトップで使われている天使の画像を、あなたの好きな写真と入れ替えたい...とします。

まず、このブログで配布してあるスキンの中から、カーソルを当てたときの文字の色や、各メニューの下のラインの色、ブログタイトルの位置などが気に入ったもの(それらはプレビュー画面で見ることができます) を、手順にそってあなたのブログにマイスキンとして保存してください。

トップ画像の写真は入れ替えるので、どれを選んでも関係ありません。



あなたがトップ画像に使用したい写真を、
800pxl(横)×297pxl(縦)にトリミングして(切り取って)、それをPCのどこかにjpgファイルとして保存してください。ファイルの名前は半角英語でね。(例:formyskin.jpg)



フォトショップがあれば、最初にその大きさのファイルを新しく開いて、そこに好きな写真をコピペ、画像のサイズ調整をすれば簡単。

画像加工の知識がある人は、ここでこの画像に文字を入れたりフレーミングしたりと、遊んでみるのも楽しいでしょう。

フォトショップがなくても、ウィンドウズのペイントでも、デジカメを買ったときについてきた写真加工CDでもなんでも使えると思います。
ネット上には無料でこういう技が使えるサイトもいくつかありますしね。
http://www.picnik.com/



次にこの画像を、ブログの装飾として使うためにアップロードするのですが、 スキン編集の部分に普通にアップロードするにはおそらくちょっと大きすぎると思うので、私はこれを記事としてアップロードしちゃいます。

あ、ちょっとわかりずらかったかな?^^;



つまり、スキン編集画面に行って「マイイメージアカウントにイメージ登録」をクリックして、画像を登録することもできるのですが、これがまたセコいのかなんなのか、100kbまでしか受け付けてくれないんですね。

なので、アップロードしたい画像が100kbの場合はここからでもOKですが、私の場合ほとんどが100kbを超えちゃうので、記事としてアップロードするしかないんですよ。^^;



と、あーだこーだと書いちゃいましたが、普通にブログを更新するように、とりあえず「投稿」をクリックしましょう。



そして、先ほど800pxl×297pxlにトリミングしてPCに保存した画像を、記事を更新するときと同じに、普通にアップしてください。
記事には適当なタイトルをつけちゃってかまいません。
なぜなら...ブログの管理者以外の人には見えない記事を作るから!

そんなときに忘れちゃいけないのがコレです。

この投稿に対して □非公開

とあるところ、ここの四角の中を必ずチェックしてください。
そうすることにより、ブログの管理人にしか見えない記事ができますから。

後は普通に送信してOKです。



ブログの記事として確認します。

タイトルの前に枠に囲まれた鍵マークが見えていれば、管理者にしか見えない記事としてきちんとアップされたことを意味します。^^

この記事は、消してはいけません。
消してしまうと、アップした画像もなくなってしまうので、あくまでも自分だけに見える記事ということを覚えておいて、そのままにしておいてください。



この記事には、当然ですが先ほどアップした写真が見えています。
この写真をクリックすると...
別窓となって画像が開くはずです。

開きましたか?^^



2010年3月追記:
右クリック禁止のブログパーツを使用している場合、プロパティを開くことができません。
その場合は、一度編集記事に戻り、そこにあるすでにアップロードした画像のリストをクリックしてプロパティを開き、そこからURLをコピーしてください。
参考までに:→画像転載禁止ブログパーツとマイスキンのトップ画像




開いたら、今度はその別窓の画像の上で、ウィンドウズの場合は右クリック、Macの場合は画像の上でマウスボタンを押し続けることにより、画像のプロパティを見ます。

プロパティの中に画像のアドレスがあります。
例:http://pds.exblog.jp/pds/1/200805%2F06%2F38%2Ff0165338_1513041.jpg

これをコピーします。



※プロパティの中にあるURLを使用することは重要です。
プロパティを開かなくても見ることができるURLは、管理人にしか見えない記事の中にあるので
管理人以外には見えないということがあるからです。



そしたら次は...

ブログ設定(config)画面から、『スキン変更』を選びます。



マイスキンをクリックし、次のページで「保存しておいたスキン」の「編集」をクリックします。



CSS編集の枠の中に

/* base */
div#base {
background:transparent url("http://pds.exblog.jp/pds/1/200805%2F08%2F38%2Ff0165338_1252439.jpg") no-repeat left top;
margin:0 auto;
overflow:hidden;
width:800px;
padding: 0 12px;
color:#333333;
font-size:small;
}

といった部分があると思います。
(↑は例なので、urlと書いてある次、http以降jpgまでは、あなたが実際にあなたのPC上で見ているものとは異なります。また、スキンのスタイルによっては、ここにあげている例とまったく違っている場合もあります。その場合には、すでにスキン内にあるURL、つまりデフォルトとして使用されている画像URLをコピーして、別のウィンドウに落として実際に画像を見てみてください。プレビュー画面と比べれば、どのURLがトップ画像なのか、わかります。)

この中にある、↓のような文章の赤文字の部分を、さっきコピーした自分で使いたい画像のアドレスとそっくりそのまま入れ替えます。

何度もいいますが、httpの後に続くアドレスはどのスキンを最初に選んだかによって違いますからね。
↓のはあくまでも例です。

background:transparent url("http://pds.exblog.jp/pds/1/200805%2F08%2F38%2Ff0165338_1252439.jpg")


これでオシマイです。^^



プレビューを押して見てください。
あなたが自分で選んだ写真がトップ画像に使用されていますか?

★自分で撮った写真等をブログのトップ画像として使いたい人へ          (初心者向け解説)★_f0165338_14201098.jpg


OKなら、保存を押して、そのスキンを保存します。



(ここからもっともっと凝ったスキン編集をしたい...という人は、サイドバーにリンクしてある、スキン編集のお助けブログを見て勉強してみてください。...ここではあくまでも「単純に画像を入れ替えたい」場合の説明だけをしています)


以上が、ノーマルタイプの画像を変える場合です。



スリムトップも同様にして画像の入れ替えができます。
スリムトップタイプに使用する画像はノーマルタイプよりも薄いので

800pxl(横)×170pxl(縦)でトリミングしてPCに保存します。




※左側にメニューが来る2列レイアウト以外のスキンや、固定背景のスキンでも画像の入れ替えは簡単にできます。
CSS内に画像のアドレス(http://~)を見つけた場合、URLを開いてチェックしてみてください。
そこでプロパティを確認すると画像のサイズがわかるので、同じサイズかそれに近い画像を別に作って、↑で説明したと同様にして入れ替えればいいだけです。



※どうしてもできない...悩みすぎて頭が痛いのにできない...という場合は、
ここの説明文をプリントして、それを見ながらゆっくりゆっくりやってみてください。
初心者にも必ずできますから。^^



ちなみに...写真を入れ替えた場合は、
HTML編集メインとある枠の中の

"(スキンの名前)" Skin by <a href="http://animalskin.exblog.jp/" target="_blank"><b>Animal Skin</b></a></div></a>

という部分は削除しちゃってまったく構いません。

...が、エキサイトブログのリンクの一つとしてでいいので、どこかにAnimal Skinへのリンクを貼っておいて欲しいとはやっぱり思います。
もちろん、スキンをお持ち帰りいただいた方のブログすべてを確認することはできないし
これは強要することでもありませんが、私がスキン改造に費やした時間と労力への
わずかばかりの報酬がリンク...と理解していただければありがたいです。^^






ところで...トップ画像を自分の好きな写真やイラストに入れ替えるときに気をつけて欲しいのが、著作権問題です。

個人の楽しみのためだけの、つまりお金儲けが目的ではないブログやHPを装飾する程度なら、著作権フリーの写真やイラストを使用しても別に問題はないでしょう。

けれど、素材配布サイトなどから借りてきたイラスト等をトップ画像として利用したいとなったら、作者に一言問い合わせてみるのが礼儀だと思います。
そういった作品はあくまでも「借りる」ものですからね。

写真ブログなどに使われている写真には、撮影者の名前やブログアドレスによるコピーライトが入れられていることがよくありますよね。
これは、勝手に使わないように...と撮影した人が言っているのです。

モデルや俳優などの場合は肖像権問題もあると思うのでご注意を。

というわけで、画像入れ替えの際には、自分で撮影した写真なり、自分で描いたイラストなりを使うのが一番無難かもしれません。
Top▲ | by mari_ca by animal_skin | 2011-12-30 00:00 | 自分の好きな写真を使いたい方へ
<< ★★★シンプル系スキン配布ブロ... | ページトップ | ★バナーを使ったリンクの仕方&... >>
↓質問はこちらへ↓