プチwikiテンプレート

本サイトで使用している「プチwiki」デザインのテンプレートを配布しています。ALICE+にwikiのテンプレ配布機能が無いのでここでコピペしてください。

---

共通ヘッダー

<div data-role="page" data-theme="d"> <!-- NOSCRIPT --> <noscript> <div id="noscript">お使いのブラウザはJavaScriptが無効に設定されています。<br> 有効にしてご利用ください。</div> </noscript> <nav class="navbar navbar-default navbar-static-top" name="site_top" id="site_top"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> 土曜日のALICE<!--ここにはホームページ名の独自タグを--> </span> <div class="nav nav3"> <small><font color="#ffffff">サブタイトルなど</font></small> </div> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-xs-12">

共通フッター

</div> </div> </div> <div id="footer"> <div class="footer clearfix"> <p class="copyright"><i class="fa fa-copyright fa-fw"></i> #copyright# All rights reserved.</p> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> $('#loading-example-btn').click(function () { var btn = $(this) btn.button('loading') setTimeout(function () { btn.button('reset') }, 3000) }) </script>

トップページレイアウト

<style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;}</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <section> <h3><small class="text-blue">このwiki機能について</small></h3> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「トップページレイアウト」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <form method="get" action="/html/wiki/1/search"> <div class="form-inlines"> <select name="mode" class="form-select" id="InputSelect"> <option value="title">項目名</option> <option value="tag">タグ</option> <option value="aimai">あいまい</option> </select> <input type="text"size="18" name="keyword" value="" class="form-control"> <input value="検索" type="submit"> <input name="from" value="form" type="hidden"> </div> </form> <hr class="style-six"> <center>只今#item_num#件登録されてます</center><br> <table width="100%" bgcolor="#dddddd" align="center"> <tr> <td bgcolor="#dddddd" align="left"> <font color="#666666">最近登録された項目</font> </td><td bgcolor="#dddddd"> <div align="right"><a href="#list_more_url#" class="btn btn-success btn-xs">もっと見る</a></div> </td></tr> </table> <div class="list-group"> #newItemList# </div> <table width="100%" bgcolor="#dddddd" align="center"> <tr> <td bgcolor="#dddddd" align="left"> <font color="#666666">最近編集された項目</font> </td><td bgcolor="#dddddd"> <div align="right"><a href="#history_more_url#" class="btn btn-success btn-xs">もっと見る</a></div> </td> </tr> </table> <div class="list-group"> #historyItemList# </div> <table width="100%" bgcolor="#dddddd" align="center"> <tr> <td bgcolor="#dddddd" align="left"> <font color="#666666">最近コメントされた項目</font> </td><td bgcolor="#dddddd"> <div align="right"><a href="#newCom_more_url#" class="btn btn-success btn-xs">もっと見る</a></div> </td> </tr> </table> <div class="list-group"> #newComItemList# </div> <table width="100%" bgcolor="#dddddd" align="center"> <tr> <td bgcolor="#dddddd" align="left"> <font color="#666666">メニュー</font> </td> </tr> </table> <a href="#regist_url#" class="btn btn-primary btn-xs">新規登録</a> <a href="#trend_word_url#" class="btn btn-primary btn-xs">トレンドワード</a> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

項目登録画面レイアウト

<style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;} input[type="text"],textarea{height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;} input[type="text"]{display:inline-block;} textarea{display:block;width:100%;} input[type="text"]:focus,textarea:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}input[type="text"]::-moz-placeholder,textarea::-moz-placeholder{color:#999;opacity:1;}input[type="text"]:-ms-input-placeholder{color:#999;}input[type="text"]::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999;}input[type="text"]::-ms-expand,textarea::-ms-expand{background-color:transparent;border:0;}input[type="text"][disabled],input[type="text"][readonly],fieldset[disabled] input[type="text"],textarea[disabled],textarea[readonly],fieldset[disabled] textarea{background-color:#eee;opacity:1;}input[type="text"][disabled],fieldset[disabled] input[type="text"],textarea[disabled],fieldset[disabled] textarea{cursor:not-allowed;}textarea{height:auto;}</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <section> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「項目登録画面レイアウト」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <h2><small class="text-blue">項目登録</small></h2> <hr size="1" width="100%"> #formStart# #error# ◆項目名(後から変更不可)<br> #formItemName#<br> <br> ◆検索用タグ(必須、全角カナ、半角英数使用)<br> #formTag#<br> <br> ◆紹介文 <a href="#footer">▼使用可能タグ</a><br> #formBody1#<br> #formBody2#<br> #formBody3#<br> <br> ◆画像アップ<br> #formFileup#画像をアップする<br> ※フォームで画像のアップができない場合はチェックを入れると次の画面でメールアップロード出来ます。<br> ※紹介文に [img1] 〜 [img5] と表示させたい箇所に記述して下さい。 <br> ◆Youtube欄<br> #formYoutube1#<br> ※youtubeURLを入力した後、紹介文に [youtube1] と表示させたい箇所に記述をお願い致します。 <br> ◆ニコニコ動画欄<br> #formNiconico1#<br> ※ニコニコ動画URLを入力した後、紹介文に [niconico1] と表示させたい箇所に記述をお願い致します。 <br> ◆編集/削除パス<br> #formPass#<br> <br> #formSubmit_登録する# #formEnd# <hr size="1" width="100%"> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/wiki/1/" class="view">wikiトップへ</a>　 <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink" name="TAG" id="TAG"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

項目ページレイアウト

1. 現在の項目ページ

   <style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;}</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <ol class="breadcrumb"> <li><a href="./">wikiトップ</a></li> <li class="active">#item_name#</li> </ol> <section> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「項目ページレイアウト」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <table width="100%" bgcolor="#f5f5f5" align="center"> <tr> <td bgcolor="#f5f5f5" align="left"> <font color="#666666">#item_name#</font> </td> </tr> </table> <table width="100%" border="0" align="center" class="table table-striped table-condensed"> <tr> <td align="left"> 更新者</td><td>#update_name# </td></tr> <tr><td> コメント</td><td>たぶん<a href="#comment_url#">#comment_num#</a>件 </td></tr> <tr><td> 登録日</td><td>#reg_date# </td></tr> <tr><td> 更新日</td><td>#edit_date# </td></tr> <tr><td> 所要時間</td><td>約 #readtime# 分で読めます </td> </tr> </table> <table width="100%" bgcolor="#f5f5f5" align="center"> <tr> <td bgcolor="#f5f5f5" align="left"> <font color="#666666">タグ一覧</font> </td> </tr> </table> <div class="wikitag">#tag#</div> <table width="100%" bgcolor="#f5f5f5" align="center"> <tr> <td bgcolor="#f5f5f5" align="left"> <font color="#666666">紹介文</font> </td> </tr> </table> <div class="wikibody">#body#</div> <table width="100%" bgcolor="#f5f5f5" align="center"> <tr> <td bgcolor="#f5f5f5" align="left"> <font color="#666666">メニュー</font> </td> </tr> </table> <div class="list-group"> <mobile>■</mobile>#freeze_thaw(凍結する|解凍する)#<mobile><br></mobile> <mobile>■</mobile><a href="#item_edit_url#">項目編集</a><mobile><br></mobile> <mobile>■</mobile><a href="#change_log_url#">編集履歴</a><mobile><br></mobile> <mobile>■</mobile><a href="#item_report_url#">通報する</a><mobile><br></mobile> <mobile>■</mobile><a href="#item_del_url#">項目削除</a><mobile><br></mobile> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

2. 編集履歴の項目ページ

   <style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;}</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <ol class="breadcrumb"> <li><a href="./">wikiトップ</a></li> <li class="active">#item_name#</li> </ol> <section> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「項目ページレイアウト」の「編集履歴の項目ページ」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <table width="100%" bgcolor="#f5f5f5" align="center"> <tr> <td bgcolor="#f5f5f5" align="left"> <font color="#666666">#item_name#</font> </td> </tr> </table> <table width="100%" border="0" align="center" class="table table-striped table-condensed"> <tr> <td align="left"> 更新者</td><td>#update_name# </td></tr> <tr><td> 更新日</td><td>#edit_date# </td></tr> <tr><td> バージョンNo</td><td>#ver_no# </td> </tr> </table> <table width="100%" bgcolor="#f5f5f5" align="center"> <tr> <td bgcolor="#f5f5f5" align="left"> <font color="#666666">タグ一覧</font> </td> </tr> </table> <div class="wikitag">#tag#</div> <table width="100%" bgcolor="#f5f5f5" align="center"> <tr> <td bgcolor="#f5f5f5" align="left"> <font color="#666666">紹介文</font> </td> </tr> </table> <div class="wikibody">#body#</div> <table width="100%" bgcolor="#f5f5f5" align="center"> <tr> <td bgcolor="#f5f5f5" align="left"> <font color="#666666">メニュー</font> </td> </tr> </table> <div class="list-group"> <mobile>■</mobile><a href="#item_report_url#">このバージョンを通報</a><mobile><br></mobile> <mobile>■</mobile><a href="#item_del_url#">このバージョンを削除</a><mobile><br></mobile> <mobile>■</mobile><a href="#item_restore_url#">このバージョンに戻す</a><mobile><br></mobile> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/wiki/1/" class="view">wikiトップへ</a>　 <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

コメントページレイアウト

1. 上部

   <style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;}.list-group-item { position: relative; display: block; padding: 8px 15px; margin-bottom: -1px; background-color: #fff; border: 0px solid #ddd; }</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <ol class="breadcrumb"> <li><a href="../">wikiトップ</a></li> <li><a href="./">#item_name#</a></li> <li class="active">コメント一覧</li> </ol> <section> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「コメントページレイアウト」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <table width="100%" bgcolor="#dddddd" align="center"> <tr> <td bgcolor="#dddddd" align="left"> <font color="#666666">#item_name#</font> </td> </tr> </table> <br> 「#item_name#」へ寄せられたコメント一覧です。<br> <br> <hr size="1" width="100%">

2. 項目一覧

   <strong>#log_id#</strong> <nomb><i class="fa fa-user fa-fw"></i></nomb>#user_id#<nomb> </nomb><mobile>[</mobile><a href="#del_url#" class="label label-danger">削除</a><mobile>/</mobile><a href="#report_url#" class="label label-warning">通報</a><mobile>]</mobile><br> #comment# <div align="right"><i class="fa fa-clock-o fa-fw"></i><mobile>[</mobile>#write_date#<mobile>]</mobile></div> <hr size="1" width="100%">

3. 下部

   <mobile><br> <center> #prev_前_前はありません#｜#next_次_次はありません# </center> <br></mobile> <nomb><nav> <ul class="pager"> <li>#prev_前へ_<span>前へ</span>#</li><li>#next_次へ_<span>次へ</span>#</li> </ul> </nav></nomb> #formStart# #error# ▼コメント:<br> #formComment#<br> ▼削除パス:<br> #formPass#<br> <br> #formSubmit_書き込み# #formEnd# </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/wiki/1/" class="view">wikiトップへ</a>　 <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

検索ページレイアウト

1. 上部

   <style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;} input[type="text"],textarea{height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;} input[type="text"]{display:inline-block;} textarea{display:block;width:100%;} input[type="text"]:focus,textarea:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}input[type="text"]::-moz-placeholder,textarea::-moz-placeholder{color:#999;opacity:1;}input[type="text"]:-ms-input-placeholder{color:#999;}input[type="text"]::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999;}input[type="text"]::-ms-expand,textarea::-ms-expand{background-color:transparent;border:0;}input[type="text"][disabled],input[type="text"][readonly],fieldset[disabled] input[type="text"],textarea[disabled],textarea[readonly],fieldset[disabled] textarea{background-color:#eee;opacity:1;}input[type="text"][disabled],fieldset[disabled] input[type="text"],textarea[disabled],fieldset[disabled] textarea{cursor:not-allowed;}textarea{height:auto;}</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <ol class="breadcrumb"> <li><a href="./">wikiトップ</a></li> <li class="active">検索</li> </ol> <section> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「検索レイアウト」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="list-group">

2. 検索結果一覧

   <mobile>■</mobile><a href="#link_url#">#link_name#</a><mobile><br></mobile>

3. 下部

   </div> <mobile><br> <center> #prev_前へ_前へ#｜#next_次へ_次へ# </center> <br></mobile> <nomb><nav> <ul class="pager"> <li>#prev_前へ_<span>前へ</span>#</li><li>#next_次へ_<span>次へ</span>#</li> </ul> </nav></nomb> <div align="right">#jumpInput_移動#</div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/wiki/1/" class="view">wikiトップへ</a>　 <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

[最近登録された項目]レイアウト

1. 上部

   <style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;}.list-group-item { position: relative; display: block; padding: 8px 15px; margin-bottom: -1px; background-color: #fff; border: 0px solid #ddd; } input[type="text"],textarea{height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;} input[type="text"]{display:inline-block;} textarea{display:block;width:100%;} input[type="text"]:focus,textarea:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}input[type="text"]::-moz-placeholder,textarea::-moz-placeholder{color:#999;opacity:1;}input[type="text"]:-ms-input-placeholder{color:#999;}input[type="text"]::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999;}input[type="text"]::-ms-expand,textarea::-ms-expand{background-color:transparent;border:0;}input[type="text"][disabled],input[type="text"][readonly],fieldset[disabled] input[type="text"],textarea[disabled],textarea[readonly],fieldset[disabled] textarea{background-color:#eee;opacity:1;}input[type="text"][disabled],fieldset[disabled] input[type="text"],textarea[disabled],fieldset[disabled] textarea{cursor:not-allowed;}textarea{height:auto;}</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <ol class="breadcrumb"> <li><a href="./">wikiトップ</a></li> <li class="active">項目一覧</li> </ol> <section> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「[最近登録された項目]レイアウト」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <h2><small class="text-blue">項目一覧</small></h2> <nomb><div class="list-group"></nomb>

2. 項目一覧

   <nomb></nomb><mobile><div>■</mobile><a href="#item_url#">#item_name#</a><mobile></div></mobile><nomb></nomb>

3. 下部

   <nomb></div></nomb><br> <mobile><center> #prev_前へ_前へ#｜#next_次へ_次へ# </center></mobile> <nomb><nav> <ul class="pager"> <li>#prev_前へ_<span>前へ</span>#</li><li>#next_次へ_<span>次へ</span>#</li> </ul> </nav></nomb> <div align="right">#jumpInput_移動#</div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/wiki/1/" class="view">wikiトップへ</a>　 <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

[最近編集された項目]レイアウト

1. 上部

   <style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;}</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <ol class="breadcrumb"> <li><a href="./">wikiトップ</a></li> <li class="active">項目一覧</li> </ol> <section> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「[最近編集された項目]レイアウト」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="list-group">

2. 項目一覧

   <mobile>■[</mobile><nomb><a href="#item_url#"><span class="label label-default"></nomb>#date_ago#前<nomb></span> </nomb><mobile>] <a href="#item_url#"></mobile>#item_name#</a><mobile><br></mobile>

3. 下部

   </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/wiki/1/" class="view">wikiトップへ</a>　 <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

[最近コメントされた項目]レイアウト

1. 上部

   <style>h2 small.text-blue{font-size:22px;}.col-xs-12 td{font-size:16px;padding:6px;}.form-control{display:inline-block;}</style> <h2><small class="text-blue"><i class="fa fa-wikipedia-w fa-fw"></i>#wiki_title#</small></h2> <ol class="breadcrumb"> <li><a href="./">wikiトップ</a></li> <li class="active">最近コメントされた項目</li> </ol> <section> <p>wiki機能を使ったデモページです。</p> <p>表示されているこのページはwiki管理編集画面の「[最近コメントされた項目]レイアウト」で編集したページです。</p> </section> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="list-group">

2. 項目一覧

   <mobile>■</mobile><a href="#item_bbs_url#">#item_name#</a><mobile><br></mobile>

3. 下部

   </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <hr class="style-six"> <div class="clearfix"> <div class="pull-left backtotop"> <a href="https://alicex.jp/html/wiki/1/" class="view">wikiトップへ</a>　 <a href="https://alicex.jp/html/" class="view">TOPページへ</a></div> <div class="pull-right toplink"><a href="#site_top"><i class="fa fa-chevron-circle-up fa-fw"></i></a></div> </div>

基本設定

初期状態のまま変更していない。

HEAD編集

初期状態のまま変更していない。

[スマホ用]CSS編集

.navbar-default{ color:#fff; background-color:#4cace4; border-color:#36a2e1; -webkit-box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .navbar-default .navbar-text{ color:#fff; } .navbar-default .navbar-brand{ color:#fff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus{ color:#fff; background-color:transparent; } .navbar-default .navbar-nav > li > a{ color:#fff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{ color:#fff; background-color:transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{ color:#fff; background-color:#e7e7e7; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus{ color:#fff; background-color:transparent; } .nav > li{ float:left; width:33.333%; margin:2px 6px; } .nav > li > a{ display:block; background-color:#36a2e1; border-radius:4px; text-align:center; } .navbar-default .navbar-toggle{ border-color:transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ background-color:transparent; } .navbar-default .navbar-toggle .icon-bar{ background-color:#fff; } h1, .h1, h2, .h2, h3, .h3{ margin-top:0px; margin-bottom:10px; } .jumbotron{ padding-top:10px; padding-bottom:20px; margin-bottom:30px; color:#2d3037; background-color:#f8f8f8; } .jumbotron h1, .jumbotron h1 small, .jumbotron .h1{ color:#36c3f3; } .jumbotron p, .jumbotron div{ margin-bottom:15px; font-size:18px; font-weight:200; } .jumbotron div:last-child{ margin-bottom:0px; } .jumbotron > hr{ border-top-color:#d5d5d5; } .container .jumbotron, .container-fluid .jumbotron{ padding-right:15px; padding-left:15px; border-radius:6px; } .jumbotron .container{ max-width:100%; } .btn{ -webkit-box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .btn-blue{ color:#fff; background-color:#4cace4; border-color:#46b8da; } .btn-blue:focus, .btn-blue.focus{ color:#fff; background-color:#4486f7; border-color:#4285f4; } .btn-blue:hover{ color:#fff; background-color:#4486f7; border-color:#269abc; } .btn-blue:active, .btn-blue.active, .open > .dropdown-toggle.btn-blue{ color:#fff; background-color:#4486f7; border-color:#269abc; } .btn-blue:active:hover, .btn-blue.active:hover, .open > .dropdown-toggle.btn-blue:hover, .btn-blue:active:focus, .btn-blue.active:focus, .open > .dropdown-toggle.btn-blue:focus, .btn-blue:active.focus, .btn-blue.active.focus, .open > .dropdown-toggle.btn-blue.focus{ color:#fff; background-color:#269abc; border-color:#4285f4; } .btn-blue:active, .btn-blue.active, .open > .dropdown-toggle.btn-blue{ background-image:none; } .btn-blue.disabled:hover, .btn-blue[disabled]:hover, fieldset[disabled] .btn-blue:hover, .btn-blue.disabled:focus, .btn-blue[disabled]:focus, fieldset[disabled] .btn-blue:focus, .btn-blue.disabled.focus, .btn-blue[disabled].focus, fieldset[disabled] .btn-blue.focus{ background-color:#4cace4; border-color:#46b8da; } .btn-blue .badge{ color:#4cace4; background-color:#fff; } .text-blue{ color:#4cace4; } .text-red{ color:#f00; } .accordion2 *{ margin:0;padding:0; } .accordion2{ min-width:300px; margin:0 auto; } .accordion2 .ac-content{ margin:0 0; } .accordion2 label{ display:block; color:#fff; background:#b0c4de; cursor:pointer; padding:10px 0 10px 10px; border-bottom:1px solid #fff; } .accordion2 label:hover, .accordion2 label:focus{ background:#9bb8de; } .accordion2 input{ display:none; } .accordion2 .ac2-cont{ transition:0.2s; -webkit-transition:all 1.5s; -moz-transition:all 1.5s; -ms-transition:all 1.5s; -o-transition:all 1.5s; transition:all 1.5s; height:0; overflow:hidden; background:#f1f2f3; padding:0; } .accordion2 input:checked + .ac2-cont{ height:auto; padding:0 0; } .accordion2 .ac2-cont .list-group .list-group-item{ width:50%; float:left; } .accordion2 h4{ color:#36c3f3; background:#f8f8f8; padding:6px 14px; } .accordion2 label,.accordion2 .list-group{ margin:0; } .accordion2 .list-group{ padding-left:0; margin-bottom:20px; } .accordion2 .list-group-item{ position:relative; display:block; padding:10px 15px; margin-bottom:-1px; background-color:#fff; border:1px solid #ddd; } .accordion2 .list-group-item:first-child{ border-top-left-radius:4px; border-top-right-radius:4px; } .accordion2 .list-group-item:last-child{ margin-bottom:0; border-bottom-right-radius:4px; border-bottom-left-radius:4px; } .accordion2 a.list-group-item, .accordion2 button.list-group-item{ color:#555; } .accordion2 a.list-group-item .list-group-item-heading, .accordion2 button.list-group-item .list-group-item-heading{ color:#333; } .accordion2 a.list-group-item:hover, .accordion2 button.list-group-item:hover, .accordion2 a.list-group-item:focus, .accordion2 button.list-group-item:focus{ color:#555; text-decoration:none; background-color:#f5f5f5; } .accordion2 button.list-group-item{ width:100%; text-align:left; } p.list-group-item-text{ font-size:13px; color:#666; } .toplink{ text-align:right; font-size:42px; margin-top:-22px; margin-right:4px; } .footer{ color:#fff; background-color:#4cace4; padding:20px 0; text-align:center; } .container .row .col-xs-12, .container .row .col-xs-12 ol, .container .row .col-xs-12 ol li, .container-fluid .navbar-header .nav{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } .container-fluid .navbar-header .nav2{ padding-top:6px; font-weight:bold; } .container-fluid .navbar-header .nav3{ padding-top:16px; font-weight:bold; } .container .row .col-xs-12 ol li, .container .row .col-xs-12 dl{ font-size:18px; border-bottom:1px solid #f1f2f3; padding:8px 0 8px 0px; } .label-blue{ background-color:#4cace4; display:inline; padding:.2em .6em .3em; font-size:90%; font-weight:normal; line-height:1; color:#fff; text-align:center; white-space:nowrap; vertical-align:baseline; border-radius:.25em; } input[type="text"],textarea{height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;} input[type="text"]{display:inline-block;} textarea{display:block;width:100%;} input[type="text"]:focus,textarea:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}input[type="text"]::-moz-placeholder,textarea::-moz-placeholder{color:#999;opacity:1;}input[type="text"]:-ms-input-placeholder{color:#999;}input[type="text"]::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999;}input[type="text"]::-ms-expand,textarea::-ms-expand{background-color:transparent;border:0;}input[type="text"][disabled],input[type="text"][readonly],fieldset[disabled] input[type="text"],textarea[disabled],textarea[readonly],fieldset[disabled] textarea{background-color:#eee;opacity:1;}input[type="text"][disabled],fieldset[disabled] input[type="text"],textarea[disabled],fieldset[disabled] textarea{cursor:not-allowed;}textarea{height:auto;} .copyright a{ color: #fff; } .nav2 h2 small{ display: inline-block; padding-top:15px; } .col-xs-12 ol, .col-xs-12 dl{ line-height:1.6; padding:0 0 0 26px; text-align:justify; } .col-xs-12 ol li, .col-xs-12 dl{ padding:8px 0; } .col-xs-12 dl dd{ padding:0 0 18px 20px; } select{ -webkit-appearance:none; border:1px solid #ccc; background:transparent; font-weight:bold; color:#444; text-shadow:none; background-image:-webkit-gradient(none); background-image:-moz-linear-gradient(none); -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-background-clip:padding-box; -moz-background-clip:padding-box; background-clip:padding-box; width:auto; height:32px; line-height:32px; font-size:14px; margin-right:4px; padding-left:auto; } input[type="submit"]{ color:#444; background:#eee; font-weight:bold; text-shadow:none; background-image:-webkit-gradient(none); background-image:-moz-linear-gradient(none); -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; border:1px solid #ccc; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-background-clip:padding-box; -moz-background-clip:padding-box; background-clip:padding-box; width:auto; height:32px; margin:7px auto; text-align:center; font-size:14px; } input[type="text"],input[type="email"],input[type="url"],input[type="number"]{ padding:5px; width:auto; height:32px; font-size:14px; margin-left:2px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .list-group{ margin-top:12px; } .list-group a{ position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .list-group a:first-child{ border-top-left-radius: 4px; border-top-right-radius: 4px; } .list-group a:last-child{ margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .list-group a, button.list-group a{ color: #555; } .list-group a:hover, button.list-group a:hover, .list-group a:focus, button.list-group a:focus{ color: #555; text-decoration: none; background-color: #f5f5f5; } .list-group a.active, .list-group a.active:hover, .list-group a.active:focus{ z-index: 2; color: #fff; background-color: #337ab7; border-color: #337ab7; } .wikitag,.wikibody{margin:6px 0 12px 0;} .wikitag a{color:#fff;background:#4cace4;padding:4px 6px;} .wikitag a:hover{color:#fff;background:#36a2e1;text-decoration:none;} table.table td{font-size:13px;} .breadcrumb{ padding: 4px 5px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } .breadcrumb > li{ font-size:13px; }

[PC用]CSS編集

.navbar-default{ color:#fff; background-color:#4cace4; border-color:#36a2e1; -webkit-box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .navbar-default .navbar-text{ color:#fff; } .navbar-default .navbar-brand{ color:#fff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus{ color:#fff; background-color:transparent; } .navbar-default .navbar-nav > li > a{ color:#fff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{ color:#fff; background-color:transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{ color:#fff; background-color:#e7e7e7; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus{ color:#fff; background-color:transparent; } .nav > li{ float:left; width:33.333%; margin:2px 6px; } .nav > li > a{ display:block; background-color:#36a2e1; border-radius:4px; text-align:center; } .navbar-default .navbar-toggle{ border-color:transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ background-color:transparent; } .navbar-default .navbar-toggle .icon-bar{ background-color:#fff; } h1, .h1, h2, .h2, h3, .h3{ margin-top:0px; margin-bottom:10px; } .jumbotron{ padding-top:10px; padding-bottom:20px; margin-bottom:30px; color:#2d3037; background-color:#f8f8f8; } .jumbotron h1, .jumbotron h1 small, .jumbotron .h1{ color:#36c3f3; } .jumbotron p, .jumbotron div{ margin-bottom:15px; font-size:18px; font-weight:200; } .jumbotron div:last-child{ margin-bottom:0px; } .jumbotron > hr{ border-top-color:#d5d5d5; } .container .jumbotron, .container-fluid .jumbotron{ padding-right:15px; padding-left:15px; border-radius:6px; } .jumbotron .container{ max-width:100%; } .btn{ -webkit-box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .btn-blue{ color:#fff; background-color:#4cace4; border-color:#46b8da; } .btn-blue:focus, .btn-blue.focus{ color:#fff; background-color:#4486f7; border-color:#4285f4; } .btn-blue:hover{ color:#fff; background-color:#4486f7; border-color:#269abc; } .btn-blue:active, .btn-blue.active, .open > .dropdown-toggle.btn-blue{ color:#fff; background-color:#4486f7; border-color:#269abc; } .btn-blue:active:hover, .btn-blue.active:hover, .open > .dropdown-toggle.btn-blue:hover, .btn-blue:active:focus, .btn-blue.active:focus, .open > .dropdown-toggle.btn-blue:focus, .btn-blue:active.focus, .btn-blue.active.focus, .open > .dropdown-toggle.btn-blue.focus{ color:#fff; background-color:#269abc; border-color:#4285f4; } .btn-blue:active, .btn-blue.active, .open > .dropdown-toggle.btn-blue{ background-image:none; } .btn-blue.disabled:hover, .btn-blue[disabled]:hover, fieldset[disabled] .btn-blue:hover, .btn-blue.disabled:focus, .btn-blue[disabled]:focus, fieldset[disabled] .btn-blue:focus, .btn-blue.disabled.focus, .btn-blue[disabled].focus, fieldset[disabled] .btn-blue.focus{ background-color:#4cace4; border-color:#46b8da; } .btn-blue .badge{ color:#4cace4; background-color:#fff; } .text-blue{ color:#4cace4; } .text-red{ color:#f00; } .accordion2 *{ margin:0;padding:0; } .accordion2{ min-width:300px; margin:0 auto; } .accordion2 .ac-content{ margin:0 0; } .accordion2 label{ display:block; color:#fff; background:#b0c4de; cursor:pointer; padding:10px 0 10px 10px; border-bottom:1px solid #fff; } .accordion2 label:hover, .accordion2 label:focus{ background:#9bb8de; } .accordion2 input{ display:none; } .accordion2 .ac2-cont{ transition:0.2s; -webkit-transition:all 1.5s; -moz-transition:all 1.5s; -ms-transition:all 1.5s; -o-transition:all 1.5s; transition:all 1.5s; height:0; overflow:hidden; background:#f1f2f3; padding:0; } .accordion2 input:checked + .ac2-cont{ height:auto; padding:0 0; } .accordion2 .ac2-cont .list-group .list-group-item{ width:50%; float:left; } .accordion2 h4{ color:#36c3f3; background:#f8f8f8; padding:6px 14px; } .accordion2 label,.accordion2 .list-group{ margin:0; } .accordion2 .list-group{ padding-left:0; margin-bottom:20px; } .accordion2 .list-group-item{ position:relative; display:block; padding:10px 15px; margin-bottom:-1px; background-color:#fff; border:1px solid #ddd; } .accordion2 .list-group-item:first-child{ border-top-left-radius:4px; border-top-right-radius:4px; } .accordion2 .list-group-item:last-child{ margin-bottom:0; border-bottom-right-radius:4px; border-bottom-left-radius:4px; } .accordion2 a.list-group-item, .accordion2 button.list-group-item{ color:#555; } .accordion2 a.list-group-item .list-group-item-heading, .accordion2 button.list-group-item .list-group-item-heading{ color:#333; } .accordion2 a.list-group-item:hover, .accordion2 button.list-group-item:hover, .accordion2 a.list-group-item:focus, .accordion2 button.list-group-item:focus{ color:#555; text-decoration:none; background-color:#f5f5f5; } .accordion2 button.list-group-item{ width:100%; text-align:left; } p.list-group-item-text{ font-size:13px; color:#666; } .toplink{ text-align:right; font-size:42px; margin-top:-22px; margin-right:4px; } .backtotop{ margin-left:4px; } .footer{ color:#fff; background-color:#4cace4; padding:20px 0; text-align:center; } .container .row .col-xs-12, .container .row .col-xs-12 ol, .container .row .col-xs-12 ol li, .container-fluid .navbar-header .nav{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } .container-fluid .navbar-header .nav2{ padding-top:6px; font-weight:bold; } .container-fluid .navbar-header .nav3{ padding-top:16px; font-weight:bold; } .container .row .col-xs-12 ol li, .container .row .col-xs-12 dl{ font-size:16px; border-bottom:1px solid #f1f2f3; padding:8px 0 8px 0px; } .label-blue{ background-color:#4cace4; display:inline; padding:.2em .6em .3em; font-size:90%; font-weight:normal; line-height:1; color:#fff; text-align:center; white-space:nowrap; vertical-align:baseline; border-radius:.25em; } .copyright a{ color:#fff; } .nav2 h2 small{ display:inline-block; padding-top:15px; } .col-xs-12 ol, .col-xs-12 dl{ line-height:1.6; padding:0 0 0 26px; text-align:justify; } .col-xs-12 ol li, .col-xs-12 dl{ padding:8px 0; } .col-xs-12 dl dd{ padding:0 0 10px 20px; } .lead{ font-size:16px; } .navbar-header{ display:block; content:" "; width:100%; } .list-group{ margin-top:12px; } .list-group a{ position:relative; display:block; padding:10px 15px; margin-bottom:-1px; background-color:#fff; border:1px solid #ddd; } .list-group a:first-child{ border-top-left-radius:4px; border-top-right-radius:4px; } .list-group a:last-child{ margin-bottom:0; border-bottom-right-radius:4px; border-bottom-left-radius:4px; } .list-group a, button.list-group a{ color:#555; } .list-group a:hover, button.list-group a:hover, .list-group a:focus, button.list-group a:focus{ color:#555; text-decoration:none; background-color:#f5f5f5; } .list-group a.active, .list-group a.active:hover, .list-group a.active:focus{ z-index:2; color:#fff; background-color:#337ab7; border-color:#337ab7; } .wikitag,.wikibody{margin:6px 0 12px 0;} .wikitag a{color:#fff;background:#4cace4;padding:4px 6px;} .wikitag a:hover{color:#fff;background:#36a2e1;text-decoration:none;} table.table td{font-size:13px;}

配色の設定

全て「トップページと同じ」に設定しています。

背景画像

初期状態のまま変更していない。

---