00:enpitu C

2018年06月16日(土)

No.00:enpitu C タイプ風

サンプル 00:enpitu Cタイプ風

エンピツで提供されているデザインに近いようにしてみましたが、スマホなどからの縦表示だと長いタイトルだと苦しい。

201X年0X月XX日(土)

注意

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

201X年0X月XX日(火)

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

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

201X年0X月XX日(火)

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: #000; font-size: 100%; line-height: 150%; background: #E8ECEF; padding: 0; margin: 0;}

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

#header { margin: 0;}

h2 { color: #000; text-shadow: 1px 1px 1px #ccc; padding: 10px; margin: 0;}

a:link { text-decoration: none; color: #006F8E;}a:visited { text-decoration: none; color: #666;}
a:hover { text-decoration: none; color: #FC9;}

#link { color: #666; font-size: 0.8em; letter-spacing: 0.2em; border-bottom: 1px solid #BBB; padding: 5px 10px; margin: 0;}
#link a{ padding: 4px; margin: 0;}

#box { width: 100%; background: #E8ECEF; padding: 0; margin: 0;}

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

#footer { color: #333; background: #efefef; 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="header">
<h2>$title</h2>
<div id="link">
 <a href="../../usr$dir/$id/diary.html" title="top">Top</a>
</div>
</div>
<div id="box">
<div id="list">

$mokuji

</div>
</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>
</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: #000; font-size: 100%; line-height: 150%; background: #E8ECEF; padding: 0; margin: 0;}

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

#header { margin: 0;}

h2 { color: #000; text-shadow: 1px 1px 1px #ccc; padding: 10px; margin: 0;}

#desc { color: #666; font-size: 0.8em; padding: 0 10px; margin: 0 0 60px 0;}

a:link { text-decoration: none; color: #006F8E;}
a:visited { text-decoration: none; color: #666;}
a:hover { text-decoration: none; color: #FC9;}

#link { color: #666; font-size: 0.8em; letter-spacing: 0.2em; border-bottom: 1px solid #BBB; padding: 5px 10px; margin: 0;}
#link a{ padding: 4px; margin: 0;}

#box { width: 100%; background: #E8ECEF; padding: 0; margin: 0;}

#content { width: 100%; background-color: #FFF; margin: 0;}

.diary{ border-bottom: 2px dotted #CCC;  padding: 1em; margin: 0;}
.diary p{ color: #223; font-weight: bold;}

.title { background: #B8E4F1; border: 1px solid #B8E4F1; padding: 0 margin: 0;}

.date { display: inline-block; font-size: .8em; font-weight: bold; color: #FFF; background-color: #006F8E; padding: 4px 6px; margin: 0;}

#box h3{ display: inline-block; font-size: .8em; color: #333; background: #B8E4F1; padding: 4px 6px; margin: 0;}

.text { color: #4C4C4C; line-height: 180%; padding: 0; margin: 2em 0;}

#footer { color: #333; background: #efefef; 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="header">
<h2>$title</h2>
<div id="desc">{{-- 副題・日記の概要などの文 --}}</div>
<div id="link">
 <a href="../../usr$dir/$id/" title="index">Index</a>
	 |<a href="../../usr$dir/$id/diary.html" title="top">Top</a>
	 <exdel>|<a href="$kako" title="past">Past</a></exdel>
	 <exdel>|<a href="$mirai" title="will">Will</a></exdel>
</div>
</div><!-- // header // -->
<div id="box">
<div id="content">

$loop

</div><!--// div content end //-->
</div><!--// div box 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 wrapper //-->
</body>
</html>

■日記のLOOP部分

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

201X年0X月XX日(火)

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

■マイエンピツ

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

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

2018年06月20日(土)

またエンピツ使う事にしたから

今更、しばらく放置していたエンピツのデザインをリニューアルするというのもなんだか変な感じだが、これもずっとエンピツが続いているからこその話。エンピツより後発の日記やブログを利用していた事もあったが、いくつもサービス終了の告知を読むことになったりして、その度に引っ越し先を探したり苦労した記憶がある。

$title：enpitu C (sample)

No.00:enpitu C タイプ風

注意

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

EXデザイン編集用ソース

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

■日記のデザイン編集

■日記のLOOP部分

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

■マイエンピツ

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

またエンピツ使う事にしたから

■「ハカナコナクナ」のご案内。