先月公開したCSSフレームワーク「echo.css」ですが、「どんなページが作れるかのサンプルがないと、イメージしにくいんじゃないかな」と言われました。

それで、ドキュメントよりも先にテンプレートを作っています。日曜日はチクチク制作をしておりました。

echo.cssのモジュール群で特に気に入っているのが、冒頭の画像の「c-flip」というコンポーネントです。デスクトップでは写真を大胆に表示し、モバイルでは写真が上、文章が下となります。

初出は、昨年稲葉さんと制作したa-blog cms用のテーマ「zeroichi_lp」です。

この時点でも充分使い勝手は良かったですが、実際の案件で使ううちに、デスクトップでの表示が8パターンまで必要なことがわかってきました。使用する背景画像によって、適切な文字配置は全く異なるためです。デザイン上の理由もあります。

• 画像全面＋コンテンツ白背景・左寄せ
• 画像全面＋コンテンツ黒背景・左寄せ
• 画像全面＋コンテンツ白背景・右寄せ
• 画像全面＋コンテンツ黒背景・右寄せ
• 画像半分＋コンテンツ白背景・左寄せ
• 画像半分＋コンテンツ黒背景・左寄せ
• 画像半分＋コンテンツ白背景・右寄せ
• 画像半分＋コンテンツ黒背景・右寄せ

8パターンのデザインを簡単に切り替えるために、サブクラスなどをずいぶん整理して現在に至ります。詳しくはこのコンポーネントの解説ページをご覧ください。

https://cms-skill.com/echo-css/styleguide/component-flip.html

私が制作するサイトは、ほぼすべてCMSを介して制作し、さらにその半分くらいが、フォーマットができてから原稿が入ります。その際に想定外の画像やテキストをどれだけ少ない工数で補完できるかを、自分の独自スキルとして磨きたいと日々考えています。これは少なくとも、AIには当分できないことです。

Atomic Designの構成図かわいいです

久しぶりにいくつかコーディングの仕事をすることになりそうで、CMSの構築と比較して効率化できていなかった、CSSの設計を見直すことにしました。

最近のCSS設計は、OOCSS・FLOCSS・SMACSSなどがあり、高度かつ多岐に渡ります。ウェブデザイン設計についても、Material Design・Atomic Designなどがあります。

どれも素晴らしい内容なのですが、どうも私の中ではもやもやとしています。
かつてと比較すると、あまりにも理系寄りで難解だと感じるのです。

a-blog cmsの魅力は、公開サイトからデザインの異なる管理画面へ移動せずにエントリーの投稿ができるところにあります。日本での利用を前提としたUIもわかりやすく、クライアントさんからの評価も高いです。

投稿画面のユーザーインターフェースのCSSも丁寧に作られているのですが、導入するサイトのCSSルールによっては衝突が起こる場合があります。

典型的な例が以下のようなサイトで、body要素のスタイルを参照しているa-blog cmsの投稿画面は、冒頭の画像のように見た目が崩れてしまいます。

• bodyにセリフ系、デザイン系のフォントを指定している
• bodyの文字サイズを「0.625rem（=10px）」として、各モジュールは「140%」などの相対%で調整している

これらをはじめとする細かい問題を回避するCSSをGistで公開しました。

a-blog cms バージョン2.6時点の、公開ページでの投稿フォームなどの既存CSSとの衝突を修正するための追加CSS

こちらからも、2017年1月19日時点のバージョンをダウンロードできます。

acms_ex.css.zip

使い方

以下のとおり、本来の「acms.css」に続けて読み込んでください。

<link rel="stylesheet" href="/css/acms-admin.css">
<link rel="stylesheet" href="/css/acms_ex.css">

このCSSは、以下の問題の修正と、外観の調整を行います。

• 本文のスタイルの影響をUIも受けてしまう問題を回避
• 全幅レイアウトのサイトに組み込んだときにUIが広がりすぎる問題を回避
• 管理ボックスのボタンサイズを固定
• ユニット内のラベルのクラス名がbootstapと重複している問題を回避
• acms.css以外のフレームワークを使用すると予期しない箇所で段組が解除されてしまう問題を回避
• エントリーカスタムフィールドのラベルを長いタイトルにも対応させる
• ファイルユニットになぜかインラインでwidthが入ってしまう問題を回避
• ツールチップアイコンをエントリー・モジュールのカスタムフィールドでも使用できるようにする
• 文字装飾ボタンを目立たせる

「本文のフォントをacms.cssのフォントに合わせる」「予期しない箇所で段組が解除されてしまう」「文字装飾ボタンを目立たせる」については必要ないケースもあると思うので調整してください。

また「ファイルユニットになぜかインラインでwidthが入ってしまう問題」については今後のバージョンで修正される可能性があります（先日リリースれた2.6.1.4では未確認です）。その場合はこちらは逆に不具合の原因になるかもしれません。

私はいちからすべてテーマを制作する案件だけでなく、すでに制作会社さんによってコーディングが終わったサイトにCMSを組み込む案件も多数請け負っています。この調整CSSは、そのような案件を通してちょっとずつ書き足していったものです。

個人的には10pxから文字サイズを調整する手法は開発者側の計算が楽になるものの、改修や外部サービスのパーツ追加に弱いので避けるべきと思います。

しかし、そういった導入先サイトのスタイルの問題だけでなく、最近のCSSフレームワークで見られる「ワイド画面でサイト全体の文字サイズが大きくなる」効果によって「良かれと思って作られているものがacms.cssと衝突する」というケースもあり、やはりサイトに応じて制作側が細やかに調整していくしかないと思います。

「そこまでするの？」「フォントなんて気にしなくても…」という意見もあるでしょうが、私は可能な限り徹底したいと考えています。はじめてのCMSを扱うクライアントの不安をできるだけ払拭するのが、CMS構築を担当する私の役割でもあるからです。

WordPressをCMS的に利用する場合、リッチテキストエディタが非常に使いにくいことが問題になります。

エディタのUI自体はよくできているし、機能も豊富なのですが、本文中にHTMLを書いた場合に半角スペースやタグを自動フォーマットしてしまうため、div要素、table要素などを思うように記述できません。

特にHTMLモードからビジュルアルモードに切り替えたときの自動フォーマットのひどさは、これまで頑張って編集してきたモチベーションが下がるレベルです。

WordPressで制作した２サイトを、制作実績に追加しました。

今回はデザインから私が制作しています。
どちらも大学にゆかりがある案件ですが、傾向は大きく異なっています。

株式会社NERC（自然エネルギー研究センター）

• http://www.nerc-hokkaido.co.jp/

S-WPIA開発プロジェクト

• http://stpp.gp.tohoku.ac.jp/s-wpia/