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;
}

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

0 件のコメント:

コメントを投稿