diff --git a/css/blog.css b/css/blog.css
new file mode 100644
index 0000000..5ed3bd3
--- /dev/null
+++ b/css/blog.css
@@ -0,0 +1,38 @@
+.blog-tag {
+  padding: 0px 3px;
+  border: 1px solid #bbb;
+}
+.blog-tag:hover  { text-decoration: underline; }
+.blog-tag.active { background-color: #8fd; }
+
+.blog-year-index {
+   margin-top: 2ex;
+}
+
+.blog-year:before { content: "Post from "; }
+.blog-year { font-size: 150%; font-weight: bold; }
+
+.blog-year-entries { margin-left: 5%; }
+
+a.blog-index-entry {
+  display: block;
+  text-decoration: none;
+  color: #000;
+}
+
+.blog-index-entry.filtered-out { color: #ccc; }
+
+.blog-index-date  { margin-right: 2ex; }
+.blog-index-title { font-weight: bold; }
+
+.blog-index-title:hover {
+  text-decoration: underline;
+}
+
+.blog-tag-cnt {
+  font-size: 80%;
+  color: #666;
+  margin-left: 3px;
+}
+.blog-tag-cnt:before { content: "("; }
+.blog-tag-cnt:after  { content: ")"; }
diff --git a/js/blog.js b/js/blog.js
new file mode 100644
index 0000000..99c9a98
--- /dev/null
+++ b/js/blog.js
@@ -0,0 +1,29 @@
+$(function() {
+  $(".blog-tag").on("click", function(ev) {
+    var el  = $(ev.target).closest(".blog-tag");
+    var tag = el.data("tag");
+    var set = [];
+
+    el.toggleClass("active");
+    el.parent().children(".active").each(function() {
+      set.push($(this).data("tag"));
+    });
+
+    if ( set.length > 0 ) {
+      el.closest(".contents.blog").find(".blog-index-entry").each(function() {
+	var mytags = $(this).data("tags").split("|");
+
+	if ( set.filter(value => mytags.includes(value)).length > 0 )
+	  $(this).removeClass("filtered-out");
+	else
+	  $(this).addClass("filtered-out");
+      });
+    } else {
+      el.closest(".contents.blog")
+        .find(".blog-index-entry")
+        .removeClass("filtered-out");
+    }
+  });
+  $(".blog-index-entry").on("click", function(ev) {
+  });
+});