2012年5月13日日曜日

Bloggerで記事にコードを綺麗に貼り付ける方法:Bloggerでスタイルを設定する

Bloggerのブログの中でjavascriptやphp、htmlのコードなどを綺麗に貼り付けるにはどうしたらよいのか、ちょっと戸惑ったので、メモ的にエントリー。

◆実体参照(実体参照についてはこちら
これは簡単です。Bloggerのエディタで、作成モードにし、投稿設定のオプションの「構成モード」で「HTMLコードを表示」を選択します。
こうしてあげれば、作成モードでエディタにペースト(スタイルなし)するだけで< >などを自動で変換してくれます。
(ただ、<br />タグも挿入されるので不要であれば消す必要があります。)

◆CSSの追加
僕の場合は、コードを<pre><code></code></pre>タグで囲んでいます。
なので<code>タグにスタイルを設定すると、貼りつけたコードの表示をコントロールすることができます。

BloggerでCSSを追加するには、ブログのダッシュボードの左側にあるテンプレートを選択し、カスタマイズボタンを押します。
「アドバンス」→「CSSを追加」と選択すると、カスタムCSSを追加するフォームが現れますので、ここにスタイルを設定しましょう。下にプレビューが表示されるので、予め該当の記事を書いてからここでスタイルを設定すると楽です。最後に右上の「ブログに適用」ボタンをクリックで完了です。

ちなみに僕は次のようにスタイルを設定しています。


code{
 display:block;
 background : #D8D8D8;
 color : #444;
 font-size : 1em;
 margin  : 1em;
 padding : 0.5em;
 border  : 1px solid #888;
 width   : 90%;
 overflow : scroll;
}

あまりコードを書く人ではないので使う機会は少ないのですけれどね。

1 件のコメント:

  1. There is a balanced mechanical wheel with coloured pockets separated by equivalent vanes and the wheel which spins freely on a supporting submit. With numerous stores selling Roulette Table online, buying a roulette table with the most effective options at a 우리카지노 competitive worth is a herculean task. There are a number of} features to consider about|to contemplate} before buying an order online.

    返信削除