「メイド・イン・ヘブン」スキン適用中

Cocoon 1.3.8公開。「COLORS」スキン5種追加。

アップデート情報
この記事は約4分で読めます。

最近、要望もある程度落ち着いてきたので、ようやくスキンを作る時間ができました。

これでようやく、テーマの装飾目的のスキンが作れます。

「COLORS」スキン追加

Cocoonは、スキンでデザインを変更するためにデフォルトでは、必要最低限の装飾以外は排除しています。

ここにきてようやく装飾向けのスキンを作る余裕ができたので、以下の5種類のスキンを作ってみました。

  1. COLORS(レッド)
  2. COLORS(ブルー)
  3. COLORS(イエロー)
  4. COLORS(グリーン)
  5. COLORS(ピンク)

見た目とかはこんな感じ(ピンク)。

colors-pink

詳細はこちら。

Cocoonを少しリッチな見た目に「COLORS」スキン6種作成
サイトに合わせた色を選べるスキンを6色分作成しました。

機能追加

  1. AMPのインラインスタイル属性除去機能の実装

AMPのインラインスタイル属性について

先日、AMPがインラインスタイルに対応しました。

それにより、Cocoonもインラインスタイルに対応させました。

けれどAMPをインラインスタイルに対応させると、以下のような問題点が。

  1. インラインスタイル内のAMPエラー要素を排除する必要がある
  2. インラインスタイル分のCSSがCSSサイズに加算されるので、AMP上限(50,000Byte(約50KB))を超えやすくなる

これらの難点を鑑みた場合、Cocoonデフォルトでは、インラインスタイルを無効にすることにしました。

その方が、AMPエラーにもなりにくいので。

その代わりとして、「Cocoon設定」の「AMP」タブに「AMPでインラインスタイルを有効にするかどうか」を切り替える機能を追加しました。

本文中のインラインスタイルを取り除きます

詳細はこちら。

Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...

変更

  1. CSS縮小化用のフック2ヶ所追加
  2. JavaScript縮小化関係のフック3ヶ所追加
  3. HTML縮小化関係のフック3ヶ所追加
  4. スキンfunctions.phpのサンプルコードの変更

不具合修正

1.3.7以降の不具合修正はこちら。

  1. 検索ボックスのサーチボタンがずれる不具合修正(Chrome)
  2. [AMP]Amazon iframeの不具合修正
  3. インラインstyle属性の中のAMPエラー要素を排除
  4. _displayのAMPエラー対応
  5. チェックボックスを無効にできないスキン制御の不具合修正
  6. チェックボックス関係のスキンの値が取得できない不具合修正

詳細はこちら。

Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...

ようやくスキンを作る余裕ができたと思ったら、PageSpeed Insightsの仕様変更…。

対応するとしたら、またしばらく作る余裕がなくなるかも。。

タイトルとURLをコピーしました