ブログのコードのCSSスタイル

CSS

友人から、前回のブログエントリでコード領域を作成する方法を尋ねられました。 私は実際にスタイルを利用してコード領域を「偽造」しました。 Blogger内で、テンプレートを編集できます。 次のスタイルを追加しました。

p.code {font-family:Courier New; フォントサイズ:8pt; ボーダースタイル:はめ込み; ボーダー幅:3px; パディング:5px; 背景色:#FFFFFF; 行の高さ:100%; マージン:10px}

次のステップは、「HTMLの編集」モードでタグを編集することです。 タグを作成して、新しいスタイルを指すだけです。 出来上がり! スタイルの内訳:

  • フォントをCourierNewに設定します…一般的なコードエディタのように見えます
  • 正しく見えるようにフォントサイズを8ptに設定します
  • 段落の境界線のスタイルを「挿入」に設定します。 これにより、テキストエリアがページ上でどのように表示されるかが複製されます。
  • 境界線の幅を2または3ピクセルに設定します。 これにより、はめ込み枠のスタイルが正しく表示されます。
  • パディングは、境界線と内部のテキストの間の距離を設定します。
  • 背景色…白に設定(#FFFFFF)
  • 行の高さ–ブロガーテーマの他のスタイルのいくつかで行の高さが約100%になったため、これを200%に調整しました
  • マージンを10ピクセルに設定します。 これにより、段落(pタグ)がすべてから10ピクセル離れます。

それだけです! 注:Bloggerに付属のエディターは、ブログに表示されるとおりにを表示することはできません。 しかし、それは機能し、見栄えがします!

もうXNUMXつ注意してください…タグを編集した後、Bloggerエディターは投稿全体でランダムにタグを使用するのが好きです。 少し面倒です! 私のアドバイスは、あなたの投稿全体を書き、その後、XNUMXつの小さな編集を行うことです。

最後にもうXNUMXつ…必ずHTMLエンティティを使用してシンボルを表示してください。 いくつかの例:

  • 引用符(“)は“
  • >は>
  • >は>

ハッピーコーディング!

3のコメント

  1. 1
  2. 2
  3. 3

    私は今書く必要がないことを。 便利なエディターを使用できます。色、境界線などを選択できます。

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.