人気ブログランキング | 話題のタグを見る
多忙なため、コメントへのお返しができなくてごめんなさい。温かいコメントは更新の励みです。どうしても解決できない問題がある...という場合に限っての質問箱を設けましたので、よかったらご利用ください。いつもAnimal Skinを愛用してくださってどうもありがとう~♪
Top
★★★シンプル系スキン配布ブログ★★★
エキサイトブログ専用のスキンを配布しています。

「シンプル」をコンセプトに全体にすっきりとした、
記事内の文章や写真が見やすいデザインばかりです。

(もっとアレコレ凝ったスキンが欲しい...というかたは、エキブロスキン配布で有名な -Sun&Moon Blog- さんなどで探されるとよいでしょう。^^)

お気に召しましたら、どうぞご自由にお持ち帰りください。^^
(配布されているスキンをどうやって自分のブログに使うかは...初心者にも簡単にできるよう、この文章のあとに詳しく説明してあります)

★★★シンプル系スキン配布ブログ★★★_f0165338_4222456.gif

スキンを借りたよ...等の報告は必要ありませんが、コメントはありがたく拝見します。

また、絶対条件ではありませんが、配布しているスキンを編集・改造したあともAnimal Skinへのリンクはブログ内のどこかにしていただきたいと思います。

それは当ブログに限らず、スキンや素材などを配布されているところから「作品」を借りるときのネット上の礼儀というもので、私自身がお世話になったお助けブログをリンクしているのと同じことです。
誰かが時間と労力をかけて作ったものを、たとえ部分的にであっても「借りる」ものですからね。
ちなみに、私が自分で配布しているスキンコードを使用しているブログは、右クリックでそのブログのソースを開けば一発でわかっちゃいますからね~。自分ですべて作ったフリしてもバレバレですよ~。(笑)

★★★シンプル系スキン配布ブログ★★★_f0165338_4281780.gif

尚、写真はすべて当ブログのオリジナルなため、二次配布及び別用途に無断で使用することは固く禁じます。

最終スキンイメージはIEでしか確認していません。
もしIE以外のブラウザを使っている人が見たら...スキン崩れしている可能性もありますが...
なにぶん私も素人ですので、そのあたりはご理解のほどを...^^;

※使用中のスキンが違うブラウザによってどのように見えるのか知ることができるサイトはあります。
http://browsershots.org/

英語サイトなので一見取っつき難そうにも見えますが、Enter your web address here:とある下の白枠の中に、見たいサイトのURLを打ち込んで、Submitボタンを押すだけです。




スキンの持ち帰り方法は
↓をクリックどうぞ♪ 初心者にもとても簡単です。^^








スキンの編集や改造というのは、HTMLやCSSをよく知らない人にとっては、とにかくややこしそうな数字や英語が並んでいるだけに見えるかもしれません。

けれど、ここではコピペでスキンを変えることができるようにしてあるので、HTMLの知識もCSSの知識もとくに必要ありません。
お気に入りのスキンが見つかったら、そこに書いてあるソースコードを、もともとあるものと入れ替えちゃうだけで完成です。^^

というわけで、ここではあくまでも初心者を対象に一つ一つゆっくり説明していくことにします。

自分のブログのスキン編集ページをここを行ったり来たりしながら作業するのがイヤな人は、先にこのページをプリントアウトしちゃって、それを見ながら作業するのも楽かもしれません。

:まずは後で必要になる
この↓スキンイメージをPCにダウンロードして保存してください。

★★★シンプル系スキン配布ブログ★★★_f0165338_14404710.gif

「ダウンロードの仕方」
ウィンドウズ:
1.画像の上にカーソルをおき、
2.画像の上で右クリックするとポップアップメニューが表示されるので、
3.そこから「名前をつけて画像を保存」を選択し、任意の場所に保存。

Mac:
1.画像の上にカーソルをおき、
2.マウスボタンを押したままにするとポップアップメニューが表示されるので、
3.そこから「画像をディスクにダウンロード」を選択し、任意の場所に保存。


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



:ページ右側に「エキサイトブログ提供スキン | マイスキン」と出ているので、「マイスキン」を選び、次のページでは「新しいスキン作成」というのを選びます。



:「HTMLおよびCSSを利用してスキンを作成します」を選び、さらに下のほうにある「スキン作成を始めます!」をクリックします。



↓↓↓ ★ここはすごく重要ですのでお間違えのないように。ここで間違ったレイアウトを選択してしまうと、コピペもできて一応スキンは作れますが、サイドバーの部分の表示がおかしくなってしまうことが確認されてます。なので間違えないでね!★ ↓↓↓
:次のページではまず「レイアウト選択」をするよう指示されるので、そこで「C. 2列のレイアウト-左側にメニュー」というのを選んで、横の丸をクリックして塗りつぶし、次へ進みます。

※現在はこのレイアウト以外のスキンも配布しています。
その場合は、各配布ページにその旨を記してあるので、見逃さないようにしてくださいね。^^




:ここからが、HTMLやCSS慣れしていない人にはややこしく見えるかもしれませんが...コピペするだけなので実は簡単です。^^


■ 各部分別横幅 とあり、そのすぐ下に
「現在設定された部分別横幅(pixel) : 本文 500 - ロゴ 150 - メニュー 150」
とありますが、これは、変更するように指示がある場合を除いては、特に変更しないでOKです。そのままにしておいてね。^^




:その下には、■ HTML編集とあり、枠の中に、小さな四角い図形が見えます。

メイン画面編集


編集したい
セクションをクリックしてください


とあるので、図形にカーソルを当てると、3つに分かれているのがわかると思います。

一番外側のが↓、「メイン」です。
★★★シンプル系スキン配布ブログ★★★_f0165338_15154878.jpg

ここには、気に入ったスキンの「スキンソースコード」内にある「メイン用」の部分をコピペします。
つまり、それまでそこにあったコードを消して、当ブログで配布している新しいコードに置き換えるわけです。



同じように、四角い図形の中の右側にある大きめの長方形が...
本文」↓、つまり更新することによって次々に上乗せされる「ブログ記事」部分になります。
★★★シンプル系スキン配布ブログ★★★_f0165338_15244316.jpg

ここには、同じくスキンソースコード内の「本文用」部分をコピペして、それまでそこにあったタグあれこれとすっぽり入れ替えます。



最後は左側の細長いヤツ...これは
メニュー」↓です。サイドバーってやつですね。
★★★シンプル系スキン配布ブログ★★★_f0165338_15302214.jpg

ここはいじってないので、このままにしておいてOKです。^^

一応各スキンのスキンソースコード内にはコピペ用のコードを載せてありますが、無視しちゃって大丈夫です。


HTML編集はここで完了です。^^



:次はHTML編集枠の下にあるCSSです。こちらも、初めて見る人にはややこしく見えるかもしれませんが、コピペするだけなので編集自体はとっても簡単です。
CSS編集枠ないにはいろいろわけのわからないことが書いてありますが、それを全部消しちゃって、その代わりに当ブログで配布している各スキンのスキンソースコード内の「CSS用」というのをコピペすればオシマイです。



:あとは、プレビューをクリックして出来上がりを下見するのもいいし、そのまま「保存」を押しちゃってもOK。^^



10:保存をクリックすると次のページに進み、ここでスキンに名前をつけるようにいわれます。
ま、適当な名前をつけちゃって構いません。



11:名前の下に登場するのが...「現在のスキンイメージ」です。
ここで役に立つのが、最初にPCにダウンロードすることをオススメした
こいつ↓です。^^

★★★シンプル系スキン配布ブログ★★★_f0165338_15392676.gif

PCからこれをアップロードして、最後に「マイスキンに保存します」をクリックすればOK。
そのときに「保存と同時にマイブログにこのスキンを適用します」とある左の四角をチェックしておけば、次に「マイブログメイン」で自分のブログを見たとき、そのスキンがすでに使用されています。^^


ね、簡単だったでしょ?^^
Top▲ | by mari_ca by animal_skin | 2011-12-31 00:00 | 初めてお越しのかたへ
<< | ページトップ | ★自分で撮った写真等をブログの... >>
↓質問はこちらへ↓