アメブロのデザインをカスタマイズする際は、ソース注1で対象を確認しCSSの編集を行います。
- ソースとはページを構成している文字列のことです。
ソースの確認方法は使用しているブラウザによって異なります。
IEでの確認方法
ブラウザ画面上部にある「表示」→「ソース」とクリック。
Firefoxでの確認方法
「ctrl+U」をクリック
Chromeでの確認方法
「ctrl+U」をクリック
ソースの見方
ソースを見るとたくさんの英数字が羅列されていますが、CSS編集の対象となるのは「<body>」以下の部分です。
「<body>」以下を見ると「<div class="～">」のような記述がされていると思いますが、この記述の「div」「～」の部分がCSSの使い方で説明した「対象」になります。
<p>あいうえお</p>
例えば、ソースに上記のように記述された文章のデザインを変更(今回は色の変更)する場合は、以下のような記述をCSS編集画面に追加します。
p{
color:#000000;
}
この設定をCSS編集画面に追加すると「p」に囲まれた文章が任意の色に変わります。
ただこれだと「p」に囲まれた全ての文章のデザインが変わってしまうため、特定の文章のみにデザインを適用させる場合は「～」の部分を対象にします。
<p class="test">あいうえお</p>
先ほどとは違い、対象を以下のようにします。
.test{
color:#000000;
}
「～」の該当する部分の前に「.」を付け、「.～」として対象に記述します。
このように記述することで「～」の部分と一致するコンテンツのみデザインを変更することが出来ます。
注意点として上記の例では「.」を付けましたが、これは「class="～"」だからであり、「class」の部分が「id」であった場合は以下のようになります。
<p id="test">あいうえお</p>
#test{
color:#000000;
}
「～」の該当する部分の前に「#」を付け、「#～」として対象に記述します。
また、「p」と「class(id)」を合わせて使って指定することも出来ます。
<p class="test">あいうえお</p>
p.test{
color:#000000;
}
「p」の後ろに「.～」を記述して対象にします。
この場合は、「p」で囲まれたコンテンツであり、さらに「～」の部分が「test」であるもののみデザイン変更すると言う事になります。