アメブロで本文の文字の大きさを変えたい！
有紀＠アメブロ改造マニア！です。
アメブロを自分好みに改造する方法をお伝えするブログです。
さてさて、アメブロですが、もともとのデザインだと、ちょっと本文の文字が小さくないですか？
もともとのデザインでは、１２pxくらいの大きさで表示されているようです。
この文字の大きさを変更するCSSの書き方を説明しますね。
ちなみにpxはピクセルと読みます。ピクセルは、パソコンのディスプレイの中での長さの単位ですね。
本文のテキストのみ大きさを変える方法になります。
本文の文字スタイルは subContents というクラスが適用されているので、上記のように書きます。
font-size:120%;
などのように、割合で書く事もできます。逆に80％などとすれば小さくもなりますよ！
文字はすべて「半角英数」で書きます。空白文字も半角で。コロンやセミコロンの間違いにも注意してくださいね。
これを、スキンCSSの編集画面で、文末にはりつけて保存すれば終了～～♪
スキンCSSの編集の仕方はこちら
いかがでしょうか。うまくできない、よくわからないなどの場合は、遠慮なくコメントやプチメでご連絡くださいねー。
ではではっ♪
アメブロ改造ドリル目次
アメブロを自分好みに改造する方法をお伝えするブログです。
さてさて、アメブロですが、もともとのデザインだと、ちょっと本文の文字が小さくないですか？
もともとのデザインでは、１２pxくらいの大きさで表示されているようです。
この文字の大きさを変更するCSSの書き方を説明しますね。
ちなみにpxはピクセルと読みます。ピクセルは、パソコンのディスプレイの中での長さの単位ですね。
本文のテキストのみ大きさを変える方法になります。
div.subContents{
font-size:14px;
}
本文の文字スタイルは subContents というクラスが適用されているので、上記のように書きます。
font-size:120%;
などのように、割合で書く事もできます。逆に80％などとすれば小さくもなりますよ！
文字はすべて「半角英数」で書きます。空白文字も半角で。コロンやセミコロンの間違いにも注意してくださいね。
これを、スキンCSSの編集画面で、文末にはりつけて保存すれば終了～～♪
スキンCSSの編集の仕方はこちらいかがでしょうか。うまくできない、よくわからないなどの場合は、遠慮なくコメントやプチメでご連絡くださいねー。
ではではっ♪
アメブロ改造ドリル目次スキンCSSを編集しよう！
有紀＠アメブロ改造マニアです。
さて、いよいよアメブロ改造に本格的に着手していきましょう♪
改造するには、スキンCSSというのを編集します。
アメブロの管理画面から
（１）ブログを書く をクリック
（２）デザインの変更 をクリック
（３）スキンCSSの編集 をクリック
で、このアルファベットの文字列を編集してデザインを変えていくわけです。
ページ上部にある注意書きに着目してください。
「CSS編集の際は、デザインが崩れる場合がありますので、必ずプレビューでご確認の上、保存してください。」
慣れるまでは、編集する前に、コピーしてテキストをメモ帳などに保存して置いたほうがよいでしょう。
「メモ帳に保存するってなに？」と言う方、いらっしゃいますかー？
CSSバックアップの取り方（執筆中
をご覧下さい。
バックアップがとれたら、次回から少しずつ変更していきます。
変更したら「プレビュー」を押して確認後「保存」ボタンクリックで完了です。
アメブロ改造ドリル目次
さて、いよいよアメブロ改造に本格的に着手していきましょう♪
改造するには、スキンCSSというのを編集します。
アメブロの管理画面から
（１）ブログを書く をクリック
（２）デザインの変更 をクリック
（３）スキンCSSの編集 をクリック
で、このアルファベットの文字列を編集してデザインを変えていくわけです。
ページ上部にある注意書きに着目してください。
「CSS編集の際は、デザインが崩れる場合がありますので、必ずプレビューでご確認の上、保存してください。」
慣れるまでは、編集する前に、コピーしてテキストをメモ帳などに保存して置いたほうがよいでしょう。
「メモ帳に保存するってなに？」と言う方、いらっしゃいますかー？
CSSバックアップの取り方（執筆中をご覧下さい。
バックアップがとれたら、次回から少しずつ変更していきます。
変更したら「プレビュー」を押して確認後「保存」ボタンクリックで完了です。
アメブロ改造ドリル目次アメブロスキンの簡単カスタマイズ
有紀＠アメブロ改造マニアです。
アメブロを改造するには、まず改造可能なスキンに設定します。
本格的に改造する前に、もともとのアメブロの「スキンのカスタマイズ」機能を使って、ちょっとお試しで変更してみましょう。
スキンのカスタマイズ機能を使うには、管理画面で
（１）「ブログを書く」タブをクリック
（２）「デザインの変更」タブをクリック
（３）「スキンのカスタマイズ」をクリック
ヘッダや、ブログの背景などの色を変更できます。
色の指定は、図のなかで選びたい色をクリックするか、それ以外の色は、６桁の数字とアルファベットで指定します。
ウェブページでは、色は１６進数で表現されていて、最初の二文字がR(赤）、G(グリーン）B(ブルー）の色の濃さで、その組み合わせで指定します。
例えば黒は（000000）白は（FFFFFF)赤は（FF0000)などです。
といっても、どの色がどの数値になるかわからないですよね？
ソフトで選択したり、ウェブでも一覧を提供してくれているサイトもあります。
おすすめはこちら
WEB色見本 原色大辞典（外部サイトへのリンクになります）
色の設定が終わったら、「保存」をクリックします。
この機能を使って、変更したものがこちらです。
まあこれでは、ちょっといまいちですよね。
ひきつづき改造していきますよっ！
今回はここまで！
アメブロ改造ドリル目次
アメブロを改造するには、まず改造可能なスキンに設定します。
本格的に改造する前に、もともとのアメブロの「スキンのカスタマイズ」機能を使って、ちょっとお試しで変更してみましょう。
スキンのカスタマイズ機能を使うには、管理画面で
（１）「ブログを書く」タブをクリック
（２）「デザインの変更」タブをクリック
（３）「スキンのカスタマイズ」をクリック
ヘッダや、ブログの背景などの色を変更できます。
色の指定は、図のなかで選びたい色をクリックするか、それ以外の色は、６桁の数字とアルファベットで指定します。
ウェブページでは、色は１６進数で表現されていて、最初の二文字がR(赤）、G(グリーン）B(ブルー）の色の濃さで、その組み合わせで指定します。
例えば黒は（000000）白は（FFFFFF)赤は（FF0000)などです。
といっても、どの色がどの数値になるかわからないですよね？
ソフトで選択したり、ウェブでも一覧を提供してくれているサイトもあります。
おすすめはこちら
WEB色見本 原色大辞典（外部サイトへのリンクになります）色の設定が終わったら、「保存」をクリックします。
この機能を使って、変更したものがこちらです。
まあこれでは、ちょっといまいちですよね。
ひきつづき改造していきますよっ！
今回はここまで！
アメブロ改造ドリル目次改造可能なアメブロスキンの設定方法
有紀＠アメブロ改造マニアです。
アメブロを改造するには、改造可能なスキンに設定します。設定方法は以下の通りです♪
（１）管理画面で、ブログを書くをクリック
（２）デザインの変更タブをクリック
（３）すべてのスキン、から「スタンダード」をクリック
（４）これをずーっと下までスクロールして、「グリーン」「ブルー」「ピーチ」のどれか好きなものを選びます。
（５）すると、選んだスキンが表示されるので（下図）、確認して保存をクリックします。
スキンの設定が終わった人はこちらへアメブロスキンの簡単カスタマイズ
アメブロ改造ドリル目次
アメブロを改造するには、改造可能なスキンに設定します。設定方法は以下の通りです♪
（１）管理画面で、ブログを書くをクリック
（２）デザインの変更タブをクリック
（３）すべてのスキン、から「スタンダード」をクリック
（４）これをずーっと下までスクロールして、「グリーン」「ブルー」「ピーチ」のどれか好きなものを選びます。
（５）すると、選んだスキンが表示されるので（下図）、確認して保存をクリックします。
スキンの設定が終わった人はこちらへアメブロスキンの簡単カスタマイズアメブロ改造ドリル目次アメブロデザインを改造するには？
有紀＠アメブロ改造マニアです（笑
さてさて、有紀は、さっきアメブロ造りました！
では、さっそく改造していきましょう！
一般的には、HTML(エイチティーエムエル）とCSS(シーエスエス）によって、ウェブページのデザインが決まります。
アメブロでは、HTMLを変更するしくみが提供されていなくて、CSSのみなので、CSSの編集で、デザインを変更します。
CSSのみでは、文書の構造自体を変えることはできないので、主に色や背景画像、枠線や配置などを変更する事でデザインをカスタマイズしていきます。
といっても、まだあまりぴんと来ないかもしれません。もし、今HTMLやCSSって何？とよくわからなくても気にしないで大丈夫♪
順番に操作書いていきますからっ♪
じゃあ、さっそく実際にやってみますねー
まずブログを造ったばかりの状態がこちら。
ここから、改造していきます！
まずは、改造できるスキンに変更！
スタンダードスキンの中から、「グリーン」「ブルー」「ピーチ」のどれかを選んで設定します。
もっと詳しいスキン設定の方法はこちらへ改造可能なアメブロスキンの設定方法
スキンの設定が終わった人はこちらへスキンの簡単カスタマイズ
アメブロ改造ドリル目次
さてさて、有紀は、さっきアメブロ造りました！
では、さっそく改造していきましょう！
一般的には、HTML(エイチティーエムエル）とCSS(シーエスエス）によって、ウェブページのデザインが決まります。
アメブロでは、HTMLを変更するしくみが提供されていなくて、CSSのみなので、CSSの編集で、デザインを変更します。
CSSのみでは、文書の構造自体を変えることはできないので、主に色や背景画像、枠線や配置などを変更する事でデザインをカスタマイズしていきます。
といっても、まだあまりぴんと来ないかもしれません。もし、今HTMLやCSSって何？とよくわからなくても気にしないで大丈夫♪
順番に操作書いていきますからっ♪
じゃあ、さっそく実際にやってみますねー
まずブログを造ったばかりの状態がこちら。
ここから、改造していきます！
まずは、改造できるスキンに変更！
スタンダードスキンの中から、「グリーン」「ブルー」「ピーチ」のどれかを選んで設定します。
もっと詳しいスキン設定の方法はこちらへ改造可能なアメブロスキンの設定方法スキンの設定が終わった人はこちらへスキンの簡単カスタマイズアメブロ改造ドリル目次