CSS改変のきほん ～簡単にスキンを改変する～
ここでは簡単なスキンの変更方法を…
まずはアメーバトップからブログのタグをクリック
すると、タブの下・真ん中にデザインの変更という項目があります
まずはスキンの選択画面でスキン・スタンダートのグレーを選択します
２コラム・３コラムはお好みで選択して下さい。
スキンがグレーになったことを確認してから、真ん中のスキンのカスタマイズをクリック
すると、こんな画面が出てくると思います
ここで簡単に好きなヘッダーに変更する事が可能です。
まずはカラーを選択。
何色でもいいですので選択後にパターンイメージの高さを変更。
ここはいじらなくてもOK。
重要なのは、その下の画像を追加するボタンです。
デフォルトでは何も選択されていませんので、画像を追加ボタンをクリック。
すると画像フォルダが出てきますね。
事前にヘッダーに使いたい画像を用意しておいてアップロードを済ませておきます。
使いたい画像をクリックすると、右のここにヘッダーイメージが入ります
という部分に自分で選択した画像が出てくると思います。
そこで画面一番下までスクロールすると…
自分の選択したヘッダー画像が反映されます。
一旦保存をクリックし、自分のブログを確認してください。
確認まで終わったら、また作業に戻ります。
今度は背景色などの選択です。
それぞれ
バックグラウンド…全体の背景色
メインコラム…記事の背景色
サイドコラム…左右の背景色(２コラムの場合は１つだけ)
という項目とカラーバーが表示されています。
もちろん、カラーバーの中にお好みの色があればその色をクリックするだけで
反映されますが、
この中に使いたい色がない場合…
その時には右の「FFFFFF｣をいじる必要性があります。
カラータグで好きな色を探し、6桁の英数を入れてください。
デフォルトでは「FFFFFF｣＝白になっています。
好きな色に変わりましたか？
プレビューで確認後、必ず保存をクリックしてくださいね。
さて。
このままではヘッダーにブログタイトルと概要が反映されたままです。
もちろんデフォルトのまま使うことも出来ますが、
このままじゃ、見せたい所が潰れてしまう…なんてこともあると思います。
そこではじめてCSSをいじるのです。
まずはアメーバトップからブログのタグをクリック
すると、タブの下・真ん中にデザインの変更という項目があります
まずはスキンの選択画面でスキン・スタンダートのグレーを選択します
２コラム・３コラムはお好みで選択して下さい。
スキンがグレーになったことを確認してから、真ん中のスキンのカスタマイズをクリック
すると、こんな画面が出てくると思います
ここで簡単に好きなヘッダーに変更する事が可能です。
まずはカラーを選択。
何色でもいいですので選択後にパターンイメージの高さを変更。
ここはいじらなくてもOK。
重要なのは、その下の画像を追加するボタンです。
デフォルトでは何も選択されていませんので、画像を追加ボタンをクリック。
すると画像フォルダが出てきますね。
事前にヘッダーに使いたい画像を用意しておいてアップロードを済ませておきます。
使いたい画像をクリックすると、右のここにヘッダーイメージが入ります
という部分に自分で選択した画像が出てくると思います。
そこで画面一番下までスクロールすると…
自分の選択したヘッダー画像が反映されます。
一旦保存をクリックし、自分のブログを確認してください。
確認まで終わったら、また作業に戻ります。
今度は背景色などの選択です。
それぞれ
バックグラウンド…全体の背景色
メインコラム…記事の背景色
サイドコラム…左右の背景色(２コラムの場合は１つだけ)
という項目とカラーバーが表示されています。
もちろん、カラーバーの中にお好みの色があればその色をクリックするだけで
反映されますが、
この中に使いたい色がない場合…
その時には右の「FFFFFF｣をいじる必要性があります。
カラータグで好きな色を探し、6桁の英数を入れてください。
デフォルトでは「FFFFFF｣＝白になっています。
好きな色に変わりましたか？
プレビューで確認後、必ず保存をクリックしてくださいね。
さて。
このままではヘッダーにブログタイトルと概要が反映されたままです。
もちろんデフォルトのまま使うことも出来ますが、
このままじゃ、見せたい所が潰れてしまう…なんてこともあると思います。
そこではじめてCSSをいじるのです。
スキンをいじる前に
必ずやっておきたいこと
その１
ＨＴＭＬを知っておくこと。
これを知らなければCSSをいじるのは難しいと思います。
独学でも構いません。わたしもそうです。
とにかく「用語の意味が分からない｣と言われてしまっても…こちらではどうしようもありません。
基礎がなければ、何も出来ないように、このCSSも基礎が分からないと
どう説明のしようもありません。
「ＨＴＭＬ 基礎｣でグーグル検索すると色んなサイト様が出てきます。
面倒くさがらずに一度目を通してみてください。
これは他のスキン製作者様も同じような事を言っています。
その２
タグとクラスを理解すること。
最低限知っていて欲しいこと。
これも基礎中の基礎です。
これだけだと思います。
わたしも独学でやっているので、これが「必ず！｣というものはありませんが
最低限これだけは…というものです。
アメーバーブログでは以下のCSSを改変できます。
わたしはグレーです。
もちろん、ピンクやグリーン、ブルー
そのほかにもスタンダートスキンはほぼ改変可能ですが
サイドバーの文字なども全てオリジナルにしたい場合、グレースキンが一番改変し易いかと…。
グレースキンの利点は
タグを挿入する位置(クラス)が分かりやすいこと。
基本設定、ヘッダー等挿入位置が分かりやすく、かつ日本語で書かれているので
頭弱なわたしでも十分理解できました。
では少しづつやっていこうと思います。
以下はHTMLやタグ、クラスなどを完全に理解された上で説明していく形になりますので
余計な注釈等は入りません。。。
その１
ＨＴＭＬを知っておくこと。
これを知らなければCSSをいじるのは難しいと思います。
独学でも構いません。わたしもそうです。
とにかく「用語の意味が分からない｣と言われてしまっても…こちらではどうしようもありません。
基礎がなければ、何も出来ないように、このCSSも基礎が分からないと
どう説明のしようもありません。
「ＨＴＭＬ 基礎｣でグーグル検索すると色んなサイト様が出てきます。
面倒くさがらずに一度目を通してみてください。
これは他のスキン製作者様も同じような事を言っています。
その２
タグとクラスを理解すること。
最低限知っていて欲しいこと。
これも基礎中の基礎です。
これだけだと思います。
わたしも独学でやっているので、これが「必ず！｣というものはありませんが
最低限これだけは…というものです。
アメーバーブログでは以下のCSSを改変できます。
わたしはグレーです。
もちろん、ピンクやグリーン、ブルー
そのほかにもスタンダートスキンはほぼ改変可能ですが
サイドバーの文字なども全てオリジナルにしたい場合、グレースキンが一番改変し易いかと…。
グレースキンの利点は
タグを挿入する位置(クラス)が分かりやすいこと。
基本設定、ヘッダー等挿入位置が分かりやすく、かつ日本語で書かれているので
頭弱なわたしでも十分理解できました。
では少しづつやっていこうと思います。
以下はHTMLやタグ、クラスなどを完全に理解された上で説明していく形になりますので
余計な注釈等は入りません。。。