LittleDream

vintage and romantic images

HOME / neon

neon

FC2テンプレート
ひと夏超えました。 やっと少しづつ涼しい日も出てきましたね。 パニック障害で休職してからはや３か月あまりが過ぎましたが、自分の中でまだ 会社を続けるか辞めるかの選択はできていません・・・。 旦那は家で仕事すればいいじゃんと言いますが、まあいろいろ考えると 会社勤めもいろいろ楽な面もあるんですよね・・。 まあ、その問題はさておき、最近ドタバタしていたのですが、やっと新しいテンプレートを 作成することができましたので、また申請してみたいと思います。
<a class="pin" data-pin-do="buttonPin" data-pin-custom="true" data-pin-lang="ja" href="//www.pinterest.com/pin/create/button/?url=&media=&description=" title="Pin it on Pinterest" target="_blank">pin it
追記でカスタマイズの仕方や別バージョンのソースなどを書いてみたいと思います。 １．サイドのナビゲーションの編集 
<nav class="menu">
<ul>
<li><a href="<%url>archives.html" title="記事リスト">Articles List</a></li>
<li><a href="#" title="LoremIpsum">Lorem Ipsum</a></li>
<li><a href="#" title="LoremIpsum">Lorem Ipsum</a></li>
<li><a href="<%server_url>control.php" title="管理画面">Log in</a></li>
</ul>
</nav><!--menuここまで -->
Ｌｏｒｅｍｉｐｓｕｍのところをお好きな文字列に変更し、＃にリンクアドレスを 入れてください。 ２．代替画像の編集 
<div class="headimage">
<!--body_img-->
<img src="<%topentry_image_url>">
<!--/body_img-->
<!--body_img_none-->
<img src="https://file.blog.fc2.com/mysticdiary/neon/neon6.jpg">
<!--/body_img_none-->
</div><!--headimageここまで-->
個別記事の画面ではトップに記事中の画像が表示されます。 記事中に画像がない場合は、代替画像が表示されます。 テンプレートではneon6.jpgがあらかじめ設定してありますが、他のお好きな画像にも変更できます。 
<div class="itemimg">
<!--body_img-->
<img src="<%topentry_image_url>">
<!--/body_img-->
<!--body_img_none-->
<img src="https://file.blog.fc2.com/mysticdiary/neon/neon5.jpg">
<!--/body_img_none-->
<div class="overlay"></div>
</div><!-- itemimgここまで -->
その他に画像を設定できる箇所は、５カ所あります。 個別記事以外のページと記事リストのページ、コメントの編集画面、検索結果のページです。 ３．個別記事の下の説明文 
<div class="authortext">
<span class="name"><%author_name></span>
<p>Just let this happen. We just let this flow right out of our minds. Just relax and let it flow. That easy. Let's put some happy little clouds in our world.</p>
<span class="social">
<nav class="authornav">
<ul>
<li class="instagram"><a href="https://www.instagram.com/#/?hl=ja?ref=badge" title="instagramでシェア" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i> <span>share</span></a></li><!--
--><li class="twitter"><a href="http://twitter.com/share?url=<%topentry_link>&text=<%topentry_title>" title="twitterでつぶやく" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> <span>tweet</span></a></li><!--
--><li class="facebook"><a href="http://www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" title="facebookでシェア" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> <span>share</span></a></li><!--
--><li class="pinterest"><a href="https://www.pinterest.jp/#/pins/" title="Pin it on Pinterest" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i> <span>pin it</span></a></li>
</ul>
</nav><!--authornavここまで -->
</span><!--socialここまで -->
</div><!--authortextここまで -->
英文の部分をお好きな文章に変更し、ツイッターやピンタレストのリンクにはご自分のＩＤを入れてください。 ４．サイドバーの自己紹介の編集 
<div class="profile">
<div class="profileimage">
<img src="https://file.blog.fc2.com/mysticdiary/neon/avater.jpg">
</div><!-- profileimageここまで -->
<div class="about"><span class="hello">HELLO!</span>Just let this happen. We just let this flow right out of our minds. Just relax and let it flow. That easy. Let's put some happy little clouds in our world. </div>
</div><!-- profileここまで -->
画像を変更し、英文の部分を書き直してください。 ５．スライドショーの画像の変更 
/* background-image */
.crossfade > figure:nth-child(1) {
background-image: url('https://file.blog.fc2.com/mysticdiary/neon/neon9.jpg');
animation-delay:0s;
}
.crossfade > figure:nth-child(2) {
animation-delay:6s;
background-image: url('https://file.blog.fc2.com/mysticdiary/neon/neon8.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay:12s;
background-image: url('https://file.blog.fc2.com/mysticdiary/neon/neon7.jpg');
}
これはＣＳＳで編集します。 デフォルトでは３枚画像が用意されていますので、それぞれお好みで変更してください。 ７．コメント欄のアバターの変更 
.管理人 .comtitle{
display:flex;
align-items: center;
margin:0 important;
padding:0 0 20px 0;
}
.管理人 .comtitle:before{
width:50px;
height:50px;
background-image:url(https://file.blog.fc2.com/mysticdiary/neon/avater.jpg);
background-position:center center;
background-size:100% 100%;
content:"";
display:block;
margin:0 20px 0 0;
}
管理人のところを自分のユーザー名に置き換えてください。 アバターのところに、ご自分のプロフィール画像のアドレスを入力してください。 さらに今回は別のレイアウトのソースも公開します。
<a class="pin" data-pin-do="buttonPin" data-pin-custom="true" data-pin-lang="ja" href="//www.pinterest.com/pin/create/button/?url=&media=&description=" title="Pin it on Pinterest" target="_blank">pin it
以下のソースをコピペしてご利用ください。 ＨＴＭＬ 
<!DOCTYPE html>
<html lang="<%template_language>">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="<%template_charset>">
<meta name="author" content="<%author_name>">
<meta name="description" content="<%introduction>">
<meta name="keywords" content="fc2blog,テンプレート">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml">
<link href="https://file.blog.fc2.com/mysticdiary/ress.css" rel="stylesheet" type="text/css" media="screen">
<link href="<%css_link>" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500&display=swap" rel="stylesheet">
<title><!--permanent_area--><!--not_index_area--><%sub_title> - <!--/not_index_area--><!--/permanent_area--><%blog_name></title>
</head>
<body ontouchstart="">
<div id="container">
<div id="header-container">
<header>
<h1 class="logo"><a href="./" name="top"><b><%blog_name></b></a></h1>
<span class="intro"><%introduction></span>
</header>
</div><!-- headercontainerここまで -->
<input type="checkbox" id="check">
<label for="check" class="button">
<span></span>
<span></span>
<span></span>
</label>
<div id="sidemenu">
<nav class="menu">
<ul>
<li><a href="<%url>archives.html" title="記事リスト">Articles List</a></li>
<li><a href="#" title="LoremIpsum">Lorem Ipsum</a></li>
<li><a href="#" title="LoremIpsum">Lorem Ipsum</a></li>
<li><a href="<%server_url>control.php" title="管理画面">Log in</a></li>
</ul>
</nav><!--menuここまで -->
</div><!-- sidemenuここまで-->
<!--not_permanent_area-->
<!--not_search_area-->
<!--not_edit_area-->
<!--not_titlelist_area-->
<div id="tiled">
<!--topentry-->
<div class="item">
<a href="<%topentry_link>">
<div class="itemimg" style="background-image:url(<!--body_img--><%topentry_image_url><!--/body_img--><!--body_img_none-->https://file.blog.fc2.com/mysticdiary/neon/neon.jpg<!--/body_img_none-->);background-size:cover;background-position:center center;">
<div class="time">
<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>" pubdate>
<span class="month<%topentry_month>"></span> <%topentry_day>,<%topentry_year></time>
</div>
<div class="itemtext">
<header>
<h2><%topentry_title></h2>
</header>
</div><!-- itemtextここまで-->
<div class="overlay"></div>
</div><!-- itemimgここまで-->
</a>
<div class="item-no"><%topentry_no></div>
</div><!--itemここまで-->
<!--/topentry-->
</div><!-- tiledここまで -->
<!--/not_titlelist_area-->
<!--/not_edit_area-->
<!--/not_search_area-->
<!--/not_permanent_area-->
<!--permanent_area-->
<!--not_search_area-->
<section id="maincontents">
<!--topentry-->
<div class="headimage">
<!--body_img-->
<img src="<%topentry_image_url>">
<!--/body_img-->
<!--body_img_none-->
<img src="https://file.blog.fc2.com/mysticdiary/neon/neon6.jpg">
<!--/body_img_none-->
</div><!--headimageここまで-->
<article class="blogpost">
<header class="header">
<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>" pubdate>
<span class="month<%topentry_month>"></span> <%topentry_day>,<%topentry_year></time>
<h2><a href="<%topentry_link>"><%topentry_title></a></h2>
</header>
<%topentry_body>
<!--more-->
<%topentry_more>
<!--/more-->
<div class="author">
<div class="authorimage"><img src="<%image>"></div>
<div class="authortext">
<span class="name"><%author_name></span>
<p>Just let this happen. We just let this flow right out of our minds. Just relax and let it flow. That easy. Let's put some happy little clouds in our world.</p>
<span class="social">
<nav class="authornav">
<ul>
<li class="instagram"><a href="https://www.instagram.com/#/?hl=ja?ref=badge" title="instagramでシェア" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i> <span>share</span></a></li><!--
--><li class="twitter"><a href="http://twitter.com/share?url=<%topentry_link>&text=<%topentry_title>" title="twitterでつぶやく" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> <span>tweet</span></a></li><!--
--><li class="facebook"><a href="http://www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" title="facebookでシェア" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> <span>share</span></a></li><!--
--><li class="pinterest"><a href="https://www.pinterest.jp/#/pins/" title="Pin it on Pinterest" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i> <span>pin it</span></a></li>
</ul>
</nav><!--authornavここまで -->
</span><!--socialここまで -->
</div><!--authortextここまで -->
</div><!--authorここまで -->
<footer class="blogpostfooter">
<i class="fa fa-folder-open-o" aria-hidden="true"></i> <a href="<%topentry_category_link>"><%topentry_category></a><br>
<!--topentry_tag-->
<!--tag_list-->
<i class="fa fa-tag" aria-hidden="true"></i> <a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a><br>
<!--/tag_list-->
<!--/topentry_tag-->
<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>" pubdate>
Last update:<%topentry_modified_month:short> <%topentry_modified_day>,<%topentry_modified_year><pr> <%topentry_modified_hour>:<%topentry_modified_minute></time>
</footer><!-- blogpostfooterここまで -->
<!--/topentry-->
<!--comment_area-->
<article class="comment">
<h4><a id="cm" name="comment"><!--topentry--><%topentry_comment_num><!--/topentry--> Comments</a></h4>
<!--comment-->
<div class="<%comment_name>">
<div class="ctriangle">
<header class="comtitle"><span><%comment_mail+name> <span class="says">says...</span>"<a id="comment<%comment_no>"><%comment_title></a>"</span>
</header>
<div class="cbody">
<%comment_body>
<footer class="comfooter">
<%comment_year>.<%comment_month>.<%comment_day>
<%comment_hour>:<%comment_minute> |
<%comment_url+str> | #<%comment_trip> [<a href="<%comment_edit_link>">edit</a>]
</footer>
</div>
</div>
</div>
<!--/comment-->
</article><!-- commentここまで -->
<article class="pcomment">
<form method="post" action="./" name="comment_form" autocomplete="address-line3">
<h4>Leave a reply</h4>
<input type="hidden" name="mode" value="regist">
<input type="hidden" name="comment[no]" value="<%pno>">
<p>
<label for="name">Name</label><br>
<input type="text" id="name" name="comment[name]" value="<%cookie_name>">
</p>
<p>
<label for="title">Title</label><br>
<input type="text" id="title" name="comment[title]">
</p>
<p>
<label for="email">E-mail</label><br>
<input type="email" id="email" name="comment[mail]" value="<%cookie_mail>">
</p>
<p>
<label for="website">Website</label><br>
<input type="url" id="website" name="comment[url]" value="<%cookie_url>">
</p>
<p>
<textarea id="comment" name="comment[body]"></textarea>
</p>
<p>
<label for="password">Password</label><br>
<input type="password" id="password" name="comment[pass]">
</p>
<p>
<input type="checkbox" name="comment[himitu]">  <%template_private_check>
</p>
<p>
<input type="submit" id="ppost" name="submit" value="Post Comment">
</p>
</form>
</article><!-- pcommentここまで -->
<!--/comment_area-->
<!--trackback_area-->
<article class="trackback">
<h4><a id = "trackback" name="trackback">Trackbacks</a></h4>
trackbackURL:<%trackback_url>
<!--trackback-->
<header class="tbtitle">
<a name="trackback<%tb_no>"><%tb_title></a>
</header>
<%tb_excerpt>
<footer class="tbfooter">
<%tb_year>.<%tb_month>.<%tb_day>
<%tb_hour>:<%tb_minute> <a href = "<%tb_url>"><%tb_blog_name></a>
</footer>
<!--/trackback-->
</article><!-- trackbackここまで -->
<!--/trackback_area-->
</article><!-- blogpostここまで -->
</section><!--maincontentsここまで-->
<!--/not_search_area-->
<!--/permanent_area-->
<!--titlelist_area-->
<article class="titlelist">
<div class="headimage">
<img src="https://file.blog.fc2.com/mysticdiary/neon/neon7.jpg">
</div><!--headimageここまで-->
<div class="list">
<h2>Articles list</h2>
<!--titlelist-->
<%titlelist_eno>:&nbsp;<a href="<%titlelist_url>"><%titlelist_title></a><br />
<footer class="listfooter">(<%titlelist_year>.<%titlelist_month>.<%titlelist_day>&nbsp;|&nbsp;<a href="<%titlelist_category_url>"><%titlelist_category></a>&nbsp;<%titlelist_comment_num>comments)</footer>
<!--/titlelist-->
</div>
</article><!-- titlelistここまで -->
<!--/titlelist_area-->
<!--edit_area-->
<article class="ecomment">
<div class="headimage">
<img src="https://file.blog.fc2.com/mysticdiary/neon/neon8.jpg">
</div><!--headimageここまで-->
<div class="ecomment-inner">
<h4>Edit comment</h4>
<form method="post" action="./" name="comment_form" autocomplete="address-line3">
<input type="hidden" name="mode" value="edit">
<input type="hidden" name="mode2" value="edited">
<input type="hidden" name="edit[rno]" value="<%eno>">
<p>
<label for="name">Name</label><br>
<input type="text" id="name" name="edit[name]" value="<%edit_name>">
</p>
<p>
<label for="title">Title</label><br>
<input type="text" id="title" name="edit[title]" value="<%edit_title>">
</p>
<p>
<label for="email">E-mail</label><br>
<input type="email" id="email" name="edit[mail]" value="<%edit_mail>">
</p>
<p>
<label for="website">Website</label><br>
<input type="url" id="website" name="edit[url]" value="<%edit_url>">
</p>
<p>
<textarea id="comment" name="edit[body]" ><%edit_body></textarea>
</p>
<p>
<label for="password">Password</label><br>
<input type="password" id="password" name="edit[pass]">
</p>
<p>
<input type="checkbox" name="comment[himitu]">  <%template_private_check>
</p>
<p>
<input type="submit" id="ecom" name="submit" value="Edit Comment">
<input type="submit" id="dcom" name="edit[delete]" value="Delete Comment">
</p>
</form>
</div><!-- ecomment-innerここまで -->
</article><!-- ecommentここまで -->
<!--/edit_area-->
<!--search_area-->
<article class="searcharea">
<div class="headimage">
<img src="https://file.blog.fc2.com/mysticdiary/neon/neon9.jpg">
</div><!--headimageここまで-->
<h4>「<%sub_title>」の検索結果</h4>
<!--topentry-->
<div class="item">
<a href="<%topentry_link>">
<div class="itemimg">
<!--body_img-->
<img src="<%topentry_image_url>">
<!--/body_img-->
<!--body_img_none-->
<img src="https://file.blog.fc2.com/mysticdiary/neon/neon5.jpg">
<!--/body_img_none-->
<div class="overlay"></div>
</div><!-- itemimgここまで -->
<div class="searchtext">
<header>
<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>" pubdate>
<span class="month<%topentry_month>"></span> <%topentry_day>,<%topentry_year></time>
<h2><%topentry_title></h2>
</header>
<div class="text_overflow">
<%topentry_discription>
</div><!-- text_overflowここまで -->
</div><!-- searchtextここまで -->
</a>
</div><!--itemここまで-->
<!--/topentry-->
<div class="none block<!--topentry--><%topentry_no><!--/topentry-->"> この用語を含む記事は見つかりませんでした。</div>
</article><!-- searchareaここまで -->
<!--/search_area-->
<aside id="sidebar">
<div class="profile">
<div class="profileimage">
<img src="https://file.blog.fc2.com/mysticdiary/neon/avater.jpg">
</div><!-- profileimageここまで -->
<div class="about"><span class="hello">HELLO!</span>Just let this happen. We just let this flow right out of our minds. Just relax and let it flow. That easy. Let's put some happy little clouds in our world. </div>
</div><!-- profileここまで -->
<!--plugin-->
<!--plugin_first-->
<div class="plugcontent">
<h3><span><%plugin_first_title></span></h3>
<div class="plugin">
<p style="margin:10px 0;"><%plugin_first_description></p>
<%plugin_first_content>
<p style="margin-top:10px;"><%plugin_first_description2></p>
</div>
</div><!--plugcontentここまで-->
<!--/plugin_first-->
<!--plugin_second-->
<div class="plugcontent">
<h3><span><%plugin_second_title></span></h3>
<div class="plugin">
<p style="margin:10px 0;"><%plugin_second_description></p>
<%plugin_second_content>
<p style="margin-top:10px;"><%plugin_second_description2></p>
</div>
</div><!--plugcontentここまで-->
<!--/plugin_second-->
<!--plugin_third-->
<div class="plugcontent">
<h3><span><%plugin_third_title></span></h3>
<div class="plugin">
<p style="margin:10px 0;"><%plugin_third_description></p>
<%plugin_third_content>
<p style="margin-top:10px;"><%plugin_third_description2></p>
</div>
</div><!--plugcontentここまで-->
<!--/plugin_third-->
<!--/plugin-->
<div class="address">
Designed by <a href="https://mysticdiary.blog.fc2.com/">MysticDiary</a><br>
<small>Copyright © <%blog_name> All Rights Reserved.</small>
</div><!-- addressここまで -->
</aside><!--sidebarここまで-->
<!--prevpage-->
<div class="next">
<a href="<%prevpage_url>">←　NEWER</a>
</div>
<!--/prevpage-->
<!--nextpage-->
<div class="prev">
<a href="<%nextpage_url>">→　OLDER</a>
</div>
<!--/nextpage-->
<!--preventry-->
<a href="<%preventry_url>" class="prevtitle">←　<%preventry_title></a>
<!--/preventry-->
<!--nextentry-->
<a href="<%nextentry_url>" class="nexttitle">→　<%nextentry_title></a>
<!--/nextentry-->
</div><!--containerここまで-->
<nav id="page-top"><a href="#">TOP</a></nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/bb37d85187.js"></script>
<script>
$(function(){
var wordLength = '70';
var afterTxt = ' …';
$('.text_overflow').each(function(){
var txtLength = $(this).text().length;
var txtTrim = $(this).text().substr(0,(wordLength))
if(wordLength < txtLength) {
$(this).html(txtTrim + afterTxt).css({visibility:'visible'});
} else if(wordLength >= txtLength) {
$(this).css({visibility:'visible'});
}
});
});
</script>
<script type="text/javascript">
$(".logo b").children().addBack().contents().each(function(){
if (this.nodeType == 3) {
var $this = $(this);
$this.replaceWith($this.text().replace(/(S)/g, "<span>



amp;</span>"));
}
});
</script>
<%ad><%ad2>
</body>
</html>

CSS

@charset "UTF-8";
/************************************************************************************
link-style
*************************************************************************************/
a:link { color: #eeeeee;text-decoration:none;transition: 1s ease-in-out;}
a:visited { color: #eeeeee; text-decoration:none;transition: 1s ease-in-out;}
a:active { color: #ffffff; text-decoration:none;}
a:hover { color: #ffffff;text-decoration:none;}
/************************************************************************************
typography
*************************************************************************************/
h1,h2,h3,h4,h5,h6{
line-height:1.2em;
font-family: 'Oswald', sans-serif;
letter-spacing:2px;
font-weight:300;
text-transform:uppercase;
}
/************************************************************************************
general
*************************************************************************************/
html{
scroll-behavior: smooth;
}
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
}
/************************************************************************************
list-style
*************************************************************************************/
ul,ol{
margin:0;
padding:0;
list-style-type:none;
}
.blogpost ul,.plugcontent ul{
margin:0 0 0 1.5em;
}
.blogpost ol,.plugcontent ol{
margin:0 0 0 1.5em;
}
.blogpost ul li,.plugcontent ul li{
list-style-type:circle;
list-style-position:outside;
margin:0;
padding:0;
position:relative;
height:100%;
}
.blogpost ol li,.plugcontent ol li{
list-style-type:decimal;
list-style-position:outside;
margin:0;
padding:0;
position:relative;
height:100%;
}
/************************************************************************************
body
*************************************************************************************/
body {
font-size:14px;
font-family:'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角あゴ ProN', Meiryo, メイリオ, 'MS PGothic', Helvetica, Arial, sans-serif;
color:#eeeeee;
line-height:1.9em;
word-wrap:break-word;
background-color:#111111;
position:relative;
overlow:hidden;
}
/************************************************************************************
container
*************************************************************************************/
#container{
position:relative;
display:grid;
grid-template-rows: 60px auto;
grid-template-columns:70px auto 300px;
min-height: 100vh;
}
/************************************************************************************
header-container
*************************************************************************************/
#header-container{
grid-row: 1 / 2;
grid-column: 1 /4;
padding:0 8.4%;
border-bottom:1px #666666 solid;
}
#header-container header{
width:100%;
height:100%;
padding:0;
margin:0;
display: flex;
align-items:center;
}
h1 a:link,h1 a:visited,h1 a:hover{
color:#fee;
margin:0 20px 0 0;
padding:0 20px 0 0;
border-right:1px #666666 solid;
font-size:25px;
font-weight:400;
letter-spacing:5px;
}
.logo {
user-select: none;
}
.logo b{
color:#fee;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em rgba(251,0,102,1), 0 0 0.5em rgba(251,0,102,1), 0 0 0.1em rgba(251,0,102,1), 0 10px 3px #000;
}
.logo b span:nth-of-type(2){
animation: blink linear infinite 2s;
}
.logo b span:nth-of-type(7){
animation: blink linear infinite 3s;
}
@keyframes blink {
78% {
color: inherit;
text-shadow: inherit;
}
79%{
color: #333;
}
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #333;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #333;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}
}
.intro{
margin:0;
font-size:12px;
color:#eeeeee;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
}
/************************************************************************************
sidemenu
*************************************************************************************/
#sidemenu{
grid-row: 2 / 3;
grid-column: 1 /2;
padding:0;
position:relative;
border-right:1px #666666 solid;
overflow:hidden;
z-index:99999;
background-color:#111111;
}
.menu{
font-family: 'Oswald', sans-serif;
font-weight:400;
letter-spacing:4px;
text-transform:uppercase;
color:#eeeeee !important;
font-size:12px;
width:100vh;
height:100%;
padding:0 50px 0 0;
margin:0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin:left top;
position:absolute;
top:100vh;
}
.menu a:link,.menu a:visited,.menu a:hover{
color:#eeeeee !important;
}
.menu ul{
display:flex;
flex-direction:row-reverse;
margin:0;
}
.menu ul li{
margin:0;
padding:20px 0 0 25px;
}
#check{
position:absolute;
visibility:hidden;
}
.button,
.button span {
display:none;
transition: 1s;
cursor:pointer;
}
/************************************************************************************
tiled
*************************************************************************************/
#tiled{
grid-row: 2 / 3;
grid-column: 2 /3;
padding:50px 3%;
display:flex;
flex-wrap: wrap;
align-content:flex-start;
}
.item{
width:25%;
height:55vh;
margin:0;
padding:0;
position:relative;
}
.item:nth-child(even){
margin-top:80px;
}
.item a{
width:100%
height:100%
padding:0;
}
.itemimg{
width:80%;
height:40vh;
margin:0 auto;
position:relative;
}
.overlay {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-color:rgba(0,0,0,0.5);
transition:0.6s;
}
.item:nth-child(2n+3) .overlay{
background-color:rgba(251,0,102,0.5);
filter: contrast(120%);
transition:0.6s;
animation: blinkimged linear infinite 3s;
}
.overlay:hover {
background-color:transparent;
}
.item:nth-child(2n+3) .overlay:hover{
background-color:transparent;
}
@keyframes blinkimg {
78% {
background-blend-mode: multiply;
}
79%{
background-blend-mode: normal;
}
80% {
background-blend-mode: normal;
}
81% {
background-blend-mode: multiply;
}
82% {
background-blend-mode: normal;
}
83% {
background-blend-mode: multiply;
}
92% {
background-blend-mode: multiply;
}
92.5% {
background-blend-mode: multiply;
}
}
@keyframes blinkimged {
78% {
background-color:rgba(251,0,102,0.5);
}
79%{
background-color:transparent;
}
80% {
background-color:transparent;
}
81% {
background-color:rgba(251,0,102,0.5);
}
82% {
background-color:transparent;
}
83% {
background-color:rgba(251,0,102,0.5);
}
92% {
background-color:rgba(251,0,102,0.5);
}
92.5% {
background-color:rgba(251,0,102,0.5);
}
}
.time{
width:100%;
text-align:right;
font-family: 'Oswald', sans-serif;
font-weight:300;
text-transform:uppercase;
letter-spacing:4px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin:right top;
color:#eeeeee;
}
.time time{
font-size:10px;
padding:0;
}
.item:nth-child(even) .time{
transform-origin:left top;
width:100%;
height:auto;
bottom:-25px;
right:-100%;
position:absolute;
text-align:left;
}
.month01:before{content:"January";}
.month02:before{content:"February";}
.month03:before{content:"March";}
.month04:before{content:"April";}
.month05:before{content:"May";}
.month06:before{content:"June";}
.month07:before{content:"July";}
.month08:before{content:"August";}
.month09:before{content:"September";}
.month10:before{content:"October";}
.month11:before{content:"November";}
.month12:before{content:"December";}
.itemtext{
padding:0 20px 0 0;
position:relative;
z-index:110;
color:#ffffff;
text-shadow:1px 1px 1px #000000;
position:absolute;
top:50px;
left:-20px;
}
.item:nth-child(even) .itemtext{
position:absolute;
top:auto;
bottom:50px;
left:-20px;
}
.itemtext h2{
padding:0;
margin:0;
font-size:18px;
font-weight:300;
}
.item-no{
font-size:50px;
position:absolute;
bottom:80px;
right:20px;
font-family: 'Oswald', sans-serif;
font-weight:400;
letter-spacing:5px;
text-transform:uppercase;
color:#c7c6c5 !important;
opacity:0.8;
}
.item:nth-child(even) .item-no{
position:absolute;
top:-30px;
bottom:auto;
}
/************************************************************************************
maincontents
*************************************************************************************/
#maincontents{
grid-row: 2 / 3;
grid-column: 2 /3;
position:relative;
}
.headimage{
width:100%;
height:40vh;
overflow:hidden;
position:relative;
}
.headimage img{
width:100% !important;
height:100% !important;
position:absolute;
top:0 !important;
left:0 !important;
object-fit:cover;
}
.blogpost{
width:65%;
padding:50px 100px 50px 0;
margin:0 0 0 35%;
position:relative;
z-index:2;
}
.header{
margin:0 0 0 -100px;
}
.header time{
font-size:10px;
font-family: 'Oswald', sans-serif;
font-weight:300;
text-transform:uppercase;
letter-spacing:3px;
margin:0;
}
.header h2{
padding:0 0 20px 0;
margin:0;
font-size:35px;
}
.blogpost img{
max-width:100%;
height: auto;
}
/************************************************************************************
author
*************************************************************************************/
.author{
width:100%;
height:auto;
margin:20px 0;
padding:20px;
text-align:left;
display:flex;
letter-spacing:2px;
background-color:#222222;
}
.authorimage{
width:20%;
padding:20px 10px 20px 0;
}
.authorimage img{
width:100%;
height:auto;
}
.authortext{
width:80%;
padding:20px 0 20px 10px;
text-align:left;
}
.name{
font-family: 'Oswald', sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:3px;
font-size:13px;
}
.authortext p{
font-size:10px;
}
/* social */
.social{
padding:0;
}
.authornav{
margin:0 !important;
padding:0 !important;
}
.authornav ul{
margin:0 !important;
}
.authornav li {
padding:0 !important;
margin:0 15px 0 0 !important;
display:inline-block !important;
overflow:hidden;
}
.authornav li a:link,.authornav li a:visited{
font-size:12px !important;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
}
.authornav li a:link,.authornav li a:visited{
display:block;
width:15px;
height:20px;
}
.authornav li a:hover{
width:70px;
transition: width 0.5s linear;
-webkit-transition:width 0.5s linear;
}
/* footer */
.blogpostfooter{
width:100%;
height:auto;
text-align:right;
font-size:11px !important;
}
.blogpostfooter time{
padding:0;
margin:0;
text-align:right;
font-size:10px;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
}
.blogpostfooter time:after{
content:"";
width:100%;
height:100%;
border:none;
position:relative;
}
/************************************************************************************
related post
*************************************************************************************/
#fc2relate_entry_thumbnail_area{
width:100%;
padding:0;
margin:50px 0;
overflow:auto;
word-wrap:break-word;
}
#fc2relate_entry_thumbnail_area .relate_dt{
margin:0 auto;
padding:10px 0;
font-size:0px !important;
font-family: 'Oswald', sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:10px;
text-align:center;
color:#eeeeee;
}
#fc2relate_entry_thumbnail_area .relate_dt:before {
font-size: 15px;
content: "YOU MAY ALSO LIKE";
margin-left:50px;
}
#fc2relate_entry_thumbnail_area ul{
width:100%;
margin:0;
padding:0;
display:flex;
justify-content:space-between;
text-align:center;
}
#fc2relate_entry_thumbnail_area li{
width:30% !important;
padding:0;
list-style-type:none;
position:relative;
text-align:center;
　　pointer-events:none;
}
#fc2relate_entry_thumbnail_area .relate_entry_thumbnail{
width:100% !important;
height:auto !important;
overflow:hidden;
position:relative;
}
#fc2relate_entry_thumbnail_area .relate_entry_thumbnail:before {
content: "";
display: block;
padding-top: 75%;
}
#fc2relate_entry_thumbnail_area .relate_entry_thumbnail img{
width:100% !important;
height:100% !important;
position:absolute;
top:0 !important;
left:0 !important;
object-fit:cover;
}
#fc2relate_entry_thumbnail_area .relate_entry_thumbnail{
display:block;
overflow:hidden；
}
#fc2relate_entry_thumbnail_area .relate_entry_title{
width:100%;
height:100%;
padding:15px;
position:absolute;
overflow:hidden !important;
top:0;
left:0;
display:flex !important;
justify-content:center !important;
align-items:center !important;
flex-direction:column;
color:#ffffff;
font-size:12px;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000000;
background-color:rgba(0,0,0,0.5);
transition:0.3s;
}
#fc2relate_entry_thumbnail_area .relate_entry_title:hover{
background-color:rgba(0,0,0,0.0);
}
#fc2relate_entry_thumbnail_area .relate_entry_title .relate_entry_title_text{
max-height:100% !important;
display:block !important;
}
#fc2relate_entry_thumbnail_area .relate_entry_date{
margin:3px 0 0 0 !important;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
font-size:10px;
}
/************************************************************************************
comment
*************************************************************************************/
.comment{
padding:40px 0 0 0;
margin:40px 0 30px 0;
font-size:13px;
}
h4{
font-size:15px;
padding:0 0 20px 0;
font-weight:400;
letter-spacing:10px;
}
.ctriangle{
width:100%;
position:relative;
margin:18px 0 10px 0;
padding:30px;
background-color:#222222;
}
.管理人 .comtitle{
display:flex;
align-items: center;
margin:0 important;
padding:0 0 20px 0;
}
.says{
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
font-size:11px;
}
.管理人 .comtitle:before{
width:50px;
height:50px;
background-image:url(https://file.blog.fc2.com/mysticdiary/neon/avater.jpg);
background-position:center center;
background-size:100% 100%;
content:"";
display:block;
margin:0 20px 0 0;
}
.comtitle span{
width : calc(100% - 70px) ;
}
.cbody{
padding:10px;
}
.comfooter{
padding:10px 0 0 0;
margin:0;
font-size:9px;
text-align:right;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
}
/************************************************************************************
post comment,edit comment
*************************************************************************************/
.pcomment{
padding:40px 0 0 0;
margin:0 0 30px 0;
}
.pcomment p,.ecomment p{
padding:5px 0;
}
.ecomment{
grid-row: 2 / 3;
grid-column: 2 /3;
position:relative;
}
.ecomment-inner{
padding:50px 100px 50px 35%;
}
.pcomment label,.ecomment label{
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
font-size:9px;
}
#name,#title,#email,#website{
width:48%;
padding:5px 10px;
margin:0 1% 0 0;
border:none;
outline:none;
background-color:transparent;
border-bottom:1px #666666 solid;
display:inline;
font-size:13px;
}
input[type="text"],
input[type="email"],
input[type="url"]{
-webkit-border-radius:0;
-webkit-appearance:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.075) inset;
background-color:transparent;
font-size:13px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus{
outline:none !important;
border:none;
}
input[type="checkbox"]{
vertical-align:middle;
}
textarea{
width:99.9%;
height:150px;
scrollbar-base-color:transparent;
scrollbar-track-color:transpanret;
overflow:auto;
border:none;
outline:none;
border-bottom:1px #666666 solid;
-webkit-appearance: none;
border-radius:0;
padding:5px 10px;
margin-top:20px;
background-color:transparent;
font-size:13px;
}
#password{
width:30%;
padding:5px 10px;
border:none;
outline:none;
border-bottom:1px #666666 solid;
background-color:transparent;
}
#ppost,#ecom,#dcom{
padding:5px 10px;
margin:0 0 10px 0;
height:auto;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em rgba(251,0,102,1), 0 0 0.5em rgba(251,0,102,1), 0 0 0.1em rgba(251,0,102,1), 0 10px 3px #000;
width: auto;
color: #ffe;
font-size:10px;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
background-color:#333333;
}
/************************************************************************************
trackback
*************************************************************************************/
.trackback{
padding:40px 0 0 0;
margin:0 0 30px 0;
word-break: break-all;
}
.tbfooter{
padding:10px 0 0 0;
border-bottom:1px #666666 solid;
margin:0;
font-size:9px;
text-align:right;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
}
/************************************************************************************
titlelist
*************************************************************************************/
.titlelist{
grid-row: 2 / 3;
grid-column: 2 /3;
position:relative;
}
.list{
width:65%;
padding:50px 100px 50px 0;
margin:0 0 0 35%;
position:relative;
z-index:2;
}
.list h2{
padding:0;
font-size:35px;
margin:0 0 20px -100px;
font-family: 'Oswald', sans-serif;
font-weight:300;
text-transform:uppercase;
letter-spacing:3px;
}
.listfooter{
padding-bottom:10px;
margin-bottom:10px;
font-size:9px;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
}
/***********************************************************************************
searcharea
*************************************************************************************/
.searcharea{
grid-row: 2 / 3;
grid-column: 2 /3;
position:relative;
display:flex;
flex-direction:column;
padding:0 0 50px 0;
}
.searcharea h4{
text-align:center;
font-size:18px;
margin:50px 0 20px 0;
}
.searcharea .item{
width:80%;
height:auto;
margin:0 auto;
padding:30px 0;
position:relative;
overflow:hidden;
display:block;
border-bottom:1px #666666 solid;
border-right:none;
}
.searcharea .item a{
display:flex !important;
flex-direction:row;
display:block;
}
.searcharea .item:nth-child(even) a{
flex-direction:row;
}
.searcharea .item:nth-child(odd) a{
top:0;
bottom:0;
position:relative;
}
.searcharea .itemimg{
width:40%;
height:20vh;
position:relative;
}
.searcharea .itemimg img{
width:100% !important;
height:100% !important;
position:absolute;
top:0 !important;
left:0 !important;
object-fit:cover;
}
.searchtext{
width:60%;
padding:0 0 0 50px;
}
.searchtext time{
font-size:10px;
padding:0;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
}
.searchtext header{
padding:0 0 20px 0;
}
.text_overflow{
margin:0;
font-size:12px;
padding:0;
visibility:hidden;
}
.none {
display:none;
}
.block {
display:block;
padding:0 30px;
height:400px;
}
/************************************************************************************
sidebar
*************************************************************************************/
#sidebar{
padding:50px 30px 30px 30px;
grid-row: 2 / 3;
grid-column:3/4;
margin:0;
position:relative;
z-index:9999;
background-color:#111111;
border-left:1px #666666 solid;
}
.profile{
width:100%;
height:auto;
margin-bottom:30px;
}
.profileimage{
width:100%;
position:relative;
}
.profileimage:before {
content: "";
display: block;
padding-top:100%;
}
.profileimage img{
width:100% !important;
height:100% !important;
position:absolute;
top:0 !important;
left:0 !important;
object-fit:cover;
}
.about{
width:100%;
height:auto;
background-color:#222222;
padding:30px;
position:relative;
font-size:13px;
}
.hello{
position:absolute;
top:-10px;
font-size:30px;
font-family: 'Oswald', sans-serif;
font-weight:400;
letter-spacing:5px;
}
#sidebar h3{
padding:0;
font-size:15px;
margin:0 0 20px 0;
font-family: 'Oswald', sans-serif;
font-weight:400;
letter-spacing:3px;
text-transform:uppercase;
}
.plugcontent{
font-size:13px;
margin:0 0 30px 0;
}
#sidebar input[type="text"]{
width:99%;
border:1px #666666 solid;
background-color:#222222;
}
#sidebar input[type=submit]{
font-size:9px;
font-family: 'Oswald', sans-serif;
font-weight:300;
text-transform:uppercase;
letter-spacing:2px;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em rgba(251,0,102,1), 0 0 0.5em rgba(251,0,102,1), 0 0 0.1em rgba(251,0,102,1), 0 10px 3px #000;
color: #ffe;
padding:0 10px !important;
background-color:#333333;
}
.address{
font-size:10px;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
}
/************************************************************************************
navigation
*************************************************************************************/
.prev a{
width:130px;
height:50px;
padding:10px 20px;
background-color: rgba(0, 0, 0, 0.5);
color:#ffffff;
z-index:999;
position:fixed;
top:350px;
right:220px;
transition:0.3s;
font-family: 'Oswald', sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:3px;
font-size:13px;
display:block;
text-align:left;
}
.prev a:hover{
right:300px;
}
.next a{
width:130px;
height:50px;
padding:10px 20px;
background-color: rgba(0, 0, 0, 0.5);
color:#ffffff;
z-index:999;
position:fixed;
top:400px;
right:220px;
transition:0.3s;
font-family: 'Oswald', sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:3px;
font-size:13px;
display:block;
text-align:left;
}
.next a:hover{
right:300px;
}
a.prevtitle{
width:40px;
height:auto;
padding:20px 13.5px;
z-index:999;
position:fixed;
top:60px;
left:50px;
transition:0.3s;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
font-size:13px;
display:block;
background-color:rgba(0,0,0,0.5);
text-align:center;
color:#ffffff;
line-height:1.3em;
}
a.prevtitle:link,.prevtitle:visited{
color:#ffffff;
transition:0.3s;
}
a.prevtitle:hover{
left:70px;
color:#ffffff;
}
a.nexttitle{
width:40px;
height:auto;
padding:20px 13.5px;
z-index:999;
position:fixed;
top:60px;
right:280px;
transition:0.3s;
font-family: 'Oswald', sans-serif;
font-weight:300;
letter-spacing:2px;
text-transform:uppercase;
font-size:13px;
display:block;
background-color:rgba(0,0,0,0.5);
text-align:center;
color:#ffffff;
line-height:1.3em;
}
a.nexttitle:link,a.nexttitle:visited{
color:#ffffff;
transition:0.3s;
}
a.nexttitle:hover{
right:300px;
color:#ffffff;
}
#page-top a {
font-size:13px;
font-family: 'Oswald', sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:3px;
text-align:center;
line-height:1.5em;
position:absolute;
bottom:20px;
right:20px;
z-index:999999;
padding:10px 7px 10px 10px;
background-color:rgba(0,0,0,0.5);
display:block;
}
/************************************
** image
************************************/
figure {
margin: 0;
}
img {
max-width:100%;
height: auto;
border: 0;
-webkit-backface-visibility: hidden;
}
/************************************
** p,table
************************************/
p,
.paragraph {
margin:0;
}
table {
margin-bottom: 20px;
max-width: 100%;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
table th {
background-color: #333333;
}
table tr:nth-of-type(2n+1) {
background-color: #222222;
}
table th,
table td {
border: 1px solid #666666;
padding: 6px;
}
/************************************
** 引用（blockquote）
************************************/
blockquote {
background-color: #222222;
margin: 1em 0;
padding: 30px 1.2em;
position: relative;
}
blockquote::before, blockquote::after {
color: #666666;
font-family: serif;
position: absolute;
font-size: 400%;
}
blockquote::before {
content: "“";
line-height: 1.1;
left: 10px;
top: 0;
}
blockquote::after {
content: "”";
line-height: 0;
right: 10px;
bottom: 0px;
}
/************************************
** pre
************************************/
pre{
background-color: #222222;
border: 1px solid #666666;
overflow:auto;
padding: 10px;
margin: 1em 0;
max-width:500px;
}
/************************************************************************************
smaller than 1200
*************************************************************************************/
@media screen and (max-width: 1200px) {
#container{
display:grid;
grid-template-rows: 60px 1fr;
grid-template-columns: 1fr 250px;
min-height: 100vh;
}
#header-container{
grid-row: 1 / 2;
grid-column: 1 /3;
padding:0 5%;
border-bottom:1px #666666 solid;
}
#sidemenu{
width:100%;
height:100vh;
position:fixed;
top:0;
left:0;
border:0px #666666 solid;
overflow:hidden;
z-index:999999;
visibility:hidden;
opacity: 0;
transition:1s linear;
background-color:transparent;
}
.menu{
width:100%;
height:100%;
padding:50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin:left top;
position:relative;
top:0;
background-color: rgba(0,0,0,0.8);
}
.menu ul{
display:flex;
justify-content:flex-start;
flex-direction: column;
align-items:center;
}
.menu ul li{
margin:0;
padding:15px 0;
font-size:17px;
list-style:none;
text-align:left;
}
.menu a:link,.menu a:visited,.menu a:hover{
color:#ddd7c9 !important;
}
#check:checked~ #sidemenu{
visibility:visible;
opacity:1;
}
#check:not(:checked)~ #sidemenu{
visibility:hidden;
opacity:0;
}
.button {
position: fixed;
top:0;
right:0;
width:65px;
height:60px;
padding:20px;
z-index:9999999;
display:block;
}
.button span {
width:23px;
height: 2px;
background-color: #cccccc;
border-radius: 2px;
z-index:9999999;
display:block;
position:absolute;
}
.button span:nth-of-type(1) {
top: 20px;
}
.button span:nth-of-type(2) {
top: 28px;
}
.button span:nth-of-type(3) {
top: 36px;
}
#check:checked~ .button span:nth-of-type(1) {
-webkit-transform: translateY(9px) rotate(-45deg);
transform: translateY(9px) rotate(-45deg);
}
#check:checked~ .button span:nth-of-type(2) {
opacity: 0;
}
#check:checked~ .button span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);
}
#tiled{
grid-row: 2 / 3;
grid-column: 1 /2;
padding:50px 3%;
display:flex;
flex-wrap: wrap;
}
.item{
width:33.3%;
height:50vh;
margin:0;
padding:0;
position:relative;
}
.item:nth-child(even){
margin-top:0px;
}
.item:nth-child(3n+2){
margin-top:80px;
}
.itemimg{
width:80%;
height:40vh;
margin:0 auto;
position:relative;
}
.item:nth-child(even) .time{
transform-origin:right top;
width:100%;
height:auto;
bottom:auto;
right:auto;
position:absolute;
text-align:right;
}
.item:nth-child(3n+2) .time{
transform-origin:left top;
width:100%;
height:auto;
bottom:-25px;
right:-100%;
position:absolute;
text-align:left;
}
.item:nth-child(even) .itemtext{
position:absolute;
top:50px;
bottom:auto;
left:-20px;
}
.item:nth-child .itemtext{
position:absolute;
top:50px;
bottom:auto;
left:-20px;
}
.item:nth-child(3n+2) .itemtext{
position:absolute;
top:auto;
bottom:50px;
left:-20px;
}
.item:nth-child(even) .item-no{
position:absolute;
top:auto;
bottom:auto;
}
.item:nth-child(odd) .item-no{
position:absolute;
top:auto;
bottom:45px;
}
.item:nth-child(3n+2) .item-no{
position:absolute;
top:-30px;
bottom:auto;
}
#maincontents{
grid-row: 2 / 3;
grid-column: 1 /2;
position:relative;
}
.blogpost{
width:90%;
padding:50px 5%;
margin:0 auto;
position:relative;
z-index:2;
}
.header{
margin:0;
}
.ecomment{
grid-row: 2 / 3;
grid-column: 1 /2;
position:relative;
}
.ecomment-inner{
padding:50px 5%;
}
.titlelist{
grid-row: 2 / 3;
grid-column: 1 /2;
position:relative;
}
.list{
width:90%;
padding:50px 0;
margin:0 auto;
position:relative;
z-index:2;
}
.list h2{
padding:0;
font-size:40px;
margin:0 0 20px 0;
}
.searcharea{
grid-row: 2 / 3;
grid-column: 1 /2;
position:relative;
display:flex;
flex-direction:column;
}
.searcharea .item{
margin:0 auto;
width:90%;
}
#sidebar{
padding:50px 30px 0px 30px;
grid-row: 2 / 3;
grid-column:2/3;
margin:0;
position:relative;
z-index:9999;
background-color:#111111;
border-left:1px #666666 solid;
}
.address{
width:100%;
margin:0;
padding:30px 0 10px 0;
}
/*navigation*/
.prev a{
z-index:999;
position:fixed;
top:350px;
right:170px;
}
.prev a:hover{
right:250px;
}
.next a{
z-index:999;
position:fixed;
top:400px;
right:170px;
}
.next a:hover{
right:250px;
}
a.prevtitle{
z-index:999;
position:fixed;
top:60px;
left:-20px;
}
a.prevtitle:hover{
left:0;
}
a.nexttitle{
z-index:999;
position:fixed;
top:60px;
right:230px;
}
a.nexttitle:hover{
right:250px;
}
}
/************************************************************************************
smaller than 800
*************************************************************************************/
@media screen and (max-width: 800px) {
#container{
display:block;
width:100%;
padding:0;
margin:0;
}
#header-container{
width:100%;
height:60px;
padding:0 5%;
border-bottom:1px #666666 solid;
}
#tiled{
width:100%;
padding:50px 5%;
display:block;
}
.item{
width:100%;
height:40vh;
margin:0 0 50px 0;
padding:0;
position:relative;
overflow:hidden;
}
.item:nth-child(3n+2){
margin-top:0px;
}
.itemimg{
width:80%;
height:40vh;
margin:0 auto;
position:relative;
}
.item:nth-child(3n+2) .time{
transform-origin:right top;
width:100%;
height:auto;
bottom:auto;
right:auto;
position:absolute;
text-align:right;
}
.item:nth-child .itemtext{
position:absolute;
top:50px;
bottom:auto;
left:-20px;
}
.item:nth-child(3n+2) .itemtext{
position:absolute;
top:50px;
bottom:auto;
left:-20px;
}
.item:nth-child(even) .item-no{
position:absolute;
top:auto;
right:40px;
bottom:20px;
}
.item:nth-child(odd) .item-no{
position:absolute;
top:auto;
right:40px;
bottom:20px;
}
.item:nth-child(3n+2) .item-no{
position:absolute;
top:auto;
right:40px;
bottom:20px;
}
.item:nth-child .item-no{
position:absolute;
top:auto;
right:40px;
bottom:20px;
}
.header{
margin:0;
}
.blogpost{
width:100%;
padding:50px 5%;
margin:0 auto;
position:relative;
z-index:2;
}
.ecomment{
width:100%;
position:relative;
}
.searcharea{
width:100%;
position:relative;
display:flex;
flex-direction:column;
}
.searchtext{
padding:0 0 0 20px;
}
#sidebar{
padding:50px 5% 0 5%;
width:100%;
margin:0;
position:relative;
z-index:9999;
border-left:0px #666666 solid;
border-top:1px #666666 solid;
}
.prev a{
z-index:99999;
position:fixed;
top:300px;
right:-90px;
}
.prev a:hover{
right:0px;
}
.next a{
z-index:99999;
position:fixed;
top:350px;
right:-90px;
}
.next a:hover{
right:0px;
}
a.prevtitle{
z-index:99999;
position:fixed;
top:60px;
left:-20px;
}
a.prevtitle:hover{
left:0;
}
a.nexttitle{
z-index:99999;
position:fixed;
top:60px;
right:-20px;
}
a.nexttitle:hover{
right:0;
}
}
/************************************************************************************
smaller than 568
*************************************************************************************/
@media screen and (max-width: 568px) {
/* disable webkit text size adjust (for iPhone) */
html {
-webkit-text-size-adjust: none;
}
.item:nth-child(even) .item-no{
position:absolute;
top:auto;
right:20px;
bottom:20px;
}
.item:nth-child(odd) .item-no{
position:absolute;
top:auto;
right:20px;
bottom:20px;
}
.item:nth-child(3n+2) .item-no{
position:absolute;
top:auto;
right:20px;
bottom:20px;
}
.item:nth-child .item-no{
position:absolute;
top:auto;
right:20px;
bottom:20px;
}
.authorimage{
width:40%;
padding:20px 10px 20px 0;
border-right:none;
}
.authortext{
width:60%;
padding:20px 0 20px 10px;
text-align:left;
}
#fc2relate_entry_thumbnail_area .relate_dt{
letter-spacing:3px;
}
#fc2relate_entry_thumbnail_area .relate_dt:before {
font-size: 13px;
content: "YOU MAY ALSO LIKE";
margin-left:0px;
}
}

		


							

												
Total

							
1

							
Shares

										

				
			


										


							

																	
								
								
																	Share
								
																	0
															

							
							
													

											


							

																	
								
								
																	Tweet
								
																	0
															

							
							
													

											


							

																	
								
								
																	Pin it
								
																	1
															

							
							
													

											


							

																	
								
								
																	Share
								
																	0
															

							
							
													

											


							

																	
								
								
																	Share
								
																	0
															

							
							
													

								

		

	

neon


        

            
You may also like
                

                    
                    

                

            
AD

			



		


Reader Interactions

 


 	

		
Leave a Reply 
	

	
			
				
			
					

						


							

												
Total

							
1

							
Share

										

				
			


										


							

																	
								
								
								
																	0
															

							
							
													

											


							

																	
								
								
								
																	1
															

							
							
													

											


							

																	
								
								
								
																	0
															

							
							
													

											


							

																	
								
								
								
																	0
															

							
							
													

											


							

																	
								
								
								
																	0