123

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 id="body-in">
	<div id="main">
		<p>アーカイブをそれぞれの年ごとに表示するようにしました</p>
		<p>最新の年のリスト一覧は表示するようにしてあります。それ以外はデフォルトで非表示。それぞれの年をクリックするとその年の投稿記事一覧が表示される仕組みです。</p>
		<p>最大で横3列4段になります。<br>それぞれの月、カウント(そのpostにも)classが付けてあるので、色やら変更可能です。<br>逆にカウントが無いと上手く機能しないかも知れないので、デフォルトでカウント表示、ドロップダウンリスト<strong>ではなく</strong>通常表示にしておいて下さい</p>
		<p>多分これで過去10年までなら、本来エライことになる縦スペースを多少確保できたと思います。<br>そういう場合は、ドロップダウンリストを使うべきなんでしょうけれども。</p>
	</div>
</div>
<footer itemscope="" itemtype="http://schema.org/WPFooter">
	<div id="footer" class="main-footer">
		<div id="footer-in">

			<div id="footer-widget">
				<div class="footer-left">
					<aside id="pages-2" class="widget widget_pages">
						<h3 class="footer_widget_title">固定ページ</h3>
						<ul>
							<li class="page_item page-item-17"><a href="https://wp-simplicity.com/">Simplicityの特徴</a></li>
							<li class="page_item page-item-7 page_item_has_children"><a href="https://wp-simplicity.com/downloads/">Simplicityのダウンロード</a>
								<ul class="children">
									<li class="page_item page-item-1339"><a href="https://wp-simplicity.com/downloads/child-theme/">Simplicityの子テーマ</a></li>
									<li class="page_item page-item-35004"><a href="https://wp-simplicity.com/downloads/downloads2/">Simplicity2のダウンロード</a></li>
									<li class="page_item page-item-35010"><a href="https://wp-simplicity.com/downloads/child-theme2/">Simplicity2の子テーマ</a></li>
									<li class="page_item page-item-1877"><a href="https://wp-simplicity.com/downloads/skin/">Simplicityのスキン</a></li>
								</ul>
							</li>
							<li class="page_item page-item-43"><a href="https://wp-simplicity.com/initialization/">Simplicityの初期設定・おすすめの設定</a></li>
							<li class="page_item page-item-59"><a href="https://wp-simplicity.com/layout/">レイアウト見本</a></li>
							<li class="page_item page-item-139 page_item_has_children"><a href="https://wp-simplicity.com/reference/">参考・技術情報</a>
								<ul class="children">
									<li class="page_item page-item-1143"><a href="https://wp-simplicity.com/reference/adoption-sites/">Simplicity導入サイト</a></li>
									<li class="page_item page-item-21216"><a href="https://wp-simplicity.com/reference/crowdsourcing-service/">Simplicityカスタマイズ依頼向けのクラウドソーシングサービス</a></li>
								</ul>
							</li>
							<li class="page_item page-item-9262 page_item_has_children"><a href="https://wp-simplicity.com/forums/">Simplicityサポートフォーラム</a>
								<ul class="children">
									<li class="page_item page-item-9258"><a href="https://wp-simplicity.com/forums/create-topic/">トピックの作成</a></li>
									<li class="page_item page-item-13015"><a href="https://wp-simplicity.com/forums/unsupported/">サポート対象外のもの</a></li>
								</ul>
							</li>
							<li class="page_item page-item-3185"><a href="https://wp-simplicity.com/sitemap/">サイトマップ</a></li>
						</ul>
					</aside>
				</div>
				<div class="footer-center">
					<aside id="categories-3" class="widget widget_categories">
						<h3 class="footer_widget_title">カテゴリー</h3>
						<ul>
							<li class="cat-item cat-item-3"><a href="https://wp-simplicity.com/category/news/" title="新着情報Simplicityに関する新着情報です。バージョンアップ、追加機能の報告など。">NEWS</a> (137)
							</li>
							<li class="cat-item cat-item-5"><a href="https://wp-simplicity.com/category/settings/" title="Simplicity、Wordpressの設定全般Simplicityの設定はもとより、Simplicityを使う上で便利な、Wordpressの設定に関する情報です。">設定いろいろ</a> (45)
								<ul class="children">
									<li class="cat-item cat-item-14"><a href="https://wp-simplicity.com/category/settings/local-test/" title="Simplicityのローカルテスト環境用の設定など。">ローカルテスト</a> (1)
									</li>
									<li class="cat-item cat-item-15"><a href="https://wp-simplicity.com/category/settings/server/" title="Simplicityとサーバーに関する情報です。">サーバー</a> (3)
									</li>
									<li class="cat-item cat-item-17"><a href="https://wp-simplicity.com/category/settings/1-to-2/">Simplicity1から2への移行</a> (3)
									</li>
									<li class="cat-item cat-item-13"><a href="https://wp-simplicity.com/category/settings/extension-class/" title="Simplicityの文章を彩る拡張クラスの紹介です。">拡張クラス</a> (2)
									</li>
								</ul>
							</li>
							<li class="cat-item cat-item-6"><a href="https://wp-simplicity.com/category/customizer/" title="Wordpress管理画面からできるカスタマイズWordpress管理画面から「外観→カスタマイズ」で行える設定に関する情報です。">カスタマイザー設定</a> (30)
							</li>
							<li class="cat-item cat-item-4"><a href="https://wp-simplicity.com/category/theme-custom/" title="テーマファイルのカスタマイズ方法などSimplicityのテーマファイルを編集してカスタマイズする方法の紹介です。テーマファイルのカスタマイズによる不具合、それに関する質問は、サポートできませんのでご了承ください。">テーマ改造</a> (34)
								<ul class="children">
									<li class="cat-item cat-item-16"><a href="https://wp-simplicity.com/category/theme-custom/tips/" title="ちょっとしたテーマカスタマイズのTipsです。">Tips</a> (8)
									</li>
								</ul>
							</li>
						</ul>
					</aside>
				</div>
				<div class="footer-right">
					<aside id="archives-4" class="widget widget_archive">
						<h3 class="footer_widget_title">アーカイブ</h3>
						<ul>
							<li><a href="https://wp-simplicity.com/2016/01/">2016年1月</a>&nbsp;(3)</li>
							<li><a href="https://wp-simplicity.com/2015/12/">2015年12月</a>&nbsp;(6)</li>
							<li><a href="https://wp-simplicity.com/2015/11/">2015年11月</a>&nbsp;(6)</li>
							<li><a href="https://wp-simplicity.com/2015/10/">2015年10月</a>&nbsp;(2)</li>
							<li><a href="https://wp-simplicity.com/2015/09/">2015年9月</a>&nbsp;(7)</li>
							<li><a href="https://wp-simplicity.com/2015/08/">2015年8月</a>&nbsp;(4)</li>
							<li><a href="https://wp-simplicity.com/2015/07/">2015年7月</a>&nbsp;(12)</li>
							<li><a href="https://wp-simplicity.com/2015/06/">2015年6月</a>&nbsp;(11)</li>
							<li><a href="https://wp-simplicity.com/2015/05/">2015年5月</a>&nbsp;(9)</li>
							<li><a href="https://wp-simplicity.com/2015/04/">2015年4月</a>&nbsp;(8)</li>
							<li><a href="https://wp-simplicity.com/2015/03/">2015年3月</a>&nbsp;(10)</li>
							<li><a href="https://wp-simplicity.com/2015/02/">2015年2月</a>&nbsp;(10)</li>
							<li><a href="https://wp-simplicity.com/2015/01/">2015年1月</a>&nbsp;(13)</li>
							<li><a href="https://wp-simplicity.com/2014/12/">2014年12月</a>&nbsp;(14)</li>
							<li><a href="https://wp-simplicity.com/2014/11/">2014年11月</a>&nbsp;(17)</li>
							<li><a href="https://wp-simplicity.com/2014/10/">2014年10月</a>&nbsp;(18)</li>
							<li><a href="https://wp-simplicity.com/2014/09/">2014年9月</a>&nbsp;(19)</li>
							<li><a href="https://wp-simplicity.com/2014/08/">2014年8月</a>&nbsp;(31)</li>
							<li><a href="https://wp-simplicity.com/2014/07/">2014年7月</a>&nbsp;(33)</li>
						</ul>
					</aside>
				</div>
			</div>

			<div class="clear"></div>
			<div id="copyright" class="wrapper">
				© 2014 <a href="https://wp-simplicity.com">Simplicity</a>
			</div>
		</div>
		<!-- /#footer-in -->
	</div>
	<!-- /#footer -->
</footer>
            
          
!
            
              #footer {
	.widget_archive {
		display: none;
	}
	
	.archive2 {
		header {
			position: relative;
			&::before{
				content:"clickで表示・非表示トグル";
				position: absolute;
				top: 50%;
				right: -500px;
				transform: translateY(-50%);
				font-size: 10px;
				color: #fff;
				transition: .3s ease;
				background-color: #833;
				padding: 0 2px;
			}
			&:hover::before {
				right: 0;
			}
		}
		
		ul {
			display: flex;
			flex-flow: row wrap;
			transition: .3s ease;
			height: 100%;
			opacity: 1;
			visibility: visible;
			padding: 0;
			
			li {
				flex: 1 27%;
				margin: 2px 5px;
				padding: 3px;
				background-color: #fff;
				color: #333;
				border-radius: 3px;
				transition: .3s ease;
				font-size: 12px;
				
				&:hover {
					background-color: #333;
					color: #fff;
					box-shadow: 0 0 2px rgba(255,255,255,.8);
				}
				
				a{
					display: flex;
					flex-flow: row wrap;
					justify-content: space-between;
					text-decoration: none;
					color: inherit;
					font-size: inherit;
					
					div:first-child {
						margin-right: auto;
					}
					div:last-child {
						span {
							font-size: 10px;
						}
					}
				}
			}
		}
		
		.hide {
			margin: 0;
			height: 0;
			opacity: 0;
			visibility: hidden;
			overflow: hidden;
		}
	}
}

/*以下不要*/
footer {
	width: 100%;
	#footer-in {
		width: 100%;
		
		#footer-widget {
			display: flex;
			flex-flow: row wrap;
			margin: 0;
			padding: 0;
			justify-content: space-around;
			width: 100%;
			
			[class^=footer-] {
				flex: 1 30%;
				float: none;
				width: initial;
				margin: 5px;
				
				&:last-child {
					min-width: 33%;
				}
				
			}
		}
	}
}
            
          
!
            
              (function($) {
	$(function() {
		var
			wgt = $("footer .widget_archive"),
			clone = wgt.clone(),
			year = [];

		//クローンして、手前に挿入。オリジナルはcssで非表示
		wgt.before(clone);
		$("footer .widget_archive:first").attr("class", "archive2");

		var
			acv = $("footer").find(".archive2"),
			acvLi = acv.find("li");

		//liのテキストから年がどこからあるかを調べる
		acvLi.each(function(i) {
			var dt = $(this).text().match(/(\d+)年(\d+)月\s\((\d+)\)/);
			year.push(dt[1]);
		});
		$.unique(year); //重複削除

		acvLi.unwrap(); //liの親のulを解除

		//投稿年があるだけクローンした中にブロックを作る
		var
			yearCount = year.length,
			i = 0;

		while (i < yearCount) {
			acv.append(
				"<div class='year_" + year[i] + "'>" +
				"<header>" + year[i] + "年</header>" +
				"<ul></ul>" +
				"</div>");
			i++;
		}

		//作ったブロック内のulに内容を整形して移動
		//オリジナルのクローンは順番に削除
		var j = 0;
		acvLi.each(function() {
			var dt = $(this).text().match(/(\d+)年(\d+)月\s\((\d+)\)/),
				href = $(this).find("a").attr("href"),
				rTxt = "<li>" +
				"<a href='" + href + "'>" +
				"<div class='month'>" + dt[2] + "月</div>" +
				"<div class='count'>" + dt[3] + "<span>post</span></div>" +
				"</a>" +
				"</li>";

			if (year[j] === dt[1]) {
				$(".year_" + year[j] + " ul").append(rTxt);
				$(this).remove();
			} else {
				j++;
				$(".year_" + year[j] + " ul").append(rTxt);
				$(this).remove();
			}
		});

		//headerの最初以外は.hide
		acv.find("ul:not(:first)").addClass("hide");

		//headerクリックでトグルshow
		acv.find("header").on("click", function() {
			$(this).next().toggleClass("hide");
		});
	});
})(jQuery);
            
          
!
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.

Console