sirius レスポンシブテンプレートのAMP導入改変手順

 レスポンシブ構造にAMP追加?

シリウスで配布されるレスポンシブテンプレートをGoogleが推奨するモバイル読込み効果..
AMP(Accelerated Mobile Pagesという、Googleが推進しているモバイルページを高速に
表示させるための手法によって作成される構造に適合させる仕様をレスポンシブテンプレートへ
組み込んでみました。

 

現在の検証は以下...AMP構造として認証されています..

 

テスト日時: 2019/01/26、4:06
有効な AMP ページです
このページは、Google 検索結果の AMP 検索機能の対象です

 

 

現在までにデフォルト2カラムで構造替え完了..
シリウスAMP_HTML構造導入手順.カスタマイズ偏

 

また、ampstartで配布されるソースをシリウスに導入完了..
sirius_amp|シリウスへのAMP仕様導入..変更について

 

参照
https://www.ampstart.com/

 

 

導入に関しての説明

 

レスポンシブテンプレートの改変ですが、当サイトのトップページはシリウス機能のGナビ..
そしてカテゴリーPでは、外部導入のプルダウンタイプのナビで、二つの形態でご案内しますが
大変申し訳ないことですけど...レイアウト等はすでにあたしの勝手なセンス?でカスタマイズ済み..

 

ノンカスタムレイアウトはなんかいまいちで..どうにも作業意欲湧かず...

 

ですので、当ページ及びカテゴリーPのレイアウトでよければご利用ください..

 

ノンレスポンシブTPに関しては...当サイトの意味合いが理解できれば、相応にカスタマイズ
できると思います...

 

ここで申し訳ございません..説明が書き遅れております
なるべく早く追加しますので不足はご了承ください

 

ただし、意味が理解できる方はおすすめください..

 

仕様説明

 

最初に文字化け回避のためシリウス機能...サイトオプションで文字コードをutf-8に
設定してください..

 

 

ヘッダー

 

ヘッダーは使いません..見た目ヘッダーはですね...サイト背景なんですね
そして、スクロールに関しても固定化しており動きません...

 

高さ..縦サイズですが...好みにより調整可能です...

 

 

ここで申し訳ございません
以下ソースを張り替えればほとんど完了するのですが、過労で説明が追い付いておりません
以降,,詳細を含めます..お待ちください

 

<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title><% pageTitle %></title>
<link rel="canonical" href="<% permaLink %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

 

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<meta name="google-site-verification" content="z5J0jaWsvag9bGp32eC3YerR-INS9X3uGHyUIIJkI6M" />
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

 

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

 

 

<style amp-custom>

 

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption {
background: transparent;
border: 0;
font-size: 100%;
outline: 0;
vertical-align: baseline;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}

 

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
div, p, h1, h2, h3, h4, h5, h6 {
zoom: 1;
display: block;
text-align: left;
}
img {
border: 0;
}
@media screen and (max-width: 899px) {
img {
font-size: 0;
height: auto;
line-height: 0;
max-width: 100%;
vertical-align: top;
}
}
@media screen and (max-width: 640px) {
img {
float: none important;
}
}

 

:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table {
border-collapse: collapse;
border-spacing: 0;
}
input, select {
vertical-align: middle;
}
/*
==================================================
基本スタイル
==================================================
*/
body {

 

background-image: url(img/beauty-1319951_1920.jpg);
border-top: 4px solid #FF4E4E;
color: #333;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
background-attachment:fixed;
}
h1, h2, h3, h4, h5, h6, .title, dt {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif;
font-weight: 700;

 

}
.clear {
clear: both;
font-size: 1px;
line-height: 0;
}
/* リスト
==================================================
*/
ul {
margin: 0 10px;
padding: 10px 0;
}
ul li {
background-image: url(img/li.png);
background-position: 5px 8px;
background-repeat: no-repeat;
padding: 0 0 0 16px;
}
ol {
list-style-type: decimal;
margin: 0 10px;
padding: 10px 0 10px 25px;
}
/* リンク
==================================================
*/
a { color: #0066cc; }
a:hover {
color: #0066cc;
text-decoration: none;
}
a:hover img {
background: none important;
}
a img { background: none important; }
#main a:hover, #menu a:hover, #rmenu a:hover, #pagetop a:hover {
left: 1px;
position: relative;
top: 1px;
}
@media screen and (max-width: 640px) {
#main a:hover, #menu a:hover, #rmenu a:hover, #pagetop a:hover {
left: 0;
position: static;
top: 0;
}
}

 

/*
==================================================
全体
==================================================
*/

 

/* レイアウト
==================================================
*/
#wrapper {
overflow: hidden;
text-align: center;
}
#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: auto;
background-color: #FFF;
}
#layoutbox{
background-color: #FFF;
overflow: hidden;
padding: 5px 10px;

 

}

 

#siteNavi {
font-size: 15px;
margin-bottom: 10px;
}
@media screen and (max-width: 899px) {
#contents {
padding: 30px 10px 50px;
width: auto;
}
#layoutbox{
padding: 5px;
}
}
@media screen and (max-width: 640px) {
#contents {
padding: 15px 0 50px;
}
#layoutbox{
padding: 5px 0;
}
#siteNavi {
font-size: 13px;
margin-bottom: 5px;
padding: 0 10px;
}
}

 

/* ページ上部へ戻る
==================================================
*/
#pagetop {
bottom: -3px;
clear: both;
position: absolute;
right: 10px;
z-index: 5;
}
#pagetop a {
background-image: url(img/pagetop_button.png);
background-position: left top;
background-repeat: no-repeat;
display: block;
height: 28px;
overflow: hidden;
text-indent: -9999px;
width: 100px;
}
@media screen and (max-width: 899px) {
#pagetop {
right: 10px;
}
#pagetop a {
background-image: url(img/pagetop_button2@.png);
background-position: right top;
padding-right: 50px;
}
}
@media screen and (max-width: 640px) {
#pagetop a {
bottom: 0;
overflow: hidden;
right: 0;
width: 100%;
border-top: 3px solid #799eba;
}

 

#pagetop a {
background-image: url(img/pagetop_button_smp.png);
background-position: center center;
background-repeat: no-repeat;
background-color: #FF4E4E;
border: none;
font-size: 13px;
height: 40px;
line-height: 40px;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
}

 

 

#searchbox {
background-image: url(img/search_input.png);
background-position: right top;
background-repeat: no-repeat;
font-size: 12px;
left: auto;
height: 28px;
margin-left: 0;
position: absolute;
top: 2px;
width: 100%;
max-width: 900px;
}
#searchbox input {
background-color: transparent;
border: none;
cursor: pointer;
height: 24px;
overflow: hidden;
position: absolute;
right: 170px;
text-indent: -9999px;
top: 2px;
vertical-align: middle;
width: 28px;
}
#searchbox form {
margin: 0;
padding: 0;
position: relative;
}
#searchbox .skwd {
background-image: none;
border: 0 none;
cursor: auto;
font-size: 12px;
right: 6px;
line-height: 18px;
text-indent: 0;
width: 160px;
}

 

@media screen and (max-width: 640px) {
#searchbox {
background-color: #FF4E4E;
background-image: url(img/searchbutton.png);
background-position: 15px 5px;
background-repeat: no-repeat;
margin: 10px auto 5px;
padding: 0 15px;
height: 40px;
top: auto;
right: auto;
position: relative;
width: 100%;
color: #333;
}
#searchbox input {
width: 30px;
height: 26px;
padding: 0;
color: #333;
left: 0px;
-webkit-appearance: none;
}
#searchbox input.skwd {
font-size: 14px;
margin: 0 0 0 30px;
padding: 0px 5px 0 5px;
background-color: #fff;
overflow: hidden;
max-width: 100%;
width: 82%;
}
}

 

 

.txt-img {
}
.txt-img img{
margin: 0 8px 8px 8px;
}
.center {
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
.float-l { float: left;}
.float-r { float: right;}
.float-l img,
.float-r img {
margin-bottom: 20px;
}
.float-l img {
margin-right: 20px;
}
.float-r img {
margin-left: 20px;
}
.clear, .FloatEnd {
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* (スマホ用)画像の中央揃え処理 */
@media screen and (max-width: 640px) {
.txt-img{
padding: 0 10px;
text-align: center important;
}
.txt-img,.txt-img img{
float:none important;
}
.float-l p,.float-l{
text-align:center;
float:none;
}
}

 

#top {
margin: 0 auto;
text-align: left;
width: 900px;
}
#top #logo, #top h1 {
padding: 200px 0;
width: 600px;
}
#top #logo a, #top h1 a {
color: #FF4E4E;
text-shadow: 0 0 1px rgba(78,123,160,.3);
font-size: 26px;
font-weight: 600;
text-decoration: none;
}
#top #logo a img, #top h1 a img {
vertical-align: middle;
}
@media screen and (max-width: 899px) {
#top {
width: auto;
}
#top #logo, #top h1 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 28px 0 28px 10px;
width: 66.6666666667%;
}
}
@media screen and (max-width: 640px) {
#top #logo, #top h1 {
padding: 18px 60px 18px 10px;
width: auto;
}
#top #logo a, #top h1 a {
font-size: 18px;
}
}

 

/* ヘッダー
==================================================
==================================================
*/
#headerbox .inner {
text-align: center;

 

}
#header {
height: 350px;
margin: 0 auto;
position: relative;
text-align: left;

 

 

 

position: fixed important;
position: absolute;
top: 0px;
left: 0;
 width: auto;
z-index: -10;
}

 

#layoutbox{
margin: 0 auto;
padding: 0px 0 5px;
position: relative;

 

 

background-color: #FFF;
width: 1000px;

 

}

 

@media screen and (max-width: 899px) {
#headerbox {
position: relative;
}
#header {
height: auto important;
width: auto;
}
#header img {
position: static;
}
}
@media screen and (max-width: 640px) {
#header #headertxt {
padding: 15px 15px 5px;
position: static;
width: auto;
}
#header .title {
text-align: center;
text-shadow: 1px 1px 1px rgb(204, 204, 204);
}
#header .title a {
color:#FF4E4E;
font-size: 20px;
}
#header .desc {
color:#343434;
font-size: 12px;
}
}

 

/* トップメニュー
==================================================
*/
*:first-child+html body {
padding-left: 1px;
}
#nav {
border-bottom: 1px solid #000;
background-color: rgba(0,51,102,0.5);
}
#topmenubox {
margin: 0 auto;
text-align: center;
width: 1000px;
}
#topmenubox #topmenubtn {
display: none;
}
#topmenu ul,#topmenu li{
list-style-image: none;
list-style-type: none;
background-image: none;
}
#topmenu ul {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif;
font-weight: 400;
overflow: hidden;
width: 1000px;
padding: 10px 0;
}
#topmenu li {
border-left: px solid #799eba;
border-right: px solid #3e6280;
padding: 0;
float: left;
width: 148px;
}
#topmenu li:last-child{
border-right: px solid #799eba;
}
#topmenu li a {
list-style-image: none;
color: #fff;
display: block;
font-size: 1em;
text-shadow: 0 0 1px rgba(255,255,255,.3);
overflow: hidden;
padding: 3px;
text-align: center;
text-decoration: none;
}
#topmenu li a:hover {
text-decoration: underline;
}
@media screen and (max-width: 899px) {
#topmenubox {
padding: 0;
width: auto;

 

}
#topmenu ul {
background: none repeat scroll 0 0 transparent;
display: table;
width: 100%;
clear: both;
margin: 0;
}
#topmenu li {
background: none repeat scroll 0 0 transparent;
display: table-cell;
float: none;
margin: 0;
padding: 0;
width: auto;
}
#topmenu li:before {
clear: both;
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
#topmenu li a {
position: relative;
}
}
@media screen and (max-width: 768px) {
#nav {
border-bottom: none;
background-color: none;
display: none;
}
}

 

 

 

 

/*
==================================================
メインコンテンツ
==================================================
*/
/* 記事領域
==================================================
*/
#main {
float:left;
overflow: hidden;
word-wrap: break-word;
width: 680px;
}

 

@media screen and (max-width: 899px) {
#main {
width: 72.2222222222%;
}
}
@media screen and (max-width: 640px) {
#main {
float: none;
width: 100%;
}
}
#main .text, #text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10, #space1, #space2 {
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
}

 

/* 見出し
==================================================
*/
#main h2, #main h3 {
background-color: #FF4E4E;
margin-bottom: 5px;
padding: 7px 0;
color: #fff;

 

}
#main h2 span, #main h3 span {
display: block;
border-left: 4px solid #eef3f6;
color: #fff;

 

font-size: 18px;
text-shadow: 0 0 1px rgba(255,255,255,.3);
margin: 2px 8px;
padding: 4px 0 0 8px;

 

 

}
#main .text h3, #text1 h3, #text2 h3, #text3 h3, #text4 h3, #text5 h3, #text6 h3, #text7 h3, #text8 h3, #text9 h3, #text10 h3, #space1 h3, #space2 h3 {
margin: 0 0 5px -10px;

 

}
#main h4 {
background-image: url(img/h4-border-Bottom.gif);
background-position: left bottom;
background-repeat: repeat-x;
margin: 5px auto;
position: relative;

 

}

 

 

#main h4 span {
background-image: url(img/h4.png);
background-position: left 10px;
background-repeat: no-repeat;
color: #FF4E4E;
text-shadow: 0 0 1px rgba(78,123,160,.3);
display: block;
font-size: 17px;
padding: 3px 0 3px 12px;
position: relative;

 

}

 

 

 

#main h5 {
background-image: url(img/h5.png);
background-position: left top;
background-repeat: no-repeat;
color: #333333;
text-shadow: 0 0 1px rgba(51,51,51,.1);
font-size: 16px;
line-height: 150%;
margin: 3px auto;
padding-left: 28px;
}
#main h6 {
background-image: url(img/h6.png);
background-position: left 1px;
background-repeat: no-repeat;
color: #333333;
text-shadow: 0 0 1px rgba(51,51,51,.1);
font-size: 16px;
margin: 3px auto;
padding-left: 22px;
line-height: 140%;
}
#main .atn02 {
background-color: #f2f2f2;
background-image: url(img/atn_02.gif);
background-position: 14px 14px;
background-repeat: no-repeat;
margin: 20px 0 10px;
overflow: hidden;
padding: 20px 20px 20px 50px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#main .atn02 {
background-image: url(img/atn_02@2x.gif);
-webkit-background-size: 22px 32px;
background-size: 22px 32px;
}
}
#main .atn02 span {
border-bottom: 1px dashed #c2c2c2;
color: #4d4d4d;
font-weight: bold;
padding-bottom: 3px;
}
@media screen and (max-width: 640px) {
#main h2, #main h3 {
margin: 0;
}
#main .text h3, #text1 h3, #text2 h3, #text3 h3, #text4 h3, #text5 h3, #text6 h3, #text7 h3, #text8 h3, #text9 h3, #text10 h3, #space1 h3, #space2 h3 {
margin: 20px -10px 10px;
}
}

 

/*
==================================================
サイドメニュー
==================================================
*/
/* メニュー
==================================================
*/

 

#menu img{
max-width:100%;
height:auto;
}

 

#menu {
float: right;
overflow: hidden;
width: 305px;

 

}

 

 

 

 

#menu ul#newEntry, #menu ul#entryarchive, #rmenu ul#newEntry, #rmenu ul#entryarchive {
background-image: url(img/menubox_bg.gif);
background-position: center bottom;
background-repeat: repeat-x;
padding: 0 0 5px 0;

 

}
#menu .rankbox {
border-bottom: 1px solid #E6E6E6;
font-size: 12px;
margin-bottom: 10px;
padding-bottom: 10px;

 

}
#menu .rankbox img {
width: 185px;
}
.menubox {
margin-bottom: 25px;
}
.menulist {
margin-bottom: 0 important;
overflow: hidden;
}
.menulist ul {
margin-bottom: 25px;
padding: 0 0 5px 0;
}
.menulist li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #e6e6e6;
line-height: 150%;
padding: 0;
position: relative;
}
.menulist li a {
background-image: url(img/menu_bg.png);
background-position: 1px 17px;
background-repeat: no-repeat;
color: #333;
display: block;
font-size: 14px;
padding: 12px 10px 12px 15px;
text-decoration: none;
}
.menulist li a:hover {
color: #FF4E4E;
text-decoration: underline;
}
.menulist .l2 a {
background-image: url(img/menu_bg2.png);
background-position: 15px 18px;
font-weight: normal;
padding-left: 26px;
}
.menulist .l3 a {
background-image: url(img/menu_bg2.png);
background-position: 30px 18px;
font-weight: normal;
padding-left: 41px;
}

 

 

#menu .title, #rmenu .title, #menu h4, #rmenu h4 {
background-color: #FF4E4E;
border-bottom: 2px solid #fafafa;
overflow: hidden;
position: relative;
text-shadow: none;
margin: 0;
color: #FFF;
height: 20px;
padding:13px;
}

 

#menu .title span, #rmenu .title span, #menu h4 span, #rmenu h4 span {

 

background-position: left 11px;
background-repeat: no-repeat;
color: #FFF;text-shadow: 0 0 1px rgba(255,255,255,.3);
display: block;
font-size: 16px;

 

line-height: 300%;
}

 

 

 

 

@media screen and (max-width: 899px) {
#menu {
width: 24.4444444444%;
}
#column2 .menulist li a , .menulist .l2 a , .menulist .l3 a {
position: relative;
}
}
@media screen and (max-width: 640px) {
#menu {
float: none;
width: 100%;
}
#menu .title, #rmenu .title, #menu h4, #rmenu h4 {
margin-left: 0;
}
#menu .title span, #rmenu .title span, #menu h4 span, #rmenu h4 span {
font-size: 18px;
}
.menulist ul {
margin-bottom: 5px;
}
.menulist .l2,
.menulist .l3 {
display: none;
}
.menubox {
margin-bottom: 0;
}
#menu .title span, #rmenu .title span, #menu h4 span, #rmenu h4 span {
border-bottom: 1px solid #e6e6e6;
border-left: none;
border-right: none;
border-top: 1px solid #e6e6e6;
}
}

 

/* バナー領域
==================================================
*/
.bannerbox {
background-color: #FFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
behavior: url(css/PIE.htc);
margin-bottom: 10px;
position: relative;
}
.bannerbox ul {
padding: 5px;
}
.bannerbox li {
background: none repeat scroll 0 0 transparent;
margin-bottom: 5px;
padding: 0;
}
.bannerbox li a {
font-size: 15px;
}
.bannerbox li a img {
vertical-align: bottom;
}
@media screen and (max-width: 899px) {
.bannerbox li:before {
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
.menulist li:before {
background-color: transparent;
}
}
@media screen and (max-width: 640px) {
.bannerbox li {
margin-bottom: 10px;
text-align: center;
}
}

 

/* 最新記事・アーカイブ
==================================================
*/
ul#newEntry li, ul#entryarchive li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #E6E6E6;
font-size: 12px;
line-height: 140%;
padding: 15px 10px;
}
@media screen and (max-width: 899px) {
ul#newEntry li:before, ul#entryarchive li:before {
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
}

 

/*
==================================================
フッター
==================================================
*/
#footer {
border-top: 3px solid #799eba;
background-color: #000;
color: #FFF;
font-size: 12px;
margin: 0 auto;
text-align: center;
}
#footer .inner {
margin: 0 auto;
overflow: hidden;
padding: 2px 0 2px;
width: 900px;
text-align: center;
font-size: 13px;
}
#footer a {
color: #FFF;
}
#footer p {
float: right;
overflow: hidden;
position: relative;
word-wrap: break-word;
}
#footlinkbox {
background-color: #000;
padding: 10px 10px 5px;
text-align: center;
}
#footermenu {
ont-size: 0;
letter-spacing: -.40em;
line-height: 26px;
margin: 0 auto;
text-align: left;
max-width: 900px;
}
#footermenu span {
display: inline-block;
margin: 0 25px 5px 0;
display: inline;
zoom: 1;
}
#footermenu a {
border-right: 1px solid #799eba;
color: #fff;
letter-spacing: normal;
line-height: 140%;
font-size: 12px;
padding-right: 25px;
text-decoration: none;
}
#footermenu a:hover {
text-decoration: underline;
}
#footer #footsub {
text-align: center;
max-width: 900px;
height: auto;
margin: 10px auto 0;
}
#footer .copyright {
display: block;
background-color: #000;
line-height: 28px;
text-align: center;
font-size: 14px;
}
@media screen and (max-width: 899px) {
#footer .inner {
text-align: center;
max-width: 100%;
}
#footlinkbox {
padding: 15px 0 5px 10px;
}
#footermenu {
max-width: 100%;
}
}
@media screen and (max-width: 640px) {
#footer {
background-image: none;
border-top: none;
}
#footlinkbox {
margin-bottom: 0;
padding: 0;
}
#footermenu span {
border-bottom: 1px solid #799eba;
display: block;
margin: 0;
}
#footermenu a {
border-right: none;
display: block;
font-size: 13px;
padding: 12px 24px 12px 10px;
position: relative;
text-decoration: none;
}

 

#footermenu {
position: static;
width: auto;
margin: 0;
padding: 0;
}
#footer .inner {
background-color: #000;
padding: 0px 10px 10px 0;
line-height: 130%;
}
#footer #footsub {
text-align: center;
}
#footer #footsub a {
text-decoration: none;
}
#footer #footsub a:first-child {
border-left: none;
}
}

 

 

#whatsnew {
margin-bottom: 20px;
position: relative;
}
#whatsnew .title {
background-color: #FF4E4E;

 

 

 

margin-bottom: 5px;
padding: 5px 0;
}
#whatsnew .title span {
background-image: url(img/whatsnew_title.png);
background-position: left top;
background-repeat: no-repeat;
display: block;
color: #FFF;text-shadow: 0 0 1px rgba(255,255,255,.3);
font-size: 18px;
font-weight: 600;
margin: 2px 0px;
padding: 4px 38px;
}
#whatsnew ul {
padding: 0;
}
#whatsnew ul li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px dotted #ccc;
font-size: 15px;
padding: 10px 15px;
position: relative;
}
#whatsnew ul li span {
padding-right: 10px;
}
@media screen and (max-width: 899px) {
#whatsnew .title {
position: relative;
}
#whatsnew ul li:before {
background-color: transparent;
}
}
@media screen and (max-width: 640px) {
#whatsnew {
background-color: #fbfbfb;
margin-bottom: 0;
padding: 10px 0 0;
}
#whatsnew .title {
margin-right: 0;
border-bottom: none;
}
#whatsnew ul {
background-color: #ffffff;
border-bottom: 1px solid #e6e6e6;
}
#whatsnew ul:last-child {
border-bottom: none;
}
#whatsnew ul li:last-child {
border-bottom: none;
}
#whatsnew ul li span {
color: #666666;
display: block;
padding-right: 0;
}
}

 

 

#categorylist {
padding: 10px;
}
#categorylist .catbox {
background-color: #f2f5f8;
margin-right: 10px;
margin-bottom: 30px;
overflow: hidden;
position: relative;
font-size: 15px;
_height: 1%;
}
#categorylist .thumb {
float: left;
padding: 0 20px 0 0;
}
#categorylist .thumb img {
vertical-align: bottom;
}
#categorylist .body {
overflow: hidden;
}
#categorylist .title {
background-image: url(img/h4-border-Bottom.gif);
background-position: left bottom;
background-repeat: repeat-x;
font-weight: 700;
margin-bottom: 10px;
overflow: hidden;
padding: 10px 15px 8px 15px;
}
#categorylist .title a {
background-image: url(img/category_title.png);
background-position: left 9px;
background-repeat: no-repeat;
color: #FF4E4E;
font-size: 18px;
line-height: 1.6;
text-decoration: none;
padding: 6px 22px 13px;
}
#categorylist p {
font-size: 15px;
line-height: 170%;
padding: 0 15px;
}
#categorylist .more {
float: right;
height: 30px;
margin: 10px 1px 1px 0;
padding: 0 15px 15px 0;
_height: 1%;
}
#categorylist .more a {
background-image: url(img/button_more2.png);
background-position: right 6px;
background-repeat: no-repeat;
display: block;
padding-right: 19px;
color: #FF4E4E;
}
#pagelist {
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
text-align: center;
}
#pagelist ul {
letter-spacing: -0.4em;
padding: 0;
}
#pagelist li {
background: none repeat scroll 0 0 transparent;
display: inline-block;
letter-spacing: normal;
list-style-type: none;
margin: 0 5px 10px;
padding: 0;
display: inline;
zoom: 1;
}
#pagelist a {
background-color: #fbfbfb;
border: 1px solid #e6e6e6;
color: #333333;
display: inline-block;
padding: 6px 15px;
text-align: center;
text-decoration: none;
display: inline;
zoom: 1;
}
#pagelist a:hover {
background-color: #333333;
color: #FFF;
}
@media screen and (max-width: 899px) {
#categorylist .more a {
background-position: right 4px;
display: block;
font-size: 15px;
height: 26px;
line-height: 24px;
overflow: hidden;
position: relative;
text-align: center;
text-indent: inherit;
}
#categorylist .more a:before {
border-bottom: none;
border-left: none;
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
content: "";
height: 4px;
margin-top: -2px;
position: absolute;
right: 16px;
top: 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 4px;
}
#pagelist li:before {
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
}
@media screen and (max-width: 640px) {
#categorylist .catbox {
padding: 15px;
}
#categorylist .thumb {
float: left;
padding: 0 15px 0 0;
}
#categorylist .thumb img {
max-width: 100px;
}
#categorylist .title {
padding: 5px 0;
}
#categorylist .title a {
font-size: 16px;
background-position: left 5px;
line-height: 1.6;
padding: 4px 22px 15px;
}
#categorylist p {
font-size: 14px;
line-height: 150%;
}
}

 

#entrylist {
margin-right: 10px;
margin-bottom: 20px;
background-color: #f2f5f8;
}
#entrylist .inner {
overflow: hidden;
text-align: left;
}
#entrylist h4 {
background-image: none;
background-color: #FF4E4E;
margin-bottom: 5px;
padding: 5px 0;
}
#entrylist h4 span {
background-image: url(img/entrylist-h4.png);
background-position: left 2px;
background-repeat: no-repeat;
display: block;
color: #FFF;text-shadow: 0 0 1px rgba(255,255,255,.3);
line-height: 32px;
font-size: 18px;
margin: 2px 8px 2px 0;
padding: 4px 8px 2px 38px;
}
#entrylist dl {
overflow: hidden;
position: relative;
top: -1px;
height: 1%;
}
#entrylist dt {
border-top: 1px dotted #ccc;
margin: 0 10px;
padding: 15px 5px;
position: relative;
height: 1%;
}
#entrylist dt:first-child {
border-top: none;
}
#entrylist dt a {
background-image: url(img/entry_title.png);
background-position: left 4px;
background-repeat: no-repeat;
display: inline-block;
font-size: 15px;
font-weight: 500;
line-height: 150%;
padding: 1px 0 1px 19px;
display: inline;
zoom: 1;
}
#entrylist dd {
font-size: 15px;
line-height: 150%;
margin-top: -10px;
padding: 0 10px 15px 25px;
}
#searchresult {
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
}
#relNavigate {
margin-bottom: 15px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
#relNavigate a {
font-size: 14px;
font-weight: 700;
margin-left: 10px;
margin-right: 10px;
}
@media screen and (max-width: 640px) {
#entrylist {
margin: 0;
padding: 0;
}
#entrylist h4 {
margin-left: -10px;
padding: 8px;
}
#entrylist h4 span {
font-size: 18px;
}
#entrylist dl {
border-bottom: none;
padding: 0 5px;
top: 0;
}
#entrylist dt {
padding: 15px 5px;
}
#entrylist dt:first-child {
border-top: none;
}
#entrylist dt a {
font-size: 15px;
}
#entrylist dt a:hover {
position: relative;
}
#entrylist dd {
font-size: 14px;
line-height: 140%;
padding: 0 5px 15px 20px;
}
#relNavigate a {
background-color: #FBFBFB;
color: #333333;
display: inline-block;
height: 40px;
line-height: 40px;
position: relative;
text-decoration: none;
width: 35%;
z-index: 0;
}
#relNavigate a:hover {
position: relative;
}
#relNavigate a:first-child {
border-bottom: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
}
#relNavigate a:last-child {
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
}
#relNavigate a:before {
background-color: #FBFBFB;
content: "";
height: 29px;
position: absolute;
top: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 29px;
z-index: -1;
}
#relNavigate a:first-child:before {
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
left: -15px;
}
#relNavigate a:last-child:before {
border-right: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
right: -15px;
}
}

 

 

#sitemaps ul {
margin: 0;
padding: 5px 10px;
}
#sitemaps li {
background-image: none;
line-height: 0;
padding: 0;
}
#sitemaps .l1 {
margin-top: 10px;
}
#sitemaps .l2 {
margin-top: 5px;
}
#sitemaps .l3 {
margin-top: 5px;
}
#sitemaps li a {
background-image: url(img/menu_bg.png);
background-position: left 8px;
background-repeat: no-repeat;
display: inline-block;
line-height: 180%;
list-style-image: none;
list-style-type: none;
padding-left: 12px;
display: inline;
zoom:1;
color: #333;
text-decoration: none;
}
#sitemaps .l1 a {
font-size: 16px;
font-weight: 700;
}
#sitemaps .l2 a {
background-image: url(img/menu_bg2.png);
font-size: 14px;
margin-left: 25px;
}
#sitemaps .l3 a {
background-image: url(img/menu_bg2.png);
background-position: left 6px;
font-size: 12px;
margin-left: 45px;
}

 

@media screen and (max-width: 640px) {
#sitemaps ul {
padding: 0 10px;
}
#sitemaps li {
border-bottom: 1px solid #ddd;
}
#sitemaps .l1,
#sitemaps .l2,
#sitemaps .l3 {
margin-top: 0;
}
#sitemaps li a {
display: block;
padding: 12px 10px 12px 25px;
text-decoration: none;
}
#sitemaps .l1 a {
background-position: 10px 18px;
line-height: 1.5;
}
#sitemaps .l2 a {
margin-left: 0;
background-position: 25px 20px;
padding: 12px 40px;
}
#sitemaps .l3 a {
font-size: 13px;
background-position: 2px 16px;
padding: 10px 15px;
}
#sitemaps li a:before {
left: 20px;
top: 20px;
}
#sitemaps .l2 a:before {
left: auto;
margin-top: -3px;
right: 20px;
top: 50%;
}
#sitemaps .l3 a:before {
left: 50px;
}
}

 

 

#space1, #space2 { margin-bottom: 25px }
#space3, #space4, #space5, #space6 {
line-height: 130%;
padding: 10px;
}

 

.grayline{
border: 1px solid #CCCCCC;
margin: 10px;
}
.graybg{
margin: 10px;
}

 

#main .grayline{
margin: 10px;
padding:10px;
margin-bottom:15px;
}

 

#menu .grayline{
font-size:90%;
padding:8px;
margin-bottom:15px;
}

 

}

 

.blog {
border-bottom-color: #e6e6e6;
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: 15px;
overflow: hidden;
padding: 10px;
}
.blog .thumb {
float: left;
margin-right: 15px;
}
.blog .thumb img { width: 125px; }
.blog .title {
background-image: url(img/h6.png);
background-position: 10px 1px;
background-repeat: no-repeat;
color: #333333;
text-shadow: 0 0 1px rgba(51,51,51,.1);
font-size: 16px;
margin: 3px auto;
padding-left: 34px;
line-height: 140%;
}
.blog .title a { color: #333; }
.blog .info {
color: #666;
margin-bottom: 10px;
padding: 0 10px;
}
.blog .info a { color: #666; }
.blog .body {
line-height: 150%;
overflow: hidden;
padding: 0 10px;
}
.blog .more {
font-weight: 700;
margin-bottom: 10px;
margin-top: 10px;
padding-right: 5px;
text-align: right;
}

 

 

#searchresult dt {
font-size: 14px;
padding: 5px 0;
}
#searchresult dd {
border-bottom-color: #e6e6e6;
border-bottom-style: solid;
border-bottom-width: 1px;
line-height: 150%;
margin: 0 0 10px;
padding-bottom: 15px;
}
#searchresult b {
color: #0066CC;
}
@media screen and (max-width: 640px) {
#searchresult dt {
padding: 15px 10px 5px;
}
#searchresult dd {
margin: 0 0 0;
padding: 0 10px 15px;
}
}

 

 

#linklist {
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
}
#linklist dt {
font-size: 14px;
padding: 5px 0;
}
#linklist dd {
border-bottom-color: #e6e6e6;
border-bottom-style: solid;
border-bottom-width: 1px;
line-height: 130%;
margin: 0 0 10px;
padding-bottom: 15px;
}

 

 

 

#column1 {
background-image: url(img/column_bg.gif);
background-position: center top;
background-repeat: no-repeat;
text-align: center;
}
#column1 #menu, #column1 #main {
float: none;
width: auto;
}
#column1 #main {
margin-left: 0;
padding-bottom: 20px;
}

 

#column1 #menu {
margin-right: 10px;
}
#column1 #menu .menulist {
padding: 0;
}
#column1 #menu .menubox {
padding-top: 10px;
}
#column1 #menu ul {
background: none repeat scroll 0 0 transparent;
letter-spacing: -0.4em;
padding: 0;
}
#column1 #menu li {
background-image: url(img/menu_bg.png);
background-position: left 5px;
background-repeat: no-repeat;
border: none;
display: inline-block;
letter-spacing: normal;
padding: 0 0 0 4px;
display: inline;
zoom: 1;
}
#column1 #menu li a , #column1 #menu #newEntry li a {
background: none repeat scroll 0 0 transparent;
display: inline;
font-weight: 400;
padding: 0;
text-decoration: underline;
}
#column1 #menu li a:hover , #column1 #menu #newEntry li a:hover {
text-decoration: none;
}
#column1 #menu .menulist li a, #column1 #menu .menulist li.l2 a, #column1 .menulist #menu li.l3 a {
margin: 0 5px;
padding: 0 5px;
}
#column1 #menu ul#newEntry li, #column1 #menu ul#entryarchive li, #column1 #rmenu ul#newEntry li, #column1 #rmenu ul#entryarchive li {
margin: 0 5px;
padding: 0 5px;
background-image: none;
}
@media screen and (max-width: 899px) {
#column1 {
background: none repeat scroll 0 0 transparent;
}
}
@media screen and (max-width: 640px) {
#column1 #main {
margin-left: 0;
padding-bottom: 0;
}
#column1 #menu {
margin-right: 0;
}
#column1 #menu ul {
letter-spacing: normal;
padding: 0 0 5px;
position: relative;
}
#column1 #menu ul#newEntry, #menu ul#entryarchive, #rmenu ul#newEntry, #rmenu ul#entryarchive {
background: none repeat scroll 0 0 transparent;
padding: 0 0 10px 0;
position: relative;
}
#column1 #menu .menubox {
padding-top: 0;
}
#column1 .menulist ul {
background: none repeat scroll 0 0 transparent;
position: relative;
}
#column1 #menu li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #e6e6e6;
line-height: 150%;
padding: 0;
position: relative;
display: block;
}
#column1 #menu .menulist .l2, #column1 #menu .menulist .l3 {
display: none;
}
#column1 #menu li a {
background-image: url(img/menu_bg.png);
background-position: 20px 17px;
background-repeat: no-repeat;
color: #333333;
display: block;
font-size: 14px;
padding: 12px 10px 12px 35px;
text-decoration: none;
}
#column1 #menu li a:hover {
color: #FF4E4E;
text-decoration: underline;
}
#column1 #menu .menulist li a, #column1 #menu .menulist li.l2 a, #column1 .menulist #menu li.l3 a {
margin: 0;
padding: 12px 10px 12px 35px;
}
#column1 #menu ul#newEntry li, #column1 #menu ul#entryarchive li, #column1 #rmenu ul#newEntry li, #column1 #rmenu ul#entryarchive li {
margin: 0;
padding: 15px 10px;
}
}

 

 

 

 

/*ヘッダーまわりはサイトに合わせて調整してください*/
header {
padding:30px;
background: skyblue;
display:none;
}

 

 

#nav-drawer {

 

z-index: 2000;
position:fixed;

 

}

 

/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}

 

/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}

 

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #FF0A0A;
display:none;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}

 

/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
display:none;
opacity: 0;
transition: .3s ease-in-out;
}

 

/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
max-width: 330px;/*最大幅(調整してください)*/
height: 100%;
background: #ffffff;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}

 

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display:none;;/*カバーを表示*/
opacity: .5;
}

 

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示(右へスライド)*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

 

 

 

 

 

 

 

 

 

 

@media screen and (max-width: 640px) {

 

 

/*ヘッダーまわりはサイトに合わせて調整してください*/
header {
padding:30px;
background: skyblue;
display: block;

 

}

 

#nav-drawer {

 

z-index: 2000;
position:fixed;
padding:20px;
right: 3px;
}

 

a { color: #333; }
a:hover {
color: #C50000;
text-decoration: none;
}

 

 

/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}

 

/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height:30px;
vertical-align: middle;

 

}

 

 

 

 

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position:absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #0A8FFF;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}

 

/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

 

/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
max-width: 400px;/*最大幅(調整してください)*/
height: 100%;
background: #FFF;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}

 

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display: block;/*カバーを表示*/
opacity: .5;
}

 

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示(右へスライド)*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

 

}

 

 

 

 

 

.layout_tate3{
float:right;
}

 

.layout_tate3{
float:right;
}

 

 

.scrollToTop {
color: #fafafa;
font-size: 1.4em;
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
width: 50px;
height: 50px;
border-radius: 100px;
border: none;
outline: none;
background: #E91E63;
z-index: 9999;
bottom: 10px;
right: 10px;
position: fixed;
opacity: 0;
visibility: hidden;
}
#marker {
position: absolute;
top: 100px;
width: 0px;
height: 0px;
}

 

 

</style>
</head>
<body>

 

<div id="wrapper">

 

 

 

<% topMenu2 | tag_put(<div id="topmenubtn">MENU</div>) | tag_insert(div id="topmenubox") | tag_insert(div id="nav") %>
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>

 

<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">

 

<a href="<% pageDepth %>sitemap.html">サイトマップ</a>
<div><li><a href="http://ailibrarys.org/drupal/"> drupal</a></li></div>
<div><li><a href="https://joomla-ja.org/"> joomla-ja.org</a></li></div>
<div><li><a href="https://ailibrary-jp.org/"> アイライブラリー|web. creator</a></li></div>
<div><li><a href="https://www.affiliateno1.com/"> オンラインマニュアルLibrary</a></li></div>
<div><li><a href="https://www.affiliateno1.com/sirius.customize/"> シリウスレスポンシブテンプレート専用のカスタマイズまとめ</a></li></div>
</div>
</div>
</div>
<div id="top">
<amp-animation id="showAnim"
layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>

 

 

 

 

 

<div id="marker">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start"
layout="nodisplay">
</amp-position-observer>
</div>

 

 

 

<button id="scrollToTopButton"
on="tap:top-page.scrollTo(duration=200)"
class="scrollToTop">△</button>
<div id="top-page"></div>

 

<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>

 

<div id="headerbox">

 

<div class="inner">
<div id="header">

 

<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>

 

<div id="column2">
<div id="contents">
<div id="layoutbox">
<div id="main">

 

<!-- ★コンテンツここから★ -->
<% freeSpace1 %>
<% textTitle1 %>
<% textBody1 %>
<% textTitle2 %>
<% textBody2 %>
<% textTitle3 %>
<% textBody3 %>
<% textTitle4 %>
<% textBody4 %>
<% textTitle5 %>
<% textBody5 %>
<% textTitle6 %>
<% textBody6 %>
<% textTitle7 %>
<% textBody7 %>
<% textTitle8 %>
<% textBody8 %>
<% textTitle9 %>
<% textBody9 %>
<% textTitle10 %>
<% textBody10 %>
<% freeSpace2 %>
<!-- ★コンテンツここまで★ -->
<% if:siteMode(normal) %>
<!-- ★更新履歴ここから★ -->
<% whatsNew | tag_put(<div class="title"><span>更新履歴</span></div>) | tag_insert(div id="whatsnew") %>
<!-- ★更新履歴ここまで★ -->
<% else %>
<!-- ★ブログモードここから★ -->
<% AQNewEntries(10) %>
<div class="blog">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<div class="body"><% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(300,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
<!-- ★ブログモードここまで★ -->
<% /AQNewEntries %>
<% /if %>
</div>
<div id="menu">

 

 

 

<% freeSpace3 %>
<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% freeSpace4 %>

 

 

 

</div>
<br class="clear" />
</div>

 

</div>
</div>
<div id="footer">
<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(<!-- ★comment★ -->,) | str_replace(image,submit) | tag_insert(div id="searchbox") %>
<div id="footsub"><% PRLink %><% sitemapPageLink %></div>
</div>
<div class="copyright">Copyright (C) <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></div>
</div>
</div>
</body>
</html>