2008年 01月 14日
Nikon D200 + Ai AF DC Nikkor 105mm F2D このblogの背景には大理石調の模様が付いています。 結構ゴージャスな雰囲気で良い感じですよね。^^ 今日は、背景等に画像を貼り付ける方法を紹介します。 ■ 背景に模様を付けるには、まず、背景用の画像をマイイメージアカウントというところに登録します。 次に、それをCSS編集でタイル状に貼り付けるように設定します。 例えば、このblogのBODYの背景は、 ← こんな画像をタイル状に敷き詰めて作られています。 で、具体的な貼り付け方法ですが、 背景用の画像をマイイメージアカウントにイメージ(画像)登録するのは、 スキン編集のHTML編集欄の右上からです。 ↓ これですね。 この「マイイメージアカウントにイメージ登録」をクリックすると、下のような登録画面が出てきます。 ここで画像を登録します。 (ファイルサイズの大きな画像(100kバイト以上)は拒否されますので、欲張りすぎないように。^^) 登録が終わったら、この登録した画像のURLを、スキン編集画面でCSSに設定します。 スキンの背景の場合は、BODY{ }の中にある「BACKGROUND :#○○○○○○;」の色コードの部分を以下のように書き換えます。 BACKGROUND :URL("イメージ登録した画像のURL"); <注意!> イメージ登録した画像URLの両端には必ず" "を付けてください。 先日、Firefoxというウェブブラウザを使用している方から、 私のblogにおいて背景画像が表示されていないとの指摘を頂きました。 で、原因を調べたところ、" "を付けないとFirefoxでは画像を貼り付けてくれないことが分かりました。 Internet Explorerでは" "無しでも問題ないので、今まで気付きませんでした。(^^; ところで、イメージ登録した画像のURLって分かりますか? イメージ登録画面で、登録した画像名をクリックすると表示されます。 ↓ こんな感じです。 これで背景に画像が貼り付けられているはずです。 基本的に、背景はどれも「BACKGROUND:#○○○○○○;」と記載されているので、 方法さえ覚えてしまえば変更するのはそんなに難しくはないと思います。 ■ 最後にちょっと補足説明をします。 今回は、小さな画像を敷き詰める方法を紹介しましたが、 大きめの画像を1枚だけ貼り付けたいときや、ワンポイントのアクセントを貼り付けたいときは、 敷き詰められると迷惑だったりします。 そんなときは、BACKGROUNDの行の下に「background-repeat:no-repeat;」を追加してください。 イメージアカウントに登録した画像を1回だけ貼り付けます。 背景画像に関しては、ネットで探せば適当な素材はすぐに見つかります。 ただ、なかなか気に入った画像が無いんですよね。 なので、私は背景画像を自作しました。 自作方法については、「背景に画像を貼り付ける方法(2)」で紹介します。 以上、参考になれば幸いです。
by muto2100
| 2008-01-14 20:54
| スキン編集
|
Comments(12)
Commented
by
jin-na at 2008-01-14 21:23
今回もまた、気合の入った記事ですね。
これで、色んな方のスキンが変わりそうで、楽しみ☆ 私は今回の記事で、マイイメージアカウントってのを初めて知りました。 以前は、ブログトップに写真を加工してもってきていたのですが、 最近、そのアップローダーが使えなくなって困ってたんです。 これで、解決。 さっそく、やってきまぁす☆
0
Commented
at 2008-01-14 23:14
x
ブログの持ち主だけに見える非公開コメントです。
Commented
by
muto2100 at 2008-01-15 07:46
jin-naさん、こんにちは。
オリジナリティを追求すると、どうしても背景に画像を貼り付けたくなりますよね。 blogの雰囲気ががらりと変わりますから。 ぱっと見、難しそうなんですが、実際は簡単です。 CSSの編集もBACKGROUNDの後に付いている色コードをURLに変更するだけですからね。 ワンポイントのイラストみたいなのを入れようとすると、 貼り付け場所の微調整が必要になるのでちょっと難しいですけど。 背景画像の一番難しい点は素材作りです。 気に入った背景用の素材って、なかなか無いんですよね。 それについては次回紹介します。
Commented
by
muto2100 at 2008-01-15 07:52
鍵コメさんこんにちは。
ご指摘下さいまして有り難うございます。 Firefoxは使ったことがないので、表示がおかしくなっているとは全く気付きませんでした。 Windowsでは何の問題もありませんでしたからね。 おかしいのが記事、サイドバーの幅、あと背景画像ですね。 早速詳しく調べてみます。 今のところ、考えられる原因が1つありまして、 それを実行すれば多分背景画像は表示されると思います。 幅に関しては、ちょっと手間取るかもしれません。 これも原因の元は分かっているのですが、復旧方法が難しかったりします。 お手数でなければ表示幅に関して、もう少し具体的にお聞かせ頂けませんでしょうか?
Commented
at 2008-01-15 09:55
x
ブログの持ち主だけに見える非公開コメントです。
Commented
by
muto2100 at 2008-01-15 19:23
鍵コメさんどうもです。
とりあえず、背景画像については心当たりを試したらビンゴでした。^^ イメージ画像URLの両端に" "を付けないとダメみたいですね。 IEでは大丈夫なんですけど。 早速、上の記事にも注意書きを挿入しておきました。 枠に関しては、なかなか手強いですね。 とりあえず、記事だけは読めるように微調整しました。 ただ、完全にするにはもう少し時間が掛かりそうです。(苦笑) このスキン自体に、ちょっとした無理があるもので。^^ とりあえず、私のPCにもFirefoxをインストールしましたので、色々とやってみますね。 で、改善しなければスキンを作り直します。^^ ご指摘、有り難うございました。 今後ともよろしくお願いします。
Commented
by
poko_88 at 2008-01-15 19:26
こんばんは。
mutoさんのスキン編集解説、とても参考になります。 私のblogもちょっとだけスキン編集していますが、 mutoさんの前回の記事がとても参考になりました。 今回の記事も参考に、徐々に変えて行こうかなって思っています。
Commented
by
muto2100 at 2008-01-15 22:23
poko_88さん、こんにちは。
>>mutoさんのスキン編集解説、とても参考になります。 そういって頂けると、とても嬉しいです。^^ 私も、自分のblogの過去記事を見ながらスキン編集してるんですよ。 しばらく経つと忘れてしまいますからね。 自分のためにUPしている側面もあるのです。^^ 小変更も結構入れているので、ちょこちょことUPしていく予定です。 分からないことがあったら、遠慮無く聞いてくださいね。 ちゃんと答えられるかどうかは微妙ですが。(笑)
Commented
at 2008-01-16 08:08
ブログの持ち主だけに見える非公開コメントです。
Commented
by
muto2100 at 2008-01-16 18:30
Commented
by
rau
at 2008-01-16 20:22
x
こんばんは。素早い対応ありがとうございました。
背景が表示されて、とても見やすくなりました。完璧です。 スタイルシートはブラウザごとに表示の仕方が違うので困ったものです。 これからも楽しく拝見させていただきますので、よろしくお願いします。
Commented
by
muto2100 at 2008-01-16 20:34
rauさん、こんにちは。
こちらこそ、ご指摘下さって有り難うございました。 ウェブブラウザというとInternet explorerしか頭になかったので、 まさかそんなことになっているとは思いませんでした。 自分のPCにFirefoxをインストールして見てみたら、あまりの酷さに愕然としましたから。^^ 結局、このスキンは初めから作り直したものです。 実は、あのスキンは偶然の産物で、誤魔化した部分があったんですよね。 そういう部分を、一から洗い直しました。 おかげで、きちんとしたスキンを構築できました。^^ スキンそのものの構造にも随分と詳しくなりましたね。 良い勉強になりました。 rauさんには感謝、感謝です。 <(_ _)> 今後とも、よろしくお願いしますね。 << 背景に画像を貼り付ける方法(2) JTrim >> |
<< 背景に画像を貼り付ける方法(2) JTrim >> Welcome!
こんにちは。管理人のmutoといいます。 拙blogへようこそお越し下さいました。 このblogでは、私があちこちに出かけて撮ってきた写真を、とりとめもなくUPしております。 コメントはお気軽にどうぞ。写真の感想などをお聞かせ頂けると幸いです。 ただ、返事が遅くなるかもしれませんので悪しからずご了承下さい。 なお、リンクはフリーですが、このブログのすべての画像の著作権はmuto2100に帰属します。無断で複写・転用することを禁止します。 Copyright (c) 2005-2024 muto2100. All rights reserved. ↓ 本館のHPです。 カレンダー
カテゴリ
うちの犬 マールの独り言 小湊鐵道 大山千枚田 志賀高原・草津白根山 手賀沼 本土寺 伊豆 都会の夕景・夜景 神社・仏閣 工場夜景 山行 鉄道 植物 玉ボケ万歳! 花と虫 伏姫桜 ・ 風景・千葉 風景・東京 風景・栃木 風景・長野 風景・新潟 風景・山梨 風景・福島 風景・群馬 風景・茨城 風景・その他 ・ 天の川 コンポジット星景写真 動物 水族館 Disney Small World レタッチ HDR-image 合成写真 ポータブルオーディオ iPhone アイテム帳 フォトコン しくじるは稽古のため スキン編集 その他 タグ
My Favorite(191)
AF-S 24-120mmf/4G ED VR(133) AF-S 70-200mmf/2.8G ED VRII(62) AF-S VR ED 70-200mm F2.8G(48) AF-S DX ED 12-24mm F4G(35) AF-S 14-24mmf/2.8G(35) AF-S DX ED 17-55mm F2.8G(31) AF-S VR Micro 105mm F2.8G(31) AF-S 80-400mmf/4.5-5.6G ED VR(31) Ai AF DC 105mm F2D(27) AF-S 20mmf/1.8G ED(23) Ai AF ED 80-200mm F2.8D(22) AF DX Fisheye ED 10.5mm F2.8G(21) Ai AF Micro 105mm F2.8D(20) Ai AF 24-85mm F2.8-4D(20) AF-S 16-35mmf/4G ED VR(19) Z 24-120mmf/4 S(14) AF-S DX 35mm F1.8G(13) Ai AF 50mm F1.4D(10) AF-S VR ED 24-120mm F3.5-5.6G(10) Ai AF Micro 60mm F2.8D(10) AF-S 35mmf/1.8G ED(7) お気に入りブログ
happy *riko*... コバチャンのBLOG With Art 白金の森から ヒトは猫のペットである Primal's Pho... 温 泉 記 雅(みやび) たからもの Happy-time Green Thoughts 遊んだ記録 jyao Q Love 日記 Jester's Pic... 風の中で~ BOSS & ELLIE ろーりんぐ ☆ らいふ Kossan's Avi... 屋根裏部屋の落書帳 エキサイト以外のリンク
最新のコメント
検索
ブログパーツ
|
ファン申請 |
||