So-net無料ブログ作成
検索選択

オリジナルスキン 追記あり [日記]

最近、オリジナルスキンの話題が熱い!ので、

ここでいっちょー「茉莉花でもわかる、オリジナルスキン♪」と題し、

私もオリジナルスキンの作り方について書いてみたいと思います。

 

私はまず、 PhotoManiacsさん のところで、

みつなりさん のブログを紹介していただきました。

 

で、も。

説明文を読んでも、実はすぐには分からなかったのです。 

でもまあ、ごちゃごちゃいじっているうちに、

とりあえず写真のみですがアップに成功しました。(笑)

そーしたら、

今度は HALさんのところで新たに不具合が発見された!

との記事がアップされました。

 

というわけで、

お三方の説明で重要なところをピックアップしつつ、

私がわからなかった部分を補足をしたものをご紹介します。

 

まず、PhotoManiacsさんのところにあるように、

「元になるスキンは、ヘッダー画像の無いもの

(黒や白のヘッダー画像なしスキン)」を選びます。

「負荷の少ないスキンを選ばないと、

トラフィックの速度低下に繋がる」そうです。

 

で、まずはアップしたい画像を作ります。

スキンの幅いっぱいにする場合、

画像の大きさは、

146 × 770 pix :みつなりさん

135 × 770 pix :HALさん

くらい。

私の写真は幅が短いので、横のサイズは適当で、

現行のものは高さを146pixに設定しました。

これで白いスキンではうまく表示されていますが、

別のスキンにすると下が切れて見えない場合がありました。

 

つまり使用するスキンによって高さには微妙な違いがでてくるので、

調整する必要があります。

 

次に、編集方法を「URL自動リンクと改行だけのシンプルな入力」にしてから、

新規作成の画面を開いて、その画像をアップロードします。

そうすると、この写真↑が

<img src="/blog/_images/blog/_5dc/be_happy/3049736.jpg />

こんな文字列になって現れます。

(青字の部分は各自の画像によって異なります。)

次に、この青字の部分をとりだして、

前後に次の赤字部分をつけます。

<style>
#banner {background:url("/
_images/blog/
_5dc/be_happy/3049736.jpg") no-repeat 0px 0px;}
</style>

画面幅いっぱいの画像の場合は、0px 0px でOKですが、

私のように幅の短い画像の場合は、

このままアップすると画像が左に偏ってしまいます。

 

その場合は、0px 0px  の頭のほうに数字をいれると

徐々に右へずれていきます。

これも使用する画像によって異なりますが、

私の場合は420px 0px  で指定してあります。

 

(画像の位置を決めるのはプレビューでは分からないので、

確か一度アップして確認しました。)←すでに覚えていない・・・(汗)

 

この3行ができたら、作業はほぼ終了。

この3行の文字列をコピーして、サイドバーのどこかへ貼り付けます。

カスタムぺイン5 (未設定) というように、

空いている項目があれば、

先につくった3行を貼り付けます。

項目名は何か文字をいれないとダメなので、

項目名を表示しないようにするためには、

スペースのキーを押す必要があります。(←わかるかな?)

また、サイドバーをすでに全部使用している場合は、

どこかの項目の下に追加で貼り付けても大丈夫です。

 

これで、新規作成で作った最初のデータは

すべて削除してしまって構いません。

また、新規作成の編集方法も、

この時点でいつも使っているものに設定しなおしてください。

 

スキン画像に文字を入れる場合は、

みつなりさんのページに追記があったので、

そちらを参考にしてみてください。

 

てな具合で、オリジナルスキンが作れるわけですが、

私も専門用語が分かるわけではなく・・・、

自分が行った作業をメモにしただけなので、

「え、それって変じゃない?」ってところがあるかもしれません。

間違ってたらごめんね~(笑)

 

それから、HALさんの情報によると

Mac+IE だと画面が乱れてうまく表示されないことがあるようです。

Mac+IE ご利用の方、

何かわかったらHALさんまで、ご一報ください♪

 

 

 

 


nice!(42)  コメント(45)  トラックバック(5) 
共通テーマ:趣味・カルチャー

nice! 42

コメント 45

kurenainosora

勉強になります...ハイパーテキストナンたらかんたら音痴の私には...神様です....がんばります...素材探しに苦戦中のわたし....はぁ.....失礼しました
by kurenainosora (2006-04-11 07:20) 

こけもも:

めっちゃ分かり易い。親切な解説です。
by こけもも: (2006-04-11 07:26) 

かなり、わかりやすいです。
編集方法はいつ、戻すの?
by (2006-04-11 10:48) 

ルッコラ

勉強させてもらいました~。
それにしてもすごいね…^^;
by ルッコラ (2006-04-11 12:05) 

Takami*

はじめまして☆
勉強になります!
私もチャレンジしてみよっと。。。
by Takami* (2006-04-11 12:21) 

CHOCOCO

なるほど~!みつなりさんところも見てきましたが
皆さんすごい^^オリジナルスキンがたくさん!
出来るかなぁ~(笑)
by CHOCOCO (2006-04-11 12:22) 

HummingBird

情報を掲載するときはこれくらい詳細に記述しなければなりませんね(反省)。
ありがとうございました。
by HummingBird (2006-04-11 13:00) 

CHOCOCO

茉莉花さんありがとう~出来ました^^v
by CHOCOCO (2006-04-11 16:51) 

HAL

お気遣いありがとうです。(^^)

タグって自分じゃなにをどうしてるのかわかってなくて、
どこかにあるものをコピーして使うことしかできないので、
その中にどんな指示が含まれてるのかも知らなくて。。。(^^;)

でも、こうして皆がオリジナルに興味を示せば、
ソネット側で、簡単にバナーや背景を変えられるようになる日もあるかもねー

また、なにかあったらよろしくお願いします。(^^)
by HAL (2006-04-11 18:07) 

できましたぁ。(* ̄◇ ̄*)ラ(* ̄・ ̄*)ブ(* ̄〓 ̄*)チュッ♪
by (2006-04-11 19:28) 

春分

ほー。
by 春分 (2006-04-11 19:37) 

molihua

kurenainosor.. さん♪
どうも~
私もなんちゃら言語とか、まったく分かりません。
でも、アップできたからいっかー、みたいな。(笑)

こけもも: さん♪
ありがとうございます。
分かりやすいと言っていただけて、
ほっと一息~。

こうちゃんさん♪
おめでとうごじゃいまあ~~~す♪
きゃ~~チューだわ、チューだわ!!

って、見に行ったら、
かなり謙虚な感じ??ですね。(笑)
みんな、気づくかなぁ・・・。ぷぷぷ。

ルッコラさん♪
え?すごい??
ルッコラさんのオリジナルとなると、
もう、ちょ~キレイ!か
ちょ~可愛い!か・・・
楽しみですわ。むふ。

donさん♪
どうも~。
ちょっとは助けになるでしょうか。
オリジナル、作ってみてくださーい。

CHOCOCO さん♪
お~良かったです。
オリジナルでGO,GO,GO!ですね。

PhotoManiacs さん♪
いや~こちらこそ、ありがとうございました。
いつかはPhotoManiacs さんのように、
かっこいー文字も入れたいです。

HALさん♪
いや~お陰様で、好評??です。(笑)
よかったー。

そうそう、画像の位置を指示する言葉を探して
入れてみたりしたんだけど、
うまくいかなくてねぇ。
結局、これ以上のことはサッパリ。(笑)

ほんと、ソネットの対応、あるといいよね~。

春分さん♪
そうなんです。
はやってます。(笑)
by molihua (2006-04-11 20:05) 

molihua

nyanさん♪
nice! ありがとうございまーす。
by molihua (2006-04-11 20:06) 

アールグレイ

茉莉花さんすごいです。
私は、あまりこっち方面、詳しくなくて。
だからいろんな操作できる方、尊敬しちゃいます。
by アールグレイ (2006-04-11 21:37) 

みつなり

こんにちは。ご訪問ありがとうございました!
わたしは理屈っぽい性格なので、ちょっと説明が難しかったかもですねー
茉莉花のわかりやすい解説で、成功された方も多いようでヨカッタです。
by みつなり (2006-04-11 21:43) 

sanjinsai

はじめまして、山刃斎と申します。CHOCOCO様のところから参りました。オリジナルスキンの作り方参考にさせていただきました。ありがとうございます。
by sanjinsai (2006-04-11 23:06) 

みけ

すごいですねー!勉強になりました^^
ひとつひとつ分かりやすく書かれてるので、わたしにも出来るかも?って思ってきました^^
by みけ (2006-04-11 23:17) 

そこがミソなんです。←嫌な性格。
by (2006-04-12 01:34) 

molihua

アールグレイさん♪
いえいえ、みつなりさんのところの説明を
茉莉花言葉にしただけです・・・(汗)
操作は全然わかりません・・・。

みつなりさん♪
ご訪問ありがとうございます!
お陰様で、オリジナルスキン作ることができました。
いや~タグって何??
というレベルなので・・・そういう問題です。(笑)

sanjinsai さん♪
ご訪問、ありがとうございます。
これでなんとかいけそうですか?
楽しいブログライフを~♪

みけさん♪
おー良かったです。
これでみんな、オリジナルだ!

こうちゃんさん♪
ぷぷぷ。
by molihua (2006-04-12 05:28) 

mkz

はじめまして^^。
オリジナルスキン、チャレンジしてみますp(^^)q
by mkz (2006-04-12 08:44) 

ゆつき(*´∀`)ノ

CHOCOCOさんとこから飛んで着ました。
私も真似して見ましたが、なかなか面白いですね。
めちゃ楽しいですよ。
by ゆつき(*´∀`)ノ (2006-04-12 09:07) 

みかん

HALさんの所から飛んできました~
私も以前からオリジナルスキンにする方法を知りたかったので、
とってもわかりやすく解説してあって助かりました!!
時間があったらやってみようと思います♪
by みかん (2006-04-12 20:45) 

molihua

HAZUMIさん♪
megさん♪
nice! ありがとうございます。

mkzooさん♪
ご訪問、ありがとうございます。
簡単な写真のアップのみですみませーん。
画像の加工についてはゆつきさん↓のブログに
詳しく書いてありますよぉ。

ゆつき(*´∀`)ノ さん♪
ご訪問、トラックバック、ありがとうございまーす。
オリジナルスキン作りで、
ソネブロ一致団結ですね~♪

みかんさん♪
ご訪問、ありがとうございます。
おお、HALさんのとこからですか。
さすがHALさんの力、
閲覧数がダントツになりました。(笑)
by molihua (2006-04-12 22:17) 

shareki

おぉ、近日中にやってみよう^^
by shareki (2006-04-13 10:58) 

molihua

渋樹さん♪
お~是非是非。
試してみてください!
by molihua (2006-04-14 00:09) 

NecoYanagi

はじめまして、NecoYanagiと申します。

みつなりさん記事から飛んできましたー。
Necoもまとめて見ましたので、TB貼らせて頂きます♪
by NecoYanagi (2006-04-14 18:52) 

molihua

NecoYanagiさん♪
ご訪問、ありがとうございます。
トラックバックもどうも~。
わたしは専門的なことはまーたく分からないので、
てけとーなこと書いてますが・・・。
宜しくお願いします。

zimaさん♪
nice! ありがとうございます。
by molihua (2006-04-15 01:55) 

molihua

mikaさん♪
nice! ありがとうございます。
by molihua (2006-04-17 19:13) 

cherry

最近、流行ってますよね〜♪
ワタシも茉莉花さんのブログをお手本にやってみようかしら…。
by cherry (2006-04-19 00:51) 

wako

はじめまして。こういうサイトをさがしていたのでとても助かりました。
ありがとうございます!横長の画像って難しいですね・・・(無いんです(^_^;
by wako (2006-04-20 01:28) 

molihua

cherry さん♪
そうなんですよ~
このページだけ、
アクセス数がものすごいことに・・・・(笑)

wakoさん♪
いらっしゃいませ~
あ、私の解説はやたら簡単なので、
トラックバックにあるみなさんのところなど
いろいろのぞいてみてくださいね。
by molihua (2006-04-21 02:09) 

はにぃ

はじめまして。
オリジナルスキンの設定方法を探していたら、
ちょうどこちらの記事にまいりました。
ありがとうございます!
分かりやすい解説で、すぐに設定出来ました。
オリジナルスキンそのものの記事はのせていませんが、
時間があったら スキンを覗きにいらしてください♪(ノ゚Д゚)人(゚Д゚ )ノイエーイ
by はにぃ (2006-04-21 10:32) 

kisi

はじめまして。
私もオリジナルスキンの設定方法を探したら、茉莉花さんのblogにやってきました。
茉莉花さんの記事を見ながらオリジナルスキンの設定をしました。
ありがとうございました!
by kisi (2006-04-30 00:35) 

molihua

はにぃ さん♪
ご訪問、ありがとうございます!
・・・といっても、もうだいぶ前のことですね・・・
すみません。
今度ゆっくりおじゃましまーす。

kisi さん♪
ご訪問、ありがとうございます!
私の設定方法はかなり、初心者向け?
というか、素人な説明ですが・・・。
少しお役にたてたでしょうか?
by molihua (2006-04-30 01:44) 

瑠々

初めまして!参考にさせていただきました。(*- -)(*_ _)ペコリ
ありがとうございました♪
by 瑠々 (2006-05-07 01:18) 

molihua

るるにゃんさん♪
ご訪問、ありがとうございまーす!
もう少しで見落とすとこでした・・・

ソネブロさーん、最新のコメントチェック、しずらいですぅ。
by molihua (2006-05-08 22:13) 

チヨロギ

はじめまして。
とてもわかりやすい記事だったので、こちらを参考に挑戦してみました。
(リンク&TBさせていただきました。)
ありがとうございました!
by チヨロギ (2006-05-12 19:17) 

molihua

チヨロギさん♪
ご訪問、ありがとうございます。
分かりやすいと言っていただけて、
よかったです。(笑)
画像加工については、
トラバにある皆さんのページが詳しいので、
そちらものぞいてみてくださいね~。
by molihua (2006-05-13 12:03) 

はじめまして。 (^-^)
チヨロギさんのブログから訪問させていただきました。
私も、少し前から気になっていまして、早速作ってみました☆
タイトルだけでもオリジナルは嬉しいです♪ 有難うございました。
by (2006-05-16 11:16) 

molihua

sara さん♪
ご訪問、ありがとうございます!
オリジナルスキン、楽しいですよね~。
わたしはあんまり加工もしていませんが・・・
そのうち、衣替えしよ~っと。
by molihua (2006-05-17 02:30) 

昨日は、ご訪問いただき、有難うございました☆ (^-^)
さて、横長写真で、オリジナル・タイトルを作る方法、私なりに載せてみました、(初めは、家の花を紹介する予定だったのですが・・・)、せっかくですので、私なりに画像加工についてまとめてみました。少しでも、ご参考になれば嬉しいのですが。
トラックバックをお送りさせていただきましたが、宜しかったでしょうか?
オリジナル・スキンは、嬉しいものですよね☆ 皆さんにも、ぜひ楽しんでいただきたいと思って、大変でしたがまとめてみました。
by (2006-05-18 17:29) 

molihua

saraさん♪
トラックバック、ありがとうございました。
またお邪魔しますね~。
by molihua (2006-05-19 16:32) 

みぃ

はじめまして。
茉莉花さんの説明でようやく解りました♪
でも紹介文が消せなくて一文字だけ隅っこに入っているんですよ^^;
ありがとうございました。
by みぃ (2006-08-12 12:35) 

molihua

◆みぃさん
いらっしゃーい。
ちょっとはお役にたてたでしょうか?
紹介文を消すのは、↑リンクをはっているみつなりさんとこに
追記がありました。
私は試してないので、よくわかりませんが・・・。
のぞいてみてくださいね~。
by molihua (2006-08-12 15:13) 

sknys

茉莉花さん、はじめまして。
〈猫にも出来るオリジナル・スキン〉というを記事をUPしました。
同じベーシック(白)+ネコを使っているので近親感が湧きます。
サイド・バーもカスタマイズしたので参考にして下さい
(忍法「猫柳」の流用ですが)。
by sknys (2006-08-17 20:55) 

コメントを書く

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

トラックバック 5

オリジナル・タイトル(月夜のひとりごと 2006-05-18 16:08)

最近、白や黒のスキンを使われている方の中に、写真をオリジナルでタイトルに使用されている方が目に付き、少し気になっていました。私も挑戦してみようと思って調べたのですが、タイトル部をhtmlで入れられる場所も無く、これは「サイドバー」に入れるしかないな、と思っていました。そんな時に《チヨロギ…[続く]

オリジナルスキンへの道・苦闘篇(果無雑記帖 2006-05-12 19:14)

このところ、ソネブロのあちこちで見かける「オリジナルスキン」というのがずっと気になっていました。 オリジナルといっても完全な自作ではなく、So-net製スキンのブログタイトルのところに、好きな写真やイラストをはめ込んだもの。ゴールデンウィーク中にでも挑戦してみようと思っていたら、雑用やら…[続く]

タイトル画像を自分好みにしてみよー!(NecoYanagiの未確定日記 2006-04-14 18:52)

ってことで、久しぶりのこのカテゴリー。 巷(ちまた)で、噂のタイトル画像変更! で、参考にしましたのは、 みつなりさんの「オリジナルスキンの作成方法」という記事です。 で、ここでも、その方法をご紹介。 まずは、もう実例がこのブログのタイトル変更で行っていますが、 できる…[続く]

画像加工でオリジナルスキン(*´∀`)ノ(週末晴れたらいいですね(*´∀`)ノ 2006-04-12 21:12)

オリジナルスキン(*´∀`)ノ 最近あちこちのブログでよく見かけるキーワードです。通常、ソネブロでは多数のスキンを用意して頂いていますが、タイトル部分を簡単に変更することが出来てしまうのです。 私は、CHOCOCOさんのブログから茉莉花さんのブログへ飛んで詳しくやり方を学びまし…[続く]

オリジナルスキン(HAL's Log 2006-04-11 18:22)

すでにお気づきの事と思いますが、 昨日の深夜からスキンをオリジナルに変更しています。 (記事を読んで始めて気づいたとかボケはナシね。笑) いろいろなタグのサイトやブログ記事を見たりして設定してみたのですが、 私の設定には少し不具合があるようで... まずトップページを開くと..…[続く]

この記事のトラックバックURL:
※言及リンクのないトラックバックは受信されません。