デザインのカスタマイズ性を高めた Snow Monkey v3.0 をリリースしました

先日 v2をリリースしたばかりなのですが、Snow Monkey のデザインスキン機能を開発しだしたところ、デザインスキンを作りやすくするためにちょっと Snow Monkey 自体にもがっつり手を入れたくなってきまして、そうそうにまたメジャーバージョンアップとなりました。

v3.0 の概要

機能追加

  • デザインスキン機能の追加
  • ヘッダー位置設定機能を追加(固定、オーバレイ、ノーマルから選択。デフォルト:固定)
  • ヘッダー位置設定をモバイルのみに適用する設定(デフォルト:有効)
  • デフォルトページヘッダー画像指定機能
  • フィルターフック snow_monkey_related_posts_args を追加

不具合の修正

  • サイドバー・フッターウィジェットエリアでのスライダー、ピックアップスライダーウィジェットのデザイン改善
  • ショーケースウィジェットで画像エリアが間延びする不具合の修正
  • IE11 でのデザイン崩れを修正
  • カスタム投稿タイプ利用時に、関連記事テンプレートを読み込んでも表示されない不具合を修正

変更点(子テーマなどでカスタマイズしている方は要確認な点)

  • FontAwesome5 対応(アイコンフォントから、js描画に変更になります。メニュー等に追加されている方は、若干コードの変更が必要です)
  • ヘッダーテンプレートを一部変更
  • スライダー、ピックアップスライダー、ショーケースウィジェットの CSS 変更
  • ウィジェットタイトル、記事下ブロック(コメント等)のタイトルの HTML/CSS 変更

デザインスキン機能

v3.0 の目玉、デザインスキン機能です!カスタマイザーからお手軽にデザインを「着せ替え」することができる機能です。デザインスキンの実体はプラグインで、いくつでも有効化でき、カスタマイザーで有効化したものからデザインを選択することができます。

子テーマでいくつかの異なるデザインを提供するパターンもみたことがあるのですが、子テーマにしてしまうと、それをさらにカスタマイズしたいと思っても、子テーマの子テーマはつくれないのでそれ以上のカスタマイズを行うことができません。そのため、子テーマではなくプラグインとしてデザインスキンを提供、また、つくることができるようにしました。

とりあえず僕が1種類、春ということで、「Snow Monkey Design Skin Spring」というデザインスキンをつくってみました。試しにこのサイトに適用してみたスクリーンショットが以下です。

Snow Monkey Design Skin Spring をダウンロード

デザインスキンは誰でもつくることができます。後日デザインスキンの解説&つくり方に関する記事も別途書こうと思っています。ハングアウトとかでビデオチャットつないでもくもく会とかも良いですね〜。

ちゃんとこのサイトにデザインスキンのページをつくって、ユーザーのみなさんがつくったデザインスキンもそこに登録できるようにしたいなと考えています。たくさん集まって、たくさんから選べるようになったり、自分がつくったデザインスキンが誰かに使ってもらえると絶対楽しいと思ってもらえると思いますので、ぜひみなさんつくってみてください!早くつくりかた記事だせるように頑張ります。

ヘッダー位置設定機能

ヘッダーの表示位置を、

  • 固定(ページ最上部に固定表示)
  • オーバレイ(コンテンツの上に重なる形で表示)
  • ノーマル(普通にスクロールされる)

から選択できるようにしました。このヘッダー位置設定機能は、基本的にスマホに対してのものになります。v3.0 未満では、スマホはヘッダーが最上部固定、PC では普通にスクロールされる、という状態で表示されていました。v3.0 でも、PC ではどれを選択しても普通にスクロールされる形で表示されます。

もし PC でも固定表示やオーバレイ表示をしたい、というときは、「ヘッダー位置設定をモバイルのみに適用」という設定のチェックを外せばスマホと同じように選択したヘッダー位置設定が適用されます。

ちょっとこれは実際にさわってみないと何ともわかりにくいと思いますので、ぜひポチポチやってみてください。

【PCサイズ】オーバレイ + モバイルのみに適用をオフ、の場合
【PCサイズ】固定 + モバイルのみに適用をオフ、でちょっとスクロールさせた場合

デフォルトページヘッダー画像指定機能

これまでは「アイキャッチ画像の表示位置」設定で「ページヘッダー」もしくは「ページヘッダーの上にタイトルを表示」を選んでいる場合に、アイキャッチ画像があればアイキャッチ画像がページヘッダーに表示されるけど、無い場合は画像が表示されないという仕様でした。ただ、これだとヘッダーの表示位置設定を「オーバレイ」にしたときに、ページヘッダーがないのでヘッダーが直接コンテンツにかぶって超読みにくくなっちゃうんですよね。

そこで「デフォルトページヘッダー画像」設定をつくりました。デフォルト画像を設定しておくことで、アイキャッチ画像がない場合でもページヘッダーに画像が表示されるようになり、オーバレイヘッダーとの相性もばっちりです。

v3.0 のコントリビューター

今回のリリースに貢献してくださった方々です。みなさんありがとうございます!

ものくろさんSho Doi さんアベ カズユキさんコンチさん

この記事を書いた人

アバター画像

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!