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

Internet

RPG風タスク管理ツール「Habitica」で人生をレベルアップ


人生はRPG」「自分の人生の主人公は、他の誰でもなく自分自身」とはドラゴンクエストの創造主、堀井雄二の口癖ですが…
それを実現したタスク管理ツールが「Habitica」です。

Habitica | Your Life the Role Playing Game

4ヶ月ほど生活改善に利用していて、かなり効果があったので詳しくご紹介します。

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

CMS

国内CMS7種のナビゲーション機能を比較してみた・2016年歳末版


これまでのコーポレートサイトのCMS構築において、ナビゲーション機能は重要度が高くありませんでした。公開後に変更されることが少ないので、HTML直書きでも充分だったのです。

しかし、コンテンツマーケティングの考え方が普及し、サイト公開後もナビゲーションの導線変更を検討するケースが増えてきました。
現時点の、日本国内の主要CMS6ブランド・7種類の「ナビゲーション機能」について改めて見直してみました。

2016-12-30追記

ユーザーの皆さんから情報をいただき、下記を修正しました。
不備が多く申し訳ありません…m(__)m

  • Movable Type: Object Treeプラグインの情報を追加
  • a-blog cms: ナビゲーションのカスタマイズについて追記
  • concrete5: フラットビュー、ページ検索機能について追記
  • baserCMS 4: ブログ・フォームを複数追加について追記
  • Drupal: 「リンクの一覧」画面について追記

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

Work

Movable Type用テーマ「echo Bootstrap」のリポジトリを公開しました


メリークリスマス。
リリースから1年が経過した、Web制作者向けに制作したMovable Type用テーマ「echo Bootstrap」のリポジトリをGitHubに公開しました。

https://github.com/webbingstudio/mt_theme_echo_bootstrap

今後は非商用・検証・学習目的であれば無償でご利用いただけます。商用利用を検討された際は、ライセンス(10,800円)を購入ください。

http://store.cms-skill.com/items/2463730

a-blog cmsでも新しいテーマを制作していますし、来年以降いろいろと有料のCMS素材をリリースしていきますが、基本はMovable Typeコミュニティで多く採用されている、商用ライセンス方式で統一する予定です。

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

CMS

Movable TypeにCSV形式でインポートができる「CSVDataImExporter」プラグインの使い方


こちらは、Movable Type Advent Calendar 2016の17日目のエントリーです。
なんと4日前に書いてます!うぇびんさんらしくないですね!

今年は、Movable TypeでCSV形式のエクスポート・インポートが可能になるプラグイン「CSVDataImExporter」の使い方を解説します。

はじめに・ライセンス体系について

このプラグインは基本有償です。試用版は15日間すべての機能を利用できますが、それ以降はインポート可能なデータの範囲とサイトの目的で、ライセンス料金が変わります。詳しくはリンク先を参照ください。

CSVDataImExporterプラグイン: 小粋空間

画像カスタムフィールドを含む場合は、最上位の「④ブログ記事 + ウェブページ + カスタムフィールド + カスタムフィールドアイテムアップロード対応版」をお勧めします。この記事でも、④での導入経験を前提に解説していきます。

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