WordPressで投稿している時でも文字のフォントを変更したい場合や、文字を括りたい場合があります。そのときには標準スタイルシートにid属性やclass属性のdivタグを追加すると便利です。
ただし、WordPressのテーマをアップデートしてしまうと、カスタマイズしたものは削除されてしまうのでアップデートの前にバックアップしたほうがよいです。
スポンサーリンク
今回は2パターンの追加を行いました。
まず単純に四角で括る場合は、以下を標準スタイルシート(style.css)に追加します。
.box {
background-color: #EEEEEE;
border-style: solid;
border-width: 1px;
font-size: 14px;
padding: 10px 5px 10px 5px;
margin: -15px 0 10px 0;
}
background-color: #EEEEEE;
border-style: solid;
border-width: 1px;
font-size: 14px;
padding: 10px 5px 10px 5px;
margin: -15px 0 10px 0;
}
上記では
background-color: #EEEEEE; → 背景を薄いグレーに指定
border-style: solid; → 枠を実線に変更
border-width: 1px; → 枠の太さを1pxに指定
font-size: 14px; → 文字サイズを14pxに指定
padding: 10px 5px 10px 5px; → 内側余白の上右下左のサイズを指定
margin: -15px 0 10px 0; → 外側余白の上右下左のサイズを指定
になります。
イメージは
test test test
のようになります。
また、もうひとつはコマンドプロンプト風にするために以下を追加しました。
.cmd {
color: white;
background-color: black;
font-size: 14px;
padding: 10px 5px 10px 5px;
margin: -15px 0 10px 0;
}
color: white;
background-color: black;
font-size: 14px;
padding: 10px 5px 10px 5px;
margin: -15px 0 10px 0;
}
上記では
color: white; → 前景に白を指定
background-color: black; → 背景に黒を指定
font-size: 14px; → 文字サイズを14pxに指定
padding: 10px 5px 10px 5px; → 内側余白の上右下左のサイズを指定
margin: -15px 0 10px 0; → 外側余白の上右下左のサイズを指定
になります。
イメージは
test test test
のようになります。
スポンサーリンク