Bloggerでコマンドライン風の表示

【CSSをカスタマイズして実現】

BloggerでのCSSの使用方法

Blogger公式のヘルプ
ーブログのデザインを変更する
ーーCSS を使用してブログのデザインを変更する
https://support.google.com/blogger/answer/176245

どんなCSSにするか

黒地に白文字でいいと思う。

pre.commandline0 {
    color:white ;
    background-color: black ;
}

Web検索してよさげなのを捜す１

Drupal のカスタマイズ | graspPlugin for Choreonoid
http://www.hlab.sys.es.osaka-u.ac.jp/grasp/ja/node/65
Drupal(オーブンなCMSで割とメジャー)の解説ページなのですが、そこに「pre記法をコマンドライン風の黒字に白文字にするため……」と書いてあったので、そこの記述を使わせてもらう。

ちゃんと
　paddingとか
　borderを
使うとこんなにステキ。

作者様に感謝です、ありがとうございます。

Web検索してよさげなのを捜す２

ブログでのコマンドラインの説明をおしゃれにキメる - おしゃれな気分でプログラミング
http://neko-mac.blogspot.com/2015/04/blog-post.html
BloggerのCSS設定からコマンドライン風のCSSコードまで書いてある素晴らしいページ。

黒地白文字が良いとは限らない。
webkit-box-shadowで
影も付いて、
より良い感じ。

作者様に感謝です、ありがとうございます。

【タグでいいじゃん】

CSSを使わなくてもフツーに出来る。

スバラシイＣＳＳを使うべきだとか、HTML5に準拠してないだとか言われそう。

文書の内容はHTMLで書いて、その装飾はCSSで！
っていう思想はまあ、わからんでもないが、、、

文字色だの背景色までCSSで記述してタグ内には書くなというのは、、、
少なくとも落書き書き捨てイイ加減ブログの文章に求められてもなぁ。
オキラクでイイじゃん。

<div style="color=white;
            padding:10px;
            border:solid 2px white;
            border-radius:5px;
            background-color:black;
            margin-top:10px;
            margin-bottom:10px;">
<pre><code>

ここに何か書く

</code></pre>
</div>

HTMLの特殊文字文字エスケープがメンドイなんて、
言ってんじゃないよ(^^?

コマンドライン風の表示をする方法なんて
100通りだってあるさ

人生やり直し

2018年10月1日月曜日