CMS

a-blog cmsの投稿画面用UIと既存スタイルの衝突を回避するCSSを公開します


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構築を担当する私の役割でもあるからです。

Work

有限会社リーグラフィさんと、a-blog cmsで住宅ブランドのサイトを制作しました



こちらは、a-blog cms Advent Calendar 2016の12日目のエントリーです。今年の更新は早いですよ!

札幌の制作会社、有限会社リーグラフィさんと、株式会社ジョンソンホームズ様の住宅ブランド「ナチュリエ」のサイトをa-blog cms 2.6.1でリニューアルしました。

ナチュリエ ていねいに育てる、自然素材の家

私はa-blog cmsの構築・技術サポート全般と、サイト内の一部のJavaScript制作を担当しています。

投稿画面も含めたサイトの全容は、先月の「a-blog cms Training Camp 2016 Autumn」でご報告させていただきましたが、あちらは合宿に参加された方だけの特典ということで、私のブログでは主に、構築面で考慮したことなどをご紹介します。


チーム構成



リーグラフィCSS Nite LP46「ビジュアル・ドリブンのデザイン」などに出演している、デザインとUXを得意とする会社です。

ディレクションを担当した平澤さんは、a-blog cmsについては勉強を始めて間もないので、ひと通りの構築までできる水越さんが間に入る形で、三人でどのような構成にすべきか仮テーマを組みつつ、相談しつつ進めていきました。

a-blog cmsはコーディングの自由度が高い分、先にがっちりHTMLを組んでから作ると(いわゆるウォーターフォール)、公開後の運用がしづらいなどの認識違いが起きやすい側面があります。やはりアジャイルを得手とするチーム向けのCMSと思います。

使用しない機能は見せない

逐一打ち合わせをしているうちにわかってきたのが、以下のようなことでした。

  • コンテンツごとにデザインが大幅に異なり、事例などではかなりの入力項目が必要となる
  • 関連付けのキーとなっている店舗情報は全ブログに出す
  • しかし、特定のコンテンツで使用しているフィールド・ユニットは、他のコンテンツでは使用しないことが多い

これに伴い、投稿画面をできる限り「使用しない機能は見せない」方針で設計していきました。

a-blog cmsは投稿画面をカスタマイズできますが、無計画に改変するとバージョンアップ後に大変なことになります。変更点をコメントで書いておいたり、HTML構造が変わっても致命的なエラーとならない、jQueryのツリー解析による書き換えを駆使しました。



例えば、a-blog cmsの管理ボックスの「エントリー作成」ボタンは、押す前に実際に更新したいページへ移動する必要がある(すごくすごくバージョン3までには直してほしい)仕様なのですが、ナチュリエのサイトでは選択しただけで目的の投稿画面へ移動できる、プルダウンリストとしています。

カスタムユニットの活用

a-blog cmsは、既存の画像・YouTube・GoogleMaps以外にも、完全自作のユニットを作ることができます(もちろんPHPもJSも書きません)。
バージョン2.1から実装されていた機能ですが、先述の「使用しない機能は見せない」にのっとって今回はじめてフル活用しました。


建築日記専用ユニット

たとえば「建築日記」のコンテンツでは、画像のようなパーツしか使われていません。

https://www.naturie.jp/works/Mdf20160725134119-286.html

このコンテンツの日記パーツは、建築中は新しい順、建物が完成すると古い順に並ぶという、旧サイトからのルールがありました。 そこで、入力画面をわかりやすくでき、かつ楽に並べ替えられるよう専用ユニットを作っています。


関連エントリー

オーナーインタビューに、Kさんというご夫婦が出てきます。内装がかわいいです///

https://www.naturie.jp/voice/sapporoownervoice1.html

Kさんの家は「フォトギャラリー」「建築日記」にも掲載されています。これらを結びつけることができれば多方面からナチュリエの事例を見てもらえます。水越さんから「a-blog cmsの関連エントリー機能を使えないでしょうか」と提案を受け、実装しました。


事例同士を関連付けた状態

通常、関連エントリーではエントリーのタイトルと概要が表示される前提となっていますが、事例ではリンク先URLを正規表現で条件分岐にかけ、インタビュー・フォトギャラリー・建築日記のラベルがついたボタンに切り替えています。

CSVインポートを採用するメリット

ナチュリエの旧サイトは、フルスクラッチのCMSで運用されていたため、データのエクスポート機能がありませんでした。
しかし、a-blog cmsには高精度なCSVインポート機能があります。実際のサイト内のHTMLから情報を拾っていく必要はあるものの、そこさえクリアできれば行ける!と目算を立てました。

画像カスタムフィールドのCSVインポートフォーマットが公開されていないという難関がありましたが、検証の結果、他のCMS以上に簡単に実装できることがわかりほっとしました。CSVインポートのサンプルデータはGitHubで公開していますので、ご自由にお使いください。

https://github.com/webbingstudio/acms_inport_test_500

CSVインポートは以下のメリットがあるため、最近はどのCMSの案件でも積極的に導入しています。

  • CMSの種類・端末・環境を問わず導入できる
  • Web制作の知識が浅いスタッフにも作業を依頼できる(インターンさん外部スタッフさんありがとう ToT )
  • スプレッドシートで見ることで「不備があるデータ」「移行不要なデータ」を可視化できる

まとめ

特にa-blog cms関連でお話ししたいことはこのようなところです。他にもcookieと連動してのコンテンツ切り替えなどもしていますが、これはa-blog cmsの公式ハンズオンにもあるので、皆さんも検討してみてください。

a-blog cmsでの大規模なサイト制作に関わるのは、今回がはじめてでした(ちょちょいなら何度かありましたが)。a-blog cmsならではの構築面での注意点、自分のテーマ制作のヒントも多く得られたと思います。
リーグラフィの皆さんありがとうございますm(__)m

ウェビングスタジオでは制作会社へのCMS構築面の技術提供なども行っています。どうぞお気軽にご相談ください。

ってこのサイト、お問い合わせフォームがないですね( ˙-˙ )
mail[ atmark ]webbingstudio.com
です。すいませんリニューアルせねば。

Internet

町工場と音楽のコラボ企画「INDUSTRIAL JP」で楽曲を購入する方法と、Web制作者が気付かされること


町工場の音と作業中の映像をリミックスして音楽作品を作る、「INDUSTRIAL JP」というプロジェクトがじわじわ話題になっています。

INDUSTRIAL JP / 工場音楽レーベル

これがまた、作業音楽にはもってこいです。YouTubeのPVが時間泥棒です。吸い込まれます。

気に入ったので購入しようとしたのですが、購入方法がわかりにくいのです(ほとんどは音楽販売サービスのせいなのですが…)。調べている時間が取れなかったのでずいぶんかかってしまいました。

後半は私の仕事がらみの話にもなりますが、音楽やパソコンに詳しくない人のために手順をご紹介します。

この記事には続きがあります

CMS

祝好調。「一歩先にいくWordPressのカスタマイズがわかる本」はベテランにも必携の書

プライム・ストラテジーの相原さんと大曲さんから、「一歩先にいくWordPressのカスタマイズがわかる本」を送っていただきました。

ベストセラー「WordPressの教科書 」で知られるプライムさん。かつ、いつもセミナーなどでお世話になっている大曲さんの本なので、内容は疑うべくもないです。じっくり読みました。


さっそく実践で役に立ったものの、なかなか書評を書けていなかったのですが、風の噂では今回も好調な売れ行きのようです。購入を迷っている人の背中を全力で押してみたいと思います。

おぉ、6月30日発売の「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」もよろしくお願いしますね!

この記事には続きがあります

CMS

CMSのダミー文に、ウェビングスタジオが「吾輩は猫である」を使っている理由


CMS構築での記事の流し込みには自動インポートだけでなく、手入力での投稿も必ず行います。サーバーとの相性によるエラー、インストール失敗などによる不具合をチェックするためです。

先日公開したa-blog cmsテーマ「site2015mini」のテスト記事の文章は「吾輩は猫である」「セロ弾きのゴーシュ」「賢者の贈り物」の抜粋となっています。

ここ数年はこれらと、50音の羅列200文字分を使っています。今回はダミー素材に関する試行錯誤の話です。

この記事には続きがあります