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


投稿者名 うぇびん 投稿日時 2017年01月19日 | Permalink

人気タスクツール「Trello」を試したけど「Nozbe」の方が使いやすかった理由


私の回りで、タスク・プロジェクト管理ツールに「Trello」を採用している人が増えてきました。

Googleアカウントがあれば無料で利用できること、いわゆる「カンバン方式」と同様のプロジェクト管理ができること、ドラッグでタスクを移動する操作感が楽しいこと、などで高い評価となっているようです。



いっぽう、私はここ一年くらい、仕事・生活全般に「Nozbe」を利用しています。
CSS Nite in SAPPOROのライトニングトーク大会でもご紹介しています。動画・スライドはこちらからどうぞ。

ですが、Trello使ってるよ!という話をやたら聞くので、経費節減と浮気心でTrelloへの乗り換えを試してみました。


投稿者名 うぇびん 投稿日時 2015年04月19日 | Permalink

「Jimdo」で、タブレットだけでサイトを作れるか試した

札幌に長期滞在するのを機に、Nexus 7を購入しました。
Androidタブレットの検証機が欲しかったこともありますが、年のせいか、スマホの小さな画面でいろいろ調べ物をするのが、しんどくなってきたのです。


札幌への移動中、メールやCSS Nite in SAPPOROのスライドをチェックしたり、マンガを読んだりしてみましたが、なかなか快適です。
Androidの操作感も、ずいぶん良くなりましたね。本体がOSについて来れるようになった、ということかもしれません。



さて、KDDIウェブコミュニケーションズが提供する、ドイツ産CMS「Jimdo」が、モバイル用の管理アプリをリリースしました。



Jimdoは公開画面を直接編集できるスマートなUIが魅力ですが、デスクトップでなければ操作しにくく、大量のページ作成には向かないのが欠点でした。

ちょうど個人サイトを作りたかったこともあり、タブレットだけでウェブサイトを制作することはできるか、試してみることにしました。


投稿者名 うぇびん 投稿日時 2014年10月30日 | Permalink

WordPressとエディタとマークアップ


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

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

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


投稿者名 うぇびん 投稿日時 2012年02月17日 | Permalink