css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console