2005-09-17 00:26:46

■ タイトルの見せ方で差をつけろ!自分だけのスキンをつくろう 第3弾

テーマ:スキンカスタマイズ

こんにちは。トレンド担当クロセです。


いつのまにかこのブログが「アメトレ」という愛称でみなさんからよばれるようになり

それはそれは嬉しい9月17日、本日のトレンドをお届けします。


今回のトレンドは、「自分だけのスキンを作ろう第3弾」。


前回の「自分だけのスキンを作ろう第2弾」 では、

こんなスキンをつくっちゃった人を発見しました。



tenho さんの作品


すんげー



いろいろ編集の仕方も解説してくれていますね。

上級者を目指す方はぜひ参考にしてみてはいかがでしょう




さて、今回の課題は、


「ブログのタイトルの位置や色を変更しよう」


↓こんな風にタイトルを好きな位置や好きな色に変更できるようになります

3


スキン変更10



準備:カラーパレットで色のコードを知る


インターネットのホームページやブログで

色を指定するときは、色を特別なコードで表現します。


例えば黒なら「#000000」、白なら「#FFFFFF」とか。


一つ一つ覚えるのは大変なので

色を変更するときにカラーパレットを

置いてあるサイトなどを使って色を確認すると便利です。


フリー参考サイト:http://www.shoshinsha.com/hp/color/color.html



こちらで好きな色を選んだときに表示される「#○○○○○○」という文字列が

色のコードになります。


スキン変更10

STEP1:カスタマイズページを開く

管理画面の<デザインと機能>メニューの「CSS編集」のリンクをクリック。
CSS編集画面が開きます

4

表示されたCSS編集欄を一番下までスクロールし、1

番下の行に下記の表記を追加します


#header h1 a,
#header h1{
color: #006600; ←タイトルの文字色のコードを指定します。
font-size: 25px; ←タイトルのフォントサイズを25px指定します。
margin-left: 20px;     ←タイトルを左から20pxの位置に配置します。
padding-top: 120px;    ←タイトルを上から120px下の位置に配置します。

}


#header h2{
color: #FFFFFF; ←概要の文字色のコードを指定します。
font-size: 12px; ←概要のフォントサイズを指定します。
margin-left: 20px;     ←概要を左から20pxの位置に配置します。

padding-top: 120px;    概要を上から120px下の位置に配置します。

}



文字色のコードは先ほど紹介したサイトなどを参考に好みの色を選んでください。
   参考:http://www.shoshinsha.com/hp/color/color.html   



文字の大きさや位置を「120px」の数字の部を自由に変更して、

好みの大きさや位置に変えてください



※CSS編集の際は、デザインが崩れる場合がありますので、

必ずプレビューでご確認の上、保存してください。

CSSをデフォルトの状態まで戻したい場合はスキンを再選択してください。


スキン変更10

STEP2:プレビューで確認して、変更完了

”プレビュー”をクリックし編集結果をプレビューします。
表示されたプレビュー結果に問題がなければ”保存”をクリック。

これでデザインが変更されました


3


        
カスタマイズ完了!!





うーんタイトルを大きくしたり色を変えるだけでも

迫力が違いますね!


ほら知れば知るほど楽しくなってきた!

ぜひみなさん挑戦してみてください。


そして、今回も前回より少しずつレベルアップしている

あなたの手作りスキントラックバックやコメントで

紹介してください。



・トラックバックのやり方がわからない方は

こちら

(記事に間違いがあり一部修正をいたしました。

tears さん、bo-blog さんご指摘ありがとうございました。

9月17日)

いいね!した人  |  コメント(55)  |  リブログ(0)
2005-09-02 18:25:09

■ 今度は背景に挑戦!自分だけのスキンをつくろう 第2弾

テーマ:スキンカスタマイズ

こんにちは。トレンド担当クロセです。


前回の
「夏休みの自由研究自分だけのスキンをつくろう」 では
みなさんいろんなスキンにチャレンジしてくれました。

中にはこんなスキンをつくっちゃった人も。



⇒ kazu1107 さんのスキン



かっちょいい~


さて、夏休みは終わりましたが、

もっと教えてという声が多かったので、



今回も「自分だけのスキンをつくろう 第2弾」をお届けします。



今回の課題は

「壁紙(背景)のデザインを自由に変更しよう」


↓こんな風に背景を自分の好きな画像に変更できるようになります

ログイン


とりあえずサンプルの背景画像を使って背景の変え方を覚えましょう


準備:サンプル写真のダウンロード



サンプル写真


ストライブ1  ストライブ2  水玉1         水玉2

ストライブイエロー    ストライブグレー   水玉ピンク   水玉ブルー


<Windowsをお使いの方>

上の画像の上で、右クリック。「名前を付けて画像を保存」→デスクトップに画像を保存します。


<Macをお使いの方>

ドラッグ&ドロップで画像をデスクトップに保存します。


スキン変更10

STEP1:画像フォルダにダウンロードした画像をアップ


管理画面の”画像フォルダ”をクリック

2


”参照”をクリックしてデスクトップにある画像を選択

→ファイル名をつけて”アップロード”をクリック

画像が追加されます。


STEP2:画像のURLを調べてコピーする


次に、追加された画像のプロパティを開いてアドレスをコピーします

<Windowsをお使いの方>

画像の上で右クリックして、”プロパティ”を選択

<Macをお使いの方>

コントロール+クリックでプロパティが表示されるので、「アドレス
をコピーする」を選んでください。



プロパティ画面のアドレス(URL)部分をドラッグしてコピー


3


STEP3:コピーしたURLをCSS編集画面で貼り付ける

前項でコピーしたURLをCSSに挿入して背景に画像が表示されるようにします



管理画面の<デザインと機能>メニューの「CSS編集」のリンクをクリック。

CSS編集画面が開きます

スキン変更8


表示されたCSS編集欄を一番下までスクロールし、

1番下の行に下記の表記を追加します



body {
background-image: url(http://○○○○○○○○○○○○.gif );
}

↑赤文字部分に前項でコピーした画像のアドレスをペーストし、

             最後に”_s.gif”と書かれている部分の”_s”の箇所を削除します。
    
    例)http://ameblo.jp/user_images/98/9f/10000954282_s.gif
         ↓
      http://ameblo.jp/user_images/98/9f/10000954282.gif



※CSS編集の際は、デザインが崩れる場合がありますので、

必ずプレビューでご確認の上、保存してください。

CSSをデフォルトの状態まで戻したい場合はスキンを再選択してください。



STEP4:プレビューで確認して、変更完了
”プレビュー”をクリックし編集結果をプレビューします。
表示されたプレビュー結果に問題がなければ”保存”をクリック。

これでデザインが変更されました


ログイン


カスタマイズ完了!!



今回もサンプル写真を用いてやりましたが、

前回同様、みなさんが既に持っている画像ももちろん使えますし、

他のサンプル画像が欲しいという方は

フリー素材サイトを利用してみてくださいね。

yahooで「フリー素材 壁紙」などで検索すれば

いろんな背景画像を無料でダウンロードさせてくれるサイト

たくさん見つかりますよ。



ほら知れば知るほど楽しくなってきた!



今回も前回よりちょっとレベルアップした

あなたの手作りスキントラックバックやコメントで

紹介してください。


・トラックバックのやり方がわからない方は

こちら

いいね!した人  |  コメント(79)  |  リブログ(0)
2005-08-24 23:08:33

■ 夏休みの自由研究 自分だけのスキンを作ろう!

テーマ:スキンカスタマイズ

とあるブロガーのコメントから


スキンってみなさんどうやって変えてるんですか?

こんにちは。トレンド担当クロセです。

みなさんは、スキンを変えてみたいって思ったことありますか。

ブログって一つの自己表現の場ですから、

スキンは洋服のようにもっと自分好みにしたいと思う人も多いかもしれません。


そこで今回はそんなみなさんにスキンを自分オリジナルにする方法

ご紹介します。


どうでもいいですけど、スキン(skin)って日本語で「」なんですね。。



↓こんなスキンが作れるようになります

スキン変更1

とりあえずサンプル写真をつかってスキンの変え方を覚えてみましょう。


スキン変更10

準備:サンプル写真のダウンロード


サンプル

サンプル

<Windowsをお使いの方>

上の画像の上で、右クリック。「名前を付けて画像を保存」→デスクトップに画像を保存します。


<Macをお使いの方>

ドラッグ&ドロップで画像をデスクトップに保存します。


スキン変更10

STEP1:カスタマイズページを開く

管理画面の<デザインと機能>メニューの「カスタマイズ」をクリックして

カスタマイズページを開きます。


※現在ご使用の一部のデザインスキンではカスタマイズ機能が使えないものがあります。

その場合は他の(グリーンなど)のデザインスキンを選んでくださいね。



STEP2:ブログの色や背景パターンを変更する
バックグラウンド(背景)にしたい色を選択します。

ヘッダ(タイトル部分)にしたい色を選択します。

スキン変更3


STEP3ヘッダ(タイトル部分)に写真をのせる

”画像を追加する”→”参照”をクリックしてデスクトップにある画像を選択

→ファイル名をつけて”アップロード”をクリック→”使用”をクリック

スキン変更5





STEP4:メインコラム欄(記事)の色を変更する

各コラム(記事が表示されるところ)にしたい色を選択します。


STEP5:プレビューでデザインをチェックする

”プレビュー”をクリック→OKなら”保存”


これでブログのデザインが変更されました。

スキン変更7

スキン変更10

■応用編

これじゃ満足できないという「こだわり派」のあなたに1ランク上のスキンのカスタマイズ方法を

紹介します。


●ヘッダ(タイトル部分)に表示される画像を1枚のみにする


STEP1:CSS編集画面を開く

管理画面の<デザインと機能>メニューの「CSS編集」のリンクをクリック。

CSS編集画面が開きます

スキン変更8




STEP2写真を右揃えにする

表示されたCSS編集欄を一番下までスクロールし、

1番下の行に記述された


#header {
background-repeat:repeat-x;
}


の箇所に


#header {
background-repeat:no-repeat;
 background-position: right;
}


と記述します。


※CSS編集の際は、デザインが崩れる場合がありますので、

必ずプレビューでご確認の上、保存してください。

CSSをデフォルトの状態まで戻したい場合はスキンを再選択してください。



STEP3:プレビューで確認して、変更完了
”プレビュー”をクリックし編集結果をプレビューします。
表示されたプレビュー結果に問題がなければ”保存”をクリック。

これでデザインが変更されました

スキン変更1



カスタマイズ完了!!



どうですか?結構やってみるとおもしろいですよね。


今回はサンプル写真を用いてやりましたが、

みなさんが既に持っている画像ももちろん使えますし、他のサンプル画像が欲しいという方は

フリー素材サイトを利用するといいかもしれません。

yahooで「フリー素材 写真」などで検索すればいろんな写真を無料でダウンロードさせてくれる

サイトがたくさん見つかりますよ。


例えば

・犬猫のかわいい素材があります 

はぴ  http://www.ztv.ne.jp/kawagita/pet/




ほら、楽しくなってきた!


いろんなカワイイ素材を集めてぜひ自分好みのスキン作り

挑戦してみてください。


そしてあなたの手作りスキンができたらコメントやトラックバックで

ぜひ紹介してください


・トラックバックのやり方がわからない方は

こちら

いいね!した人  |  コメント(84)  |  リブログ(0)