簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

プランに迷ったら、お気軽にご相談ください 0120-55-4682

サイト内検索

CSS編集サンプル ≪上級者向け≫

よく利用されるCSSのサンプルをご紹介します。

※記事の編集画面より文字色、文字サイズ、テーブル幅などを
 設定された場合、CSSが反映されない場合がございます。
※上級者向けとなるCSSに関するご質問はお受けできません。
※CSSを追加することで、レイアウトが崩れたり、サイトが表示されなくなった場合は、
 設定されたCSSを削除いただき、元の状態に戻してください


パソコンサイト用CSS編集方法はこちら

スマートフォンサイト用CSS編集方法はこちら

文字色、文字サイズなどの設定の解除方法はこちら

==========================================


■記事内でフォントの文字サイズを変えたい場合 [※1]
例)
.article_body{font-size:14px;}

■タイトル(h1)の文字サイズを変えたい場合 [※1]
(数字は0.5~10までの半角数字を記入します)
例)
h1{font-size:2em;}

■タイトル(h1)の文字色を変えたい場合 [※2]
(半角数字のカラーコード6桁を記入します)
例)
h1 a{color:#ff0000;}

□文字サイズと色を変えたい場合は、セミコロンの後ろに改行
または半角でスペースを空け、続けて記入します
h1 a{font-size:2em;
    color:#ff0000;}


■サイト説明の文字サイズを変えたい場合 [※1]
(数字は0.5~10までの半角数字を記入します)
例)
p.description{font-size:1em;}

■サイト説明の文字色を変えたい場合 [※2]
(半角数字のカラーコード6桁を記入します)
例)
#title_body p.description{color:#ff0000;}

□文字サイズと色を変えたい場合は、セミコロンの後ろに改行または半角でスペースを空け、続けて記入します
#title_body p.description{font-size:1em;
    color:#ff0000;}


■見出し(h2)の文字サイズや色を変えたい場合 [※1]
(数字は0.5~10までの半角数字を記入します)
例)
h2{font-size:1.5em;}

■見出し(h2)の文字色を変えたい場合 [※2]
(半角数字のカラーコード6桁を記入します)
例)
h2{color:#ff0000;}


□文字サイズと色を変えたい場合は、セミコロンの後ろに改行または半角でスペースを空け、続けて記入します
h2{font-size:1.5em;
    color:#ff0000;}


※1 「em」はfont-sizeプロパティの値を1とする大きさです。
   例:文字サイズ16pxの場合 1em=16px=100%、1.5em=24px=150%

   参考URL ※外部サイト
   http://www.webword.jp/cssguide/color/index5.html

※2 カラーコード(RGBの16進数)で色指定を行います。

   参考URL ※外部サイト
   http://www.finitojapan.com/cltable.html
   http://www5.plala.or.jp/vaio0630/hp/c_code.htm


==========================================

番外編:スマホサイトで記事画像を大きく表示する

スマートフォン用テンプレート「フラット01」「ノーマル01」「ノーマル02」で、
記事画像を「右寄せ/左寄せ」に関係なく横幅いっぱいに表示します。

.mainArticles .article_left .image, .mainArticles .article_right .image
{
text-align: center;
margin-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 100%;
width: auto;
overflow: hidden;
float: none;
}

.mainArticles .article_right .image img, .mainArticles .article_left .image img {
max-width: 100%;
}

スマホテンプレートをカスタム

Facebookにもご参加下さい

AMSの最新機能の他にもSEOや集客に関するノウハウなど最新のWebマーケティング情報を配信中です。
いいね!を押すだけで参加出来ます。




AMSニュースの購読はTwitterが便利です

AMSニュースの更新情報はTwitterでお届けします。