$title:novels (sample)
目次
|
最新
|
前の頁
|
次の頁
No.16:novels
サンプル 16:novels
文章があればいいという読みもの主体にしてみました。まあ日付はリストなどには表示されているので、おまけ程度。
注意
もともとスマホやタブレットから自分の日記を読んだりチェックしたりするために作っていたので、気が向いたら更新するくらいです。「豊富なスキンを取り揃えてあります」とか「リクエストがあれば、お望みのスキンを作ります」みたいな配布メインのサイトでもないから、期待はしないで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" /> <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet"> <style type="text/css"> <!-- body { color: #333; font-size: 100%; line-height: 150%; background: #FFF; padding: 0; margin: 0;} .wf-hannari { font-family: "Hannari"; } #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: #FFFDF9; padding: 0; margin: 0 auto;} #box { 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: #333;} a:visited { text-decoration: none; color: #666;} a:hover { text-decoration: none; color: #0094C8;} #link { color: #666; text-align: center; font-size: 0.8em; letter-spacing: 0.2em; padding: 5px 10px; margin: 0;} #link a{ padding: 4px; margin: 0;} #list { font-family: "Hannari","游明朝","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","HGS明朝E","メイリオ","Meiryo,serif";} #list {width: 100%; color: #333; font-size: 1em; padding: .5em; -moz-box-sizing: border-box; box-sizing: border-box;} nobr { display: inline-block; color: #333; white-space: normal; word-wrap: break-word; padding: 0;} nobr a{display: block; margin:0;} nobr a:link {text-decoration: underline; color: #333;} nobr a:visited { text-decoration: none; color: #666;} nobr a:hover { text-decoration: none; color: #0094C8;} #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><!-- // header // --> <div id="list"> $mokuji </div><!--// div list 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>
copy
■日記のデザイン編集
<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" /> <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet"> <style type="text/css"> <!-- body { color: #333; font-size: 100%; line-height: 150%; background: #FFF; padding: 0; margin: 0;} .wf-hannari { font-family: "Hannari"; } #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: #FFFDF9; padding: 0; margin: 0 auto;} #box { 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: #333;} a:visited { text-decoration: none; color: #666;} a:hover { text-decoration: none; color: #0094C8;} #link { color: #666; text-align: center; font-size: 0.8em; letter-spacing: 0.2em; padding: 5px 10px; margin: 0;} #link a{ padding: 4px; margin: 0;} #content { font-family: "Hannari","游明朝","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","HGS明朝E","メイリオ","Meiryo,serif"; width: 100%; margin: 0;} .diary{ position: relative; } #box h3{ font-size: 1em; text-align: center; padding: 1.6em .5em; margin: 0;} h3[date]::before { display: block; content: attr(date) " "; position: absolute; left: 0px; top: 0px; min-width: 80px; background-color: #909; padding: 0; color: #FFF; font-size: 9px; font-weight: normal; opacity: 0; transition: all 980ms 0s ease; z-index: 2;} h3[date]:hover::before { left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%, -50%); min-width: 140px; border-radius: 10px; background: #DDD; padding: 8px; color: #333; font-size: 14px; opacity: 1; z-index: 1;} h3[date]::after { position: absolute; content: ''; border: 8px solid transparent; border-top: 8px solid #969; width: 0; height: 0; opacity: 0; transition: all 1200ms 0s ease; z-index: 1} h3[date]:hover::after { position: absolute; content: ''; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border: 10px solid transparent; border-top: 10px solid #DDD; opacity: 1; } .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>
copy
■日記のLOOP部分
<div class="diary"> <h3 date="$time">$daimei</h3> <div class="text"> $honbun </div> </div>
copy
マイエンピツのボタンをつける
■マイエンピツ
<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番号を書き換えてください