コンテンツマーケティング

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;
}
  1. p.code: これは HTML を対象とした CSS ルールです <p> クラス名「code」の要素。 これは、このクラスを持つ段落は次のプロパティに従ってスタイル設定されることを意味します。
  2. font-family: Courier New;: このプロパティは、フォント ファミリを「Courier New」に設定します。 ターゲット要素内のテキストに使用されるフォントを指定します。
  3. font-size: 8pt;: このプロパティは、フォント サイズを 8 ポイントに設定します。 ターゲット要素内のテキストは、このフォント サイズで表示されます。
  4. border-style: inset;: このプロパティは、境界線のスタイルを「挿入」に設定します。 ターゲット要素の周囲の境界線に、くぼんだ、または押しつぶされた外観を作成します。
  5. border-width: 3px;: このプロパティは、境界線の幅を 3 ピクセルに設定します。 要素の周囲の境界線の太さは 3 ピクセルになります。
  6. padding: 5px;: このプロパティは、ターゲット要素内のコンテンツの周囲に 5 ピクセルのパディングを追加します。 テキストと境界線の間にスペースを設けます。
  7. background-color: #FFFFFF;: このプロパティは、背景色を白 (#FFFFFF) に設定します。 ターゲット要素内のコンテンツの背景は白になります。
  8. line-height: 100%;: このプロパティは、行の高さをフォント サイズの 100% に設定します。 これにより、テキスト行の間隔がフォント サイズに応じて確保されます。
  9. margin: 10px;: このプロパティは、要素全体の周囲に 10 ピクセルのマージンを追加します。 ページ上のこの要素と他の要素の間にスペースを設けます。

提供された CSS コードは、クラス「code」を持つ HTML 段落のスタイルを定義します。 これらの段落のフォント、フォント サイズ、境界線のスタイル、境界線の幅、パディング、背景色、行の高さ、および余白を設定します。 このスタイルは、Blogger 投稿内のコード スニペットまたは事前にフォーマットされたテキストに適用して、特定の外観を与えることができます。

それは次のようになります:

p.コード {
フォントファミリー: Courier New;
フォントサイズ: 8pt;
境界線のスタイル: 挿入;
border-width:3px;
パディング:5px。
背景色: #FFFFFF;
行の高さ: 100%;
マージン:10px;
}

ハッピーコーディング!

Douglas Karr

Douglas Karr のCMOです オープンインサイト の創設者であり、 Martech Zone。 ダグラスは、マーテックのスタートアップ企業数十社の成功を支援し、マーテックの買収と投資における 5 億ドルを超えるデューデリジェンスを支援し、企業の販売戦略とマーケティング戦略の実装と自動化を支援し続けています。 ダグラスは、国際的に認められたデジタル変革と MarTech の専門家兼講演者です。 ダグラスは、ダミーズ ガイドやビジネス リーダーシップに関する書籍の著者でもあります。

関連記事

先頭へ戻るボタンに
閉じる

Adblockが検出されました

Martech Zone は、広告収入、アフィリエイト リンク、スポンサーシップを通じてサイトを収益化しているため、このコンテンツを無料で提供できます。 当サイトをご覧になる際は、広告ブロッカーを削除していただければ幸いです。