2010年05月13日

このBlogのStyleSheet 2

 このブログでは、作ったものや処理中のテキスト出力等を極力画像でなく、文字情報のままで掲載する様に努めている。従って、ここで紹介する当方の著作物のほとんどは、本文よりコピー&ペーストで入手出来るし、例えばインストール処理やソース実行時に得られる処理中のエラーメッセージ等もほぼ正確にデータとして掲載出来ているという訳だ。これは、少なくとも当方自身にとって後日の行動記録として価値が高い情報蓄積となるし、掲載しておけば、その相対的な価値の順番でGoogle等の検索サイトにリスティングされ、特定の読者は、リンクを好みの場所に貼り役だってくれることも、少しはあるだろう。

 個人の記録としてだけなら、ズボラな性格の野郎は、単純なPREタグで羅列で、全て終わらせてしまうのだが、やはり、人様の目に触れるところなので、多少なりとも見易さの工夫をと思い、そういう引用ブロックについては、以前「このBlogのStyleSheet「ブラウザ、Telnet、Cygwin用」を追加」でも書いた様に、StyleSheetで、背景画像、背景色、外枠等の見栄えを整え、それが引用箇所であることが判る様に工夫している。

 しかし、これも忘れっぽい性格なもので、ときどき過去作ったものを忘れて再度作るといった感じだし、色々と数が増えて来ると、ソースコード掲載を目的に作り使って来たpre.mem2タグ等は、タイトルバーのアイコンを省略したことから「これって何なのか判らないよな」と最近感じて来た。
 そこで、気になったページのいくつかを使い、新たに次のものを作成し運用することにした。
  1. ウェブ・ブラウザ画面の引用: div.ff2div.ff3 (2010-05-16 テンプレート改訂)
  2. テキストエディタ画面の引用: pre.mem0
  3. 追 記 ブ ロ ッ ク の 明 示: div.edit

 ウェブ用の div.ff0 については過去 brws を作り使っていた様だかいつの間にか、その存在を忘れて、再作成したものである。以降順次、利用法を掲載しておくことにする。はい、備忘の為です(笑)。

ウェブ・ブラウザ画面の引用: div.ff3

ブラウザ画面引用時のブログ本文内の記入用テンプレート

<div class="ff3">&nbsp;&nbsp;&nbsp;<ここにタイトルを記入> - Mozilla Firefox<pre>
http&#058;//<ここにURLを記入></pre><ここにHTMLソースコードを貼付け>

</div>

Blog本文での表示

   <ここにタイトルを記入> - Mozilla Firefox

http://<ここにURLを記入>
<ここにHTMLソースコードを貼付け>


 ブラウザのデザインは、最上部のタイトルバー、メニューバーに加えURL表示と入力用のアドレスバーが無いと、それらしくない。上はそれを記入出来る様にした。その為、タイトル以外にURLも入力する必要がある。

テキストエディタ画面の引用: pre.mem0

テキストエディタ画面での平文テキスト引用時のテンプレート

<pre class="mem0">          <ここにタイトルを記入> 


<ここに平文テキストの文字列を貼付け。></pre>
※ タグを山括弧付でそのまま表示させたい時は、【PythonでCGI】CGIでの例外Error処理 〜 Web版BlogでHTMLタグ表示」を仕組んだ「http://127.0.0.1:18296/cgi-bin/html4blog.py次稿「HTML4BLOG.py blog本文内HTMLタグ表示用ENCODE (2)」辺りのツールで変換し貼付けると楽出来る。

Blog本文での表示

          <ここにタイトルを記入>


<ここに平文テキストの文字列を貼付け。>

追 記 ブ ロ ッ ク の 明 示: div.edit

追記用区画のテンプレート

<div class="edit><YYYY-MM-DD> 追記
 ここに追記内容を記載</div>

Blog本文での表示

<YYYY-MM-DD> 追記
 ここに追記内容を記載


 他のスタイルシートについては、後日、ここに追記し、テンプレートとして利用して行くことにする。
続きを読む
タグ:Webデザイン
posted by Mire at 02:06 | Comment(0) | TrackBack(0) | Webデザイン | このブログの読者になる | 更新情報をチェックする

2009年10月29日

このBlogのStyleSheet「ブラウザ、Telnet、Cygwin用」を追加

<pre>タグのスタイルシートで以下の見栄を追加した。今後、それぞれ、ブラウザ表示、Telnet、cygwin操作の説明で利用する予定だ。説明書きでは適宜グラフィカルな表示を加えることで判り易く出来るが、逐次画面コピーを取っていたのでは大変だし、来訪者にとってもイメージ内に見える文字はコピペ出来ない。また、イメージはサーバ上のHDD容量を圧迫するので出来れば共通の見栄えを使い回して節約した方が良い。良かったら、参考にして下さい。
 尚、このスタイルシートは<pre>タグで使っても、外枠幅の制限があれば、行の折返しで、頁レイアウトを壊すことを最小限に減らせます。

    このBlogの追加スタイルシート


<style type="text/css">

<中略>

pre.cmd {margin-right: 50px; width:100%; font-size:10px; line-height:12px; background-color:#F0F0F0; border-style:ridge; background-image: url(http://pythonlife.up.seesaa.net/image/commandprompt_small.png); background-repeat: no-repeat; background-position: left top; padding-top:14px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
pre.mem2 {margin-right: 50px; width:100%; font-size:11px; line-height:12px; background-color:#F0F0F0; border-style:ridge; background-image: url(http://pythonlife.up.seesaa.net/image/mem_s2.png); background-repeat: no-repeat; background-position: left top; padding-top:1px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }

<!-- 2009-10-28追加分 -->
.brws {margin-right: 50px; width:100%; font-size:11px; line-height:11px; background-color:#F0F0F0; border-style:ridge; background-image: url(http://pythonlife.up.seesaa.net/image/Brws_bg_s.png); background-repeat: no-repeat; background-position: left top; padding-left:8px; padding-top:3px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-family:serif;}
.cygwin {margin-right: 50px; width:100%; font-size:11px; line-height:11px; background-color:#F0F0F0; border-style:ridge; background-image: url(http://pythonlife.up.seesaa.net/image/Cygwin_bg_s.png); background-repeat: no-repeat; background-position: left top; padding-left:1px; padding-top:3px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-family:serif;}
.telnet {margin-right: 50px; width:100%; font-size:11px; line-height:11px; background-color:#F0F0F0; border-style:ridge; background-image: url(http://pythonlife.up.seesaa.net/image/Telnet_bg_s.png); background-repeat: no-repeat; background-position: left top; padding-left:1px; padding-top:3px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-family:serif;}

<中略>

</style>


    403 Forbidden - Mozilla Firefox


http://127.0.0.1/cgi-bin2/html4blog2.cgi

Forbidden


You don't have permission to access /cgi-bin2/html4blog2.cgi
on this server.


     127.0.0.1


$ ls

     127.0.0.1

$ ls
タグ:Webデザイン
posted by Mire at 01:45 | Comment(0) | TrackBack(0) | Webデザイン | このブログの読者になる | 更新情報をチェックする
月額見放題1,000円開始キャンペーンバナー(画像ありver)
紺碧の艦隊 ルパン三世 GREAT CHASE クリックプロモーション
<< 2013年01月 >>
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
カテゴリ
タグクラウド
ファン
利用中のオープンソース
最近のコメント
最近の記事
過去ログ
QRコード
レガシーなアプリはいかが?
Dell 法人のお客様ページ
  • 【法人様向け】デル、お得なキャンペーン情報
  • 法人のお客様向け ストレージソリューション
  • 法人のお客様向け ネットワークソリューション
  • 【SOHO法人様向け】デル・オンライン広告限定ページ
  • デル-個人のお客様ページ
  • 【個人のお客様向け】デル・オンライン広告限定ページ
  • オンライン広告限定キャンペーンページ
  • ソフトウェア&周辺機器 パソコン工房
    ツートップインターネットショップ(twotop.co.jp) マウスコンピューター/G-Tune
  • ×

    この広告は1年以上新しい記事の投稿がないブログに表示されております。