Twenty Fifteen シンプルな記事型ブログに最適なテーマ
シンプルですっきりとしたテーマ/テンプレートなのだが、あとTwentyfifteenに限らず、Twentythirteenもだが、基本的に英語環境で開発されているので、日本語にした時にはフィーリングが合わずしっくりこない。
具体的には左のメニューが大きすぎる、コンテンツ部分が少し狭い。灰色のborderが邪魔。などが代表的で一見すると簡単に変更できそうだ。
Twentyfifteenは意外とカスタマイズしにくかった
理由は以下の通り
・レスポンシブデザインで作られていて、CSSのメディアアンカーを探しにくい
・width などの配置を決めるpadding: 0.7917em 1.5833emなどの桁数が多くピンとこない
・前述の灰色のborderは実はboxshadowでやっているので分かりにくい
twentyfifteenで、CSSで簡単にコンテンツ部分を広げる方法
CSSで以下のような記述の部分を探そう。
.site-content {
display: block;
float: left;
margin-left: 20.4118%;
width: 79.5882%;
}
.sidebar {
float: left;
margin-right: -100%;
max-width: 313px;
position: relative;
width: 25.4118%;
}
ここで、 width: や margin-left: の値を好きに変更して、デザインを確かめてみよう。
なお、先述の通り、PC用のデザインを変えたいならメディアアンカーに注意が必要！
@media screen and (min-width: 38.75em) {
/*この間の部分を変更すること*/
}
↑こういう感じのやつ。
twentyfifteenで、灰色のborderを非表示に
このborderをカスタマイズするのがやっかいだった。
理由は、borderと言いつつ、ここはbox-shadowで描画されているから見つけられなかったのだ。border-left: 1px;などといくら検索しても何も見つからない。
.post-navigation {
border-top: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 7.6923% 7.6923% 0;
}
こういった感じで、色々なところにbox-shadowで灰色の線が引かれている。
これを以下のように、
box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
すればとりあえず線は消える。
これも、メディアアンカーに注意だ！
