|
コピペ用パーツサンプル
上記いずれかのパーツサンプルをクリックして開きます。
お気に入りのパーツがありましたらパーツを全て選択してコピーします。

お持ちのホームページのスタイルシートをエディターで開きh2やh3などスタイルを適用する箇所に上書きで貼り付けます。
更新して変更を確認してみましょう!
なお、元の設定に戻せるよう初めから記載されていたスタイルはバックアップをとっておくことをおすすめします。
文字の大きさを変えたい!
このパーツはデフォルトでは文字の大きさを16pxにしてあります。もう少し小さくしたり大きくしたりしたい場合はfont-size: 16px; の部分の数字を変えて調整してください。
こちらにサイズと単位については記載してありますので参考にしてください。
関連項目:文字の設定
文字の色を変えたい!
文字の色を変更したい場合はcolor: #222222; の部分の#222222を変えて調整してください。
こちらに色の変更方法については記載してありますので参考にしてください。
関連項目:文字の設定
線の色を変えたい!
線の色を変更したい場合はborderと記載された箇所の#000000の部分を変更します。
border-left:;が左側の線、border-right:;が右側の線、border-top:;が上側の線、border-bottom:;が下側の線になります。
border:;のみだと文字を四角く囲みます。
こちらに色の変更方法については記載してありますので参考にしてください。
関連項目:枠線の設定
線の太さ・種類を変えたい!
線の太さを変更したい場合はborderと記載された箇所の数値の部分を変更します。
線の種類を変更したい場合はborderと記載された箇所の solidなどの部分を別の線種に変更します。
solid→実線(一本の線) dotted→点線 dashed→破線 double→二重線など
関連項目:枠線の設定
文字の上下左右の余白を変えたい!
余白を変更したい場合は padding: と記載された箇所の数値の部分を変更します。
上下左右一度にまとめて指定する場合は次のようになります。
padding:5px; 上下左右5pxの空白
padding:5px 10px; 上下5px 左右10pxの空白
padding:5px; 10px 2px; 上5px 左右10px 下2pxの空白
padding:5px 10px 2px 3px; 上5px 右10px 下2px 左3px空白
|
スタイル適用箇所の外の間隔を変えたい
サイト上の他の文章などとの間隔を変更したい場合は margin: と記載された箇所の数値の部分を変更します。
一度にまとめて指定する場合、上記のpaddingの設定と同じでpaddingをmarginに入れ替えて設定します。
*マージン(margin)、パディング(padding)、ボーダー(border)は左のような配置の関係になります。
背景の色を変えたい!
背景の色を変更したい場合は background-color:#d4d4d4; の部分の #d4d4d4 を変えて調整してください。
こちらに色の変更方法については記載してありますので参考にしてください。
関連項目:背景の設定
|