09:osakana

サンプル 09:osakana

201X年0X月XX日(水)

サンプル 09:osakana

個人的に寝ながらスマホでネットしたりしますが、その時左手だけで操作してます。ちなみに自分のエンピツ個人用だったり…。自分の好きな色にして好きな位置にナビゲーションを置いた。アイコンにGoogle material icons を使用。

注意

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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>$title</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<style type="text/css">
<!--
body { color: #999; font-size: 100%; line-height: 150%; background: #EEF; padding: 0; margin: 0;}

#header { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; background: #762034; border: 3px solid #FFF; padding: 0; margin: 0;}

h2 { font-size: 1.4em; color: #F0F0F0; text-align: center; text-shadow: 1px 1px 2px #888; padding: 1.5em .5em; margin: 0;}

a:link{ color: #699;}
a:visited { text-decoration: none; color: #7F868C;}
a:hover { text-decoration: none; color: #FC9;}

#wrapper { width: 100%; max-width: 640px; background: #666; padding: 0; margin: 0 auto;}

#count { font-size: 0.5em; color: #CCC; font-weight: normal; text-align: right; border-bottom: 1px solid #333; padding: 2px; margin: 0;}
#count img { width: 30px; opacity: 0.5;}

#box { display: grid; grid-template-columns: 48px 1fr;  padding: 0; margin: 0;}

#link { grid-column: 1; grid-row: 1; background: #762034;}

@supports (position: sticky) or (position: -webkit-sticky){ #nav-left { position: -webkit-sticky;  position: sticky; top: 0;}}

#link .nav{width: 48px; height: 48px;}
#link .nav a{display: inline-block; text-decoration: none;}
@supports (position: sticky) or (position: -webkit-sticky){ #link .nav a{ padding: 10px 4px;}}
#link a:link{ color: #999; text-align: center; background: #762034; transition: all 360ms 0s ease;}
#link a:hover{ background: #D7003A;}

#list { grid-column: 2; grid-row: 1; width: 100%; color: #666; 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: #478384;} nobr a:visited { text-decoration: none; color: #666;}
nobr a:hover { text-decoration: none; color: #99C;}

.md-light { color: rgba(255, 255, 255, 1); font-size: 36px;}

#footer { width: 100%; color: #999; background: #336;
padding: 0; margin: 0;}
#footer a{color:#FFF;}

.footerlink { font-size: 0.8em; text-align: right; padding: 4px 10px 10px 10px; margin: 0;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>$title</h2>
</div><!-- // header // -->
<div id="count">$count</div>
<div id="box">
<div id="link">
<div id="nav-left">
   <span class="nav"><a href="../../usr$dir/$id/" title="index" class="list md-light"></a></span>
	 <span class="nav"><a href="../../usr$dir/$id/diary.html" title="top" class="first_page md-light"></a></span>
	 <span class="nav"><exdel><a href="$kako" title="past" class="arrow_back md-light"></a></exdel></span>
	 <span class="nav"><exdel><a href="$mirai" title="will" class="arrow_forward md-light"></a></exdel></span>
  <span class="nav"><exdel><a href="$url" title="home" class="home md-light"></a></exdel></span>
   <span class="nav"><exdel><a href="$mail" title="mail" class="mail md-light"></a></exdel></span>
</div>
</div>

<div id="list">

$mokuji

</div><!-- list -->
</div><!-- box -->

<div id="footer">
<div class="footerlink">
<div>$name</div>
<exdel>$vote</exdel> $enpitu
</div>
</div>

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

■日記のデザイン編集

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=x-euc-jp">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>$title</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<style type="text/css">
<!--
body { color: #999; font-size: 100%; line-height: 150%; background: #EEF; padding: 0; margin: 0;}

#header { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; background: #762034; border: 3px solid #FFF; padding: 0; margin: 0;}

h2 { font-size: 1.4em; color: #F0F0F0; text-align: center; text-shadow: 1px 1px 2px #888; padding: 1.5em .5em; margin: 0;}

a:link{ color: #699;}
a:visited { text-decoration: none; color: #7F868C;}
a:hover { text-decoration: none; color: #FC9;}

#wrapper { width: 100%; max-width: 640px; background: #666; padding: 0; margin: 0 auto;}

#count { font-size: 0.5em; color: #CCC; font-weight: normal; text-align: right; border-bottom: 1px solid #333; padding: 2px; margin: 0;}
#count img { width: 30px; opacity: 0.5;}

#box { display: grid; grid-template-columns: 48px 1fr;  padding: 0; margin: 0;}

@supports (position: sticky) or (position: -webkit-sticky){ #nav-left { position: -webkit-sticky;  position: sticky; top: 0;}}
#nav-left{ position: -webkit-sticky; position: sticky; top: 0;}

#link .nav{width: 48px; height: 48px;}
#link .nav a{display: inline-block; text-decoration: none;}
@supports (position: sticky) or (position: -webkit-sticky){ #link .nav a{ padding: 10px 4px;}}
#link a:link{ color: #999; text-align: center; background: #762034; transition: all 360ms 0s ease;}
#link a:hover{ background: #D7003A;}
.list:before{font-family: 'Material Icons'; content: "\e896"; color: #FFF;}
.first_page:before{font-family: 'Material Icons'; content: "\e5dc"; color: #FFF;}
.arrow_back:before{font-family: 'Material Icons'; content: "\e5c4"; color: #FFF;}
.arrow_forward:before{font-family: 'Material Icons'; content: "\e5c8"; color: #FFF;}
.home:before{font-family: 'Material Icons'; content: "\e88a"; color: #FFF;}
.mail:before{font-family: 'Material Icons'; content: "\e158"; color: #FFF;}

#content { grid-column: 2; grid-row: 1; background: #FFF;}

.diary{ background: #FFF; padding: 0; margin: 0;}

#content h3{ font-size: 1em; color: #FFF; background: #336; padding: 1em .5em; margin: 0;}

.date { text-align: right; font-size: small; font-weight: normal; color: #965042; padding: 0 1em; margin: 0;}

.text { color: #333631; line-height: 180%; padding: .5em 1em 1em 1em; margin: 0;}

.md-light { color: rgba(255, 255, 255, 1); font-size: 36px;}

#footer { width: 100%; color: #CCC; background: #336;
padding: 0; margin: 0;}
#footer a{color:#FFF;}

.footerlink { font-size: 0.8em; text-align: right; padding: 4px 10px 10px 10px; margin: 0;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>$title</h2>
</div><!-- // header // -->
<div id="count">$count</div>
<div id="box">
<div id="link">
<div id="nav-left">
   <span class="nav"><a href="../../usr$dir/$id/" title="index" class="list md-light"></a></span>
	 <span class="nav"><a href="../../usr$dir/$id/diary.html" title="top" class="first_page md-light"></a></span>
	 <span class="nav"><exdel><a href="$kako" title="past" class="arrow_back md-light"></a></exdel></span>
	 <span class="nav"><exdel><a href="$mirai" title="will" class="arrow_forward md-light"></a></exdel></span>
  <span class="nav"><exdel><a href="$url" title="home" class="home md-light"></a></exdel></span>
   <span class="nav"><exdel><a href="$mail" title="mail" class="mail md-light"></a></exdel></span>
</div>
</div>

<div id="content">

$loop

</div><!-- content -->
</div><!-- box -->

<div id="footer">
<div class="footerlink">
<div>$name</div>
<exdel>$vote</exdel> $enpitu
</div>
</div>

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

■日記のLOOP部分

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

$title：osakana(sample)

サンプル 09:osakana

注意

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

EXデザイン編集用ソース

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

■日記のデザイン編集

■日記のLOOP部分

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

■マイエンピツ

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