お前…パクリテーマ作者かよ…

さっき投稿した新しいテーマについての記事なんですけど、はてブ付いてたのでコメントを読んだんですね。そしたら…

はてなブログのテーマをまた作ってみた（未リリース） – FOXISM

今のゆきひー（http://www.yukihy.com）とほとんど一緒だな

2017/03/19 21:39

b.hatena.ne.jp

とのことで。

え！？うっそマジ！？ゆきひーさんのブログは検索しているときに何度も見たので確かに見たことはあるけど、そんなんだっけ？…と思ってみてみたんですけど、おぉ…かぶってますわ、これ。

3カラムなので先の記事で紹介したgravityに近い気もするけど、左下に固定のカテゴリーというのがもろ被りしてる。あー…。

ちなみに、私のテーマの方の元ネタはそれではなく、以前ほかのサイト用にWordpressのテーマをいろいろ参考にしようと探していて、その中でいくつか見た「左サイドバーが広めのもの」だったりします。今回も参考にしようと探したんだけど見つからず。ただまぁ左サイドバーというのは珍しくもないしなぁ、と記憶の中のものを参考に作り始めたものでした。

うーん…。
あれですね、これ公開したらなんかもう「パクリテーマ作者」認定されてしまいそう。前のZENO-TEALはそのきっかけからしてSTORKを模倣してなるべく似せよう（でも自分の好き嫌いも少し入れよう）として作ったものだけど、似たものが2つ続くと…ねぇ？（たぶんここまでの全部言い訳にしか見えないと思う。）

一応今回のものは、右のメインエリアをカード型にしたものも考えていたんだけど、それも結局左下のカテゴリー固定が付いてるとパクリだと言われるおそれがあるしなぁ…。これはお蔵入りですね…。

css

まぁせっかく作ったのだし、cssを全部公開しておきます。作業途中なので必要ないものも残ってるけど。

@font-face {font-family: "Yu Gothic";src: local("Yu Gothic Medium");font-weight: 100;}
@font-face {font-family: "Yu Gothic";src: local("Yu Gothic Medium");font-weight: 200;}
@font-face {font-family: "Yu Gothic";src: local("Yu Gothic Medium");font-weight: 300;}
@font-face {font-family: "Yu Gothic";src: local("Yu Gothic Medium");font-weight: 400;}
@font-face {font-family: "Yu Gothic";src: local("Yu Gothic Bold");font-weight: bold;}
html{box-sizing:border-box;font-size:90%;}
*,:after,:before{box-sizing:inherit}
body {font-size:100%;font-family:"Yu Gothic", YuGothic;margin:0 0 0 0;padding:0 0 0 0;color:#33403d;background-color:#ecf0f1;}
::selection {background:#bdc3c7;color:#252525;}
::-moz-selection {background:#bdc3c7;color:#252525;}
a {outline:none;color:#252525;text-decoration:none;-webkit-transition: All 0.2s ease;-moz-transition: All 0.2s ease;-o-transition: All 0.2s ease;-ms-transition: All 0.2s ease;transition: All 0.2s ease;}
a:hover {color:#252525;}
a img,img{border:0px;vertical-align:bottom;}
p{line-height:1.8;}
h1,h2,h3,h4,h5,h6{margin:0 0 0 0;padding:0 0 0 0;font-size:100%;line-height:1;}
/* フォント */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
src: local('Oswald ExtraLight'), local('Oswald-ExtraLight'), url(https://fonts.gstatic.com/s/oswald/v13/gov12z69psR1Uu7UJEfiUltXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v13/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
src: local('Oswald Bold'), local('Oswald-Bold'), url(https://fonts.gstatic.com/s/oswald/v13/bH7276GfdCjMjApa_dkG6VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* はてなグローバルヘッダー */
#globalheader-container{z-index:999;background:#252525;color:#fff;}
/* タイトル */
#blog-title{background:#252525;position:fixed;top:0;z-index:500;width:336px;height:100%;}
#blog-title #blog-title-inner{}
#blog-title-content{width:336px;height:336px;overflow:hidden;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;text-align:center;}
#blog-title #title a::before{content:'\f050';font-family:blogicon;font-weight:normal;font-size:64px;line-height:1;display:block;}
#blog-title #title a{color:#fff;font-family:'Oswald';font-size:40px;line-height:1.1;font-weight:700;}
#blog-description{color:#fff;font-size:12px;font-weight:normal;margin-top:.5rem;}
/* ヘッダー */
#top-editarea{width:336px;position:fixed;top:336px;z-index:500;color:#fff;}
/* レイアウト */
#container{}
#container-inner{}
#content{margin-left:336px;}
#content-inner{}
#wrapper{width:800px;padding:48px 0 0 64px;}
#box2{width:800px;padding:64px 0 0 64px;}
/* エントリー */
.entry{width:100%;margin:0 0 2rem 0;}
.page-index .entry{margin:0 0 3rem 0;padding:0 0 4rem 0;border-bottom:1px dashed #252525;}
.entry-content p{margin:0 0 1.5rem 0;padding:0 0 0 0;}
.entry-content p a {color:#252525;text-decoration:underline;}
.entry-content p a:hover {background:#fff;}
.entry-header{margin:0 0 2rem 0;}
.entry-date{font-size:48px;margin:0 0 0 0;font-family:'Oswald';font-weight:200;border-bottom:3px solid #252525;}
.entry-date a{display:inline-block;border-bottom:0px solid #252525;padding:0 1em 0 0;}
.entry-date .hyphen{display:none;}
.entry-title{line-height:1.5;padding:1rem 0;}
.entry-title a{font-weight:normal;font-size:2.3rem;}
.entry-categories{border-top:1px solid #252525;border-bottom:1px solid #252525;}
.entry-categories a{display:inline-block;font-size:0.8rem;line-height:2;}
.entry-categories a::after{content:'/';margin-left:0.5em;}
.entry-categories a:last-of-type::after{content:'';margin-left:0;}
a.entry-see-more{display:inline-block;background:#252525;padding:0.5em 3em 0.5em 1em;color:#fff;position:relative;border-radius:2px;}
a.entry-see-more::after{content:'';position:absolute;top:0.2em;right:-1em;display:block;height:2.4em;width:2.4em;background:#ECF0F1;transform:rotate(45deg);}
a.entry-see-more:hover{}
.social-buttons{margin:0 0 1rem 0;}
/* 記事編集ボタン */
.entry-header-menu{position:absolute;z-index:2;display:block;width:40px;height:40px;overflow:hidden;background:#fff;line-height:40px;background:#333;}
.entry-header-menu a{font-size:1px;color:transparent;}
.entry-header-menu a::before{content:'\f024';font-size:18px;color:#fff;font-family:blogicon;display:block;width:40px;text-align:center;}
.page-index .comment-box,
.page-index .author,
.page-index .entry-footer-time{display:none;}
.page-index .hatena-bookmark-comment-iframe{}
.page-index .hatena-star-container{display:none;}
.page-index .entry-footer{}
.page-index .google-afc-image{}
.page-entry .author{}
.page-entry .entry-footer-time a{}
.social-buttons{display:none;}
.page-entry .social-buttons{display:block;padding:0 0 0 0;}
.page-entry .entry-footer-html{padding:0 0 0 0;}
/* 記事内 */
.entry-content h2{font-size:2.2rem;line-height:1.3;padding:0.5em 0;margin:3rem 0 1rem 0;border-top:7px double #33403d;border-bottom:7px double #33403d;}
.entry-content h3{font-size:1.8rem;line-height:1.3;padding:1rem;border-left:6px solid #33403d;margin:2rem 0 1rem 0;}
.entry-content h4{font-size:1.4rem;padding:1rem 0 0 0;margin:0 0 .5rem 0;}
.entry-content h4::before{content:'\f029';font-family:blogicon;margin-right:.5rem;color:#33403d;}
.entry-content h5{font-size:1.3rem;padding:1rem 0 0 0;margin:0 0 .3rem 0;}
.entry-content h6{font-size:1.2rem;padding:1rem 0 0 0;margin:0 0 .3rem 0;}
.hatena-asin-detail{border-color:#33403d;}
blockquote{margin:1.5em 0 1em 1em;padding:1em 1em 1em 40px;background:#ecf0f1;border:1px solid #33403d;}
blockquote::before{content:"\f704";font-family:blogicon;color:#33403d;font-size:42px;position:absolute;top:-0.5em;left:-0.4em;background:#ecf0f1;}
blockquote cite{display:block;font-style:italic;text-align:right;font-size:0.7rem;word-break:break-all;margin-top:0.6em;}
q{font-style:italic;background:#e0f2f1;margin:0 0.2em;}
.hatena-fotolife{margin:0 0 0.7em 0;display:block;max-width:100%;}
.hatena-image-left,
.hatena-image-right{max-width:50%!important;}
.hatena-image-left{margin-right:1rem!important;}
.hatena-image-right{margin-left:1rem!important;}
.entry-content ul{margin:0 1em 1.5em 1em;padding:0 0 0 0;}
.entry-content ol{margin:0 1em 1.5em 0;padding:0 0 0 0;counter-reset:my-counter;list-style:none;}
.entry-content dl{margin:0 1em 1.5em 1em;padding:0 0 0 0;}
.entry-content ul li ul,
.entry-content ul li ol,
.entry-content ol li ul,
.entry-content ol li ol{margin:0.2em 0.5em 0.5em 1em;}
.entry-content ul li{margin:0 0 0.2em 0;padding:0 0 0 0;line-height:1.7;}
.entry-content ol li{margin:0 0 0.2em 0;padding:0 0 0 0;line-height:1.7;list-style-type:none;position:relative;}
.entry-content ol li:before {
content:counter(my-counter);counter-increment:my-counter;
background-color:#252525;color:#fff;font-size:0.8rem;display:inline-block;text-align:center;height:1.5em;width:1.5em;line-height:1.5em;position:relative;top:-0.1em;margin:0 0.4em 0 0;
}
.entry-content ol ol li:before {
content:counter(my-counter);counter-increment:my-counter;
background-color:#666;color:#fff;font-size:0.8rem;display:inline-block;text-align:center;height:1.5em;width:1.5em;line-height:1.5em;position:relative;top:-0.1em;margin:0 0.4em 0 0.5em;
}
.entry-content pre.code{margin:0 0 1.5em 0;padding:1em;background:#444;color:#fff;}
table{margin:0em 0 1em 0;border-collapse:collapse;border:2px solid #33403d;max-width:100%;}
th{border:1px solid #33403d;padding:0.3em 0.6em;background:#63706d;color:#fff;}
td{border:1px solid #33403d;padding:0.3em 0.6em;}
ul.table-of-contents{border:1px solid #33403d;padding:1.2rem 1rem 1rem 2rem;margin:0.5rem 0 2rem 0;position:relative;}
ul.table-of-contents li{font-size:90%;margin-bottom:0;}
ul.table-of-contents li a{text-decoration:none;}
ul.table-of-contents ul ul{display:none;}
ul.table-of-contents:before{content:"INDEX";display:inline-block;position:absolute;top:-0.8rem;left:0.5rem;background:#ecf0f1;padding:0 0.5rem;font-weight:700;color:#33403d;}
.entry-content b{color:#000;}
.entry-content strong{background:linear-gradient(transparent 60%, #e6ee9c 0%);color:#000;}
.entry-content strong.green{background:linear-gradient(transparent 60%, #a5d6a7 0%);}
.entry-content strong.pink{background:linear-gradient(transparent 60%, #f8bbd0 0%);}
.entry-content strong.blue{background:linear-gradient(transparent 60%, #b3e5fc 0%);}
.entry-content .exlink{border:1px solid #ccc;background:#f8f8f8;padding:0.7em;margin:0 0 1em 0;position:relative;}
.entry-content .exlink a::before{content:"\f009 \0020";font-family:blogicon;}
.entry-content .exlink a{text-decoration:underline;}
.entry-content .flexbox{display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
.entry-content .flexbox span:nth-of-type(n+2){margin-left:1%;}
.entry-content .iflexbox{display:inline-flex;-webkit-justify-content:space-between;justify-content:space-between;}
.entry-content .iflexbox span{display:inline-block;max-width:49%;}
/* パンくずリスト */
#top-box{width:736px;margin:0 0 0 400px;line-height:2.5rem;height:2.5rem;overflow:hidden;margin-bottom:-2.5rem;;}
.breadcrumb{font-size:0.8rem;}
/* コメント */
.comment-box{position:relative;margin:0 0 2em 0;}
.comment{margin:0 0 0 0;padding:1.5em 0 0 0;}
.comment li{list-style-type:none;overflow:hidden;border-bottom:1px dotted #ccc;margin:0 0 1em 0;}
.comment li .hatena-id-icon{width:64px;height:64px;float:left;border:1px solid #ccc;padding:2px;margin:0 8px 1em 0;}
.comment li .comment-user-name{font-weight:bold;margin:0 0 0 0;}
.comment li .comment-content p{overflow:hidden;padding:0 0 0 0;margin:0 0 1em 0;font-size:0.9rem;}
.comment li .comment-metadata{position:absolute;top:0;right:0;margin:0 0 0 0;padding:0 0 0 0;font-size:0.8rem;font-style:italic;}
.leave-comment-title{display:inline-block;border:1px solid #ccc;border-radius:4px;padding:0em 1em 0.6em 1em;background:#f0f0f0;font-size:0.8rem;}
.leave-comment-title:hover{border:1px solid #666;background:#666;color:#fff;}
.leave-comment-title::before{content:"\f01d";font-family:blogicon;font-size:1.5rem;margin:0 0.2em 0 0;position:relative;top:0.35rem;}
.entry-footer-section{text-align:right;font-size:80%;margin:2.5em 0;}
.permalink{position:relative;margin:0 0 2em 0;width:100%;overflow:hidden;}
/* ページャー */
.page-index .pager{width:100%;padding:1rem 0;text-align:center;}
.page-index .pager a{display:inline-block;padding:0.5em 1em;background:#252525;color:#fff;font-weight:bold;}
.page-index .pager a:hover{}
.page-entry .pager{width:100%;padding:1rem 0;margin:1rem 0 2rem 0;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
.page-entry .pager span{width:49%;}
.page-entry .pager .pager-next{text-align:right;}
/* サイドバー */
#box2-inner{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;justify-content:space-between;}
.hatena-module{width:49%;overflow:hidden;margin:0 0 3em 0;}
.hatena-module-title{font-size:20px;text-transform:uppercase;font-family:'Oswald';border-top:2px solid #252525;border-bottom:4px double #252525;font-weight:400;margin:0 0 1rem 0;}
.hatena-module-title a{}
.search-form{position:relative;overflow:hidden;line-height:3rem;}
.search-form:after{content:"\f01a";font-family:blogicon;position:absolute;right:0;height:2rem;width:3rem;text-align:center;font-size:1.5rem;line-height:3rem;}
.search-module-input{border:0px;width:calc(100% - 3rem);height:2rem;font-size:0.9rem;line-height:2rem;padding:0 0.5em;}
.search-module-button{background:rgba(255,255,255,0.1);border:0px;color:transparent;position:absolute;right:0;height:2rem;width:3rem;z-index:2;}
.search-module-button:hover{cursor:pointer;}
.search-result-form{height:2.3em;}
.search-result-input{height:2.3em!important;}
.hatena-urllist{margin:0 0 0 0;padding:0 0 0 0;}
.hatena-urllist li{list-style-type:none;word-break:break-all;}
.hatena-urllist li a{}
.hatena-urllist li:first-child{}
.hatena-urllist li:last-child{}
.urllist-item{position:relative;padding:0 2em 0 0;}
.urllist-item:hover::before{right:0.4em;transition:0.3s;}
.urllist-item-inner{font-size:12px;line-height:18px;}
.urllist-image{margin-bottom:0.8rem!important;}
.urllist-date-link{}
.urllist-date-link a{}
.urllist-title{}
.recent-entries-item{overflow:hidden;margin:0 0 0.8rem 0;}
.recent-entries-item:last-of-type{margin:0 0 0 0;border-bottom:0px;}
.hatena-module-category{position:fixed;bottom:0;left:40px;width:256px;z-index:512;}
.hatena-module-category .hatena-module-title{color:#fff;margin:0 0 0 0;padding:0 0 0 0;}
.hatena-module-category .hatena-urllist{margin:0 0 0 0;}
.hatena-module-category .hatena-urllist li{position:relative;padding:0.2rem 0;}
.hatena-module-category .hatena-urllist li a{display:block;padding:0 0 0 1.4rem;color:#fff;}
.hatena-module-category .hatena-urllist li a::before{content:'';display:inline-block;background:#666;width:1rem;height:1rem;border-radius:0.5rem;position:absolute;top:calc(50% - 0.5rem);left:0;}
.hatena-module-category .hatena-urllist li a::after{content:'\f006';font-family:blogicon;display:inline-block;font-size:0.5rem;line-height:1;color:#fff;position:absolute;top:calc(50% - 0.25rem);left:0.35rem;}
.hatena-module-category .hatena-urllist li a:hover::before{background:#e74c3c;}
/* about */
.page-about h2{}
/* アーカイブ */
.archive-heading{font-size:2.2rem;line-height:1.3;padding:0.5em 0;margin:0 0 1rem 0;border-top:7px double #33403d;border-bottom:7px double #33403d;}
.archive-entries{padding:0 0 0 0;}
.archive-entry{position:relative;min-height:calc(120px + 1em);padding:0 0 1em 136px;margin:0 0 1em 0;border-bottom:1px solid #ccc;overflow:hidden;}
.archive-entry:last-of-type{border-bottom:0px;}
.entry-thumb-link{position:absolute;top:0;left:0;}
.page-archive .entry-title{margin:0 0 0 0;padding:0 0 0 0;}
.page-archive .entry-title a{font-size:1.5rem;}
.page-archive .date{font-size:0.8rem;}
.page-archive .categories a{font-size:0.8rem;}
.page-archive .categories:before{content:"\f013";font-family:blogicon;font-size:15px;}
.page-archive .archive-entry-body{font-size:0.9rem;}
/* フッター */
#bottom-editarea{width:736px;margin:0 0 0 400px;}
#footer{width:736px;margin:0 0 0 400px;background:#252525;padding:1em 40px;text-align:center;font-size:80%;color:#fff;}
#footer a{color:#fff;}
#footer-inner{display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
#footer address img{vertical-align:bottom;}
#footer address{display:block;margin:0 0 0 0;padding:0 0 0 0;}
#footer .services{margin:0 0 0 0;padding:0 0 0 0;}

次のテーマ

一応次は、また万人受けしない使う人を選ぶテーマで英字新聞風というか、そんなイメージのものを作ろうかと思ってたんですけど、どうしようかな。あと、別のサイトでこんなの作業途中なんですけど

パクリだと思われてしまうようなサイトがあったら教えてください…。まぁこちらはテーマとして公開するかどうかはアレですが。

公開テーマ作成は難しいな…。