Simplicityを1.5.1 20150223にバージョンアップしました。
今回からまたいろいろな機能を試す開発版になります。
今回の主な変更点は以下です。
- デザイン変更部分がいくつか
- モバイルでデフォルトのヘッダー背景色を白に変更
- メニューボタンのデザイン変更
- メニューボタンの色変更機能追加
- メニューボタンの背景色変更機能追加
- トップへ戻るボタンの色変更機能追加
- トップへ戻るボタンの背景色変更機能追加
- カスタマイザーの「ガイドボタン色」機能を廃止(メニューボタンと、トップへ戻るボタンでそれぞれ色指定)
- 投稿日/更新日の表示フォーマットをカスタマイザーからできるように機能追加(要望)
- YouTubeのチャンネルにも対応できるように設定項目を追加(不具合報告)
- サブディレクトリにインストールされたWordpressの場合、独自管理メニューが正常動作しない不具合修正(不具合報告)
- モバイル向けにスタイルを結構調整
1.4→1.5変更点まとめでも一応予告はしてあったのですが、今回の開発版で僕が以前から修正したいと思っていた箇所を修正しました。
新しいデザイン
変更後のデザインは、以下のようになります。
パソコン(高解像度)
パソコンは全くといっていいほど変わりません。
パソコン(低解像度)
横幅が1110px以下の低解像度パソコンでは、以下のように表示されます。
メニューを表示するボタンをシンプルなものに変更しました。
モバイル(高解像度:タブレットなど)
タブレットなどでは以下のように表示されるようになりました。
モバイルのヘッダーのデフォルト色は、背景色と同じ(透過色)になるようにしました。ただこれは、既にヘッダー色が設定されている場合は、そのままの色になるので、これから新しくSimplicityを利用する人のみこのようなデザインになります。
あと、メニューボタンも以前とは違った、シンプルなものになっています。
モバイル(低解像度:スマホなど)
スマホなどでは、以下のように表示されます。
縦表示
横表示
タブレット同様、モバイルでのデフォルトのヘッダー色と、メニューボタンが変わりました。
メニューボタンの色変更機能追加
以前は、カスタマイザーのガイドボタン色で、「メニューボタン」も「トップへ戻るボタン」も一緒くたに色指定していましたが、それぞれ別に色を指定出来るようにしました。
デフォルトだとこんな感じのボタンです。
WordPress管理画面の「外観→カスタマイズ→色」から、以下の項目でフォント色と背景色が変更できるようになりました。
- メニューボタン色
- メニューボタン背景色
例えば、上記のような設定にした場合は、以下のように表示されます。
例えば、「アイコンだけだと目立たないな」なんで場合には、変更してご利用ください。
以前ガイド色で、色変更していた場合は、色の再設定が必要です。
トップへ戻るボタンの色変更機能追加
「外観→カスタマイズ→色」から以下の項目も変更できるようになりました。
- トップへ戻るボタン色
- トップへ戻るボタン背景色
ただこれは、デフォルトでは以前とほとんど変わらないデザインです。
以前ガイド色で、色変更していた場合は、色の再設定が必要です。
投稿日/更新日フォーマット変更機能追加
投稿日と、更新日の表示を変更したい場合に「外観→カスタマイズ→テーマ内テキストの設定」から表示するフォーマットを変更できるようにしました。
これを変更することにより、以下のような部分の年月日表示を変更できるようになります。
ブログカードの日付部分。
投稿の、投稿日、更新日。
YouTubeのチャンネルに対応
以前のYouTubeフォローボタンは、ユーザーページにしか対応していませんでしたが、チャンネルページにも対応しました。
「外観→カスタマイズ→SNSの設定」から設定することができます。
「youtube.com/user/XXXXXXX」にIDを入力すると、ユーザーページにリンクされます。
「youtube.com/channel/XXXXXXXXXX」にIDを入力すると、チャンネルページにリンクされます。
双方に入力を行うと、チャンネルページが優先されてリンクされます。
v1.5.1あとがき
今回いろいろ、デザインを変更しましたが、基本的にカスタマイザーで元に戻すことができます。
戻せないのは、メニューボタンの形ぐらいです。前の形がよかったという場合は、スタイルシートなどで設定して元に戻してください。
一応参考として、以前のスタイル例を置いておきます。
/*以前のモバイルメニュースタイル*/ #mobile-menu a{ color:#fff; padding:4px; width:60px; text-decoration:none; display:block; cursor:pointer; text-align:center; background:#aaa; line-height:100%; border-radius: 10px; border-top-left-radius: 0px; border-top-right-radius: 0px; position:absolute; right:30px; font-size:10px; }
これとともに、表示端末の幅で、大きさを変更したりさせていました。
今回、結構いろいろな部分を変更したり削除したりしたので、もしかして不具合があるかもしれません。
何かありましたら、フォーラムにて、報告いただけると助かります。