02:black

No.02:black

2018年06月16日(土)

サンプル 02:black

とにかく黒です。

注意

201X年0X月XX日(土)

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

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

201X年0X月XX日(火)

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

EXデザイン編集用ソース

201X年0X月XX日(土)

エンピツの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: #eee; font-size: 100%; line-height: 150%; background: #333; padding: 0; margin: 0;}

#wrapper { width: 100%; max-width: 640px; background-color: #2e2f30; box-shadow: 0 2px 6px rgba(76, 108, 179, .15); margin: 0 auto;}

#header { width: 100%; max-width: 600px; background: -moz-linear-gradient(top,#5c5f6c 0%,#2e2f30); background: -webkit-gradient(linear, left top, left bottom, from(#5c5f6c), to(#2e2f30)); margin: 0;}

h2 { font-size: 1.8em; color: #ccc; text-align: right; text-shadow: 1px 1px 1px #333; padding: 10px; margin: 0;}

#desc { color: #acb8c3; font-size: 0.8em; text-align: right; padding: 0 10px 60px 10px; margin: 0;}

a:link { text-decoration: none; color: #5383c3;}a:visited { text-decoration: none; color: #7f868c;}
a:hover { text-decoration: none; color: #FC9;}

#count { font-size: 0.5em; color: #4A8C99; font-weight: normal; text-align: right; border-bottom: 1px solid #394cc7; padding: 5px; margin: 0;}

#link { font-size: 0.8em; background: #2e2f30; border-top: 1px solid #556; padding: 0; margin: 0;}
#link ul { background: #2e2f30; padding: 0; margin: 0;}
#link li { display: inline; list-style: none; padding: 0; margin: 0;}
#link a { float: left; color: #999; text-decoration: none; border-right: 1px solid #556; padding: 8px 26px; margin: 0;}
#link a:link { color: #cce;}
#link a:hover { color: #394C87; background: #99D0E0;}

#content_top { clear: left; color: #999; font-size: 0.8em; text-align: center; background: #2e2f30; border-top: 1px solid #556; padding: 1em .5em 4em .5em; margin: 0;}

#box { clear:both;  width: 100%; background: #333; padding: 0; margin: 0;}

#content { width: 100%; background-color: #222; padding: 0; margin: 0 auto;}

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

#footer { width: 100%; color: #bbb; background: #333; padding: 0; margin: 0 auto;}

.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">
	<ul>	
	 <li><a href="../../usr$dir/$id/diary.html" title="top"> Top </a></li>
	 <exdel><li><a href="$url">Site</a></li></exdel>
	 <exdel><li><a href="$mail" title="mail">Mail</a></li></exdel>
	</ul>
</div>
</div><!-- // header // -->
<div id="box">
<div id="content">
<div id="content_top">
{{-- 短い文章などあればお書き下さい --}}
</div>

<div id="list">
$mokuji
</div>

</div><!--// div content end //-->
</div><!--// div box end //-->
<div id="footer">
<div class="footerlink">
$name
</div>
<div class="footerlink">
$count $enpitu
</div>
</div><!--// footer //-->
</div><!--// div wrapper //-->
</body>
</html>

■日記のデザイン編集

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

#wrapper { width: 100%; max-width: 640px; background-color: #2e2f30; box-shadow: 0 2px 6px rgba(76, 108, 179, .15); margin: 0 auto;}

#header { width: 100%; background: -moz-linear-gradient(top,#5c5f6c 0%,#2e2f30); background: -webkit-gradient(linear, left top, left bottom, from(#5c5f6c), to(#2e2f30)); margin: 0;}

h2 { font-size: 1.8em; color: #ccc; text-align: right; text-shadow: 1px 1px 1px #333; padding: 10px; margin: 0;}

#desc { color: #acb8c3; font-size: 0.8em; text-align: right; padding: 0 10px 60px 10px; margin: 0;}

a:link { text-decoration: none; color: #5383c3;}a:visited { text-decoration: none; color: #7f868c;}
a:hover { text-decoration: none; color: #FC9;}

#count { font-size: 0.5em; color: #4A8C99; font-weight: normal; text-align: right; border-bottom: 1px solid #394cc7; padding: 5px; margin: 0;}

#link { font-size: 0.8em; background: #2e2f30; border-top: 1px solid #556; padding: 0; margin: 0;}
#link ul { background: #2e2f30; padding: 0; margin: 0;}
#link li { display: inline; list-style: none; padding: 0; margin: 0;}
#link a { float: left; color: #999; text-decoration: none; border-right: 1px solid #556; padding: 8px 26px; margin: 0;}
#link a:link { color: #cce;}
#link a:hover { color: #394C87; background: #99D0E0;}

#content_top { clear: left; color: #999; font-size: 0.8em; text-align: center; background: #2e2f30; border-top: 1px solid #556; padding: 1em .5em 4em .5em; margin: 0;}

#box { clear:both;  width: 100%; background: #333; padding: 0; margin: 0;}

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

.diary{ padding: 0; margin: 0;}
.diary p{ color: #99c; font-weight: bold;}
.red{ color: #c66;}
.blue{ color: #66c;}

#box h3{ font-size: 1em; color: #ccc; text-shadow: 1px 1px 1px #556; background: -moz-linear-gradient(top,#5c5f6c 0%,#2e2f30); background: -webkit-gradient(linear, left top, left bottom, from(#5c5f6c), to(#2e2f30)); padding: .5em 1em; margin: 0;}

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

.text { color: #cfdce3; line-height: 180%; padding: 1em; margin: 0;}
.text2 { color: #9CC;}

#footer { width: 100%; color: #bbb; background: #333; 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">
	<ul>	
	 <li><a href="../../usr$dir/$id/" title="index">list</a></li>
	 <li><a href="../../usr$dir/$id/diary.html" title="top"> Top </a></li>
	 <exdel><li><a href="$kako" title="past">Past</a></li></exdel>
	 <exdel><li><a href="$mirai" title="will">Will</a></li></exdel>
	</ul>
</div>
</div><!-- // header // -->
<div id="box">
<div id="content">
<div id="content_top">
{{-- 短い文章などあればお書き下さい --}}
</div>

$loop

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

</div><!-- footer -->
</div><!-- div wrapper -->
</body>
</html>

■日記のLOOP部分

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

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

201X年0X月XX日(水)

■マイエンピツ

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

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

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

2018年06月20日(土)

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

ハカナコナクナ

201X年0X月XX日(土)

$title：black (sample)

No.02:black

注意

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

EXデザイン編集用ソース

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

■日記のデザイン編集

■日記のLOOP部分

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

■マイエンピツ

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

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

ハカナコナクナ

このサイト「ハカナコナクナ」のご案内。