コンテンツマーケティング
Blogger: ブログのコードの CSS スタイル
友人が、Blogger エントリのコード領域をどのように作成したかを尋ねました。 Blogger テンプレートの CSS の style タグを利用してこれを実行しました。 私が追加したものは次のとおりです。
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: これは HTML を対象とした CSS ルールです<p>
クラス名「code」の要素。 これは、このクラスを持つ段落は次のプロパティに従ってスタイル設定されることを意味します。font-family: Courier New;
: このプロパティは、フォント ファミリを「Courier New」に設定します。 ターゲット要素内のテキストに使用されるフォントを指定します。font-size: 8pt;
: このプロパティは、フォント サイズを 8 ポイントに設定します。 ターゲット要素内のテキストは、このフォント サイズで表示されます。border-style: inset;
: このプロパティは、境界線のスタイルを「挿入」に設定します。 ターゲット要素の周囲の境界線に、くぼんだ、または押しつぶされた外観を作成します。border-width: 3px;
: このプロパティは、境界線の幅を 3 ピクセルに設定します。 要素の周囲の境界線の太さは 3 ピクセルになります。padding: 5px;
: このプロパティは、ターゲット要素内のコンテンツの周囲に 5 ピクセルのパディングを追加します。 テキストと境界線の間にスペースを設けます。background-color: #FFFFFF;
: このプロパティは、背景色を白 (#FFFFFF) に設定します。 ターゲット要素内のコンテンツの背景は白になります。line-height: 100%;
: このプロパティは、行の高さをフォント サイズの 100% に設定します。 これにより、テキスト行の間隔がフォント サイズに応じて確保されます。margin: 10px;
: このプロパティは、要素全体の周囲に 10 ピクセルのマージンを追加します。 ページ上のこの要素と他の要素の間にスペースを設けます。
提供された CSS コードは、クラス「code」を持つ HTML 段落のスタイルを定義します。 これらの段落のフォント、フォント サイズ、境界線のスタイル、境界線の幅、パディング、背景色、行の高さ、および余白を設定します。 このスタイルは、Blogger 投稿内のコード スニペットまたは事前にフォーマットされたテキストに適用して、特定の外観を与えることができます。
それは次のようになります:
p.コード {
フォントファミリー: Courier New;
フォントサイズ: 8pt;
境界線のスタイル: 挿入;
border-width:3px;
パディング:5px。
背景色: #FFFFFF;
行の高さ: 100%;
マージン:10px;
}
ハッピーコーディング!