グローバルナビ切り替えソース

一部の仕様替え

シリウスに備えあるグローバルナビではプルダウン表示ができず..メニューの案内に
不足ありの際は、外部導入のGナビをお勧めします..
当ページのナビ作動をご覧ください.

ぺージ戻りボタンですが、Experimentsで備えある仕様は、トップPでは反応するものの
カテゴリーでは不作動でしたので、別なもの取り付けています...

張替え後、Experimentsを使用する際はご自身の判断でお願いします。..

<!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">

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(https://www.affiliateno1.com/responsive-amp/img/beauty-1319951_1920.jpg);
border-top: 4px solid #FF4E4E;
color: #333333;
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,'ＭＳＰゴシック',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: #FBF8FB;
}
#layoutbox{
background-color: #FBF8FB;
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: #FBF8FB;
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,'ＭＳＰゴシック',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;
padding-left: 17px;
}
#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: #333333;
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);
}

}

.nav {
padding: 0 px;
margin: 0 auto0px;
width: auto;

}
.fixed {
position: relative;
top: -0;
left: 0;
width: 100%;
z-index: 7999;
}

.dropcc{
zoom: 1;
list-style-type: none;
width: 1000px;
margin: -8px auto 48px;
padding: 0;
}

.dropccbefore, .dropmenu:after{
content: "";
display: table;
}
.dropcc:after{
clear: both;
}
.dropcc li{
position: relative;
width: 20%;

float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropcc li a{
display: block;
margin: 0;
padding: 15px 20px;
color: #fff;
font-size: 14px;
line-height: 1.7.;
text-decoration: none;

}

.dropcc li ul{
list-style: none;
position: absolute;

z-index: 9999;
top: 100%;
left: 0;
margin: 100;
padding: 0;
}
.dropcc li ul li{
width: 100%;

}
.dropcc li ul li a{
padding: 10px 10px;
border-top: 1px solid #00C5A5;
background: #810000;

text-align: left;

}
.dropcc li:hover > a{
background: #000000;

}
.dropcc li a:hover{
background: #000000;
}

#normalnavvvi li ul {
visibility: hidden;
perspective: 400px;
width: 250px;

}
#normalnavvvi li:hover ul{
visibility: visible;
}
#normalnavvvi ul li{
transform: rotateY(90deg);
transform-origin: 50% 0;
transition: .3s;
}
#normalnavvvi li:hover li{
transform: rotateY(0);
}
#normalnavvvi ul li:nth-child(2) {
transition-delay: .1s;
}
#normalnavvvi ul li:nth-child(3) {
transition-delay: .2s;
}
#normalnavvvi ul li:nth-child(4) {
transition-delay: .3s;
}
#normalnavvvi ul li:nth-child(5) {
transition-delay: .4s;
}

@media screen and (max-width: 640px) {
.dropcc{
zoom: 1;
list-style-type: none;
width: 1000px;
margin: -8px auto 48px;
padding: 0;
display: none;
}

.dropccbefore, .dropmenu:after{
content: "";
display: table;
display: none;
}
.dropcc:after{
clear: both;
}
.dropcc li{
position: relative;
width: 20%;

float: left;
margin: 0;
padding: 0;
text-align: center;
display: none;
}
.dropcc li a{
display: block;
margin: 0;
padding: 15px 20px;
color: #fff;
font-size: 14px;
line-height: 1.7.;
text-decoration: none;
display: none;
}

.dropcc li ul{
list-style: none;
position: absolute;

z-index: 9999;
top: 100%;
left: 0;
margin: 100;
padding: 0;
display: none;
}
.dropcc li ul li{
width: 100%;

display: none;
}
.dropcc li ul li a{
padding: 10px 10px;
border-top: 1px solid #00C5A5;
background: #810000;

text-align: left;

display: none;
}
.dropcc li:hover > a{
background: #000000;

}
.dropcc li a:hover{
background: #000000;
display: none;
}
}

.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: 60px;
height: 60px;
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 class="backtotop"><a href="#top">TOP</a></div>
<div id="wrapper">
<div class="nav">
<div style="border:solid 1px #000000;background: rgba(0,51,102,0.5); padding:2px; border:1px solid #000000; border-radius:1px 0px 1px 0px 0px">
<div id="normalnavvvi" class="dropcc">

<li><a href="#">TOP</a>
<ul>
<li><a href="<% pageDepth %>">トップページ</a></li>
</ul>
</li>
<li><a href="#">質問</a>
<ul>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/シリウスカスタマイズサポートフォーラム/シリウスカスタマイズサポートフォーラム一覧/">シリウスカスタマイズサポート</a></li>

</ul>
</li>
<li><a href="#">ご案内</a>
<ul>
<li><a href="<% pageDepth %>sitemap.html">サイトマップ</a></li>

</ul>
</li>
<li><a href="#">関連サイト</a>
<ul>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/">オンラインマニュアルLibrary</a></li>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/new.sirius.customize/">ニューテンプレートカスタマイズ</a></li>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_amp/">外部導入AMPソース公開</a></li>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_mobile_amp/">シリウスAMP切り替え</a></li>
</ul>
</li>
<li><a href="#">装飾</a>
<ul>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/designer/">シリウスサイトに取り付け可能なＣＳＳ装飾品？.まとめ</a></li>

</ul>
</li>
</div>
</div>

<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>

<a href="<% pageDepth %>sitemap.html">サイトマップ</a>
<div><li><a class="amp-nav-link" href="http://ailibrarys.org/drupal/">　drupal</a></li></div>
<div><li><a class="amp-nav-link" href="https://joomla-ja.org/">　joomla-ja.org</a></li></div>
<div><li><a class="amp-nav-link" href="https://ailibrary-jp.org/">　アイライブラリー|web. creator</a></li></div>
<div><li><a class="amp-nav-link" href="https://www.affiliateno1.com/">　オンラインマニュアルLibrary</a></li></div>
<div><li><a class="amp-nav-link" 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="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>

一部だけの改行なんですけれど、ミスもあると思うので
ここまでの張替えでやれば即完了します。

スポンサー広告

更新履歴

(2019/04/21)エントリーページレイアウトを更新しました