Webdesign

Illustrator CC 2017から書き出したSVGは、GIMP 2.8.22で正しく表示できない


2017-07-06追記: 問題が起きる原因と対策を、記事にまとめていただきました。
GIMPでSVGファイルの表示が崩れる問題とその解決策 - 週刊SVG
圧縮された座標パスを正確に解析できない、既知の不具合です。GIMPで編集可能とする場合は、圧縮ツールを使わないようにしてください。また、Illustratorの場合は非圧縮となる「別名で保存」などを使用してください。

エントリー末尾の補足情報も参照ください。

表題の通りです。同じ状況になる人がいずれ出てくるかもしれないので共有します。

結論から書きますが、これはGIMP側の仕様で、ブラウザでの表示においては問題ありません。
どうもGIMPは、SVG関連の対応は読み込み・書き出しともに遅れているようです。

Android Studioでも色情報が引き継がれない問題が報告されています。

Sketchたまご: Illustratorから書き出したsvgをAndroid StudioにImportすると色情報が反映されないことの解決法

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

CMS

WordPress(ワードプレス)をやめたくなった人へのアドバイス


つい先日、ワードプレス(以下、WordPress)に深刻な脆弱性が発見され、かなりのウェブサイトが改ざんの被害を受けました。
ネットで評判が良かったので、なんとなくWordPressを使っていたけれど、やめたいと思っている人も多いかもしれません。

「無料で高機能で便利だったけど、怖いので違うブログにしたい…」
「ブログのことはWordPressしか知らないし、今後どうしていいかわからない…」

私は、WordPressをはじめとした「コンテンツマネージメントシステム(以下、CMS)」を使ったホームページ制作や乗り換えの仕事をしています。
この記事は「WordPressをやめたい」と悩みはじめた人のための、私から提供できるアドバイスです。

2017-02-27追記:さすがにタイトルがよろしくなかったので変更しました。

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

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

2015年9月以降に契約したCPI共有サーバーで、PHPを利用する場合の注意


先日、CPI共有サーバーの新規契約をしたところ、いつの間にか仕様が変更になっていたので共有します。

「CPIサーバー シェアードプランACE01」は、9月29日契約分から、新バージョンのサーバーに格納されます。
大まかな情報はこちらで公開されています。

http://www.cpi.ad.jp/shared/ace2015/

で、PHPベースのCMSに関わる、上記のページに書かれていない重要な変更が二点あります。

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

Webdesign

cmq: grunt-combine-media-queriesのインデントを、タブ→スペース2個に直す方法


年度末のお仕事をしながら、ここ一年ですっかり効率が落ちてしまった、コーディングの見直しをしています。
昨年からずっとSass+Compass+JSの処理にGruntを使っているわけですが、「grunt-combine-media-queries(cmq)」の挙動で気に入らない点がありました。

cmqは、CSSファイル内でバラバラになっているメディアクエリを、同じ条件ごとにファイル末尾にまとめてくれるタスクパッケージですが、これで整形したあとのCSSファイルは、Sassの設定でcompressed(圧縮)を選択していてもCSSが展開され、さらにインデントが「タブ」になってしまいます。

このあとでさらに「grunt-contrib-cssmin」を通して圧縮すれば、CSSが展開される問題は解決できます。
ですが、制作会社に納品する場合はCSSを圧縮せずに引渡すことが多く、CSSファイルだけタブになっているのがやたら気になっていました(どうでもいいことなんですけどね)。

パッケージの中をのぞいて、修正をしてみました。

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