サンプルアプリケーションのコード部分をブログで紹介したい場合があります。下記のようにブログ本文と区別をつけるため、ボックスを配置して、その中にコードを表示させるにはどうすればいいのでしょうか？
<body> サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル サンプル サンプル サンプル
</body>
どう設定すれば良いか分からなかったので、個人的なメモも兼ねて紹介したいと思います。
BloggerでCSSの設定を変更もしくは追加するには、ブログの管理ページにログインし、「テンプレート」タブの「HTMLの編集」をクリックします。
「HTMLの編集」をクリックすると、ブログで設定しているレイアウトのコードが表示されるので以下のコードを追加して保存します。
p.code {
font-family: "Courier New", "Courier", "mono"; //フォントを指定
font-size: small; フォントサイズを指定
width: 400px; //ボックスの幅
white-space: nowrap; //改行を行わない
overflow: auto; // コードがボックスに収まらない時にスクロールを表示する
border-style: solid; //ボーダースタイルを実線に設定
border-width: 1px;
background-color: #F4FFFC;
line-height: 100%;
margin: 1px;
padding: 2px;
}
上の記述のような感じでコードを追加して、テンプレートを保存した後、ブログを投稿する際に、コード部分を「<p class="code"> </p>」で囲むことでコード部分がボックス内に表示されるようになります。
なお、プレビューでは適用されないので公開した後に確認する必要があります。
No comments:
Post a Comment