CSS テンプレート修正覚書

■ ページ見直しの動機と目標

放置していた buttobi.net からのシステム変更の案内メールが有った。
時代に逆行して画像の少ない シンプルなページにしたくなった。
老眼で文字が見えにくいので文字大きめのページにしたくなった。
特別なツールを使用せずに Fedoraのテキストエディター(gEdit)や Windowsのメモ帳(notepad)で書き換えできる事を目標とした。

■ 修正の為参考にした CSS テンプレート

初心者込む 105さんのテンプレートとメニューを参考にして　メニュー位置を右側から左側に変更した。最下段 foot の前に <p style="clear: both;"></p> して右側にメインコンテンツが表示するを確認したので cssの .footerに clear: both;を追加した。変更手順は徳保隆夫さんのいろはの先のCSS 第四回を参考にした。

表示位置確認
	<p style="clear: both;"></p>
	<div id="foot">

cssの追加
.footer {
	clear: both;

このページのトップへ

■ pre セレクタ <pre class="console">, <pre class="info"> 追加

pre.console {
	padding: 5px;
	background-color: #FAFAFF;
	color: #000000;
	margin-left: 25px;		/*  <h2>と 同じ位置 */
	margin-right: 25px;
	margin-bottom: 0.5em;
	border: 1px dotted #8888FF;
	line-height: 100%;
	text-align: left;
	white-space: pre;
	overflow: auto;
}

pre.info {
	padding: 10px;
	background-color: #FAFAFA;
	color: #000000;
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 1em;
	border: 1px dotted #999999;
	line-height: 125%;
	text-align: left;
	white-space: pre;
	overflow: auto;
}

このページのトップへ

■ p セレクタ <p class="pagetop"> 追加

.pagetop {
	padding: 0px;
	margin-right: 0px;
	font-size: 0.5em;
	text-align: right;
}

このページのトップへ

■ 手直し予定

<p>の見直し。
<h2>の line 位置見直し。
<pre>の 最下行 確認。
表示文字色の調整。
画像表示位置の調整。
日付 class 作る？。

■ 2009年 03月 22日
取り敢えずの見直し終り

このページのトップへ

■ 手直し予定 2

buttobi.netにアップすると上下の広告欄の表示位置がなぜか左に寄る。
buttobi.netにアップすると pre.console 下段の Lineが消える。

<!--
* {
	margin: 0px;
	padding: 0px;
}
-->

buttobi.netの広告位置は css先頭 *{...}設定のため ( buttobi_test1.htmlで表示 )
横3列の前段階で幅640の monostylel.cssを作成。( css_memol.htmlで表示 : stylesheetの読み込みだけ monostylel.cssに変更したページ )
次はぼやきブログと超初心者のホームページ作成のテンプレートを試してみる。

■ 2009年 03月 23日
取り敢えずの見直し終り

このページのトップへ

■ CSS 全面修正手順（案）

超初心者のホームページ作成のテンプレートを見本にしてこの 覚書、他 を修正する。

ページ設定、ページボックス設定
メインコンテンツ設定
ヘッダーボックス新規作成
ヘッダー、フッター設定
縦メニュー設定
横メニュー新規作成（参考テンプレートビー）
縦１列（利用しないので下位置メニューは作成しない）
横２列 ( 左右メニュー ) レイアウト再確認
横３列 ( 左右メニュー ) … しばらく凍結

■ 着手 2009年 03月 24日
横メニュー 2009年 03月 25日
レイアウト再確認 2009年 03月 25日
サイドメニュー class化 2009年 03月 27日
グローバルメニュー作成:buttobi.net ダメ 2009年 03月 28日

このページのトップへ

■ メモ

a タグ 正しい記述順 : http://www.phppro.jp/news/50
	a:link { color: blue; }
	a:visited { color: purple; } 
	a:hover { color: purple; } 
	a:active { color: red; }

参考リンク
CSSデザインサンプル
 ［ホームページ作成］All About
スタイルシートテクニック/CSS tips
【CSSレイアウトデザイン】 / 【超初心者のホームページ作成】
スタイルシート/ホームページ/ブログ/webデザイン/無料 | フリー素材テンプレートビー
 ホームページ作成には1upホームページ作成の素材・テンプレート・ソフトウェア紹介など!!
Syboos.jp オープンソースポータル

 P-Web フリーPHPスクリプト
 ネットマニア - 便利な小技・大技講座 -
phpspot開発日誌 - PHP/Ajax/JavaScript/CSS等の最新技術情報をお届け
 プログラミング言語資料 - SAK Streets
HTML/CSS/JavaScript/PHPプチ小技:NOBs Cafe
PHPでCSSを生成することによるテクニックが紹介されています - PHPプロ！ニュース

逆 SEO対策

php 設定例
  $html .= "<meta name=\"Keywords\" content=\"norobot\">\n";
  $html .= "<meta name=\"Robots\" content=\"noindex,nofollow\">\n";
  $html .= "<meta name=\"googlebot\" content=\"noarchive\">\n";
html 通常
  <meta name="Keywords" content="norobot">
  <meta name="Robots" content="noindex,nofollow">
  <meta name="googlebot" content="noarchive">
  <meta HTTP-EQUIV="Refresh" CONTENT="3; URL=http://core7.mad.buttobi.net/">

http://seo.fc2.com/
http://ougonnetlife.com/
HTMLタグ利用状況解析 | 住太陽の「SEO 検索エンジン最適化」
ロボットが見なくても人が見るかも…　Robots.txtで秘密がバレる！？
サイトマップ作成
http://seo.fc2.com/sitemap/
http://www.xml-sitemaps.com/
http://www.8konnok8.com/howtomakegooglesitemap/