cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="site list">
<main id="main" class="site-main row" role="main">
<header class="page-header">
				<h1 class="page-title">カテゴリー: UIサンプル</h1>			</header>
		
<article id="post-173" class="list">
		<div class="entry-image col-xs-3">
		<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/2e0b8193.jpg" class="img-responsive wp-post-image" alt="" srcset="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/2e0b8193.jpg 480w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/2e0b8193-225x300.jpg 225w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/2e0b8193-320x427.jpg 320w" sizes="(max-width: 135px) 100vw, 135px" width="135" height="180">	</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e3%83%86%e3%82%b9%e3%83%88" rel="category tag">テスト</a></li>
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2016年6月7日">
					<i class="fa fa-clock-o"></i>2016年6月7日				</time>
			</span>
						<span>
				<time datetime="2017年2月26日">
					<i class="fa fa-refresh"></i>2017年2月26日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/post-173" rel="bookmark">画像テスト</a></h2>		</header><!-- .entry-header -->

		<p>なにかしら</p>

		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/%e3%83%86%e3%82%b9%e3%83%88" rel="category tag">テスト</a>, <a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/post-173#comments"><span class="screen-reader-text">画像テスト への</span>9件のコメント</a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-441" class="list">
		<div class="entry-image col-xs-3">
						<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/themes/lazy/lib/image/nothumb.gif" class="img-responsive" alt="no-image" title="" width="323" height="200">
			</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2017年4月23日">
					<i class="fa fa-clock-o"></i>2017年4月23日				</time>
			</span>
						<span>
				<time datetime="2017年4月23日">
					<i class="fa fa-refresh"></i>2017年4月23日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/blogcard-test" rel="bookmark">blogcard test</a></h2>		</header><!-- .entry-header -->

		<p>https://wp-simplicity.com/simplicity2-5-3/ https://wp-simplicity.com/simplicity2-5-3/</p>

		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/blogcard-test#respond">Leave a Comment<span class="screen-reader-text"> on blogcard test</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-409" class="list">
		<div class="entry-image col-xs-3">
						<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/themes/lazy/lib/image/nothumb.gif" class="img-responsive" alt="no-image" title="" width="323" height="200">
			</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2017年3月22日">
					<i class="fa fa-clock-o"></i>2017年3月22日				</time>
			</span>
						<span>
				<time datetime="2017年3月22日">
					<i class="fa fa-refresh"></i>2017年3月22日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/post-409" rel="bookmark">投稿時間確認テスト</a></h2>		</header><!-- .entry-header -->

		<p>1:21</p>

		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/post-409#respond">Leave a Comment<span class="screen-reader-text"> on 投稿時間確認テスト</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-344" class="list">
		<div class="entry-image col-xs-3">
		<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/icon-.png" class="img-responsive wp-post-image" alt="" srcset="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/icon-.png 512w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/icon--150x150.png 150w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/icon--300x300.png 300w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/icon--100x100.png 100w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="180">	</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2016年12月30日">
					<i class="fa fa-clock-o"></i>2016年12月30日				</time>
			</span>
						<span>
				<time datetime="2017年4月25日">
					<i class="fa fa-refresh"></i>2017年4月25日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/1column-test" rel="bookmark">1column test</a></h2>		</header><!-- .entry-header -->

		
		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/1column-test#respond">Leave a Comment<span class="screen-reader-text"> on 1column test</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-191" class="list">
		<div class="entry-image col-xs-3">
		<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/08/6504bcb1c9e17510d06980f11a044dd9.jpeg" class="img-responsive wp-post-image" alt="" srcset="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/08/6504bcb1c9e17510d06980f11a044dd9.jpeg 148w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/08/6504bcb1c9e17510d06980f11a044dd9-100x100.jpeg 100w" sizes="(max-width: 148px) 100vw, 148px" width="148" height="150">	</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2016年8月16日">
					<i class="fa fa-clock-o"></i>2016年8月16日				</time>
			</span>
						<span>
				<time datetime="2016年10月20日">
					<i class="fa fa-refresh"></i>2016年10月20日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/post-191" rel="bookmark">twitter デフォルトシェアボタンテスト</a></h2>		</header><!-- .entry-header -->

		<p>ツイート</p>

		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/post-191#respond">Leave a Comment<span class="screen-reader-text"> on twitter デフォルトシェアボタンテスト</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-220" class="list">
		<div class="entry-image col-xs-3">
		<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/238e9a57.jpg" class="img-responsive wp-post-image" alt="" srcset="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/238e9a57.jpg 511w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/238e9a57-300x169.jpg 300w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/238e9a57-320x180.jpg 320w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="101">	</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2016年8月16日">
					<i class="fa fa-clock-o"></i>2016年8月16日				</time>
			</span>
						<span>
				<time datetime="2017年4月23日">
					<i class="fa fa-refresh"></i>2017年4月23日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/post-220" rel="bookmark">ブログカードテスト</a></h2>		</header><!-- .entry-header -->

		<p>何かしらのテキスト 何かしらのテキスト 何かしらのテキスト 何かしらのテキスト 何かしらのテキスト 何かしらのテキスト 何かしらのテキスト 何かしらのテキスト 何かしらのテキスト 何かしらのテキスト 何かしらのテキスト  […]</p>

		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/post-220#respond">Leave a Comment<span class="screen-reader-text"> on ブログカードテスト</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-181" class="list">
		<div class="entry-image col-xs-3">
		<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/08/mqdefault.jpg" class="img-responsive wp-post-image" alt="" srcset="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/08/mqdefault.jpg 320w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/08/mqdefault-300x169.jpg 300w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="101">	</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2016年6月9日">
					<i class="fa fa-clock-o"></i>2016年6月9日				</time>
			</span>
						<span>
				<time datetime="2016年8月30日">
					<i class="fa fa-refresh"></i>2016年8月30日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/post-181" rel="bookmark">テスト</a></h2>		</header><!-- .entry-header -->

		
		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/post-181#respond">Leave a Comment<span class="screen-reader-text"> on テスト</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-94" class="list">
		<div class="entry-image col-xs-3">
		<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919.jpg" class="img-responsive wp-post-image" alt="" srcset="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919.jpg 504w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919-300x200.jpg 300w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919-320x213.jpg 320w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="120">	</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/ui%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">UIサンプル</a></li>
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">サンプル</a></li>
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e4%bd%9c%e6%88%90%e4%b8%ad%e3%82%b9%e3%82%ad%e3%83%b3" rel="category tag">作成中スキン</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2016年2月20日">
					<i class="fa fa-clock-o"></i>2016年2月20日				</time>
			</span>
						<span>
				<time datetime="2016年10月9日">
					<i class="fa fa-refresh"></i>2016年10月9日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/post-94" rel="bookmark">サンプル ボタン類</a></h2>		</header><!-- .entry-header -->

		<p>[sameCatWPPP t_class=”test” title=”の人気記事でーす” range=”w”] インラインボタン 参考こういう感じで […]</p>

		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/ui%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">UIサンプル</a>, <a href="https://test-wordpress-hidekichi.c9users.io/category/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">サンプル</a>, <a href="https://test-wordpress-hidekichi.c9users.io/category/%e4%bd%9c%e6%88%90%e4%b8%ad%e3%82%b9%e3%82%ad%e3%83%b3" rel="category tag">作成中スキン</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/post-94#respond">Leave a Comment<span class="screen-reader-text"> on サンプル ボタン類</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-72" class="list">
		<div class="entry-image col-xs-3">
		<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919.jpg" class="img-responsive wp-post-image" alt="" srcset="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919.jpg 504w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919-300x200.jpg 300w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919-320x213.jpg 320w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="120">	</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/ui%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">UIサンプル</a></li>
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">サンプル</a></li>
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e4%bd%9c%e6%88%90%e4%b8%ad%e3%82%b9%e3%82%ad%e3%83%b3" rel="category tag">作成中スキン</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2016年2月19日">
					<i class="fa fa-clock-o"></i>2016年2月19日				</time>
			</span>
						<span>
				<time datetime="2016年2月19日">
					<i class="fa fa-refresh"></i>2016年2月19日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/post-72" rel="bookmark">サンプル リスト表示</a></h2>		</header><!-- .entry-header -->

		<p>ulリスト 通常 リストアイテム1 リストアイテム2 リストアイテム2-1 リストアイテム2-2 リストアイテム2-3 リストアイテム3 リストアイテム4 リストアイテム5 リストアイテム5-1 リストアイテム5-2 リ […]</p>

		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/ui%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">UIサンプル</a>, <a href="https://test-wordpress-hidekichi.c9users.io/category/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">サンプル</a>, <a href="https://test-wordpress-hidekichi.c9users.io/category/%e4%bd%9c%e6%88%90%e4%b8%ad%e3%82%b9%e3%82%ad%e3%83%b3" rel="category tag">作成中スキン</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/post-72#respond">Leave a Comment<span class="screen-reader-text"> on サンプル リスト表示</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-67" class="list">
		<div class="entry-image col-xs-3">
		<img src="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919.jpg" class="img-responsive wp-post-image" alt="" srcset="https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919.jpg 504w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919-300x200.jpg 300w, https://test-wordpress-hidekichi.c9users.io/wp-content/uploads/2016/02/20101215104852919-320x213.jpg 320w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="120">	</div>
	<div class="entry-content col-xs-9">
		<header class="entry-header">
			<ul class="post-categories">
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/ui%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">UIサンプル</a></li>
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">サンプル</a></li>
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e4%bd%9c%e6%88%90%e4%b8%ad%e3%82%b9%e3%82%ad%e3%83%b3" rel="category tag">作成中スキン</a></li>
	<li><a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></li></ul>			<span class="dates">
			<span class="addUpdate">				<time datetime="2016年2月19日">
					<i class="fa fa-clock-o"></i>2016年2月19日				</time>
			</span>
						<span>
				<time datetime="2016年2月19日">
					<i class="fa fa-refresh"></i>2016年2月19日				</time>
			</span>
						</span>
			
			<h2 class="entry-title"><a href="https://test-wordpress-hidekichi.c9users.io/post-67" rel="bookmark">サンプル カテゴリーが複数ある場合</a></h2>		</header><!-- .entry-header -->

		<p>.post-metaのカテゴリが複数ある場合 トップリストの各カテゴリアイテムが複数(3つ以上)ある場合、及び.entryのサイズが400px以下になった時に、aのリンクをselet方式に自動で変更します。 特別これでレ […]</p>

		<footer class="entry-footer">
			<span class="cat-links">Posted in <a href="https://test-wordpress-hidekichi.c9users.io/category/ui%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">UIサンプル</a>, <a href="https://test-wordpress-hidekichi.c9users.io/category/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" rel="category tag">サンプル</a>, <a href="https://test-wordpress-hidekichi.c9users.io/category/%e4%bd%9c%e6%88%90%e4%b8%ad%e3%82%b9%e3%82%ad%e3%83%b3" rel="category tag">作成中スキン</a>, <a href="https://test-wordpress-hidekichi.c9users.io/category/%e6%9c%aa%e5%88%86%e9%a1%9e" rel="category tag">未分類</a></span><span class="comments-link"><a href="https://test-wordpress-hidekichi.c9users.io/post-67#respond">Leave a Comment<span class="screen-reader-text"> on サンプル カテゴリーが複数ある場合</span></a></span>		</footer><!-- .entry-footer -->
	</div><!-- .entry-content -->
</article><!-- #post-## -->			<div class="col-xs-12">
			
			<nav class="navigation pagination-outer" role="navigation">
				<div class="nav-links"><ul class="page-numbers pagination">
	<li class="active"><span class="page-numbers current">1</span></li>
	<li><a class="page-numbers" href="https://test-wordpress-hidekichi.c9users.io/page/2">2</a></li>
	<li><a class="next page-numbers" href="https://test-wordpress-hidekichi.c9users.io/page/2">次へ</a></li>
</ul>
</div>
			</nav>			</div>
			
		</main>
	</div>
            
          
!
            
              html {
	font-size: 62.5%;
}

body {
	font-size: 1.5rem;
}

.site.list {
	.site-main {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(1, 1fr);
		margin: 1rem;
		
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			margin: 0;
		}
		@media (min-width: 992px) {
			grid-template-columns: repeat(3, 1fr);
		}
		
		.page-header {
			
			@media (min-width: 768px) {
				grid-column: 1/3;
			}
			@media (min-width: 992px) {
				grid-column: 1/4;
			}
		}
		
		.list {
			padding: 1rem;
			@media (min-width: 768px) {
				padding: 0;
			}
		}
		.post-categories {
			margin: 0;
			padding-left: 0;
			list-style: none;
			display: inline-block;
			font-size: 1.3rem;
			li {
				display: inline-block;
				a {
					text-decoration: none;
				}
			}
		}
		.dates {
			color: #aaa;
			margin-left: 10px;
			font-size: 1.3rem;
		}
		.entry-image {
			position: relative;
			margin-bottom: 10px;
			width: 100%;
			height: 0;
			padding: 0 0 56.25%;
			overflow: hidden;
			border-radius: 6px;
			img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 100%;
				height: auto;
				margin: 0;
			}
		}
		.entry-content {
			.entry-title {
				font-size: 1.8rem;
				line-height: 1.3;
				margin-bottom: 1.6rem;
				color: #111;
				a {
					color: inherit;
					text-decoration: none;
				}
			}
			.posted-on {
				font-size: 1.4rem;
				line-height: 1.5;
			}
			p {
				font-size: 1.2rem;
				line-height: 1.3;
			}
		}
	}
}
            
          
!
999px
Loading ..................

Console