トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • ブログテンプレート作成記(基本テンプレート作成)

テーマとページデザインがなんとなく決まった所で、早速HTMLとCSSを書き始めました。
本当はもっとページデザインを詰めてからなのかもしれないが、デザインセンスがないので 作ってみて直してっとゆっくり作り始めることにしました。
さぁ作り始めるぞって所で、1行目からいろいろ調べないといけないことがわかりました
調べたこととHTMLのコードを交互に記載していきます。⇒ブログ作成(ブログランキング)
1.FC2ブログはUTF-8ではなくて『EUC-JP』

<?xml version="1.0" encoding="EUC-JP"?>


2.XHTML準拠に関していろいろあるようですが、難しすぎて理解できなかったがとりあえず

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-jp">


3.ここからが<head>タグ内ですが、
メタタグを文字コード・CSS・JavaScript及びFC2ブログのタグを用いて作成者、詳細を記述。キーワードに関しては、テンプレートということもあり空白で記述。

<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="author" content="<%author_name>" />
<meta name="description" content="<%introduction>" />
<meta name="keywords" content="" />


4.リンクタグを印刷用、PC等のモニタ用、RSS用で記述。モバイル用は後で作成時に追加予定です。<head>タグはここまで。

<link rel="stylesheet" href="<%css_link>" type="text/css" media="print" />
<link rel="stylesheet" href="<%css_link>" type="text/css" title="default"
media="screen,projection,tv" />
<link rel="alternate" href="<%url>?xml" type="application/rss+xml" title="RSS" />


5.あとは、必要最低限の<body>タグを記述。

<body>

<div id="footer">
Copyright © <%blog_name> All Rights Reserved.<br />
Template by:<a href = "http://trivialife.blog119.fc2.com/">トリビア★ライフ</a><br />
<%ad> <%ad2>
</div><!--- close footer -->

</body>


いろいろ調べながら最低限のHTMLを書くだけで今日は・・・・・ (o_ _)o.。o○グー

少しでも参考になりましたら応援のクリックをお願いします。

 人気ブログランキングへ

一括応援のクリックも出来ればお願いします(^^)
 ※POP UP制限をこのサイトでは解除して頂けると嬉しいです。

一括応援ボタン



今日の成果の全HTML及びCSSコード


HTML
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-jp">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="author" content="<%author_name>" />
<meta name="description" content="<%introduction>" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="<%css_link>" type="text/css" media="print" />
<link rel="stylesheet" href="<%css_link>" type="text/css" title="default" 
media="screen,projection,tv" />
<link rel="alternate" href="<%url>?xml" type="application/rss+xml" title="RSS" />
<title><%blog_name> <%sub_title></title>
</head>
<body>


<div id="footer">
Copyright © <%blog_name> All Rights Reserved.<br />
Template by:<a href = "http://trivialife.blog119.fc2.com/">トリビア★ライフ</a><br />
<%ad> <%ad2>
</div>


</body>
</html>



CSS

CSSに関しては書き出すと長くなりすぎるので概要だけ
CSSの初期値をReset Style Sheet
clearfix
絵文字の張り付け位置をmiddle ※FC2ブログ用
YUI(Yahoo UI Library)をBase Style Sheet
 ※YUIに関しての詳細は、こちら
として組み込みました。

@charset "EUC-JP";

/* ***********************************************

  Style Name    : Reset Style Sheet

  Since         : 2009-11-26
  Last Modified : 2009-11-26

*********************************************** */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}



/* ***********************************************

  Style Name    : Common Style Sheet

  Since         : 2009-11-26
  Last Modified : 2009-11-26

*********************************************** */

/* --------------------------------------------
 *      clearfix
 * -------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* --------------------------------------------
 *      emoji
 * -------------------------------------------- */
/* 絵文字 */
img.emoji {
	vertical-align:middle;
}



/* ***********************************************

  Style Name    : Layout Style Sheet

  Since         : 2009-11-26
  Last Modified : 2009-11-26

*********************************************** */

/* --------------------------------------------
 *      Base
 * -------------------------------------------- */
body {
	color: #303030;
	font: 13px/1.231 "MS Pゴシック",arial,helvetica,clean,sans-serif;
	*font-size: small;
	*font: x-small;
	text-align: left;
}
select, input, button, textarea ,button {
	font: 99% "MS Pゴシック",arial,helvetica,clean,sans-serif;
}
table {
	font-size: inherit;
	font: 100%;
}
pre, code, kbd, samp,tt {
	font-family: monospace;
	*font-size: 108%;
	line-height: 100%;
}

コメント

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。