infinite       loop

Satellite Of Digitalis Syndicate

ブログ・カスタマイズ – 備忘録

はじめに

まず、Wordpressのカスタマイズといったら、何と言っても、「Web Design Recipes」さん。
このブログなくして、Wordpressテンプレートなど弄れるわきゃないだろーくらい、親切・丁寧・的確。

WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方

もう十数年前に、はじめてカスタマイズしたときから散々、参考書としてお世話になりました。伝説のアルファブロガー高橋のりさん。
もはや新記事が更新されないとしても、ここがあるから生きてこれたという人はたくさんいるはず。褒めている人は山ほどいるはずなので、サイト名とフルネームでググるべし。

で。今回のリデザインの動機は。
んまー飽きたから。といえばそれまでだが、そもそも2カラムのブログとか、まぁ苦手なんです。3カラムとか地獄を感じます。
が、それでも体裁上の2カラム・サイドバーありきのところは残しました。

何せテーマが、ダブル・フェイスの「二色刷り」だったのと、このブログにはそもそも、フラットな画面で「読ませる」ほどのテキストはない。
同業者の皆さん、ホワイトベースでまともな文章書いてますが、なぜ・・・真似できない(涙)

というわけで見てくれ、体裁だけに終始してFloatを排したFlexでCSSを組み、必要数だけPHPテンプレートの改変をした。という内容です。
一応ダブル・フェイスの「二色刷り」は、PCワイドビューのみ。
モバイル + 1000px-width未満は1ブロックになるリキッドタイプのレシポンシブ。
ハンバーガーメニュー類なし。
モバイルではサイドバーが消えるので、トップページ以外メニュー類なしのほぼシングル。





ベースにしたWordpressテーマ

今回使用した元テーマは子テーマのある「simplicity
同じくチャイルド・テーマのある「STINGER8」と、ともに、よく使わせていただいています。深謝。

とはいえWeb制作でコーポレーションサイトをつくるときには、新着情報やコラム以外、元テーマの面影なく「固定ページ」の頻発なので、実際に記事書きするような通常ブログ形式のデザインをするのは自分としてはめずらしく、久々な感じで勉強になりました(二日間だけど)

この二者の違い。
固定ページにオリジナルデザインを付加する形で、ゴリゴリのPHPテンプレートで済ませてしまう作業は、ボリュームはありそうでいて、むしろ自由形式の静的HTMLを書くのと、さほど作業の質に違いはないのですね。
表示確認がローカルで完結しないというだけで、書く量が倍になるわけでもなく。
クライアントがオンラインで更新できるように「投稿型」にはするけれど、デザインに沿ったオリジナルのCSSに依存するので、単純明快といえば明快。

それに比べて、誰もが様々な用途で簡単にはじめられ、「いずれ凝ったことがやりたくなったとしても」・・・即時適応できるように、オールインでカスタマイズ性を担保しているWPテーマ配布者は凄いなと思います。
ただ万民の要望を叶えうる設計なので、ソースはシンプルでセマンティックというわけには、そうそういかない。

まぁ前者はつくっていくプラス・(加)作業なら、後者は削っていくマイナス・(減)作業のような感覚の違いでした。

その点で、今回使用した「simplicity」は、PHPテンプレートを細分化した関数やモジュール分割に特化しているようで、該当パーツを見つければ一箇所なおすだけで多方面に反映と、とことんよく作り込まれているなと感じました。

ふだんプレビューモードくらいにしか残影を残さない利用法が申し訳ないくらいに。





リデザイン記録

まずは骨組み、骨格のところで、左右に2カラム・・・たぶん元デザインではFloatが使われているところをFlexに

@media all and (min-width: 1000px) {
    .wrapper {
            display: flex;
    }
}
@media all and (max-width: 999px) {
    .wrapper {
            display: block;
    }
}

当初ハーフ&ハーフのつもりでいた「二色分け」は、コンテンツの中身がサイドメニューと本文で、同等幅ではバランスが悪い上に無駄なので、4:6比に。

.double__left {
    flex-basis: 40%;
}
.double__right {
    flex-basis: 60%;
}

ただしMacで普通にブラウズしていると、1300〜1400pxくらいの横幅で見ていることが多く、1000pxという値は「境界」ではあるが、リアルではないよね・・・で
さらに、4:6比をどんどん横広に広げていくと、サイドバー(左・青背景部分)は間延びするし、邪魔!

というわけで、1400widthを越えると3:7比に変化するようメディアクエリーを足したという(笑)

@media (min-width: 1400px) { }

こんなん書いたの初めてや(笑)

レシポンシブ・デザインの実装が通常業務になってから、リキッドデザインなどとっくに忘れていたので、なんか旧きを思い出したような新鮮さで、後から追加した奇妙なメディアクエリー。
仕事じゃなかなか出来ない身勝手・風変わりっぷり。

左右を分ける背景色の指定は

body {  background: linear-gradient(to right, $color1 0%, $color1 40%, $color2 40%, $color2 100%);

$color1と$color2はSassで色コード値を与えているブルー系と淡グレー系。
グラデーション指定だけど、色の変わり目はきっちり二分の値・境界線が1つしかないもの。





わりと本題だったFont

こんなにゴッチャらゴッチャらと、いろんな種類のフォントを混在させているデザインて、普通できないですよね。

まずは「ゲンノミンチョウ」 使ってみたいぢゃーん。というだけの私的趣味で、
自己犠牲を払うしかない(翻訳:自分の手持ちサイトでやるしかなかんべ)

あとは縦書きのお品書きみたいのも試したいぢゃーん。・・・以下同文的なアレで。

明朝体するけど、数字が読みにくいのも、英文字がくっきりしないのも、なんかね。なんかね。で、混在。てんこ盛りかよっ

という心情から、font-family:は以下4-5種類くらいが見えているはず。源ノ明朝以外はデバイスに元から入っているようなメジャーですね。

Noto Sans Japanese
Hiragino Kaku Gothic Pro
Meiryo
Verdana
Georgia

因みに、@font-faceでしかまだ使えない源ノ明朝については、別記事:源ノ明朝にメモ残したとおり、100から900まで、7種類くらいあったウエイトの3つしか使わないようにあとから減らした。が、重い。
重いけど、酔狂・・・。

ブログタイトルの日本語、と右手側の英語(別に写真とかぶって見えなくてもいい)については、縦書き指定で

-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

ベンダープレフィックス3行とはいえ、CSSで簡単に縦書き指定できる日が来るなんて。いい時代が来た、やっと来たーって感じですよ。
縦書き、嬉しい。





WordPressテーマ PHP

肝心なテーマPHPの改変については、詳しく書くことはしないのだけど、「simplicity」テーマでは、
例えばトップページに使用するhome.phpの中が、たった3行

<?php get_header(); ?>
<?php get_template_part('list') ?>
<?php get_footer(); ?>

2行目 get_template_part で呼び出されるのも、独立したPHPファイル list.php で
list.php はエントリーをループ処理で呼び出す共通要素が一枚のテンプレートとして書かれているため、いくつもの基本テンプレートにわたって使いまわせる。

ファイル数は増えるが、複雑な大量範囲のコピーや重複した修正が要らないので、めちゃくちゃありがたかった。

例えばヘッダーの画像を4種類くらい使い分けているのも、home.phpやsingle.phpといった、ベースとなる基本テンプレートの中で、部分的に呼び出す「パート」だけを変更して、増殖できたり。

get_template_part('OthetType')

みたいな感じで、HTMLソースを書くだけの OthetType.php を何パターンでも作り分けできる。





意外な失敗談

前項ラストの「分岐」つまり別パターンの見せ方について。
今回は顕著なところで、ヘッダーの背景写真しか変更していない。
トップページではA写真、記事シングルページではB写真、カテゴリを選ばれたときは、Tagを選ばれたときは、と幾様にも使い分けは可能。
(備考:今のところ、このブログでは、6種類使い分けしている)

その際たるとこで、例えばカテゴリーOneの記事ではキャラクター「ルフィー」が表示され、カテゴリーTwoではキャラクター「サンジ」が表示される、なんてスラッグを使い分けてのテンプレート作りは普段の制作で散々します。

で、今回は表示するコンテンツが「文章」しかない一辺倒な日記ブログなので、もし分岐させるとしたら、長い記事を書いたときに、単体で見せたいことがあるかも知れない。
それを、ある任意のカテゴリーを選んだらサイドバーのないシングルブロックで表示させるページを作ろうと思いました。
カテゴリー毎に分岐IFを加筆するなら、single.php に書くだけです。

カテゴリーがAなら テンプレートsingle-Aで表示させ、カテゴリーがBならsingle-Bで表示させる。
これを、すべてのカテゴリまで網羅しなくても、AやB以外なら、ノーマル汎用の「single-normal.php」を使ってね・・・とelseで処理を終わらせる。

<?php
if (in_category('A')) {
    get_template_part('single-A');
} else if (in_category('B')) {
    get_template_part('single-B');
} else {
    get_template_part('single-normal');
}
?>

作るのはたった3枚のPHPと、基本のsingle.phpの書き換えだけ。
大抵ノーマル汎用「single-normal」は、元の「single.php」が使われるので、コピーやファイル名変更の他に、新規で2枚をつくり足す程度。

・・・なんですけどね・・・

取扱説明書を読まずにはじめるタイプの僕ぁ、今回おびっくりした。

simplicity」テーマだけに限ったことなのか、今時の配布テーマは大抵そうなのか、調べてないんですけど!

投稿時の指定で、ページ設定→ページタイプ のセレクトで「デフォルト」や「1カラム」「本文のみ」が選べたんですよ。
つまり僕がつくりたかった見てくれ=長い記事を書いたときに、単体で見せたい・・・は、テーマとしてすでに「本文のみ」表示が選べるものとして用意されていた。

single.phpに、IF・分岐・書こうっと。と作業をはじめようとした、まさにその時になって見つけたので、(え、ええぇぇっ)と狼狽したこと、この上なし。

この話、他のテーマを使っている人には通じにくい話なので、ちょっと深堀りしとく。

僕が先に書いた、「single.php」に分岐を書くやり方は、テンプレートのカスタマイズです。
一方、「simplicity」テーマで用意してくれている「本文のみ」表示タイプは、あくまでCSSでサイドバーなどのカラムを隠す:非表示(display: none;)です。

出力されるHTMLソースはまったく違うが、人間の目に見える「外観」は同じ。
ただし、テンプレートをカスタマイズする前者の方法では、たとえば自分がつけようと思っていた「Document」というカテゴリかタグを、Slagとして必ずつけないと、通常のノーマル表示しかできない。

足枷が外部の目に見えてしまうわけです。(そんなこと来訪者はまったく気にしないだろう、にしろ、見えるものは見える)

しかし後者「simplicity」テーマのやり方だと、どんなカテゴリであれ、2カラム表示や、1カラム表示を(突然の思いつきでも)使い分けできる。一般の人がPHPテンプレートを作り足すことなく、要望に叶うことが出来てしまう。
すんげぇな・・・至れり尽くせりぢゃないか。と感心しました。

用途としては、今時のブログCMSサイトとしてはランディング・ページだって作りたいでしょう、という趣旨で追加された機能らしく。
まったくご尤もすぎて恐れ入りました。

「痒い所に手が届く」 これは、開発者として最も必要な最低要件であり、最高値の才能だからねぇ。
想像力なくして創造せず。
素晴らしいと思いました。

というわけで、用意された機能は使ってみなきゃ面白くないんで、1記事を「本文のみ」として選んでみたサンプル

表題を「シングル・レイアウト・チェック」なんぞとしてますが、元記事の趣旨は、HTMLエレメントの表示チェック用の、しかも元ネタ「Jekyll」の記事なので、Class名スタイルとか適用してません。あしからず(笑)

何故ダミーテキストってやつは、たいてい夏目漱石の「吾輩は(ΦωΦ)である」なんでしょうね。なぜゆえ定番。

ともかくも今回引き続きで使わせていただいた「simplicity」テーマ、見た目のみならず子テーマ「simplicity-child」を使用してのカスタマイズは便利かつ、いろいろ楽なんでオススメを兼ねて参考ページをリンク。

Simplicityテーマのファイル構造について説明





終わり

とまぁ、おおよそ書いたところで適当に切り上げますが、レシポンシブ・デザインについて普段思っていることをチョロっと吐露します。

軽視しているわけぢゃないけど、わりと悪し様に言っているかも知れません。
モバイル時代でしょう、皆さん電車の中でスマホ見てるんでしょう。理解してます。理解しているけれど、PCワイドビューに美しさが担保されていない世界観はお断りでもあります。
何故か。ハイエンドは、ハイエンドの扱いを受けるべきだ、と。

たぶんデバイスを買う側の「旧来型顧客としての観念から」抜け出られないから、のたまうんでしょう。

Googleさんの言う「モバイル・ファースト」は一応、建前として実践します。CSSでメディアクエリー書き足すくらい、ハナからCSSだけでマークアップ言語はじめたクチだから屁でもない作業。
ただね、もうiPhone4時代とかの画面の「小さなスマホ」は存在するんでしょうか。
するにしても、毎日連日スマホいじっている層の手中に、そんな小スマホ残っているんでしょうか。

AndroidもiPhoneも、今や小さくないですよねー。
そういうリアルから言って、自分のポテンシャルはもうかなり前から「タブレット・ファースト」です。
Webサイトは、iPadをもった家人がソファにコロンと寝転がって眺めてストレスのないもの、気軽であることがベストだと思っていて、そこからの分岐で例えば小画面スマホも拾うし、PCワイドビューには気兼ねなく面白いものや豪華な試みや、何がしかの特典つけて楽しみたいっすよね・・・が本音かも知れない。
究極のところ女性用サイト=ピンクみたいな「ゴミ観念」から離れたとこで、あらためて女性に受け入れられるレディ・ファーストぢゃなきゃ、あんま意味ないんでね? といつもディレクターなどには繰り返してます。

「PC向けサイトしか作れないけど、怒られるからスマホも対応してみました」
そんなレシポンシブ・デザインは、まるでホンダ「カブ」のシフト・チェンジみたいに、がっこん・がっこん・がっこんと音立てて、三段切り替えで不自然に切り替わるかに僕には見えます。

そーんな世界感はクソ・・・(伏字)だ。

という頑固さから、ハンバーガーメニューとか、要望ありきで付加はするんだけど、まぁそのうち消えてなくなるんじゃないかなとも思っていて、流行りものでなく、違う視点のリアル、あるでしょうが。というディレクション泣かせの制作者でありたいな、と。

ブログのリデザインとまったく関係のない話に落ちてる上に、今回のブログこそカブのシフトチェンジじゃねーか!な点はさておき、基本ルールを守った前提上で、まだまだリアルは創造の余地ありで、そのための「引き出し」はドラえもんポケットのように無限大で、あります、あります、と小技増やしていきたいなとあらためて思ったところで終わります。



ほくそ笑み。

むふふふ。Markdownで書いているのだよ。情弱なんで、知らなかったんですよ。WPもプラグインでMarkdown書きできるなど。
ここ使うのやめよっかなぁ・・・から始まり、一気に翻った理由はそこだった(笑)

プラグインなので、WPバージョンによっては動いたり不具合生じたり、ままあるかも知れないけど、いくつか入れて試した結果、今のところ「Markdown on Save Improved」というプラグインで滞りなく書けてますね。
Markdownで書いたものを.mdで表示するわけでなく、.html形式のアウトプットに変換してくれるということみたいですが。
原稿としては、Markdown記法で残るので、便利。

おしまい。

コメントをどうぞ

メールアドレスの入力は不要です。また入力したメールアドレスが公開されることはありません。

四則演算 *