「カスタマイズその4 最小限度の改変」の次の段階として、もう少し好みに踏み込んだデザインや装飾に関するカスタマイズを行います。「カスタマイズ 5 最低限のデザイン改変」編です。
TwentySixteen カスタマイズ 5 〜最低限度のデザイン改変を実施する
主にコンテント絡みのベーシックデザインを見ていきます。
このベーシックな変更部分は後々もほとんど変更することがない（かもしれない）という、そういう部分になります。複数サイトを管理しているので、その複数サイトで共通して使える（かもしれない）根っこの部分でもあります。twentysixteenをパッと眺めて気になるところベーシックデザイン編っていう意味合いでもあります。
/* ---------------------------- Basic Design ---------------------------- 1. 初期化、各種エレメント 2. サイト全体の設定、header など 3. アーカイブ - archive, search, aside、status - post-thumbnail - summary,excerpt,content 4. シングル,ページ - single post, content width notを使ったコンテンツワイド、 5. ページナビ、ポストナビ（次へ前へ）(flex->float) 6. ウィジェット、サイドバー、meta, footer右揃え 7. その他、コメント欄 */
その5では、こんな感じでカスタムを始めました。
5.1 初期化、各種エレメント
aとかpとか、blockquartやul liなどリスト、そういうのも含めた基本的なエレメントです。親styleでは最初のほうにまとめて指定してありますね。それの部分補正みたいなものです。でも必須の補正というより、デザイン改変に近いので重要度はさほどではなく、こうして「ベーシックデザイン編」てな場所に書いてます。
a, a:hover
本文中の a にはよく下線が付きます。アクセシビリティ的にもあったほうがいいそうです。でも本文を邪魔するので私はこれを外すのです。
a { text-decoration: none; }
こうしましたが、あれれ？リンクの下線が消えません。どうなってんでしょう。
親styleを見るとTwentysixteenではリンクの下線が テキストデコレーションではなく、1pxのshadowとなっていました。何と下線に見えて影だったのです。
なぜわざわざこんなことを、と思いましたが多分block要素でも共通の下線扱いができるからでしょう。それにテキストの下線ってテキストにくっつきすぎて見苦しいのでね、shadowならそのあたり融通効きます。なるほど知恵ですね。で、感心はしますけどリンクの下線代わりのbox-shadowをざっくり消します。
リンクの下線としてbox-shadowが付いている要素を検索して見つけます。割とありました。まとめてshadowを消します。
/* aの下線shadowを消す */
.entry-content a,.entry-summary a,.taxonomy-description a,.logged-in-as a,.comment-content a,.pingback .comment-body > a,.textwidget a,.entry-footer a:hover,.site-info a:hover{box-shadow:none}.entry-content a:hover,.entry-content a:focus,.entry-summary a:hover,.entry-summary a:focus,.taxonomy-description a:hover,.taxonomy-description a:focus,.logged-in-as a:hover,.logged-in-as a:focus,.comment-content a:hover,.comment-content a:focus,.pingback .comment-body > a:hover,.pingback .comment-body > a:focus,.textwidget a:hover,.textwidget a:focus{box-shadow:none}
気持ちよく消えました。
親styleでは a の色が #007acc になっていて、これ青い色です。この青い色はいいと思いますので変更しません。その代わり hover が気に入りません。
a:hover,
a:focus,
a:active {
color: #686868;
}
hover focus activeまとめて中途半端なグレーが指定されています。これあまり好きじゃないのでhoverを変えます。私は赤くしましたが赤いhoverなんてないわー。と思われる人も多いかと思いますので好き好きですね。activeは濃い青にしました。好き好きなので許してください。
a:hover {
color: #ff4c34;
}
a:active {
color: #05578e;
}
親styleでは a に大きく二種類あって、ひとつは青い色のリンク、もうひとつは黒い色のリンクです。黒い色のリンクは一見リンクと判りづらいのですがデザイン的な意味でそうなってんでしょうか。entry-titleなんかで使われています。黒リンクはhoverで青くなります。これはこれでいいと思います。今書いた赤いhoverはこういうのには影響しません。クラスごとに親styleで書かれているから。
figure / ul / ol
コンテントの中にメディアを挿入したとき、figure の扱いになる twentysixteenです。それはいいんですけど、普通に左に寄ります。ほとんどの場合センターに収まってほしいので、そうしておきます。
それから、これどうかとも思いますが、ulやolのリストスタイルをデフォルトとして無しにします。わりと消すことのほうが多いんですよ。
figure {
margin:0 auto;
}
ul {
list-style: none;
}
ol {padding-left: 2em;}
blockquote
blockquoteも人の好き好きって感じですね。いろんなblockquoteを見かけます。大きな「“」があったりとか。twintysixteenのは字がでっかく行が詰まりすぎていて、まるっきり酷いデザインです。ですので自分好みにちょっと変えます。
blockquoteは親フォルダで :notが入ったパターンなんかをまとめて定義していますのでそれに準じます。
twentysixteenを作ったひとは :not が好きみたいで、:notをたくさん見かけますね。これのせいでカスタマイズが面倒なことになることもありました。対抗手段として私も:notを多用しました。しかし後々これが仇になって、随分苦労したものです。デフォルトテーマが:notを多用するのはやめてください。
blockquote,
.entry-content blockquote:not(.alignleft):not(.alignright),
.entry-summary blockquote, .comment-content blockquote {
border: 0 solid #8a999b;
margin-left: 10%;
margin-right: 8%;
font-size: 16px;
line-height: 1.7;
padding: 16px 16px 16px 20px;
color: #4e4e4e;
background: rgba(0, 0, 0, 0.05);
}
blockquote cite,
blockquote small {
text-align: right;
font-size: 0.84em;
}
ついでにblockquoteとセットで使うciteをちょこっと変更。
border: 0 solid #8a999b; が不思議だなと思った方もいるかもしれません。親styleではこの後 border-left-width: 4px; と指定していて辻褄が合ってきますが、不思議な指定方法ですね。色を変えやすいように二行に分けたのかもしれませんが理由は天才にしかわからないんでしょう。凡人の目からするとややこしいだけでメリットを感じないんですが。
blockquoteのデザインは各自お好きなように楽しんでカスタマイズするのがいいと思います。
サンプルはこんな感じで。
ただ街を練り歩くだけの映画ですが、その中に多くの要素が詰まっていて、それぞれの要素が観る人の嗜好に応じるような作りです。
ちょっとマージン取り過ぎかな。またちょくちょく触ることになるでしょう。
字下げのためのインデント
字下げについてはもうたいていの人が不要に思っていることでしょう。私はこれについてはいまだに納得できていないのでして、解決方法もありません。日本語独自の特徴がHTMLの構造に当てはまらないのが原因です。つまり何のことかというと行と段落の問題ですね。
日本語では文字と段落の間に行という概念があります。HTMLでは文字の次は段落で、行に当たる概念がありません。で、行では改行後に通常字下げします。字下げは写植文化、製本の歴史、縦書き文章の読みやすさ、教育、様々な理由の果ての習慣でしょうか。決まりと言うほどでもないのですが決まりと思うほど強く意識している人や世代がおります。
HTMLに段落未満の行という概念がない以上、解決策もないし落としどころもないのですが、仕方なしに段落でインデントを用いています。
p.indent {
text-indent: 1em;
}
これ何かというと、別件JAVAスクリプトで「ある条件の時にpにindentというクラスを付与する」ってのを用意して、そのためのものです。
p なら問答無用で全部字下げするわけにはいかず、一定条件以外の場合に字下げするという天才が作ったスクリプトです。”「 ” で始まっていたら字下げしませんからね。この指定条件を正規表現で作るのを私は断念していましたが賢い人はやってのけました。その賢い人は作家で「破滅派」を率いる高橋文樹氏です。破滅派のひとがwordpressの天才になっているとは全然知りませんでした。WordPressのビジュアルエディタで自動段落一字下げ
ただし私はすでに行頭に全角スペースを入れていることもあるので、クラスを付与しない条件の中に全角スペースを含めました。こうしておかないと段落の冒頭に全角スペースが二個入ってしまったんで。
<!-- 行頭一字下げ -->
<script type="text/javascript">
jQuery(document).ready(function($){
// entry-contentのpを全部取得
$('.entry-content p').each(function(i, p){
if( ! □ /^[ 【】《〔〝『「（”"'’\(\)]/.test($(p).text()) ){
// 正規表現で一字下げしない文字から始まっていなかったら
// インデント用のクラスを付与
$(p).addClass('indent');
}
});
});
</script>
それにしても<br>の後に全角スペースを付与する方法ないですかね。あれば完璧なんですけど・・。
ソーシャルナビゲーション
twentysixteenではソーシャルナビゲーションってのがあります。メニューでSNSのURLを入れたメニューを作ると、自動的にソーシャルマークのリンクが表示される仕組みです。例えばURLにfecebook.comっていうのが入っていたらfbのマークが表示されます。
代表的なSNSのマークがcssで定義されています。これをちょっとだけ変えます。マークに各SNSの固有の色を付けただけです。fbなら#3C5A96、Twitterなら#2AA3EF、Instagramは固有の色が特にないので茶色を付けました。hoverでは背景を薄い青に。軽い改変ですね。
余談ですがinstagramのシンボルカラーは薄黄土色とか茶色とかと思っていました。いわゆるラングドシャ系の美味しい色ですね。アイコンもずっとその色でした。ところがある時から派手なオカマ色に変わり、その件で公式が「これまでお馴染みの虹色」とか何とか発言していてびっくり。誰一人Instagramのシンボルカラーを虹色なんて思っていなかったでしょ？理系の天才ってのは何を考えてんだかさっぱり判りません。
.social-navigation ul {
float: right;
}
.social-navigation a {
background: #fff;
}
.social-navigation a:hover {
background: #d3e2f4;
}
.social-navigation a[href*="facebook.com"]:before {
content: "\f203";
color:#3C5A96;
}
.social-navigation a[href*="plus.google.com"]:before {
content: "\f206";
}
.social-navigation a[href*="instagram.com"]:before {
content: "\f215";
color:#765d1f
}
.social-navigation a[href*="twitter.com"]:before {
content: "\f202";
color: #2AA3EF;
}
.social-navigation a[href*="youtube.com"]:before {
content: "\f213";
}
.social-navigation a[href^="mailto:"]:before {
content: "\f410";
}
.social-navigation a[href$="/feed/"]:before {
content: "\f413";
color:#fc9905;
}
小さなデザイン変更でして、どうでもいいことの範疇ですがベーシックなデザインに含めました。
次の記事 5.2 サイト全体、ヘッダー に続きます。
