15:simple

No.15:simple

サンプル 15:simple

余計なことはせずに、そのままのシンプルさにしました。もしかしたら日付が表示されないブラウザがあるかも…。

注意

もともとスマホやタブレットから自分の日記を読んだりチェックしたりするために作っていたので、気が向いたら更新するくらいです。「豊富なスキンを取り揃えてあります」とか「リクエストがあれば、お望みのスキンを作ります」みたいな配布メインのサイトでもないから、期待はしないでw

「エンピツ」のEXタグとは?

EXデザイン編集で利用する日記のレイアウトを決める上で必要な特殊なタグです。例えば $timeタグを挿入するとそこに日記の日付が表示されます。 EXタグマニュアルもご参考ください。

EXデザイン編集用ソース

エンピツのEXタグマニュアルなどを参考にしながら、それぞれ該当ソースを貼って下さい。

■もくじページのデザイン編集

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=x-euc-jp">
<title>$title</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
<!--
body { color: #164A84; font-size: 100%; line-height: 150%; background: #FFF;
padding: 0; margin: 0;}

#wrapper { width: 100%; max-width: 640px; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); background-color: #FFF; padding: 6px; margin: 0 auto;}

#box { border: 1px solid #164A84; border-radius: 12px; padding: 0; margin: 0;}

#header {margin: 0;}

h2 { font-size: 1em; text-shadow: 1px 1px 1px #CCC; text-align: center; padding: 2.4em .5em ; margin: 0;}

a:link { text-decoration: none; color: #246;}
a:visited { text-decoration: none; color: #666;}
a:hover { text-decoration: none; color: #C96;}

#link { color: #666; font-size: 0.8em; letter-spacing: 0.2em; border-top: 1px solid #164A84; border-bottom: 1px solid #164A84; padding: 5px 10px; margin: 0;}
#link a{ padding: 4px; margin: 0;}
#content { width: 100%; margin: 0;}
/*.diary{ }*/

#list {width: 100%; color: #223; font-size: 1em; padding: .5em; -moz-box-sizing: border-box; box-sizing: border-box;}
nobr { display: inline-block; color: #246; white-space: normal; word-wrap: break-word; padding: 0;}
nobr a{display: block; margin:0;}
nobr a:link {text-decoration: underline; color: #246;} nobr a:visited { text-decoration: none; color: #666;}
nobr a:hover { text-decoration: none; color: #C96;}

#footer { color: #333; border-top: 1px solid #164A84; padding: 0; margin: 0;}

.footerlink { font-size: 0.8em; text-align: right; padding: 0 10px 10px 10px; margin: 0;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="box">
<div id="header">
<h2>$title</h2>
<div id="link">
	 <a href="../../usr$dir/$id/diary.html" title="top">トップ</a>
</div>
</div>
<div id="list">

$mokuji

</div>
<div id="footer">
<div class="footerlink">
<div>$name<exdel>｜<a href="$url">Site</a></exdel><exdel>｜<a href="$mail" title="mail">Mail</a></exdel></div>
<exdel>$vote</exdel>
$count $enpitu
</div>
</div>
</div>
</div>
</body>
</html>

■日記のデザイン編集

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=x-euc-jp">
<title>$title</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
<!--
body { color: #164A84; font-size: 100%; line-height: 150%; background: #FFF;
padding: 0; margin: 0;}

#wrapper { width: 100%; max-width: 640px; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); background-color: #FFF; padding: 6px; margin: 0 auto;}

#box { border: 1px solid #164A84; border-radius: 12px; padding: 0; margin: 0;}

#header {margin: 0;}

h2 { font-size: 1em; text-shadow: 1px 1px 1px #CCC; text-align: center; padding: 2.4em .5em ; margin: 0;}

a:link { text-decoration: none; color: #246;}
a:visited { text-decoration: none; color: #666;}
a:hover { text-decoration: none; color: #C96;}

#link { color: #666; font-size: 0.8em; letter-spacing: 0.2em; border-top: 1px solid #164A84; border-bottom: 1px solid #164A84; padding: 5px 10px; margin: 0;}
#link a{ padding: 4px; margin: 0;}
#content { width: 100%; margin: 0;}
/*.diary{ }*/

#box h3{ font-size: 1em; text-align: center; padding: .5em; margin-top: 1.4em;}

[date]::after { content: attr(date) " "; display: block; color:#689; font-size: .8em; font-weight: normal; text-align:center;}

.date { text-align: center; font-size: .8em; color: #808c8c; padding: 0; margin: 0;}

.text { color: #4c4c4c; line-height: 180%;  padding: 2em 1em; margin-bottom: 2em;}
.text a { text-decoration: underline; padding: 0.5em;}

#footer { color: #333; border-top: 1px solid #164A84; padding: 0; margin: 0;}

.footerlink { font-size: 0.8em; text-align: right; padding: 0 10px 10px 10px; margin: 0;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="box">
<div id="header">
<h2>$title</h2>
<div id="link">
 <a href="../../usr$dir/$id/" title="index">目次</a>
	 |<a href="../../usr$dir/$id/diary.html" title="top">最新</a>
	 <exdel>|<a href="$kako" title="past">前の頁</a></exdel>
	 <exdel>|<a href="$mirai" title="will">次の頁</a></exdel>
</div>
</div><!-- // header // -->
<div id="content">

$loop

</div><!--// div content end //-->
<div id="footer">
<div class="footerlink">
<div>$name<exdel>｜<a href="$url">Site</a></exdel><exdel>｜<a href="$mail" title="mail">Mail</a></exdel></div>
<exdel>$vote</exdel>
$count $enpitu
</div>
</div>
</div><!--// div box end //-->
</div><!--// div wrapper //-->
</body>
</html>

■日記のLOOP部分

<div class="diary">
<h3 date="$time">$daimei</h3>
<div class="text">
$honbun
</div>
</div>

マイエンピツのボタンをつける

■マイエンピツ

■マイエンピツ（ボタン）

※あなたのID番号を書き換えてください

$title：simple (sample)