$count
$title:phone(sample)
サンプル 11-2:phone2
201X年0X月XX日(水)
サンプル 11-2:phone2
シンプルにとにかく携帯端末メインにしてる日記専用という感じです。アイコンに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: #FFF; padding: 0; margin: 0;} a:link{ color: #CF747B;} a:visited { text-decoration: none; color: #7F868C;} a:hover { text-decoration: none; color: #FC9;} #header { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #EFE0E8; background: #762034; padding: 0; margin: 0;} h2 { font-size: 1.4em; color: #F0F0F0; text-align: center; text-shadow: 1px 1px 2px #888; padding: 1em .5em; margin: 0;} #wrapper { width: 100%; max-width: 640px; -moz-box-sizing: border-box; box-sizing: border-box; background: #EFE0E8; padding: 0; margin: 0 auto;} #count { font-size: 0.5em; color: #CCC; font-weight: normal; text-align: right; padding: 2px; margin: 0;} #count img { width: 30px; opacity: 0.5;} #link { display:flex; justify-content: space-between; background: #762034; border-bottom: 1px solid #70ACC9; padding: 0; margin: 0; z-index: 99;} @supports (position: sticky) or (position: -webkit-sticky){ #link { position: -webkit-sticky; position: sticky; top: 0;}} #link .nav{ display: inline-block; width: calc(100% / 4); padding: 4px 8px; margin: 0;} #link .nav a{display: inline-block; text-align: text-decoration: none; center; vertical-align: middle;} #link a:link{ color: #999; transition: all 360ms 0s ease;} #link a:hover{ background: #7BC496;} .first_page:before{font-family: 'Material Icons'; content: "\e5dc"; color: #CF747B;} #box { padding: 0; margin: 0;} #list {width: 100%; color: #666; font-size: 1em; background: #EFE0E8; 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: #834784;} nobr a:visited { text-decoration: none; color: #666;} nobr a:hover { text-decoration: none; color: #99C;} .md-light { color: rgba(239, 224, 232, 1); font-size: 36px; opacity: 0.8;} #footer { width: 100%; color: #CCC; background: #762034; padding: 0; margin: 0;} .footerlink { color:#EEE; font-size: 0.8em; text-align: right; padding: 4px 10px 10px 10px; margin: 0;} --> </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="count">$count</div> <h2>$title</h2> </div><!-- // header // --> <div id="link"> <span class="nav"><a href="../../usr$dir/$id/diary.html" title="top" class="first_page md-light"></a></span> <span class="nav"></span> <span class="nav"></span> <span class="nav"></span> </div> <div id="box"> <div id="list"> $mokuji </div><!-- list --> </div><!-- box --> <div id="footer"> <div class="footerlink"> <div>$name<exdel>|<a href="$url">Site</a></exdel></div> <exdel>$vote</exdel> $enpitu </div> </div> </div><!-- wrapper --> </body> </html>
copy
■日記のデザイン編集
<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: #FFF; padding: 0; margin: 0;} a:link{ color: #CF747B;} a:visited { text-decoration: none; color: #7F868C;} a:hover { text-decoration: none; color: #FC9;} #header { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #EFE0E8; background: #762034; padding: 0; margin: 0;} h2 { font-size: 1.4em; color: #F0F0F0; text-align: center; text-shadow: 1px 1px 2px #888; padding: 1em .5em; margin: 0;} #wrapper { width: 100%; max-width: 640px; -moz-box-sizing: border-box; box-sizing: border-box; background: #EFE0E8; padding: 0; margin: 0 auto;} #count { font-size: 0.5em; color: #CCC; font-weight: normal; text-align: right; padding: 2px; margin: 0;} #count img { width: 30px; opacity: 0.5;} #link { display:flex; justify-content: space-between; background: #762034; border-bottom: 1px solid #70ACC9; padding: 0; margin: 0; z-index: 99;} @supports (position: sticky) or (position: -webkit-sticky){ #link { position: -webkit-sticky; position: sticky; top: 0;}} #link .nav{ display: inline-block; width: calc(100% / 4); padding: 4px 8px; margin: 0;} #link .nav a{display: inline-block; text-align: center; text-decoration: none; vertical-align: middle;} #link a:link{ color: #999; transition: all 360ms 0s ease;} #link a:hover{ background: #7BC496;} .list:before{font-family: 'Material Icons'; content: "\e896"; color: #CF747B;} .first_page:before{font-family: 'Material Icons'; content: "\e5dc"; color: #CF747B;} .arrow_back:before{font-family: 'Material Icons'; content: "\e5c4"; color: #CF747B;} .arrow_forward:before{font-family: 'Material Icons'; content: "\e5c8"; color: #CF747B;} #box { padding: 0; margin: 0;} #content { background: #EFE0E8;} .diary{ padding: 0; margin: 0 0 4em 0;} #content h3{ font-size: 1em; color: #CF747B; padding: 1em .5em; margin: 0;} #content h3:before { font-family: 'Material Icons'; content: "\e86c"; font-size: 24px; color: #DE8397; vertical-align: middle; padding-right: 6px;} .date { text-align: right; font-size: .8em; font-weight: normal; color: #666; padding: 0 1em; margin: 0;} .text { color: #333631; line-height: 180%; padding: .5em 1em 1em 1em; margin: 0;} .md-light { color: rgba(239, 224, 232, 1); font-size: 36px; opacity: 0.8;} #footer { width: 100%; color: #CCC; background: #762034; padding: 0; margin: 0;} .footerlink { color:#EEE; font-size: 0.8em; text-align: right; padding: 4px 10px 10px 10px; margin: 0;} --> </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="count">$count</div> <h2>$title</h2> </div><!-- // header // --> <div id="link"> <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> </div> <div id="box"> <div id="content"> $loop </div><!-- content --> </div><!-- box --> <div id="footer"> <div class="footerlink"> <div>$name<exdel>|<a href="$url">Site</a></exdel></div> <exdel>$vote</exdel> $enpitu </div> </div> </div><!-- wrapper --> </body> </html>
copy
■日記のLOOP部分
<div class="diary"> <h3>$daimei</h3> <div class="date">$time</div> <div class="text">$honbun</div> </div>
copy
マイエンピツのボタンをつける
201X年0X月XX日(水)
■マイエンピツ
<a href="http://www.enpitu.ne.jp/tool/myadd?あなたのID番号">マイエンピツに追加</a>
■マイエンピツ(ボタン)
<form action="http://www.enpitu.ne.jp/tool/myadd" method="POST" target="add"> <input type="submit" name="あなたのID番号" value="My追加" onclick='subWin = window.open("","add","scrollbars=1,resizable=1,width=240,height=200,toolbar=0,location=0,directories=0,menubar=0")'> </form>
※あなたのID番号を書き換えてください