表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


テンプレートを作ってみる【メモ11】

幅640pxの画像を記事に挿入してみる
640px
<img src="http://img-cdn.jg.jugem.jp/127/1958749/20120608_2382161.png" alt="640px" class="pict" height="20" width="640">
読みにくい場合はこちらでhttp://jugemtemplate.jugem.jp/?tid=1&eid=37
※このテンプレートでこの記事を表示:http://jugemtemplate.jugem.jp/?tid=8&eid=37
※このテンプレートを表示:http://jugemtemplate.jugem.jp/?tid=8
続きを読む >>

テンプレートを作ってみる【メモ10】

ヘッダーを記事の幅に合わせてサイドバーを上げる

<!-- header -->~<!-- /header -->を<div id="main">の下に移動
<!-- main -->
<div id="main"><!--この下に移動-->
<!-- header -->
<div id="header">
<!-- BEGIN title -->
<div>{blog_name}</div>
<!-- END title -->
</div>
<!-- /header -->
<!-- BEGIN entry -->
headerの幅を記事幅に合わせる
#header {
width:700px;/*記事の幅に合わせる*/
height:200px;/*高さの設定*/
background-color:#cccccc;
margin:0;
padding:0 0 0 0;
text-align:left;
}
読みにくい場合はこちらでhttp://jugemtemplate.jugem.jp/?tid=1&eid=36
※このテンプレートでこの記事を表示:http://jugemtemplate.jugem.jp/?tid=8&eid=36
※このテンプレートを表示:http://jugemtemplate.jugem.jp/?tid=8

テンプレートを作ってみる【メモ09】

まだ必要な独自タグもありますが、ブログの幅についても考えておく必要があると思います。
記事に写真をメインに掲載したい場合、記事に掲載する写真の幅は何pxがいいのか?サイドバーに表示させる項目に最適な幅は何px必要なのか等。テンプレートによっては写真掲載用にサイドバーがプルダウン式になったタイプもあります。
今回はシンプルに「2カラム」「右サイドバー」「記事に掲載する写真幅は640px」等を決まりとしてブログの幅を作っていこうかと思います。ヘッダー部分はページ幅まで必要なさそうなので幅を記事幅と同じ幅に設定してサイドバーがページ上から始まるように設定してみたいと思います。
※より大きな画像を表示させたい場合はLightbox等を使って表示することにします。

読みにくい場合はこちらでhttp://jugemtemplate.jugem.jp/?tid=1&eid=35
※この記事用:http://jugemtemplate.jugem.jp/?tid=8&eid=35
※この記事用:http://jugemtemplate.jugem.jp/?tid=8

テンプレートを作ってみる【メモ08】

ヘッダーより下の部分、記事の部分・サイドバー・フッターの部分を設定してみます
<!-- content -->
<div id="content">
<!-- main -->
<div id="main">
…中略…
<!-- side -->
<div id="side">
<div>{ad}</div>
</div><!-- END id="side" -->
</div><!-- END id="content" -->
<!-- footer -->
<div id="footer">
{copyright}
</div><!-- END id="footer" -->
</div><!-- END id="wrapper" -->
#main {
float:left;
width:700px;
background-color:#ff6600;
}
#side {
float:left;
width:200px;
background-color:#666666;
}
body > #side{height:auto;}
#footer {
clear:left;
background-color:#cccccc;
}
※レイアウト確認用に背景色(background-color)を設定しています

読みにくい場合はこちらでhttp://jugemtemplate.jugem.jp/?tid=1&eid=34
※この記事用:http://jugemtemplate.jugem.jp/?tid=8&eid=34
※この記事用:http://jugemtemplate.jugem.jp/?tid=8

テンプレートを作ってみる【メモ06】

ブラウザに表示されるブログの位置・幅等を設定してみました
<body>
<!-- wrapper -->
<div id="wrapper">
~
</div><!-- END id="wrapper" -->
</body>
#wrapper {
width:900px; /*幅*/
background-color:#f5f8ff; /*背景色*/
margin:0px auto; /*中心合わせ*/
padding:0 0 0 0;
text-align:left; /*文字位置*/
}
読みにくい場合はこちらでhttp://jugemtemplate.jugem.jp/?tid=1&eid=32
※この記事用:http://jugemtemplate.jugem.jp/?tid=8&eid=32

テンプレートを作ってみる【メモ05】

CSSでhtml・body要素を設定してみました
/* ページ全体のテキスト色 */
html {color:#000000;}

/* ページ全体 */
body {
width:100%;
text-align:center;
font-size: 12px;
font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif;
}
読みにくい場合はこちらでhttp://jugemtemplate.jugem.jp/?tid=1&eid=31
※この記事用:http://jugemtemplate.jugem.jp/?tid=8&eid=31

テンプレートを作ってみる【メモ04】

<!-- BEGIN title -->~<!-- END entry -->独自ブロックの下に
  • 関連する記事:<!-- BEGIN related_entry -->~<!-- END related_entry -->
  • コメント:<!-- BEGIN comment -->~<!-- END comment -->
  • トラックバック:<!-- BEGIN trackback -->~<!-- END trackback -->
  • プロフィール:<!-- BEGIN profile_area --> 〜 <!-- END profile_area -->
などの独自タグを追記してみる
<!-- BEGIN related_entry -->
<div>{related_entry_list}</div>
<!-- END related_entry -->

<!-- BEGIN comment -->
<div>{comment_description}</div>
<div>{comment_name}</div>
<div>{comment_time}</div>
<!-- END comment -->

<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
<label for="name">name:</label>
<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" />
<label for="email">email:</label>
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" />
<label for="url">url:</label>
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" />       
<label for="description">comments:</label>
<textarea tabindex="4" id="description" name="description" rows="5"></textarea>                   
<input tabindex="5" type="submit" value="コメント送信"  onclick="javascript:setval();" />&nbsp;&nbsp;<input type="checkbox" name="set_cookie" value="1" id="set_cookie">&nbsp;<label for="set_cookie">入力情報を登録しますか?</label>
</form>

<input type="text" value="{trackback_url}" />
<!-- BEGIN trackback -->
<div>{trackback_title}</div>
<div>{trackback_excerpt}</div>
<div>{trackback_blog_name}</div>
<div>{trackback_time}</div>
<!-- END trackback -->
読みにくい場合はこちらでhttp://jugemtemplate.jugem.jp/?tid=1&eid=30
※この記事用:http://jugemtemplate.jugem.jp/?tid=8&eid=30

テンプレートを作ってみる【メモ03】

独自タグ{entry_date}を追記して投稿の日付けを表示しました
独自タグ{entry_sequel}を追記して記事の続きを表示しました
<div>~</div>で各独自タグを囲んでブロック要素としました
<body>
<!-- BEGIN title -->
<div>{blog_name}</div>
<!-- END title -->
<!-- BEGIN entry -->
<div>{entry_title}</div>
<div>{entry_date}</div>
<div>{entry_description}</div>
<div>{entry_sequel}</div>
{trackback_auto_discovery}
<!-- END entry -->
<div>{ad}</div>
</body>
読みにくい場合はこちらでhttp://jugemtemplate.jugem.jp/?tid=1&eid=29
※この記事用:http://jugemtemplate.jugem.jp/?tid=8&eid=29

テンプレートを作ってみる【メモ02】

<head>~</head>に独自タグ{site_title}を追記しました
<title>{site_title}</title>
<head>~</head>にRSSフィード用記述を追記しました
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" />
<link rel="alternate" type="application/atom+xml" href="{site_atom}" />
<head>~</head>にモバイル用のテンプレートの記述を追記しました
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
<body>~</body>にブログの名前を表示する独自タグ{blog_name}を追記しました
<!-- BEGIN title -->{blog_name}<!-- END title -->
<body>~</body>に投稿記事のタイトルを表示する独自タグ{entry_title_link}を追記しました
<body>~</body>にその記事のメタデータを表示する独自タグ{trackback_auto_discovery}を追記しました
<!-- BEGIN entry -->{entry_title_link}{entry_description}{trackback_auto_discovery}<!-- END entry -->
読みにくい場合はこちらで:http://jugemtemplate.jugem.jp/?tid=1&eid=28
※この記事用:http://jugemtemplate.jugem.jp/?tid=8&eid=28

テンプレートを作ってみる【メモ01】

ゼロからスタート:http://jugemtemplate.jugem.jp/?tid=8
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="{site_css}" type="text/css" />
</head>
<body>
<!-- BEGIN title --><!-- END title -->
<!-- BEGIN entry -->{entry_description}<!-- END entry -->
{ad}
</body>
</html>
CSS
@charset "EUC-JP";
* {margin:0px;padding:0px;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
a {text-decoration:underline;overflow:hidden;}
img {border:none;vertical-align:top;}
li {list-style-type:none;}
hr {display:none;clear:both;}
br.clear {clear:both;}
読みにくい場合はこちらで:http://jugemtemplate.jugem.jp/?tid=1&eid=27
※この記事用:http://jugemtemplate.jugem.jp/?tid=8&eid=27
続きを読む >>