BloggerのテンプレートをCSSでカスタマイズする

みなさん、こんにちは。


本ブログはGoogleのBloggerを利用しています。
インターフェイスが分かりやすいし、何より無料で利用できるからです。

テンプレートも数少ないながらシンプルなデザインはいい感じだと思います。
と、いっても手のこんだことするのが面倒なので、基本的にはデフォルト設定のまま使用しています。

先日の「linuxでUSBメモリをマウントして使う」の投稿もlogはそのまま貼り付けしていますが、やはりちょっと読みずらいようです。

そこで、BloggerのテンプレートをCSSを使ってカスタマイズすることにしました。


Bloggerのダッシュボードにログインして

「テンプレート」→「カスタマイズ」と進みます。

「上級者向け」→「CSSを追加」と進みます。

表示された「カスタムCSSを追加」欄にCSSを記述していきます。

今回は

/* class=unixcmd */
.unixcmd {
  color: white;
  background-color: #444444;
  border: 1px solid black;
  margin: 3px;
  margin-left: 3px;
  padding: 3px;
  font-family: monospace;
  overflow: auto;
  width: 100%;
}

と記入してみました。


前述の「linuxでUSBメモリをマウントして使う」のlogの部分をHTML入力画面で、

<div class='unixcmd'>
root@dns:/# dmesg<br/>
[    0.000000] Initializing cgroup subsys cpuset<br/>
[    0.000000] Initializing cgroup subsys cpu<br/>
・・・・・・省略・・・・・・
[337722.690036] sd 2:0:0:0: [sdb] Assuming drive cache: write through<br/>
[337722.690070] sd 2:0:0:0: [sdb] Attached SCSI removable disk<br/>
</div>

とdivタグで囲い、スタイルシートを適用します。


適用前イメージ

適用後イメージ

ターミナル画面風になって、log部分が見やすくなったと思います。

といいつつ「linuxでUSBメモリをマウントして使う」はまだ直してなかったりして・・・・


ではでは～☆ミ