配布スキンの設定方法 : -Sun&Moon Blog-

配布スキンの設定方法

2004年 12月 25日 | ▼

配布しているスキンのソース。
どうやって設定するのかを説明します。

★なお、スキンの表示の確認は、Mac OS10.4〜10.5 Safari（3.0）で行っております。
出来る時は他のブラウザでも確認はしますが、保証は出来かねます(^^;
従って、他の環境での崩れ、カスタマイズ後の崩れは、サポートから外れます。
お許し下さい。

また３列スキンのメニューの振り分けについては、こちらをご覧下さい。
＞３列スキンにおけるメニュー調整

★つぶろぐをサイドバーに表示させる場合、「テキストのみ」が推奨です。

++ スキン設定方法 ++

ブログ設定画面から、スキン変更を選ぶ。
「現在使用中のスキン」の下に「エキサイトブログ提供スキン | マイスキン」と出ているので、「マイスキン」を選択。
同じく「現在使用中のスキン」の下に出ている「新しいスキン作成」をクリック。
ここからが、スキン移植の本番。
「HTMLおよびCSSを利用してスキンを作成します。」とあり、くだくだと説明があるので一回は読んでから、「スキン作成を始めます！」をクリック。
「1. レイアウト選択」の画面になるので、配布中のスキンから選んだスキンのソース、一番上に３列とか右とか左とか書いてある部分をチェック。それと同じものを選んで、「次へ＞」をクリック。
ちなみに３列は、「D. 3列のレイアウト-左右にメニュー」
左は　「C. 2列のレイアウト-左側にメニュー」
右は　「B. 2列のレイアウト-右側にメニュー」
同じく配布中のスキンから、「本文 500 - ロゴ 150 - メニュー 150」という数値の指定がある部分をチェックし、「変更」をクリックして開いた設定画面で同じ数値に設定する。

※ただし、ここをカスタマイズしようと思って幅を変えても、スキンの中の指定値は変わらないので、探してHTMLやCSSも修正しないといけない。
私が公開しているスキンは、本文の幅はあまり関係ないようにしているスキンが多いが、ロゴとメニューの幅はCSSで指定していることが多いので、わからない人は弄らないことを勧める。
ことに大事なのがロゴの幅。ここで指定した幅を超えた画像はそのサイズに縮小表示されるので、幅の中に収まる画像を使うようにした方がよい。
まずは開いた最初の状態では、上のフォームがメインページ用（ページ全体）のHTML
下のフォームがCSSとなっているので、公開されているスキンのメインページ用HTML部分を全部ごっそりコピーペースト。
元々入っているHTMLは残さなくてよい。
※この部分によく青字で外部リンクなどを書き込むスペースを作っているので、必ず書き換えるなり、消すなりすること。

※
という部分からコピーペーストです。
ここは著作権表示部になりますので、削除改変は認めておりません。
コメントアウトしているため、表には見えませんが、残しているかどうかはソースを見れば直ぐにわかります。
どれ程カスタマイズしても、表には出ないのですから、絶対に残して下さい。
次に同じく下のCSS用フォームの内容を、公開中のスキンのCSS部分をコピーペーストして入れ替える。
※背景画像の指定はこの部分に入っているので、直リンクならそのままでいいが、自分のところにアップロードして使うなら、アドレスを探して書き換えること。
（アップロードの仕方は後述）
さて、ここで視線をページの中程にもう一度上げると「メイン画面編集。編集したいセクションをクリックしてください。」と書いてある妙な図がある。
そこで本文と書かれた四角をクリック。
そうすると、先ほどメインページ用HTMLだったフォームが、投稿した記事のデザインを詳細に設定するための本文用HTML設定に切り替わる。
（現在設定中なのがどの部分かは、図の中の黄色い枠線で囲まれて示される）
HTML編集フォームの切り替えについての詳細は、こちらの記事（HTMLフォームの切り替え）を参照。
そこで、やはり公開スキンから、本文用HTML部分をごっそりコピーペースト。
※タイトルにアイコン画像を使っている場合、ここに画像のアドレス指定が入るので、背景画像と同じく、自分で上げたものに変える時はアドレスを修正すること。
さて、先ほど、メインページ用から本文用に切り替えた図に目を戻す。
そうすると、本文と書かれた四角が黄色い枠で囲まれているはず。
そこでその隣の細い四角をクリック。
これがメニュー用のHTML設定画面への切り替えとなる。
２列のスキンなら、一カ所だけ。３列なら左右にあるので、両方設定が必要。
メニュー用もこれまでと同じく、公開スキンからごっそりコピーペースト。
メニューのタイトルにアイコンを使っている場合は、ここに画像のアドレスが入るので、これも必要なら修正。
私の作るスキンは、左右共通が多いが、たまに右と左で変えていることもあるので、左右共通なら、右にも左にも同じものをコピーペースト（左右共通というのは、右も左も同じソースのコピーでよいということであって、設定が片方だけでよいということではない。必ず、右も左も設定すること）
別々なら、右用、左用をそれぞれコピーペーストする。
ここまで来たら、プレビュー画面で一応確認。
問題なしと思われたら保存する。
もし崩れていたら、ソースのコピーペーストの時、一部をコピーし忘れていたり、ペーストする場所を間違っていないか確認して再度チェック。
それでも駄目な時は、サイドメニューに横幅が指定値より広いものを入れていないかチェック。
あるいは機種やブラウザによって崩れている可能性もあります(>_<;)
保存を選ぶと「スキン名」「現在のスキンイメージ」という設定画面が出てくる。
スキン名は好きな名前をつければOK。
スキンイメージは75*75のgif画像しか受け付けてくれない。しかもなしでは保存してくれない（少なくともMac、Safariでは）
これは毎回同じイメージでも、白一色でも、とにかく75*75　gifならよい。
自分で作ってもいいのだけれど、面倒な方は、これをダウンしてお使い下さい。

※スキン配布記事最初のイメージ画像は、75*75gifになっていますので、それをダウンロードして使って頂くこともできます。
なお、修正や変更をしたい場合も、ここまではそのままコピー保存し、それからゆっくり修正することを勧める。
一度保存すると、マイスキンの一覧に表示されるようになるので、次からはそこから修正したいスキンを選んで「編集」をクリックすると、作成の時と同じ編集画面が出てくる。
もちろん、一度保存した内容で出てくるので、変えたいところだけ変えて保存し直せばよい。
画像のアップロードの仕方
スキン作成、あるいは編集画面にアクセスすると、「マイイメージアカウントにイメージ登録」というリンクが、編集箇所変更の図の横にある。
そこをクリックすると、画像の管理画面が小窓で開く。
追加したい場合は、ファイルを選択して送信を押す。
そうすると、その下の「保存されたイメージリスト」に画像の名前が出るので選ぶと、画像とアドレス、サイズが表示される。
消したい時は選択してイメージ削除をクリック。
ちなみに、アドレスは日付とファイルの名前で管理されるので、別の日に上げれば、同じ名前のファイルでも別々に保存されて使用できる。
同じ日に同じ名前のファイルを上げた場合、上書きではなく、後から上げた方の名前に数字が追加される。
画像を修正したいという時は、前に上げたのを一度削除してから上げ直すこと。
イメージURLコピーというのがあるが、それよりも自分で選択してコピーする方がよい。
ファイルの縦横の幅は、アイコンなどは入れるとよいが、CSS内の背景指定では入れてはいけない。アドレスだけを指定箇所に入れる。
現在、カスタマイズや設定に関するご質問、あるいはこんなカスタマイズをして欲しいというリクエストは受け付けておりません。
ご質問は、デフォルトのままで崩れが生じるという場合のみお答えさせて頂きます。
ご了承下さい。

by catsmoon | 2004-12-25 00:00 | 配布スキン説明 ▲


	ファン申請 ※ メッセージを入力してください

ファン申請