ホーム > サポートメニュー > ユーザー助け合い掲示板
ユーザー助け合い掲示板は2017年10月17日(火) 15:00を持って終了いたします。詳しくはこちら
  • JUGEMスタッフからの回答はおこなっておりません。
  • 旧ユーザー助け合い掲示板は こちら です。

最新の投稿一覧

【質問】 ブログ内の数字、記事上の日付表記について。 投稿者:しまお

いつもお世話になっております。
しまおと申します。

今回教えていただきたいのは、ブログ全体の数字のスタイル変更と、記事上部の日付の変更についてです。

【ブログ内の数字について】
ブログ内の数字がオシャレ文字?なのか、グラグラゆれた様に表示されるのがとても気になります。
ブログ全体を読みやすい一般的なスタイルにするにはどうすればよいでしょうか?

【記事上部の日付について】
こちらも、ちょっとオシャレな感じになっていますが、2000/01/01や、2000年01月01日の様にわかりやすい表記にするにはどうしたらよいでしょうか?

【仕様しているテンプレート】
Minimal

【現在のHTML】
<!DOCTYPE html>
<html lang="ja">
<head><!-- ads --><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1297889399929423",
enable_page_level_ads: true
});
</script>
<meta name="google-site-verification" content="qED-SHRCpFuvHsX47cl4GZ1pagb7GkBuK4uYV344JtM" />
<meta charset="{site_encoding}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="cAAqSB_XLcWjOE05kiw0oWm-RTZD5HXAQQIV49zmjo4" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:400,300,400i,300i,700,700i|Playfair+Display:400,400i,700,700i">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="alternate" type="application/rss+xml" href="{site_rss}" title="RSS">
<link rel="alternate" type="application/atom+xml" href="{site_atom}" title="Atom">
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}">
<script src="//imaging.jugem.jp/template/js/cookie.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body id="{eid}{page}{cid}{month}{day}{search}{pid}{index}" onload="javascript:initval();">
<header id="header">
<div id="menu">
<div id="menu-inner" class="clearfix">
<div id="sp-toggle">
<span></span>
<span></span>
<span></span>
</div>

<!-- メニューの設定 #を任意URLに、Menuを任意テキストに変更 -->
<nav id="global-nav">
<ul>
<li><a href="./">Home</a></li>
<li><a href="./?pid=1">プロフィール</a></li>
<li><a href="./?pid=1">お問い合わせ</a></li>
<li><a href="http://shima-o.com/?pid=2">プライバシーポリシー・免責事項</a></li>;
<!--<li><a href="#">Menu</a></li>-->
</ul>
</nav>
<!-- メニューここまで -->

<nav id="icon-nav">
<ul>
<!-- SNSリンクの設定 #を任意URLに変更 -->
<!--<li><a href="#" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>-->
<!-- SNSリンクここまで -->
<li><a href="./?mode=rss"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
<li><a href="javascript:void(0);" class="search-toggle"><i class="fa fa-search" aria-hidden="true"></i></a>
<div id="search-area">
<form method="get" action="./" id="search-form">
<input type="text" name="search" class="search-input" placeholder="Search and hit enter..."><button type="submit" class="search-button"><i class="fa fa-search" aria-hidden="true"></i></button>
</form>
</div></li>
<li><a href="./manage/"><i class="fa fa-lock" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
</div>

<!-- BEGIN title -->
<div id="site-branding">
<!-- ロゴここから -->
<div id="logo">
<a href="./"><img src="http://img-cdn.jg.jugem.jp/ade/3502034/20170913_1413369.jpg"; alt="みえしま・お!!" width="300" height="92" class="pict" /></a>
</div>
<!-- ロゴここまで -->
<h1 class="blog-title">{blog_name}</h1>
<div class="blog-description">{blog_description}</div>
</div>
<!-- END title -->

</header>

<div id="container" class="clearfix">
<main id="primary-column">
<div id="inner">

<!-- BEGIN entry -->
<article id="post{entryarea_id}" class="post section">
<header class="post-header">
<div class="post-date">
<div class="date-inner"><time datetime="{entry_year}-{entry_month}-{entry_day}T{entry_time_only}"><span class="month{entry_month}"></span> {entry_day}, {entry_year}</time></div>
</div>
<h2>{entry_title_link}</h2>
<ul class="post-meta">
<!--<li class="post-author">By: <span>{user_name}</span></li>-->
<li class="post-categories">Category: <span>{category_name}</span></li>
</ul>
</br>
</header>
<article class="post-content clearfix">
{entry_description}
<!-- BEGIN entry_sequel_link -->
<div class="post-more-link">
<a href="./?eid={entry_sequel_id}#more" class="more-link">Read More…</a>
</div>
<!-- END entry_sequel_link -->
<!-- BEGIN entry_sequel_items -->
<article id="more" class="post-more clearfix">
{entry_sequel_text}
</article>
<!-- END entry_sequel_items -->
</article>
<footer class="post-footer clearfix">
<!--
<ul class="post-feedbacks">
<li><a href="./?eid={entryarea_id}#comments"><i class="fa fa-comment" aria-hidden="true"></i> {comment_num_only}</a></li>
<li><a href="./?eid={entryarea_id}#trackbacks"><i class="fa fa-refresh" aria-hidden="true"></i> {trackback_num_only}</a></li>
</ul>
-->
<div class="share-button"><a href="javascript:void(0);"><i class="fa fa-share-alt" aria-hidden="true"></i></a></div>
<ul class="post-sharing">
<li><a href="http://twitter.com/share?url={entry_permalink}"; class="twitter-button" title="Twitterでつぶやく" onclick="window.open(this.href, 'mywindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="http://www.facebook.com/share.php?u={entry_permalink}&t={entry_title}"; class="facebook-button" title="Facebookでシェアする" onclick="window.open(this.href, 'mywindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="https://plus.google.com/share?url={entry_permalink}"; class="google-plus-button" title="+1をする!" onclick="window.open(this.href, 'mywindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={entry_permalink}"; class="b-hatena-button" title="はてブする" onclick="window.open(this.href, 'mywindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">&nbsp;</a></li>
</ul>
</footer>
</article>
{trackback_auto_discovery}
<!-- END entry -->

<!-- BEGIN related_entry -->
<nav id="related-posts" class="page section">
<h3><span><i class="fa fa-heart" aria-hidden="true"></i></span>関連記事</h3>
<!-- BEGIN related_entry_items -->
<div class="related-item clearfix">
<h4><a href="/?eid={related_entry_item_id}">{related_entry_item_title}</a></h4>
<!--<div class="related-date"><span>{related_entry_item_date}</span></div>-->
</div>
<!-- END related_entry_items -->
</nav>
<!-- END related_entry -->

<!-- BEGIN sequel -->
<nav id="pagination-post" class="section">
<ul class="clearfix">
<li class="nextpost"><a href="{next_permalink}"><i class="fa fa-angle-left" aria-hidden="true"></i> <span>前の記事</span><br>{next_title}</a></li>
<li class="prevpost"><a href="{prev_permalink}"><span>次の記事</span> <i class="fa fa-angle-right" aria-hidden="true"></i><br>{prev_title}</a></li>
</ul>
</nav>
<!-- END sequel -->

<!-- BEGIN comment_area -->
<section id="comments" class="page section">
<h3><span><i class="fa fa-comment" aria-hidden="true"></i></span> Comments</h3>
<!-- BEGIN comment -->
<article id="comment{comment_id}" class="comment">
<div class="comment-name">{comment_name}</div>
<div class="comment-content">{comment_description}</div>
<div class="comment-date">{comment_time_24}</div>
</article>
<!-- END comment -->
</section>
<section id="respond" class="page section">
<h3><span><i class="fa fa-pencil" aria-hidden="true"></i></span>Leave a Reply</h3>
<form method="post" action="./?mode=comment" name="comment_area" id="comment_area">
<input type="hidden" name="entry_id" value="{entry_id}">
<div class="clearfix">
<div class="comment-form-author">
<label for="name">Name</label><br>
<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}">
</div>
<div class="comment-form-email">
<label for="email">E-mail (公開されません。)</label><br>
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}">
</div>
<div class="comment-form-url">
<label for="url">URL</label><br>
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}">
</div>
</div>
<div class="comment-form-description">
<label for="description">Comment</label><br>
<textarea tabindex="4" id="description" name="description" rows="5"></textarea>
</div>
<div class="comment-form-cookie">
<input type="checkbox" name="set_cookie" id="set_cookie" value="1"> <label for="set_cookie" class="checkbox">入力情報を登録する</label>
</div>
<input tabindex="5" type="submit" value="Submit" onclick="javascript:setval();">
</form>
</section>
<!-- END comment_area -->

<!--<!-- BEGIN trackback_area -->
<section id="trackbacks" class="page section">
<h3><span><i class="fa fa-refresh" aria-hidden="true"></i></span> Trackback</h3>
<div class="trakback-form">
<span>Trackback URL</span><br>
<input type="text" value="{trackback_url}" readonly="readOnly" onfocus="this.select()">
</div>
<!-- BEGIN trackback -->
<article id="trackback{trackback_id}" class="trackback">
<div class="trackback-title">{trackback_title}</div>
<div class="trackback-content">{trackback_excerpt}</div>
<ul class="trackback-meta">
<li>{trackback_blog_name}</li>
<li>{trackback_time_24}</li>
</ul>
</article>
<!-- END trackback -->
</section>
<!-- END trackback_area -->-->

<!-- BEGIN profile_area -->
<article id="author-info" class="page section">
<h3><span><i class="fa fa-user" aria-hidden="true"></i></span>このブログについて</h3>
<p><!--{profile_name}<br>-->
{profile_description}</p>
</article>
<!-- END profile_area -->


<!-- BEGIN page -->
<nav id="pagination-page" class="section">
{full_pager_link}
</nav>
<!-- END page -->

</div>
</main>

<aside id="secondary-column">
<!-- BEGIN selected_entry -->
<section id="recent-posts" class="widget">
<h3>最新記事</h3>
<ul>
<!-- BEGIN latest_entry_items -->
<li><a href="./?eid={latest_entry_item_id}">{latest_entry_item_title}({latest_entry_item_date})</a></li>
<!-- END latest_entry_items -->
</ul>
<!-- END selected_entry -->

<!-- BEGIN category -->
<section id="categories" class="widget">
<h3>カテゴリー</h3>
<ul>
<!-- BEGIN category_items -->
<li><a href="./?cid={category_item_id}">{category_item_name} ({category_item_num})</a></li>
<!-- END category_items -->
</ul>
</section>
<!-- END category -->

<!-- BEGIN freespace1 -->
<section id="freespace1" class="widget">
<h3>{freespace_title1}</h3>
{freespace_contents1}
</section>
<!-- END freespace1 -->

<!-- BEGIN freespace2 -->
<section id="freespace2" class="widget">
<h3>{freespace_title2}</h3>
{freespace_contents2}
</section>
<!-- END freespace2 -->

<!-- BEGIN freespace3 -->
<section id="freespace3" class="widget">
<h3>{freespace_title3}</h3>
{freespace_contents3}
</section>
<!-- END freespace3 -->

<!-- BEGIN freespace4 -->
<section id="freespace4" class="widget">
<h3>{freespace_title4}</h3>
{freespace_contents4}
</section>
<!-- END freespace4 -->


<!--
<!-- BEGIN calendar -->
<section id="calendar" class="widget">
<h3>Calendar</h3>
{calendar2}
</section>
<!-- END calendar -->
-->

<!--
<!-- BEGIN archives -->
<section id="archives" class="widget">
<h3>Archives</h3>
<ul>
<!-- BEGIN archives_items -->
<li><a href="./?month={archives_item_id}">{archives_item_eng} ({archives_item_num})</a></li>
<!-- END archives_items -->
</ul>
</section>
<!-- END archives -->
-->

<!--
<!-- BEGIN recent_trackback -->
<section id="recent-trackbacks" class="widget">
<h3>Recent Trackbacks</h3>
<ul>
<!-- BEGIN recent_trackback_items -->
<li><a href="./?eid={recent_trackback_item_entry_id}#trackbacks">{recent_trackback_item_title}<br>
{recent_trackback_item_blog_name} ({recent_trackback_item_date})</a></li>
<!-- END recent_trackback_items -->
</ul>
</section>
<!-- END recent_trackback -->
-->

<!-- BEGIN freespace5 -->
<section id="freespace5" class="widget">
<h3>{freespace_title5}</h3>
{freespace_contents5}
</section>
<!-- END freespace5 -->

<section id="anout-me" class="widget">
<h3>このブログについて</h3>
<a href="./"><img src="http://img-cdn.jg.jugem.jp/ade/3502034/20170913_1413369.jpg"; alt="" width="300" height="92" class="pict" /></a>
{user_list}
</section>

<!-- BEGIN recent_comment -->
<section id="recent-comments" class="widget">
<h3>最近のコメント</h3>
<ul>
<!-- BEGIN recent_comment_items -->
<li><a href="./?eid={recent_comment_item_entry_id}#comments">{recent_comment_item_title}<br>
{recent_comment_item_name} ({recent_comment_item_date})</a></li>
<!-- END recent_comment_items -->
</ul>
</section>
<!-- END recent_comment -->

<!-- BEGIN amazon -->
<!--
<section id="amazon" class="widget">
<h3>Recommend</h3>
{amazon_item}
</section>
-->
<!-- END amazon -->


<!-- BEGIN link -->
<section id="Links" class="widget">
<h3>Links</h3>
{link_list}
</section>
<!-- END link -->

<!--<section id="mobile" class="widget">
<h3>Mobile</h3>
{site_qrcode}
</section>
<section id="ad" class="widget">
{ad}
</section>-->
</aside>
</div>

<footer id="footer">
<div id="footer-inner" class="clearfix">
<div id="copyright">
&copy; 2016-2017 shiamoke no blog
</div>
<div id="designed">
Designed by <a href="http://dithis.jugem.jp/"><FONT color="#00B7FF">Talamh Tairngire</FONT></a></br>powered by <a href="https://jugem.jp/"><FONT color="#00B7FF">JUGEM</FONT></a>
</div>
</div>

<!-- ページトップへ-->
<div id="totop"><a href="#header"><i class="fa fa-angle-up" aria-hidden="true"></i><br><span>Page Top</span></a></div>


</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/2.0.0/jquery.smooth-scroll.min.js"></script>
<script>
$(function() {
$('a[href^="#"]').smoothScroll();
var showFlug = false;
var pageTop = $('#totop');
pageTop.css('bottom', '-100px');
var showFlug = false;
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
if (showFlug == false) {
showFlug = true;
pageTop.stop().animate({ 'bottom' : '50px' }, 200);
}
} else {
if (showFlug) {
showFlug = false;
pageTop.stop().animate({ 'bottom' : '-100px' }, 200);
}
}
});
$('#sp-toggle').click(function() {
$(this).toggleClass('active');
$('body').toggleClass('open');
});
$('.search-toggle').click(function() {
$('#search-area').slideToggle();
});
$('.share-button').click(function() {
$(this).next().toggleClass('visible');
});
});
</script>
</body>
</html>
【現在のCSS】
@charset "EUC-JP";

/* --------------------------------------------------
Minimal - v2.0 - 2017.01.08

Copyright (c) 2017 tsui - http://dithis.jugem.jp/

Released under the MIT license
http://opensource.org/licenses/MIT
-------------------------------------------------- */

/* --------------------------------------------------
normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css
-------------------------------------------------- */
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}
h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;fontsize:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

/* --------------------------------------------------
Global Styles
-------------------------------------------------- */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html {
font-size: 65%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

body {
color: #333333;
font-size: 14px;
font-size: 1.4rem;
font-family: "Raleway", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
line-height: 1.8;
background-color: #ffffff;
word-wrap: break-word;
overflow-wrap: break-word;
}
/*コピーの時の色 */
::-moz-selection {
color: #ffffff;
text-shadow: none;
background-color: #00B7FF;
}
::selection {
color: #ffffff;
text-shadow: none;
background-color: #00B7FF;
}

::-webkit-input-placeholder {
color: #cccccc;
}
::-moz-placeholder {
color: #cccccc;
opacity: 1;
}
:-ms-input-placeholder {
color: #cccccc;
}
:placeholder-shown {
color: #cccccc;
}

/* clearfix */
.clearfix, p {
*zoom: 1;
}
.clearfix:before, p:before {
content: "";
display: table;
}
.clearfix:after, p:after {
content: "";
display: table;
clear: both;
}

/* --------------------------------------------------
Typography
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 700;
margin: 0 0 1.5em;
margin: 0 0 2rem;
}
h1 {
font-size: 30px;
font-size: 3.0rem;
font-family: "Raleway", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
display: inline-block;
position: relative;
}
h1:after {
width: 100%;
height: 1px;
background-color: #FFC600;
content: "";
opacity: 0;
-webkit-transition: height .3s, opacity .3s, transform .3s;
transition: height .3s, opacity .3s, transform .3s;
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
position: absolute;
bottom: 0;
left: 0;
}
h1:hover:after {
height: 3px;
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
h1 a:link {
color: #333333;
}
h1 a:visited {
color: #333333;
}
h1 a:hover, h1 a:focus {
color: #cccccc;
}
h1 a:active {
color: #333333;
}

h2 {
font-size: 20px;
font-size: 2.0rem;
text-align: center;
}
h2 a:link {
color: #333333;
}
h2 a:visited {
color: #333333;
}
h2 a:hover, h2 a:focus {
color: #cccccc;
}
h2 a:active {
color: #333333;
}

h3 {
font-size: 18px;
font-size: 1.8rem;
background-color: #f5f5f5;
padding: 10px;
}

h4 {
font-size: 16px;
font-size: 1.6rem;
font-weight: 700;
border-left: 2px solid #FFC600;
padding: 10px;
}

h5 {
font-size: 14px;
font-size: 1.4rem;
border-left: 2px solid #eeeeee;
padding: 0 10px;
}

h6 {
font-size: 14px;
font-size: 1.4rem;
}

p, blockquote, pre {
margin: 0 0 1.5em;
margin: 0 0 2rem;
}

blockquote {
border: 1px solid #eeeeee;
position: relative;
padding: 20px 20px 20px 50px;
}
blockquote:before {
color: #eeeeee;
font-family: Times, Georgia, serif;
font-size: 80px;
line-height: 1;
font-weight: 700;
content: "\201C";
position: absolute;
top: -5px;
left: 5px;
}

pre {
font-family: Consolas, "Courier New", Courier, Monaco, monospace;
border: 1px solid #eeeeee;
border-left: 5px solid #eeeeee;
white-space: pre-wrap;
word-wrap: break-word;
padding: 20px;
}


hr {
height: 1px;
background-color: #eeeeee;
border: 0;
display: block;
margin: 1.5em 0;
margin: 2rem 0;
}

/* ----- Lists ----- */
dl, ul, ol {
margin: 0 0 1.5em;
margin: 0 0 2rem;
}
dl dt {
font-weight: 700;
padding: 10px 0;
}
dl dd {
background-color: #f5f5f5;
padding: 10px;
margin: 0 0 0 20px;
}

/* ----- Table ----- */
table {
width: 100%;
border: 1px solid #eeeeee;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
margin: 0 0 1.5em;
margin: 0 0 2rem;
}
table caption {
font-weight: bold;
text-align: center;
}
table th {
background-color: #f5f5f5;
border: 1px solid #eeeeee;
padding: 10px;
}
table td {
background-color: #ffffff;
border: 1px solid #eeeeee;
padding: 10px;
}

/* ----- Forms ----- */
input, button, select, textarea {
color: #333333;
line-height: inherit;
font-family: inherit;
background-color: #ffffff;
border: 1px solid #eeeeee;
border-radius: 2px;
padding: 10px;
}
input:focus, textarea:focus {
border: 1px solid #c2f2f2;
-webkit-box-shadow: 0 0 5px 0 #c2f2f2;
box-shadow: 0 0 5px 0 #c2f2f2;
}
input[type="submit"], input[type="reset"], input[type="button"], button {
color: #ffffff;
background-color: #13448f;
border: 0;
cursor: pointer;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
input[type="submit"]:hover, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="button"]:hover, input[type="button"]:focus, button:hover, button:focus {
background-color: #00B7FF;
}

/* ----- Hyperlinks ----- */
a {
text-decoration: none;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
a:link {
color: #1A0DAB;
}
a:visited {
color: #1A0DAB;
}
a:hover, a:focus {
color: #00B7FF;
}
a:active {
color: #1A0DAB;
}

/* ----- Image ----- */
img {
max-width: 100%;
height: auto;
padding: 10px;
}

/* --------------------------------------------------
Layouts
-------------------------------------------------- */
/* ----- Header ----- */
/* Menu */
#menu {
height: 50px;
background-color: #13448f;
border-bottom: 5px solid #00B7FF
}

#menu-inner {
width: 90%;
max-width: 1200px;
position: relative;
margin: 0 auto;
}

#sp-toggle {
display: none;
}

/* ----- ヘッダーアイコン ----- */
#global-nav {
float: left;
}
#global-nav ul {
font-size: 0;
list-style: none;
padding: 0;
margin: 0;
}
#global-nav ul li {
font-size: 12px;
font-size: 1.2rem;
text-transform: uppercase;
display: inline-block;
position: relative;
margin: 0 40px 0 0;
}
#global-nav ul li a {
color: #ffffff;
line-height: 50px;
}
#global-nav ul li a:hover {
color: #00B7FF;
}

#icon-nav {
float: right;
}
#icon-nav ul {
font-size: 0;
list-style: none;
padding: 0;
margin: 0;
}
#icon-nav ul li {
font-size: 14px;
font-size: 1.4rem;
display: inline-block;
margin: 0 0 0 20px;
}
#icon-nav ul li a {
color: #ffffff;
line-height: 50px;
}
#icon-nav ul li a:hover {
color: #00B7FF;
}

#search-area {
display: none;
position: absolute;
right: 0;
}
#search-area #search-form {
z-index: 2;
position: relative;
}
#search-area #search-form .search-input {
width: 280px;
padding: 10px 40px 10px 10px;
}
#search-area #search-form .search-button {
color: #333333;
background-color: transparent;
z-index: 3;
position: absolute;
right: 0;
bottom: 0;
}

#site-branding {
text-align: center;
padding: 100px 0;
}

/* ----- Container ----- */
#container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

/* ----- Main content ----- */
#primary-column {
width: 100%;
float: left;
margin: 0 -280px 0 0;
}

/* ----- 自 記事右ラインとサイドの間隔 ----- */
#inner {
margin: 0 320px 0 0;
}

/* Post and Pages 自 記事下のコンテンツ間の幅*/
.section {
margin: 0 0 20px;
}

/* ----- 自 記事周りのライン ----- */
.post {
border: 1px solid #eeeeee;
padding: 40px;
background-color: #ffffff;
}


.post-header {
text-align: center;
margin: 0 0 1.5em;
margin: 0 0 2rem;
}
.post-header .post-date {
color: #ffffff;
font-size: 12px;
font-size: 1.2rem;
line-height: 30px;
text-transform: uppercase;
position: relative;
margin: 0 0 1.5em;
margin: 0 0 2rem;
}
.post-header .post-date .date-inner {
background-color: #FFC600;
display: inline-block;
position: relative;
padding: 0 15px;
}
.post-header .post-date .date-inner:before {
width: 0;
height: 0;
border: 15px solid #FFC600;
border-left-color: transparent;
content: "";
position: absolute;
top: 0;
left: -15px;
}
.post-header .post-date .date-inner:after {
width: 0;
height: 0;
border: 15px solid #FFC600;
border-right-color: transparent;
content: "";
position: absolute;
top: 0;
right: -15px;
}

.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";
}

.post-header .post-meta {
color: #cccccc;
font-size: 0;
font-family: "Playfair Display", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-style: italic;
list-style: none;
padding: 0;
margin: 0;
}
.post-header .post-meta li {
font-size: 14px;
font-size: 1.4rem;
display: inline-block;
}
.post-header .post-meta li + li:before {
color: #cccccc;
content: "/";
padding: 0 10px;
}
.post-header .post-meta li span {
font-family: "Raleway", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-style: normal;
}

.post-content {
margin: 0 0 1.5em;
margin: 0 0 2rem;
}

.post-more-link {
text-align: center;
margin: 1.5em 0;
margin: 2rem 0;
}
.post-more-link a.more-link {
color: #333333;
font-family: "Playfair Display", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-style: nomal;
border: 1px solid #eeeeee;
display: inline-block;
position: relative;
padding: 10px 20px;
}
.post-more-link a.more-link:before, .post-more-link a.more-link:after {
content: "";
opacity: 0;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.post-more-link a.more-link:before {
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
.post-more-link a.more-link:after {
border-right: 1px solid #333333;
border-left: 1px solid #333333;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
.post-more-link a.more-link:hover:before, .post-more-link a.more-link:hover:after {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.service_button, .jugem_theme {
margin: 0em 0 0 !important;
margin: 0rem 0 0 !important;
}
.post-footer {
width: 100%;
line-height: 30px;
text-align: center;
border-top: 1px dashed #eeeeee;
padding: 1.5em 0 0;
padding: 2rem 0 0;
}
.post-footer .post-feedbacks {
font-size: 0;
float: left;
list-style: none;
padding: 0;
margin: 0;
}
.post-footer .post-feedbacks li {
font-size: 14px;
font-size: 1.4rem;
display: inline-block;
margin: 0 10px 0 0;
}
.post-footer .share-button {
float: right;
margin: 0 0 0 20px;
}
.post-footer .share-button a {
width: 30px;
height: 30px;
color: #ffffff;
background-color: #13448f;
border-radius: 50%;
display: block;
}
.post-footer .post-sharing {
font-size: 0;
text-align: right;
list-style: none;
float: right;
opacity: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
.post-footer .post-sharing li {
font-size: 14px;
font-size: 1.4rem;
text-align: center;
display: inline-block;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
margin: 0 0 0 20px;
}
.post-footer .post-sharing li a {
width: 30px;
height: 30px;
color: #ffffff;
border-radius: 50%;
display: block;
}
.post-footer .post-sharing li a.twitter-button {
background-color: #55acee;
}
.post-footer .post-sharing li a.twitter-button:hover {
background-color: #2279bb;
}
.post-footer .post-sharing li a.facebook-button {
background-color: #3b5998;
}
.post-footer .post-sharing li a.facebook-button:hover {
background-color: #082665;
}
.post-footer .post-sharing li a.google-plus-button {
background-color: #dd4b39;
}
.post-footer .post-sharing li a.google-plus-button:hover {
background-color: #aa1806;
}
.post-footer .post-sharing li a.b-hatena-button {
background-color: #008fde;
background-image: url(http://img-cdn.jg.jugem.jp/0a8/3540663/20160711_192031.png);
background-repeat: no-repeat;
background-position: center center;
}
.post-footer .post-sharing li a.b-hatena-button:hover {
background-color: #005cab;
}
.post-footer .post-sharing.visible {
opacity: 1;
visibility: visible;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.post-footer .post-sharing.visible li {
opacity: 1;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
-webkit-transition-delay: .1s;
transition-delay: .1s;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.post-footer .post-sharing.visible li:nth-child(2) {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.post-footer .post-sharing.visible li:nth-child(3) {
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
.post-footer .post-sharing.visible li:nth-child(4) {
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.post-footer .post-sharing.visible li:nth-child(5) {
-webkit-transition-delay: .5s;
transition-delay: .5s;
}

.page {
border: 1px solid #eeeeee;
padding: 40px;
}
.page h3 {
background-color: transparent;
padding: 0;
position: relative;
padding: 0 0 0 50px;
}
.page h3 span {
width: 30px;
height: 60px;
color: #ffffff;
font-size: 18px;
line-height: 60px;
text-align: center;
background-color: #13448f;
display: inline-block;
position: absolute;
top: -40px;
left: 0;
}
.page h3 span:before {
width: 0;
height: 0;
border: 15px solid #13448f;
border-bottom-color: transparent;
content: "";
z-index: -1;
position: absolute;
bottom: -15px;
left: 0;
}

/* Related Posts */
#related-posts .related-item {
border-bottom: 1px dashed #eeeeee;
padding: 5px 0;
}
/* メモ 関連記事文字幅 初期 70% */
#related-posts .related-item h4 {
width: 100%;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
border: 0;
float: left;
padding: 5px 0;
margin: 0;
}
#related-posts .related-item h4 a {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
overflow: hidden;
}
#related-posts .related-item .related-date {
width: 30%;
text-align: right;
float: right;
}
#related-posts .related-item .related-date span {
font-size: 12px;
font-size: 1.2rem;
background-color: #f5f5f5;
border-radius: 18px;
display: inline-block;
padding: 3px 8px;
margin: 4px 0 0;
}

/* Comments */
#comments .comment {
border-bottom: 1px dashed #eeeeee;
padding: 0 0 1.5em;
padding: 0 0 2rem;
margin: 0 0 1.5em;
margin: 0 0 2rem;
}
#comments .comment .comment-name {
font-weight: bold;
}
#comments .comment .comment-date {
font-size: 12px;
font-size: 1.2rem;
text-align: right;
padding: 0;
margin: 0;
}

#respond #comment_area label {
font-size: 12px;
font-size: 1.2rem;
text-transform: uppercase;
display: inline-block;
}
#respond #comment_area input[type="text"] {
width: 100%;
}
#respond #comment_area textarea {
width: 100%;
}
#respond #comment_area .comment-form-author {
width: 33.333%;
float: left;
padding: 0 10px 0 0;
margin: 0 0 10px;
}
#respond #comment_area .comment-form-email {
width: 33.333%;
float: left;
padding: 0 5px;
margin: 0 0 10px;
}
#respond #comment_area .comment-form-url {
width: 33.333%;
float: left;
padding: 0 0 0 10px;
margin: 0 0 10px;
}
#respond #comment_area .comment-form-description, #respond #comment_area .comment-form-cookie {
margin: 0 0 10px;
}
#respond #comment_area input[type="submit"] {
width: 30%;
}

/* Trackbacks */
#trackbacks .trakback-form {
margin: 0 0 1.5em;
margin: 0 0 2rem;
}
#trackbacks .trakback-form span{
font-size: 12px;
font-size: 1.2rem;
text-transform: uppercase;
}
#trackbacks .trakback-form input[type="text"] {
width: 60%;
background-color: #f5f5f5;
border: 0;
}
#trackbacks .trakback-form input[type="text"]:focus {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#trackbacks .trackback {
border-bottom: 1px dashed #eeeeee;
padding: 0 0 1.5em;
padding: 0 0 2rem;
margin: 0 0 1.5em;
margin: 0 0 2rem;
}
#trackbacks .trackback .trackback-title {
font-weight: bold;
}
#trackbacks .trackback .trackback-meta {
font-size: 0;
text-align: right;
list-style: none;
padding: 0;
margin: 0;
}
#trackbacks .trackback .trackback-meta li {
font-size: 12px;
font-size: 1.2rem;
display: inline-block;
}
#trackbacks .trackback .trackback-meta li + li:before {
color: #cccccc;
content: "/";
padding: 0 10px;
}

/* ----- Paginations (次の記事 ページ数字) ----- */
#pagination-post {
font-size: 12px;
font-size: 1.2rem;
}
#pagination-post ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
#pagination-post ul li {
width: 49%;
}
#pagination-post ul li a {
width: 100%;
color: #333333;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #f5f5f5;
display: block;
overflow: hidden;
padding: 20px;
}
#pagination-post ul li a:hover {
background-color: #cccccc;
}
#pagination-post ul li a span {
text-transform: uppercase;
}
#pagination-post .nextpost {
float: left;
}
#pagination-post .prevpost {
text-align: right;
float: right;
}

#pagination-page {
font-size: 12px;
font-size: 1.2rem;
}
#pagination-page span a {
color: #ffffff;
background-color: #13448f;
display: inline-block;
padding: 10px;
margin: 0 5px 0 0;
}
#pagination-page span a:hover {
background-color: #00B7FF;
}
#pagination-page .current {
color: #333333;
background-color: #f5f5f5;
display: inline-block;
padding: 10px;
margin: 0 5px 0 0;
}
#pagination-page .pager_prev, #pagination-page .pager_next {
font-size: 12px;
font-size: 1.2rem;
text-transform: uppercase;
}

/* ----- Asides サイドバー----- */
#secondary-column {
width: 280px;
float: right;
}

.widget {
margin: 0 0 50px 0;
background-color: #ffffff;
}
.widget h3 {
font-size: 16px;
font-size: 1.6rem;
font-weight: 400;
text-align: center;
color: #ffffff;
background-color: #134490;
padding: 10px;
}
.widget ul {
list-style: none;
padding: 0;
}
.widget ul li {
padding: 10px;
border-bottom: 1px dashed #eeeeee;
}
.widget ul li a {
color: #333333;
}
.widget ul li a:hover {
color: #00B7FF;
}

#calendar table {
width: 280px;
font-size: 12px;
font-size: 1.2rem;
text-align: center;
border: 1px solid #eeeeee;
text-transform: uppercase;
margin: 0 auto;
}
#calendar table td {
width: 40px;
height: 40px;
text-align: center;
vertical-align: middle;
border: 1px solid #eeeeee;
padding: 0;
}

/* ----- Footer ----- */
#footer {
border-top: 5px solid #00B7FF;
clear: both;
padding: 20px 0;
background-color: #13448f;
color: #ffffff;
}

#footer-inner {
width: 90%;
max-width: 1200px;
font-size: 12px;
font-size: 1.2rem;
margin: 0 auto;
}

#copyright {
float: left;
}

#designed {
float: right;
}

#totop {
text-align: center;
z-index: 5;
position: fixed;
right: 100px;
bottom: 50px;
}
#totop a {
color: #333333;
display: block;
}
#totop a:hover {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
#totop .fa {
font-size: 50px;
}
#totop a span {
font-size: 12px;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#totop a:hover span {
opacity: 1;
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}

/* ----- Misc. ----- */
.emoji {
vertical-align: middle;
}

.rounded {
border-radius: 10px;
}

.circle {
border-radius: 50%;
}

.frame {
border: 1px solid #eeeeee;
}

.shadow {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
}

.photo {
background-color: #fff;
border-top: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
padding: 10px;
}

.video {
height: 0;
overflow: hidden;
position: relative;
padding: 30px 0 56.25%;
margin: 0;
}
.video iframe, .video embed, .video object, .video video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

.pull-right {
display: inline;
float: right;
margin: 0 0 0 20px;
}

.pull-left {
display: inline;
float: left;
margin: 0 20px 0 0;
}

.clear {
clear: both;
}

a.btn {
color: #fff;
text-shadow: 1px 1px 0 #00a1ff;
background-color: #00d8ff;
background: -webkit-gradient(linear, left top, left bottom, from(#00d8ff), to(#00a1ff));
background: -webkit-linear-gradient(top, #00d8ff, #00a1ff);
background: -moz-linear-gradient(top, #00d8ff, #00a1ff);
background: -o-linear-gradient(top, #00d8ff, #00a1ff);
background: -ms-linear-gradient(top, #00d8ff, #00a1ff);
background: linear-gradient(top, #00d8ff, #00a1ff);
border: 1px solid #00a1ff;
border-radius: 3px;
display: inline-block;
padding: 5px 10px;
margin: 3px;
}
a.btn:hover {
background: #00B7FF;
}

.aa {
font-size: 16px;
line-height: 18px;
font-family: "MS Pゴシック", "MS PGothic", sans-serif;
white-space: pre;
}

.none {
display: none;
}

.align-left {
text-align: left;
}

.align-center {
text-align: center;
}

.align-right {
text-align: right;
}

/* --------------------------------------------------
Media Queries
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
#menu-inner, #container, #footer-inner {
width: 95%;
}
}
@media screen and (max-width: 768px) {
#sp-toggle {
width: 30px;
height: 25px;
display: inline-block;
float: left;
cursor: pointer;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
z-index: 5;
position: relative;
top: 13px;
}
#sp-toggle span {
width: 100%;
height: 3px;
background-color: #ffffff;
border-radius: 3px;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
position: absolute;
left: 0;
}
#sp-toggle span:nth-of-type(1) {
top: 0;
}
#sp-toggle span:nth-of-type(2) {
top: 11px;
}
#sp-toggle span:nth-of-type(3) {
top: 22px;
}
#sp-toggle.active {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
#sp-toggle.active span {
background-color: #ffffff;
}
#sp-toggle.active span:nth-child(1) {
-webkit-transform: translateY(11px) rotate(-45deg);
-ms-transform: translateY(11px) rotate(-45deg);
transform: translateY(11px) rotate(-45deg);
}
#sp-toggle.active span:nth-child(2) {
-webkit-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
#sp-toggle.active span:nth-child(3) {
opacity: 0;
}

#global-nav {
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(0, 0, 0, .8);
display: table;
float: none;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
opacity: 0;
visibility: hidden;
z-index: 3;
position: fixed;
top: 0;
left: 0;
}
#global-nav ul {
display: table-cell;
vertical-align: middle;
position: relative;
}
#global-nav ul li {
display: block;
opacity: 0;
-webkit-transition: none;
transition: none;
margin: 0 0 0 100px;
}
#global-nav ul li a {
width: 100%;
color: #ffffff;
display: block;
}
#global-nav ul li a:after {
width: 0;
height: 0;
}

.open #global-nav {
opacity: 1;
visibility: visible;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.open #global-nav ul li {
opacity: 1;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
-webkit-transition-delay: .1s;
transition-delay: .1s;
margin: 0;
}
.open #global-nav ul li:nth-child(2) {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.open #global-nav ul li:nth-child(3) {
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
.open #global-nav ul li:nth-child(4) {
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.open #global-nav ul li:nth-child(5) {
-webkit-transition-delay: .5s;
transition-delay: .5s;
}

#primary-column {
width: 100%;
float: none;
margin: 0;
}

#inner {
margin: 0;
}

#secondary-column {
width: 100%;
float: none;
margin: 0 0 50px;
}

#totop {
right: 10px;
}
}
@media screen and (max-width: 480px) {
h1 {
font-size: 24px;
font-size: 2.4rem;
}

h2 {
font-size: 18px;
font-size: 1.8rem;
}

h3 {
font-size: 16px;
font-size: 1.6rem;
}

h4 {
font-size: 14px;
font-size: 1.4rem;
}

#menu-inner {
width: 100%;
padding: 0 20px;
margin: 0;
}

#container {
width: 100%;
padding: 0 10px;
margin: 0;
}

#site-branding {
padding: 50px 20px;
}

.post, .page {
padding: 20px;
}

.page h3 span{
top: -20px;
}

#pagination-post ul li a {
padding: 10px;
}

#footer {
padding: 20px;
}

#footer-inner {
width: 100%;
margin: 0;
}

#copyright {
text-align: center;
float: none;
}

#designed {
text-align: center;
float: none;
}
}

/* ----- シェアボタン カット ----- */
body#inde .post, body#page .post { padding-bottom: 0; }
body#index .post-footer, body#page .post-footer { display: none; }

  • 投稿者URL:http://shima-o.com/
  • 記事ID:No.7623
  • 投稿日時:2017年09月21日 22:24
  • 返信:1件
【回答】 Re: ブログ内の数字、記事上の日付表記について。 投稿者:3steps

> 【ブログ内の数字について】
> ブログ内の数字がオシャレ文字?なのか、グラグラゆれた様に表示されるのがとても気になります。
> ブログ全体を読みやすい一般的なスタイルにするにはどうすればよいでしょうか?

ゆれたような表示が何を示しているのか分かりません。フォントを変えたいと解釈して…
CSSでフォントを指定している部分を編集します。

body {
(中略)
font-family: "Raleway", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
(中略)
}



h1 {
(中略)
font-family: "Raleway", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
(中略)
}

ここから先頭の"Raleway", を削除してみて下さい。
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
になります。
Windowsの場合はCtrl+Fでページ内検索ができるので、Ralewayで検索すると上記の2件が引っかかります。見つけやすいでしょう。




同じく
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
(中略)
}



.post-more-link a.more-link {
(中略)
font-family: "Playfair Display", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
(中略)
}

から"Playfair Display", を削除してみて下さい。
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
となります。
こちらも同様にPlayfairでページ内検索して見て下さい。簡単に見つかるはずです。


これで一度確認してみて想定通りのフォントが読み込まれるのであれば、HTML内の
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:400,300,400i,300i,700,700i|Playfair+Display:400,400i,700,700i">
の一行を削除してもいいでしょう。これはウェブ上からフォントを読み込んで表示させる部分です。
ウェブフォントを使わないのであれば削除した方が各ページの読み込み完了までの時間が短くなります。
<head>〜</head>内にあるのでHTMLでは上の方にあります。


【解説】
font-familyプロパティは、左から順に(先に指定した方から順に)PC内にインストールされているフォントか、または指定されていたウェブフォントの中から扱えるフォントを順に検索し、使えるフォントがあれば表示用フォントとして扱います。
今回の場合はウェブフォントが一番左で指定されているので、それが最優先で読み込まれます。
広告ブロック系のブラウザアドオンなどでウェブフォントをブロックしている場合は2番目("Yu Gothic")、3番目…と順に探していきます。
一番右のsans-serifというのはブラウザのオプションで指定されているフォント(sans-serif, serif, monospaceのどれか)からゴシック体にあたる設定を指定しているという意味です。
serifが明朝体、monospaceが等幅フォントとなります。

自分や読者が読みやすいと思うお気に入りのフォントが別にある場合は、2番目に指定されているフォントより左でフォント名を指定すると良いでしょう。
例えばメイリオであれば、最初にMeiryoを指定します。
注意しなければならない点としては、自分のPCにインストールされていても他人のPCにはインストールされていない可能性を考慮すること、フォント名にスペースが含まれる場合はダブルクォート(Shift+2の"")、またはシングルクォート(Shift+7の'')で囲うことです。



> 【記事上部の日付について】
> こちらも、ちょっとオシャレな感じになっていますが、2000/01/01や、2000年01月01日の様にわかりやすい表記にするにはどうしたらよいでしょうか?

HTML内の該当箇所を変更します。
<!-- BEGIN entry -->の下にある、以下の一行を探して下さい。

<div class="date-inner"><time datetime="{entry_year}-{entry_month}-{entry_day}T{entry_time_only}"><span class="month{entry_month}"></span> {entry_day}, {entry_year}</time></div>

この一行を編集して日付部分を変更し、同様に不要になる部分の削除も行います。

2000/01/01表記の場合は
<div class="date-inner"><time datetime="{entry_year}-{entry_month}-{entry_day}T{entry_time_only}">{entry_year}/{entry_month}/{entry_day}</time></div>

2000年01月01日表記の場合は
<div class="date-inner"><time datetime="{entry_year}-{entry_month}-{entry_day}T{entry_time_only}">{entry_year}年{entry_month}月{entry_day}</time></div>

とします。
日付フォーマットについては https://jugem.jp/manual/?eid=83#entry01 (JUGEM独自タグ一覧) を参照して下さい。

また

.month01:before {
content: "January";
}

から

.month12:before {
content: "December";
}

までを削除します。これは
<span class="month{entry_month}"></span>
を使って該当する英語表記の月名を挿入する処理になっていますが、これが不要になるのでCSS部分も削除しておきましょう。

  • 記事ID:No.7625
  • 投稿日時:2017年09月22日 10:20
【質問】 音声ファイルのアップロード 投稿者:kazu

JUGEM有料コースを始めたばかりです。

自分で録音した、自分の語りや歌などを聴いてもらいたいのですが、
音声ファイル (mp3) をアップロードすることはできますか?
できる場合は、何MBまでですか?

教えてください。よろしくお願いします。

  • 記事ID:No.7622
  • 投稿日時:2017年09月21日 10:56
  • 返信:1件
【回答】 Re: 音声ファイルのアップロード 投稿者:3steps

JUGEM (plusを含む)では画像以外のファイルのアップロードはできません。
https://jugem.jp/service/functionlist.php のアップロード可能なファイル(拡張子)の項目を確認して下さい。


音楽ファイルや映像ファイルの公開については以下の3つの方法が考えられます。

A. 一度ダウンロードしてもらい、閲覧者ごとに再生可能なソフトを用意してもらって再生してもらう
B. Youtubeやニコニコ動画などに投稿し、ブログ内に再生プレイヤーを貼りつけ
C. ブログ内にプレイヤーを貼りつけ、外部サーバーにファイルをアップロードして呼び出す


A.とB.の場合は特に難しく考える必要はありません。
MEGAやMediaFireなどの共有可能なオンラインストレージにアップロードしてダウンロード用のリンクを貼りつけるか、
動画共有サイトにアップロードして動画の埋め込みを行うかの違いです。

C.の場合は再生用のタグの埋め込みに加え、映像ファイルや音楽ファイルを(場合によっては再生用プレイヤーも)外部サーバーからの呼び出しが可能なサーバーにアップロードする必要があります。
(ファイルをアップロードしたサーバーから見て外部のサーバーという意味です)

多くのサーバーでは転送量の問題が大きい為、外部からの呼び出しに対応していないことが多いです。ここが大きなハードルになる場合が多いでしょう。


そもそも論ですが、月額いくらか払って外部サーバーを用意するくらいならWordpressやMovableTypeなどのデータベースを使用する大型CMSや、
JUGEMに似たSerene Bach、日記用スクリプトのtDiaryなど(こちらはcgiのみで動作)を自分でインストールしてブログを管理した方が楽です。

ダウンロードだけなら難しくはないけど、再生となるとこんな問題もありますよといったお節介でした。
以上です。

  • 記事ID:No.7624
  • 投稿日時:2017年09月22日 10:00
【質問】 投稿日時を非表示したい。 投稿者:ひろ

今、使っているテンプレはデフォルトのベーシックです。

1)投稿日時非表示は、HTML編集はどこを編集したらよいのでしょうか。

2カレンダー、過去の記事、日時はすべて非表示にしたいと考えています。

よろしくお願いします。

  • 記事ID:No.7620
  • 投稿日時:2017年09月07日 08:17
  • 返信:1件
【回答】 Re: 投稿日時を非表示したい。 投稿者:3steps

A. 全ての状態(トップページ、個別記事、カテゴリ、月別、検索結果など)で表示を消す
B. 一部の状態でのみ表示を消す(トップページと個別記事だけ表示させ、ほかの状態で表示を消す)

AとBでは実現方法が異なります。
Aの場合は単純にHTMLの該当箇所を消せばいいのですが、Bの場合はJUGEMでは一つのテンプレートを全ての表示状態で使いまわしているため(共有しているため)、『消す』のではなくCSSを使って『隠す』必要があります。

<!-- content -->
<div id="content">

<!-- BEGIN entry -->
<div class="entry">
<div class="entry-header">
<p class="entry-date">{entry_date}</p>
<h2 class="entry-title">{entry_title_link}</h2>
</div>
<div class="entry-body">
<div class="entry-description">{entry_description}</div>
<a name="sequel"></a>
<div class="entry-more">{entry_sequel}</div>
</div>
<div class="entry-footer">
<ul class="clearfix">
<li>by {user_name}</li>
<li>{category_name}</li>
<li>{entry_time}</li>
<li>{comment_num}</li>
<li>{trackback_num}</li>
</ul>
</div>
</div>

上記Aの場合は、この中の
<p class="entry-date">{entry_date}</p> と <li>{entry_time}</li>
の二行を削除して下さい。すべての表示スタイル(インデックス・単独記事・カテゴリ・月別・検索など、全て)から投稿日時が消えます。
※掲示板の仕様上、スペースが除去されてしまうので実際の表示とは異なります



一部の表示スタイルでのみ消したい場合(上記Bの場合)は

1.
<body onload="javascript:initval();"> を
<body id="{eid}{page}{cid}{month}{day}{search}{pid}{index}" onload="javascript:initval();"> に変更します。

2.
上記の<li>{entry_time}</li> を
<li class="entryTime">{entry_time}</li> に変更します。

3.
CSSの編集で最終行に以下を挿入します。
例えばトップページ(id="index"時)とその2ページ目以降(id="page"時)以外の全てで表示を消したい場合は以下のようにします。

#eid .entryTime, #cid .entryTime, #month .entryTime, #day .entryTime, #search .entryTime, #pid .entryTime,
#eid .entry-date, #cid .entry-date, #month .entry-date, #day .entry-date, #search .entry-date, #pid .entry-date { display: none; }

こうすることによって、bodyのIDがindex, page以外の場合にentryTimeとentry-dateのクラスを持つ要素が非表示になります。
(ソースを開くと表示されるため完全には消えません。あくまで『隠す』だけです)

ページの状態に対応するIDは以下の通りです。
#eid = 個別記事
#cid = カテゴリ別
#month = 月別
#day = 日別
#search = 検索結果
#pid = プロフィール
#index = トップページ
#page = トップページから辿れる2ページ目以降

日時を消去したいページの状態に合わせて適宜組み替えて下さい。

以上です。

  • 記事ID:No.7621
  • 投稿日時:2017年09月07日 17:05
【質問】 search consoleの登録について [解決済み] 投稿者:しかく

初めに無料登録(XXX.jugem.jp)でブログを始め、search consoleにもそのアドレスで登録しました。
今回独自ドメインをとったのでjugem側ではそのドメインを設定したのですが、search consoleで無料ドメインから独自ドメインへのインデックス移行等を行う「アドレス変更」を行おうとしたところ、301 リダイレクト ディレクティブの確認ところでどうしてもうまくいきません。
(301 リダイレクト ディレクティブ設定ができていないとのこと)

無料ドメインから独自ドメインへのsearch consoleでのデータ移行はできないのでしょうか。
また、できない場合無料ドメインのURL削除を行わないと、独自ドメインでアップした記事は、流用のように判断されてしまうでしょうか。

  • 記事ID:No.7617
  • 投稿日時:2017年09月03日 12:02
  • 返信:2件
【回答】 Re: Re: search consoleの登録について [解決済み] 投稿者:しかく

ご回答ありがとうございます。
そうですね。search consoleの方に聞いてみたいと思います。

search console側でサイトの変更方法はあったのですが、jugemのように独自ドメインをとっても無料時のドメインは消えず、しかも扱うコンソールは1つなのでHTML編集で無料ドメインに301リダイレクトを埋め込むことも難しいのではという疑問から、jugem特有の問題かと思ってしまいました。

無料ドメインで運用している時からsearch consoleを使っていて、独自ドメインに変更する方はたくさんいると思っていたのですが、結構ネットでも事例がでてこないものですね。
(別サーバに移転は非常に多いのですが)

ありがとうございました。

  • 記事ID:No.7619
  • 投稿日時:2017年09月04日 18:25
【回答】 Re: search consoleの登録について 投稿者:3steps

こちらへどうぞ
https://productforums.google.com/forum/#!forum/webmaster-ja

これはJUGEM側ではなくGoogleのSearch Console側の問題です。

この問題はJUGEM特有の問題ではなく、他の無料ブログで独自ドメインを取っても同様に発生する問題ではないでしょうか?

ここはJUGEM(とそれが行うサービス)が原因で問題が発生した場合にユーザー同士で問題を解決するための場です。
今回のケースはSearch Consoleが原因で問題が発生したケースと見受けられますがいかがでしょうか?

  • 記事ID:No.7618
  • 投稿日時:2017年09月04日 17:46
【質問】 フリーズについて 投稿者:かずみ

文章の途中で画面がフリーズし写真も文字も
全て消えてしまいます。
何度も初めからやり直しになる為、こまめに下書きとして保存。
とても面倒です。
こんなトラブルは初めての事なのですが
どんな不具合があるのでしょうか。
宜しくお願い致します。

  • 記事ID:No.7614
  • 投稿日時:2017年09月01日 09:42
  • 返信:2件