Twentysixteen カスタマイズ 4 〜 最小限度の改変を見極め実施する

wordpress

Twenty おixteen カスタマイズ その4〜最小限度の改変を見極め実施するです。twentysixteenテーマをざっくり眺めて、まずどうしても気になる箇所をあげつらい、最小限度の改変をまず行うんです。

カスタム目次

子テーマの style.css には以前のように親テーマの目次をコピペしてその項目をちまちま弄るということはしません。

このようなものを最小限と仮に決めて取りかかりました。実際にcssの上部にこのメニューを書き入れてその直下に変更点を書き記しています。

この後は「ベーシックデザイン最低限」へと続き、エレメント中心ではなく、親からの変更点とその深さを基準に進めました。

では一個ずつ見ていきます。

1.全体

twentysixteenを眺めて、最初に気になる全体的ないくつかです。文字の種類、黒縁などが気になります。

文字

本分明朝体
本分が明朝体になってしまっています

本文が明朝体ですね。まずはこれが目につきます。ここを最初に変えますね。あと、日本では斜体文字が必要ないし見た目も悪いので斜体をすべて却下します。

親styleの「3.0 – Typography」の最初に項目あります。コピーして持ってきてからfont-familyを変えます。

font-familyに何を持ってくるか、いろんな人が独自の思想に基づいて決めていることでしょう。最近は仕方なしにHelveticaを持ってきています。それからヒラギノ角ゴです。大体これでOKなんですが、Windows用に游ゴシックとかメイリオなんかも並べておきます。Windowsは何をどうやっても字が汚いのでどうにもなりません。

 

斜体の禁止は、親styleをitalicで検索して抜き出しました。抜き出したものを全部コンマで繋げてもいいんですが、親styleから持ってきた形を維持させています。なんとなく。

ここでは斜体以外のすべての属性を無視して、italicをnormalに変更するだけに止めます。

例えばblockquoteは斜体の禁止以外にこちゃこちゃ弄りたいわけですが、今回の方針に則り、細かなデザインとは分けて考えます。

黒枠

黒枠
全体を覆う不気味な黒枠

ぱっと見た感じ、最も気になるのは黒い枠ですね。色は変えられますが、この枠はただ者ではなく、ずっと付きまとう枠です。これは気になります。これはいったい何なのでしょう。取りたいです。

この黒枠は曲者で、妙なスタイルが定義されています。まず、上下の黒帯と左右の黒帯が別々に指定されています。

左右の黒帯はdiv #page .site {margin:21px}で定義されています。

上下の黒帯はbodyの:beforeと:afterにて指定されています。上部はログインユーザーのadmin-barを考慮したtopが定義されていますね。

この黒枠は、黒い枠が描かれているのではなく背景色がマージンの隙間から見えているという設定なわけですね。

というわけで黒帯を消すのはこんな感じで。これも親styleから該当箇所を持ってきてmarginやheightを0にしただけです。

上手く黒枠が消えました。

ページ幅

サイトの幅
横に広げまくってもシームレスに見えるが実際は幅が定義されている

背景とページを分けるのはもう古い流行なんでしょうか。twentysixteenではページと背景がシームレスに白です。でも実際には幅があります。1320pxに設定されていますね。

背景が .site、ページ幅が .site-inner です。個人的にマックス横幅1320pxもいらないので、これまでの素材も生かせる1260pxに変更しました。大したことのない変更点ですが1260pxで作った画像ファイルをたくさん持っていますので。

親スタイルによると、.siteの背景色が白、.site-innerには背景色なしになっていますので、ここもちょっとだけ変えます。

黒枠消しとページ設定でこんな感じに。あまり必要性を感じませんがやっておきました。

スクリーンショット 2016-06-24 19.32.57

この程度が全体についての最小限の取り決めです。次はもう少し絞り込んでいきます。ヘッダーです。

2. ヘッダー

ヘッダーは最小限といいつつ触るところが多くあります。

ヘッダーイメージがぽつんと中空におります。こんなの何のためにあるのか、これ、位置もパディングもどうにも気に入りません。メニューやサイトタイトルとの関係も変ですし。

cssに留まらず、header.phpでオブジェクトの場所替えが必要と判ります。ただ、やりすぎると最小限度ではなくなります。何が最小限度か、そのあたりを決めなければなりません。

ヘッダー計画はこのような感じです。cssじゃない変更もcssにメモ書きしてるという、でもなかなか自分でわかりやすいんですよ。では一個ずつ見ていきます。

大きなpaddingやmarginを削る

ヘッダーの余白について、わかりやすいように色や枠を付けてみましょう。

header 全体図
header全体図

ちょっとロゴマークなんぞが入っていますが、すかすかの余白で満ちていることがわかります。すかすかは今時の流行ですね。

大枠のheader#mastheadがあって、ぶっといパディングが設けられています。

その下にはdiv.site-header-mainとheader-imageが並びます。
div.site-header-mainの中はdiv.site-brandingとdiv.site-header-menuが含まれます。
div.site-brandingの中身はサイトタイトル(ロゴ含む)とディスクリプションです。

どいつもこいつもマージンとパディングで満ちています。

.site-brandingのマージン
.site-brandingのマージン
menu
メニューのマージン

ちょっとロゴマークのことは後回しにしたいので表示を消してみるとこんな感じです。これなら許容範囲だなと思われる方も多くおられることでしょう。問題なければ何も変更する必要はありません。でも私はやります。

ロゴを消した状態のヘッダー
ロゴを消すとこのように。ゆとりがあるデザインになっています。
header-image
ヘッダ画像のマージンもこのようになっています

ではまずマージンやパディングをことごとく削りましょう。ちょっとわかりにくいのですがボックスだけでなく site-titleの中にいるh1.site-title などにもばっちりマージンが仕込んでありますから丹念に削り取っていきます。

ちょっと次の項目と被りますが、ヘッダーメニュー(グローバルメニュー)をウインドウ上部に貼り付けるギミックを使いたいので、その考えを元にフラットに作ります。つまり、site-titleとメニューを直列に並べたいもので、display:blockをinlineに変えたりしています。

ヘッダー、ヘッダーイメージ、サイトタイトル、メニューの余白を調整、その結果が今ご覧になっているこのブログのヘッダーです。ぺったんこになりました。

次は、このぺったんこの部分をウインドウ上部に張り付かせます。

メインメニューを上部に張り付かせる

twentryfourteenで気に入っていたギミックです。スクロールするとメニューがウインドウ上部に触れたとたんにくっつきます。こんなの不要って人のほうが多いでしょうね。でもやってみました。

ウインドウ上部にくっつけることを専門家たちは Fix と呼びます。メディアクエリとも関係してきますが、ある程度のウインドウ幅がある場合にメニューをFixさせることにします。小さな画面(モバイル端末やipad)では表示面積が狭いのでfixが邪魔だからです。

具体的には親スタイルのメディアクエリに則ってワイド710px以上で動作させることにします。

スクリプトの準備

ただ単に上部にくっつけるだけなら、くっつける部分に display:fixedと書けばいいのですが、途中までは普通で、メニューがウインドウ上部に触れたらくっつくようにしたいのでスクリプトが必要になります。

スクリプトはheaderに書きます。最初にjQueryを読み込んでからスクリプトを書いてます。

ここでちょと余談。header.phpにはいろいろ追加で書き足すことが多くあるので、追加分をパーツとして別ファイルにしてそれを読み込むという方法を取っています。header_plus.phpというのを用意しまして、これはheader.php内の特に<head>内に付け足す分です。これを作って書いてそして読み込んでます。効率の良さげな方法ですよ。footer内にスクリプトを書くことも多いと思いますが、footerにも同様、別ファイルを用意して読み込んでます。読み込むのはincludeを使ってもいいのですが私はこっちを多用しています。何となくこっちの方が楽です。

ということで、天井に張り付くスクリプトはどなたか天才が書かれていたのを検索で見つけて丸ごと頂戴したこんなのです。元記事がどれだかもう忘れました。天才はおれだよという方はご連絡ください。

jQueryについては何も知らず、重複読み込みが起きてあたふたしたりしたこともあります。このスクリプトも最初にjQueryを読み込んでいますが、環境によってここで読み込まないほうがいい場合もあるかもしれません。

ここに貼り付けるボックスのクラスを書いています。私の場合.site-header-mainです。

のところ、動きががくんとなるのを防止すべく、数値を入れて調整できるようになっています。張り付く高さの分、ここに数値を入れると良いような。

css

スクリプトが書けたらcssも書きます。さっき言ったとおり、ワイド710px以上で動作させたいのでメディアクエリの該当箇所に書きます。

ページ幅に合わせてmax-widthを指定しています。合わせないと独立して君臨してしまいます。
何だかよく見るとbox-shadowをダブルで掛けていますが何してるんでしょう。お気になさいませんよう。

メインメニューのサブメニューの吹き出しを消す

サブメニューの吹き出し型が気に入らないので消す方向です。これのことです。

サブメニューの吹き出し型
サブメニューの吹き出し型

よくcssの小技とかそういう類いの記事でも紹介されていますね。こうした形がcssだけで作れるのも工夫と知恵の産物かと思います。でもいりません。消します。

実は消す前にちょっと前提なのですが、目的としてまず小さな画面でメニューを隠しません、でもサブメニューは出ないようにします(単に好みの設定です)サブメニューが出るのはワイド710px以上からにします。吹き出しを消す効果が現れるのはサブメニューが表示される710px以降です。でもあらかじめ本筋(小さな画面向けの場所)に書いておいても特に問題ありません。

では消しましょう。簡単です。

 

ヘッダー内オブジェクトの位置調整など

ヘッダー内の部品について、いろいろと位置関係を調整します。テンプレートのオブジェクトを直接移動させます。

ヘッダー内には三つのボックスがあって、ロゴ、タイトル、キャッチコピーが入った.site-branding、ヘッダ画像が入った .header-image、メインメニューが入った.site-header-menuです。これらの中身を入れ替えたりします。

上部に張り付かせる予定なのは.site-header-menuです。ですので、張り付かせたいものを移動させますね。サイトタイトルとキャッチコピーを表示させたければこれを放り込みます。

.header-imageが一番下にあるので、これを一番上に持ってきます。これで、ヘッダー画像が一番上にきます。並べ替えは好き好きです。

ロゴなんですが、でかい上に変な位置にありますので、これもためしに動かしてみるとどうなるか示します。

このブログのメニュー左端に今ロゴを置いてみています。site-header-menu のpotisionをrelative にして、ロゴのポジションをabsoluteにしています。titleの左をパディングで空けますと、このようにアイコンのようなものになりましたね。

ロゴの置く位置
この場所に置くとアイコン的に

ロゴをdiv.header-image内に置くと、こんなふうにヘッダー画像の縦サイズに従うロゴにもなります。この場合、positionをbottom:0で位置決めしています。親ボックス(この場合.header-image)には必ずposition:relativeを指定しておきます。

ロゴの置き場所画像
ロゴをヘッダー画像の場所に置くとこのように

まあ、好き好きで。ロゴなんかいらん、というのが大概の話になるかもしれません。

小画面の「メニュー」ボタン廃止

小さな画面でメニューが「メニュー」ボタンとなるWordpress独特の仕様が好きになれません。

menuボタン
小さい画面のmenuボタン

どうせ大層なメニューがあるわけでもないからメニューを隠さずこうしたい。

隠さないmenu
隠さないmenu

ただ、大層なメニューがあるかないかは運営しているサイトによって違うので、これは最小限度とは言えません。全サイト共通が条件などと言いながら取りかかってしまいました。

メニューを表示しても、サブメニューまでは表示させないつもりです。サブメニューがあるようなややこしいメニューの場合だったら「メニュー」ボタンのほうがましかもしれないですから。

さて小さな画面でもメニューを隠さないためにはどうすればいいのか。メディアクエリの大きなウインドウ用のcssをまとめて前のほう、つまり小さな画面用の場所に記述し直すということですね。

このへんからcssの行数が増えてまいります。

親フォルダのメディアクエリ710pxあたりからメニューのcssを探し出し、まとめてコピーして子テーマのメニューcssとしてペーストします。

さらに、サブメニューを出さない設定ですからペーストしたcssからサブメニューの項目をdisplay:noneします。

ものには順序というものがあって、cssにも順序というものがあります。順序は非常に大事でして、後ろに書かれたものが優先されます。無邪気にペーストした固まりの後ろに、改めて色などのカスタム項目、またあるいは親styleの他の場所から見つけ出した重要項目を引き続きペーストします。ややこしいのはすべてメディアクエリのせいです。親styleでも分散して書かれているのですよ。

この重ね技は行数が増えてしまいますがその見返りとして便利なのは、「不要なら丸ごと削れば元通り」という固まりの概念に基づいている点です。

このあたり、あまりのややこしさに集中してコードを探し出して完了したあとはもうすっかり何が何だかわからなくなってしまいました。でも丸ごと削れば親元のスタイル通りの挙動になるということで、コピペ要因として君臨します。あまり意味ないですけど定義したものを全部載せるとこうなっています。

これはメディアクエリ以前のデフォルト、小さい画面用の部分です。

大きいウインドウ用にも同様の固まりが必要です。大きいウインドウ用は本来親styleと同等のものですね。しかし余白を取ったりすでに改変しているので、それも込みで固まりとして記述しなければなりません。ちょっと行ったり来たりの感がありますが、固まりとして消すも残すも容易いという点を死守するためこうなりました。

すでに若干混乱しておりまして、これらの詳細については忘れております。ここまで来ると「最小限度」とは言えず、このあたりの話は次の「デザイン的な最低限の」でやるべきでした。ほらね、すぐこういうことになってしまうんですよ。反省したはずなのにまたやってしまいました。

でも色やフォントカラーなどを調整するだけで好みのメインナビゲーションが実現しているのでこれはこれでよしとします。親スタイルに合わせた姿に戻すのはごっそり削除して色を整えればいいだけですから。

こういうとき、この件と別で「吹き出しを消す」とか「余白を削る」を別項目としてあらかじめやっていたことが功を奏します。

twentysixteenのメインメニューの若干の問題点

ちょっと問題点に言及しておきます。ほとんどの人にとっては問題になりません。それはメインメニューが display:fixを使用している点です。

今では多くのブラウザで問題なく使用できますが、古いブラウザでは表示が崩れます。古いブラウザの問題といえば真っ先にIEが浮かぶかと思いますが、寧ろIEは優良です。ブラウザのバージョンを上げればいいだけですから。

display:fixに難があるのはMacOSX10.6.8システムのSafariです。バージョンが5くらいですね。多くの新しい仕組みに対応できていません。それはいいのですが、ただサイトメニューみたいな大事なところで表示が崩れるのはちょっとどうかなと思わなくもありません。訳あって10.6.8システムをたまに使うのでこれが気になりました。切り捨てられるのは許容していますが自分で切り捨てるのに若干の抵抗があります。ほとんどの人にはどうでもいい話でした。

 

さて、1.全体、2.ヘッダーの最小限カスタムを行ってきました。特にヘッダーに関しては一般的に最小限とはとても言えず、皆様におかれましてはほとんど参考にしないほうがいいのではないかと思います。書いてからこんなこというのも何ですけど(謝)

次のページはメディアクエリについてです。ページ2へお進みください。

 

コメントを残す