£アメブロのスキンをオリジナルに変更しませんか？
アメブロのスキンをオリジナルに変更しませんか？
アメブロのスキンをオリジナルに変更します！！！
今回の作業で、オリジナルな感じで完成出来たんじゃないかな～？
連休なので、初心者向けに、オリジナルスキンの作り方を解説しようと思います！
デザインプレートを使うのも良いのですが、
オリジナルの方が、やはり愛着がわきますよね。
完成イメージはこんな感じ。
簡単で、どこよりも分かりやすく解説したと思うので、
よろしければ、お付き合い下さい☆
初心者でも分かるように、
どうやったらブログを変更出来るか解説したいと思います。
※注意事項。
自分は、「ベーシック」を使用しているのですが、高度にcssをいじると、
動作しない場合もあるのですが、自分のページ並みなら、
今の所、特に問題もなく、使えています。
高度に使うなら、「グリーン」、「ブルー」、「ピーチ」、「グレイ」の
いずれかを選択するのですが、コレを使うと、少し難しくなるので、
自分も使用している簡単に設定出来る「ベーシック」での解説になります。
◆1 ブログのトップに使いたい画像を、横幅800ピクセル(pixel)で保存します。
フリーの画像編集ソフトを使うと便利ですよ☆
※800ピクセルより足りなかったり、超えたりすると、
画像が途切れて、連結表示されるので注意して下さいね。
トップ画像を用意しないと話にならないので、
コレだけは、用意して下さい。
◆2 「マイページ」→「ブログを書く」→「デザインの変更 」で、
「
カスタム可能のベーシック 」をクリックします。
「3カラム・左右メニュー」を決めたら、保存をします。
これで、上部に有るスキンの選択から、
「スキンのカスタマイズ 」と「スキンCSSの編集 」を使う事が出来ます。
◆3 次に、「スキンのカスタマイズ 」から、
「ヘッダ」の「画像の追加」のボタンをクリックし、
◆1で用意した800ピクセルの画像をアップロードして、選択します。
「バックグラウンド」、「メインコラム」、「サイドコラム」の色設定をして、
「プレビュー」で確認をして、OKだったら、保存をクリックします。
これで、ベースの完成です☆
◆4 次に、「スキンCSSの編集 」をします。
CSSの上から順に解説します。
※赤字の部分を調整して下さい。太線の部分は、説明を加える事が出来ます。
◆/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 3.0em; /*-- 25px相当の文字サイズ --*/
}
数値を変える事で、ブログタイトルの文字の大きさを変更出来ます。
◆/*２）ブログタイトルの文字色を変更する*/
#header h1 a{
color:#333333; /*-- 濃いグレー --*/
}
※カラーを変更する場合は、「アメブロを書く 」から、
カラーパレットを選択して確認します。
色の右側に表示されるコードを赤い数字と入れ替え
ブログタイトルの色を決めて下さい。
クリックすると、記事中にコードが貼付けられるブラウザも有ります。
◆/*３）ブログ説明の文字サイズを変更する*/
#header h2{
font-size: 1.0em; /*-- 12px相当の文字サイズ --*/
}
◆/*４）ブログ説明の文字色を変更する*/
#header h2{
color:#333333; /*-- 指定なし --*/
}
※カラーを変更する場合は、「アメブロを書く 」から、
カラーパレットを選択して確認します。
◆/*５）ページ背景に画像を入れる*/
body{
background-image:url();
}
※1番最後で、詳しく解説します。
用意してある画像が有れば、使用して下さい。
貼付け方は、()に貼付けたい画像のURLを書き込みます。
(http://stat.ameba.jp/user_images/・・・)こんな感じの入力方法です。
◆/*６）ページ全体の文字色を変更する*/
body{
color: #333333; /*-- 濃いグレー --*/
}
ブログ記事の文字の色を変更します。
その他には、「メッセージボード 」の文字の色も変わります。
◆/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}
◆/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #333333; /*-- 濃いグレー --*/
}
◆/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #333333; /*-- 濃いグレー --*/
}
◆/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
登録を終えたら、「プレビュー」のボタンをクリックして、
確認して、OKなら保存します。
◆1～4の作業を終えるとこんな感じに。
☆おさらい☆
◆ベーシックスキンの選択時。ヘッド画像、CSS未使用。
◆ヘッド画像挿入。CSS使用前。
◆1～4の作業を終えるとこんな感じに。
◆５ CSSを使いこなします。
これでも、まだまだ、寂しいし、ヘッド上にある余白と、
「テストブログ ブログ｜ルーム」なんていらないですよね。
それを消すには、「スキンCSSの編集 」をいじらなくてはなりません。
付け加えた機能が分かりやすくなるように、
CSSの最後に、
/*============ ☆ 付け加えた機能 ☆ ==============*/
と、区切りを付けると分かりやすいです。
/*============ ☆ 付け加えた機能 ☆ ==============*/
赤文字の部分は、何を書いても大丈夫です。
自分で分かりやすいように区切ると使いやすいですよ。
◆「テストブログ ブログ｜ルーム」を消すには？
CSSの最後に、青色の文字を付け加えます。
/*ヘッダ上のブログ名、ブログ｜ルームを消す*/
div#userNaviArea{
display: none;
}
さらに、ブログタイトルの下のブログ説明の文字を改行したいですよね！！！
◆ブログタイトルの下のブログ説明の文字を改行するには？
/*ブログ説明の文字を改行する*/
#header h2{
white-space:pre;
}
CSSの最後に、青色の文字を付け加えます。
改行は、「アメブロの設定 」の説明を改行して下さい。
そのまんまが、反映されます。
2つを加えたCSSの表示は、こんな感じ。
付け加えたい機能を、下へ下へ付け加えて行きます。
2つを付け加えてプレビューをするとこんな感じに。
だいぶスッキリと纏まりました☆
その他のCSSの機能も紹介します。
/* ブログジャンル消す */
#profile li.genre{
display:none;
}
/* プレゼントをプロフから消す */
#profile .link_blog{
display:none;
}
/* プレゼントをプロフから消す */
#profile ul #ameNaviArea .lastItem{
display:none;
}
/* プレゼントを贈る を消す */
#amemberProfArea li.menuPresent{
display:none;
}
/* メッセージを送る を消す */
#amemberProfArea li.menuMsg{
display:none;
}
/* アメンバーになる を消す */
#amemberProfArea li#amemberProf3{
display:none;
}
/*芸能人に会えるかも！？を消す*/
#profile .adlantiss{
display:none !important;
/* 記事の下にスペース */
#advertising2 {
margin-top:40px;/* 記事と広告の隙間 */
}
/*ブログ下広告-アイコン消す*/
#gadBox.footer #adCount0_footer,
#gadBox.footer #adCount0_footer.blockhoverGeneral{
background-image:none;
padding-left:0px;
}
その他にも、マダマダ有るのですが、こんな感じで。
それらを駆使すると、ブログに表記されるプロフィールの項目が、
スッキリと纏まります☆
最後に！
◆4 次に、「スキンCSSの編集 」をします。
の
◆/*５）ページ背景に画像を入れる*/の説明をします。
body{
background-image:url();
}
これ。
背景画像は、フリーで配られているパターン画像を使いました。
パターン画像を使うと、途中で途切れないので、
違和感無く、ページを作る事が出来ます。
Twitterに使えるサイトのまとめたwebを紹介します。
DesignWalker ロサンゼルスで働くウェブデザイナーの日記。 Twitterの背景・
それと、こんなのも。
http://twitpaper.com/2009/04/14/gold-louis/
Twitter用ですが、アメブロにも使えますよ～。
そんなこんなから、フリーの背景画像をダウンロードして、アメブロで使います！
使い方は、「アメブロを書く 」から、画像ボタンを押し、ダウンロードした画像を貼付け、
下にある、「HTMLタグを表示」を押し、画像のリンクを見ます。
水色の部分が、画像のリンクです。
それをコピーして、
body{
background-image:url();
}
()に貼付けたい画像のURLを書き込みます。
(http://stat.ameba.jp/user_images/・・・)こんな感じの入力方法です。
色々駆使した結果、完成したのはこんな感じです☆
http://ameblo.jp/tnno/
まだまだ、書きたい事は有るのですが、今回は、この辺で。
もっと、知りたい人は、このサイトを見て下さい。
自分は、ここで少しずつ勉強しました☆
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！
極めると、なんでも出来そうですが、自分のレベルだと、
こんな表示が限界かも（汗）
簡単なCSSの変更ですが、良かったら、挑戦してみて下さい☆
人気ブログランキング
にほんブログ村
◆この記事が役立ったら、上の2つのバーナーをクリックしてもらえると嬉しいです☆
コメントを頂けると励みになります！！！
どうぞよろしくお願いします☆
グルメ・レシピ
■シーザーサラダ・レシピ・作り方／☆4.5
■牛丼・レシピ・作り方 吉野家の再現率85％／☆4
■鶏の唐揚げ・レシピ・作り方／☆4
■電子レンジで50秒！簡単温泉玉子・作り方／☆4
■焼き鳥とタレ・レシピ・作り方／☆4
■イタリアンピッツァ・ピザ・レシピ・作り方／☆4
■皮から作る焼き餃子・レシピ・作り方／☆3.5
■簡易デミグラスソース・レシピ・作り方／☆4
●輪切りのオランジェット、レモンコンフィ・レシピ・作り方／☆4
■チーズソースのニョッキ・レシピ・作り方／☆4
■ローストチキン・レシピ・作り方／☆4
□浅草グルメメモ！
→料理ブログ 料理の豆知識
☆ねもの美味しいものメモ。料理レシピの一覧へ
アメブロ・オリジナルスキン・CSS変更。
￡アメブロ改造の一覧
総合旅行予約サイトの楽天トラベル
アメブロのスキンをオリジナルに変更します！！！
今回の作業で、オリジナルな感じで完成出来たんじゃないかな～？
連休なので、初心者向けに、オリジナルスキンの作り方を解説しようと思います！
デザインプレートを使うのも良いのですが、
オリジナルの方が、やはり愛着がわきますよね。
完成イメージはこんな感じ。
簡単で、どこよりも分かりやすく解説したと思うので、
よろしければ、お付き合い下さい☆
初心者でも分かるように、
どうやったらブログを変更出来るか解説したいと思います。
※注意事項。
自分は、「ベーシック」を使用しているのですが、高度にcssをいじると、
動作しない場合もあるのですが、自分のページ並みなら、
今の所、特に問題もなく、使えています。
高度に使うなら、「グリーン」、「ブルー」、「ピーチ」、「グレイ」の
いずれかを選択するのですが、コレを使うと、少し難しくなるので、
自分も使用している簡単に設定出来る「ベーシック」での解説になります。
◆1 ブログのトップに使いたい画像を、横幅800ピクセル(pixel)で保存します。
フリーの画像編集ソフトを使うと便利ですよ☆
※800ピクセルより足りなかったり、超えたりすると、
画像が途切れて、連結表示されるので注意して下さいね。
トップ画像を用意しないと話にならないので、
コレだけは、用意して下さい。
◆2 「マイページ」→「ブログを書く」→「デザインの変更 」で、
「
カスタム可能のベーシック 」をクリックします。
「3カラム・左右メニュー」を決めたら、保存をします。
これで、上部に有るスキンの選択から、
「スキンのカスタマイズ 」と「スキンCSSの編集 」を使う事が出来ます。
◆3 次に、「スキンのカスタマイズ 」から、
「ヘッダ」の「画像の追加」のボタンをクリックし、
◆1で用意した800ピクセルの画像をアップロードして、選択します。
「バックグラウンド」、「メインコラム」、「サイドコラム」の色設定をして、
「プレビュー」で確認をして、OKだったら、保存をクリックします。
これで、ベースの完成です☆
◆4 次に、「スキンCSSの編集 」をします。
CSSの上から順に解説します。
※赤字の部分を調整して下さい。太線の部分は、説明を加える事が出来ます。
◆/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 3.0em; /*-- 25px相当の文字サイズ --*/
}
数値を変える事で、ブログタイトルの文字の大きさを変更出来ます。
◆/*２）ブログタイトルの文字色を変更する*/
#header h1 a{
color:#333333; /*-- 濃いグレー --*/
}
※カラーを変更する場合は、「アメブロを書く 」から、
カラーパレットを選択して確認します。
色の右側に表示されるコードを赤い数字と入れ替え
ブログタイトルの色を決めて下さい。
クリックすると、記事中にコードが貼付けられるブラウザも有ります。
◆/*３）ブログ説明の文字サイズを変更する*/
#header h2{
font-size: 1.0em; /*-- 12px相当の文字サイズ --*/
}
◆/*４）ブログ説明の文字色を変更する*/
#header h2{
color:#333333; /*-- 指定なし --*/
}
※カラーを変更する場合は、「アメブロを書く 」から、
カラーパレットを選択して確認します。
◆/*５）ページ背景に画像を入れる*/
body{
background-image:url();
}
※1番最後で、詳しく解説します。
用意してある画像が有れば、使用して下さい。
貼付け方は、()に貼付けたい画像のURLを書き込みます。
(http://stat.ameba.jp/user_images/・・・)こんな感じの入力方法です。
◆/*６）ページ全体の文字色を変更する*/
body{
color: #333333; /*-- 濃いグレー --*/
}
ブログ記事の文字の色を変更します。
その他には、「メッセージボード 」の文字の色も変わります。
◆/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}
.entry h3.title{
color: #333333; /*-- 濃いグレー --*/
}
◆/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #333333; /*-- 濃いグレー --*/
}
◆/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
登録を終えたら、「プレビュー」のボタンをクリックして、
確認して、OKなら保存します。
◆1～4の作業を終えるとこんな感じに。
☆おさらい☆
◆1～4の作業を終えるとこんな感じに。
◆５ CSSを使いこなします。
これでも、まだまだ、寂しいし、ヘッド上にある余白と、
「テストブログ ブログ｜ルーム」なんていらないですよね。
それを消すには、「スキンCSSの編集 」をいじらなくてはなりません。
付け加えた機能が分かりやすくなるように、
CSSの最後に、
/*============ ☆ 付け加えた機能 ☆ ==============*/
と、区切りを付けると分かりやすいです。
/*============ ☆ 付け加えた機能 ☆ ==============*/
赤文字の部分は、何を書いても大丈夫です。
自分で分かりやすいように区切ると使いやすいですよ。
◆「テストブログ ブログ｜ルーム」を消すには？
CSSの最後に、青色の文字を付け加えます。
/*ヘッダ上のブログ名、ブログ｜ルームを消す*/
div#userNaviArea{
display: none;
}
さらに、ブログタイトルの下のブログ説明の文字を改行したいですよね！！！
◆ブログタイトルの下のブログ説明の文字を改行するには？
/*ブログ説明の文字を改行する*/
#header h2{
white-space:pre;
}
CSSの最後に、青色の文字を付け加えます。
改行は、「アメブロの設定 」の説明を改行して下さい。
そのまんまが、反映されます。
2つを加えたCSSの表示は、こんな感じ。
付け加えたい機能を、下へ下へ付け加えて行きます。
2つを付け加えてプレビューをするとこんな感じに。
だいぶスッキリと纏まりました☆
その他のCSSの機能も紹介します。
/* ブログジャンル消す */
#profile li.genre{
display:none;
}
/* プレゼントをプロフから消す */
#profile .link_blog{
display:none;
}
/* プレゼントをプロフから消す */
#profile ul #ameNaviArea .lastItem{
display:none;
}
/* プレゼントを贈る を消す */
#amemberProfArea li.menuPresent{
display:none;
}
/* メッセージを送る を消す */
#amemberProfArea li.menuMsg{
display:none;
}
/* アメンバーになる を消す */
#amemberProfArea li#amemberProf3{
display:none;
}
/*芸能人に会えるかも！？を消す*/
#profile .adlantiss{
display:none !important;
/* 記事の下にスペース */
#advertising2 {
margin-top:40px;/* 記事と広告の隙間 */
}
/*ブログ下広告-アイコン消す*/
#gadBox.footer #adCount0_footer,
#gadBox.footer #adCount0_footer.blockhoverGeneral{
background-image:none;
padding-left:0px;
}
その他にも、マダマダ有るのですが、こんな感じで。
それらを駆使すると、ブログに表記されるプロフィールの項目が、
スッキリと纏まります☆
最後に！
◆4 次に、「スキンCSSの編集 」をします。
の
◆/*５）ページ背景に画像を入れる*/の説明をします。
body{
background-image:url();
}
これ。
背景画像は、フリーで配られているパターン画像を使いました。
パターン画像を使うと、途中で途切れないので、
違和感無く、ページを作る事が出来ます。
Twitterに使えるサイトのまとめたwebを紹介します。
DesignWalker ロサンゼルスで働くウェブデザイナーの日記。 Twitterの背景・
それと、こんなのも。
http://twitpaper.com/2009/04/14/gold-louis/
Twitter用ですが、アメブロにも使えますよ～。
そんなこんなから、フリーの背景画像をダウンロードして、アメブロで使います！
使い方は、「アメブロを書く 」から、画像ボタンを押し、ダウンロードした画像を貼付け、
下にある、「HTMLタグを表示」を押し、画像のリンクを見ます。
水色の部分が、画像のリンクです。
それをコピーして、
body{
background-image:url();
}
()に貼付けたい画像のURLを書き込みます。
(http://stat.ameba.jp/user_images/・・・)こんな感じの入力方法です。
色々駆使した結果、完成したのはこんな感じです☆
http://ameblo.jp/tnno/
まだまだ、書きたい事は有るのですが、今回は、この辺で。
もっと、知りたい人は、このサイトを見て下さい。
自分は、ここで少しずつ勉強しました☆
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！
極めると、なんでも出来そうですが、自分のレベルだと、
こんな表示が限界かも（汗）
簡単なCSSの変更ですが、良かったら、挑戦してみて下さい☆
人気ブログランキング
にほんブログ村
◆この記事が役立ったら、上の2つのバーナーをクリックしてもらえると嬉しいです☆
コメントを頂けると励みになります！！！
どうぞよろしくお願いします☆
グルメ・レシピ■シーザーサラダ・レシピ・作り方／☆4.5
■牛丼・レシピ・作り方 吉野家の再現率85％／☆4
■鶏の唐揚げ・レシピ・作り方／☆4
■電子レンジで50秒！簡単温泉玉子・作り方／☆4
■焼き鳥とタレ・レシピ・作り方／☆4
■イタリアンピッツァ・ピザ・レシピ・作り方／☆4
■皮から作る焼き餃子・レシピ・作り方／☆3.5
■簡易デミグラスソース・レシピ・作り方／☆4
●輪切りのオランジェット、レモンコンフィ・レシピ・作り方／☆4
■チーズソースのニョッキ・レシピ・作り方／☆4
■ローストチキン・レシピ・作り方／☆4
□浅草グルメメモ！
→料理ブログ 料理の豆知識
☆ねもの美味しいものメモ。料理レシピの一覧へ
アメブロ・オリジナルスキン・CSS変更。￡アメブロ改造の一覧
総合旅行予約サイトの楽天トラベル