オリジナルスキン 追記あり [日記]
最近、オリジナルスキンの話題が熱い!ので、
ここでいっちょー「茉莉花でもわかる、オリジナルスキン♪」と題し、
私もオリジナルスキンの作り方について書いてみたいと思います。
私はまず、 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さんまで、ご一報ください♪
トラックバック 5
最近、白や黒のスキンを使われている方の中に、写真をオリジナルでタイトルに使用されている方が目に付き、少し気になっていました。私も挑戦してみようと思って調べたのですが、タイトル部をhtmlで入れられる場所も無く、これは「サイドバー」に入れるしかないな、と思っていました。そんな時に《チヨロギ…[続く]
このところ、ソネブロのあちこちで見かける「オリジナルスキン」というのがずっと気になっていました。 オリジナルといっても完全な自作ではなく、So-net製スキンのブログタイトルのところに、好きな写真やイラストをはめ込んだもの。ゴールデンウィーク中にでも挑戦してみようと思っていたら、雑用やら…[続く]
ってことで、久しぶりのこのカテゴリー。 巷(ちまた)で、噂のタイトル画像変更! で、参考にしましたのは、 みつなりさんの「オリジナルスキンの作成方法」という記事です。 で、ここでも、その方法をご紹介。 まずは、もう実例がこのブログのタイトル変更で行っていますが、 できる…[続く]
オリジナルスキン(*´∀`)ノ 最近あちこちのブログでよく見かけるキーワードです。通常、ソネブロでは多数のスキンを用意して頂いていますが、タイトル部分を簡単に変更することが出来てしまうのです。 私は、CHOCOCOさんのブログから茉莉花さんのブログへ飛んで詳しくやり方を学びまし…[続く]
すでにお気づきの事と思いますが、 昨日の深夜からスキンをオリジナルに変更しています。 (記事を読んで始めて気づいたとかボケはナシね。笑) いろいろなタグのサイトやブログ記事を見たりして設定してみたのですが、 私の設定には少し不具合があるようで... まずトップページを開くと..…[続く]









勉強になります...ハイパーテキストナンたらかんたら音痴の私には...神様です....がんばります...素材探しに苦戦中のわたし....はぁ.....失礼しました
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)
はじめまして☆
勉強になります!
私もチャレンジしてみよっと。。。
by Takami* (2006-04-11 12:21)
なるほど~!みつなりさんところも見てきましたが
皆さんすごい^^オリジナルスキンがたくさん!
出来るかなぁ~(笑)
by CHOCOCO (2006-04-11 12:22)
情報を掲載するときはこれくらい詳細に記述しなければなりませんね(反省)。
ありがとうございました。
by HummingBird (2006-04-11 13:00)
茉莉花さんありがとう~出来ました^^v
by CHOCOCO (2006-04-11 16:51)
お気遣いありがとうです。(^^)
タグって自分じゃなにをどうしてるのかわかってなくて、
どこかにあるものをコピーして使うことしかできないので、
その中にどんな指示が含まれてるのかも知らなくて。。。(^^;)
でも、こうして皆がオリジナルに興味を示せば、
ソネット側で、簡単にバナーや背景を変えられるようになる日もあるかもねー
また、なにかあったらよろしくお願いします。(^^)
by HAL (2006-04-11 18:07)
できましたぁ。(* ̄◇ ̄*)ラ(* ̄・ ̄*)ブ(* ̄〓 ̄*)チュッ♪
by (2006-04-11 19:28)
ほー。
by 春分 (2006-04-11 19:37)
kurenainosor.. さん♪
どうも~
私もなんちゃら言語とか、まったく分かりません。
でも、アップできたからいっかー、みたいな。(笑)
こけもも: さん♪
ありがとうございます。
分かりやすいと言っていただけて、
ほっと一息~。
こうちゃんさん♪
おめでとうごじゃいまあ~~~す♪
きゃ~~チューだわ、チューだわ!!
って、見に行ったら、
かなり謙虚な感じ??ですね。(笑)
みんな、気づくかなぁ・・・。ぷぷぷ。
ルッコラさん♪
え?すごい??
ルッコラさんのオリジナルとなると、
もう、ちょ~キレイ!か
ちょ~可愛い!か・・・
楽しみですわ。むふ。
donさん♪
どうも~。
ちょっとは助けになるでしょうか。
オリジナル、作ってみてくださーい。
CHOCOCO さん♪
お~良かったです。
オリジナルでGO,GO,GO!ですね。
PhotoManiacs さん♪
いや~こちらこそ、ありがとうございました。
いつかはPhotoManiacs さんのように、
かっこいー文字も入れたいです。
HALさん♪
いや~お陰様で、好評??です。(笑)
よかったー。
そうそう、画像の位置を指示する言葉を探して
入れてみたりしたんだけど、
うまくいかなくてねぇ。
結局、これ以上のことはサッパリ。(笑)
ほんと、ソネットの対応、あるといいよね~。
春分さん♪
そうなんです。
はやってます。(笑)
by molihua (2006-04-11 20:05)
nyanさん♪
nice! ありがとうございまーす。
by molihua (2006-04-11 20:06)
茉莉花さんすごいです。
私は、あまりこっち方面、詳しくなくて。
だからいろんな操作できる方、尊敬しちゃいます。
by アールグレイ (2006-04-11 21:37)
こんにちは。ご訪問ありがとうございました!
わたしは理屈っぽい性格なので、ちょっと説明が難しかったかもですねー
茉莉花のわかりやすい解説で、成功された方も多いようでヨカッタです。
by みつなり (2006-04-11 21:43)
はじめまして、山刃斎と申します。CHOCOCO様のところから参りました。オリジナルスキンの作り方参考にさせていただきました。ありがとうございます。
by sanjinsai (2006-04-11 23:06)
すごいですねー!勉強になりました^^
ひとつひとつ分かりやすく書かれてるので、わたしにも出来るかも?って思ってきました^^
by みけ (2006-04-11 23:17)
そこがミソなんです。←嫌な性格。
by (2006-04-12 01:34)
アールグレイさん♪
いえいえ、みつなりさんのところの説明を
茉莉花言葉にしただけです・・・(汗)
操作は全然わかりません・・・。
みつなりさん♪
ご訪問ありがとうございます!
お陰様で、オリジナルスキン作ることができました。
いや~タグって何??
というレベルなので・・・そういう問題です。(笑)
sanjinsai さん♪
ご訪問、ありがとうございます。
これでなんとかいけそうですか?
楽しいブログライフを~♪
みけさん♪
おー良かったです。
これでみんな、オリジナルだ!
こうちゃんさん♪
ぷぷぷ。
by molihua (2006-04-12 05:28)
はじめまして^^。
オリジナルスキン、チャレンジしてみますp(^^)q
by mkz (2006-04-12 08:44)
CHOCOCOさんとこから飛んで着ました。
私も真似して見ましたが、なかなか面白いですね。
めちゃ楽しいですよ。
by ゆつき(*´∀`)ノ (2006-04-12 09:07)
HALさんの所から飛んできました~
私も以前からオリジナルスキンにする方法を知りたかったので、
とってもわかりやすく解説してあって助かりました!!
時間があったらやってみようと思います♪
by みかん (2006-04-12 20:45)
HAZUMIさん♪
megさん♪
nice! ありがとうございます。
mkzooさん♪
ご訪問、ありがとうございます。
簡単な写真のアップのみですみませーん。
画像の加工についてはゆつきさん↓のブログに
詳しく書いてありますよぉ。
ゆつき(*´∀`)ノ さん♪
ご訪問、トラックバック、ありがとうございまーす。
オリジナルスキン作りで、
ソネブロ一致団結ですね~♪
みかんさん♪
ご訪問、ありがとうございます。
おお、HALさんのとこからですか。
さすがHALさんの力、
閲覧数がダントツになりました。(笑)
by molihua (2006-04-12 22:17)
おぉ、近日中にやってみよう^^
by shareki (2006-04-13 10:58)
渋樹さん♪
お~是非是非。
試してみてください!
by molihua (2006-04-14 00:09)
はじめまして、NecoYanagiと申します。
みつなりさん記事から飛んできましたー。
Necoもまとめて見ましたので、TB貼らせて頂きます♪
by NecoYanagi (2006-04-14 18:52)
NecoYanagiさん♪
ご訪問、ありがとうございます。
トラックバックもどうも~。
わたしは専門的なことはまーたく分からないので、
てけとーなこと書いてますが・・・。
宜しくお願いします。
zimaさん♪
nice! ありがとうございます。
by molihua (2006-04-15 01:55)
mikaさん♪
nice! ありがとうございます。
by molihua (2006-04-17 19:13)
最近、流行ってますよね〜♪
ワタシも茉莉花さんのブログをお手本にやってみようかしら…。
by cherry (2006-04-19 00:51)
はじめまして。こういうサイトをさがしていたのでとても助かりました。
ありがとうございます!横長の画像って難しいですね・・・(無いんです(^_^;
by wako (2006-04-20 01:28)
cherry さん♪
そうなんですよ~
このページだけ、
アクセス数がものすごいことに・・・・(笑)
wakoさん♪
いらっしゃいませ~
あ、私の解説はやたら簡単なので、
トラックバックにあるみなさんのところなど
いろいろのぞいてみてくださいね。
by molihua (2006-04-21 02:09)
はじめまして。
オリジナルスキンの設定方法を探していたら、
ちょうどこちらの記事にまいりました。
ありがとうございます!
分かりやすい解説で、すぐに設定出来ました。
オリジナルスキンそのものの記事はのせていませんが、
時間があったら スキンを覗きにいらしてください♪(ノ゚Д゚)人(゚Д゚ )ノイエーイ
by はにぃ (2006-04-21 10:32)
はじめまして。
私もオリジナルスキンの設定方法を探したら、茉莉花さんのblogにやってきました。
茉莉花さんの記事を見ながらオリジナルスキンの設定をしました。
ありがとうございました!
by kisi (2006-04-30 00:35)
はにぃ さん♪
ご訪問、ありがとうございます!
・・・といっても、もうだいぶ前のことですね・・・
すみません。
今度ゆっくりおじゃましまーす。
kisi さん♪
ご訪問、ありがとうございます!
私の設定方法はかなり、初心者向け?
というか、素人な説明ですが・・・。
少しお役にたてたでしょうか?
by molihua (2006-04-30 01:44)
初めまして!参考にさせていただきました。(*- -)(*_ _)ペコリ
ありがとうございました♪
by 瑠々 (2006-05-07 01:18)
るるにゃんさん♪
ご訪問、ありがとうございまーす!
もう少しで見落とすとこでした・・・
ソネブロさーん、最新のコメントチェック、しずらいですぅ。
by molihua (2006-05-08 22:13)
はじめまして。
とてもわかりやすい記事だったので、こちらを参考に挑戦してみました。
(リンク&TBさせていただきました。)
ありがとうございました!
by チヨロギ (2006-05-12 19:17)
チヨロギさん♪
ご訪問、ありがとうございます。
分かりやすいと言っていただけて、
よかったです。(笑)
画像加工については、
トラバにある皆さんのページが詳しいので、
そちらものぞいてみてくださいね~。
by molihua (2006-05-13 12:03)
はじめまして。 (^-^)
チヨロギさんのブログから訪問させていただきました。
私も、少し前から気になっていまして、早速作ってみました☆
タイトルだけでもオリジナルは嬉しいです♪ 有難うございました。
by (2006-05-16 11:16)
sara さん♪
ご訪問、ありがとうございます!
オリジナルスキン、楽しいですよね~。
わたしはあんまり加工もしていませんが・・・
そのうち、衣替えしよ~っと。
by molihua (2006-05-17 02:30)
昨日は、ご訪問いただき、有難うございました☆ (^-^)
さて、横長写真で、オリジナル・タイトルを作る方法、私なりに載せてみました、(初めは、家の花を紹介する予定だったのですが・・・)、せっかくですので、私なりに画像加工についてまとめてみました。少しでも、ご参考になれば嬉しいのですが。
トラックバックをお送りさせていただきましたが、宜しかったでしょうか?
オリジナル・スキンは、嬉しいものですよね☆ 皆さんにも、ぜひ楽しんでいただきたいと思って、大変でしたがまとめてみました。
by (2006-05-18 17:29)
saraさん♪
トラックバック、ありがとうございました。
またお邪魔しますね~。
by molihua (2006-05-19 16:32)
はじめまして。
茉莉花さんの説明でようやく解りました♪
でも紹介文が消せなくて一文字だけ隅っこに入っているんですよ^^;
ありがとうございました。
by みぃ (2006-08-12 12:35)
◆みぃさん
いらっしゃーい。
ちょっとはお役にたてたでしょうか?
紹介文を消すのは、↑リンクをはっているみつなりさんとこに
追記がありました。
私は試してないので、よくわかりませんが・・・。
のぞいてみてくださいね~。
by molihua (2006-08-12 15:13)
茉莉花さん、はじめまして。
〈猫にも出来るオリジナル・スキン〉というを記事をUPしました。
同じベーシック(白)+ネコを使っているので近親感が湧きます。
サイド・バーもカスタマイズしたので参考にして下さい
(忍法「猫柳」の流用ですが)。
by sknys (2006-08-17 20:55)