STINGER専用シンプルデザイン子テーマ「SIMPLESTER 」

あなたのSTINGERを美しくしてみませんか？

SIMPLESTER Ver4公開です！

   

001_20150404_ver-lunchedどうも、ブログ『degitekunote2』を運営しています私(@こふす)です。

さて、以前STINGER5のシンプル子テーマの「SIMPLESTER」の最新バージョンVer4を公開しますとアナウンスしましたが、ようやく完成したので公開します！

そもそもSIMPLESTERって何やねんという方はこちらを御覧ください。

ちょっと小話を

2015年の1月28日にSIMPLESTERは誕生しました。この日にVer1を公開してそれから約2ヶ月経ちました。

その間多くの方にダウンロードしていただき、また実際にSIMPLESTERを使って頂いているサイトやブログも幾つか見かけるようになりました。

素人の私が制作したテーマが現在までになんと577回もダウンロードされていて、本当に驚いているのと同時に非常に嬉しい限りです。577回というと単純計算1日9人の方がダウンロードしているわけなので、我ながら大成功だったと思っております。

これまでの流れ

1月28日に誕生したのと同時にVer1を公開して、それから約2週間後の2月9日には早速Ver2を公開しました。このVer2でSIMPLESTERを知ったという方も多く、Ver2を利用している方もちょくちょく見られます。

3月1日にはVer3を公開しました。Ver3ではカラム数を可変式にしたりとちょっと実験的なこともしました。現在までに１番ダウンロードされているのがVer3です。

各バージョンについて

SIMPLESTERはシンプルな子テーマを目指してこれまで制作してきました。私の中でのシンプルという定義は常に進化していることから、その時その時の最高のシンプルさがバージョンとして現れています。バージョンアップのサイクルが短いのもこれが理由です。

本日4月4日はVer4の公開です。今の私の中での最高のシンプルさを表現しました。ではではVer4の中身を御覧ください。

 

Ver4で変わった点は

大きく変わったのはテーマの目標です。Ver4のテーマの目標は「初心に戻る」です。

改めてシンプルとはを考えてみた結果がVer4の至るところで表現されています。

より考えぬかれた新着記事一覧

まずはTOPの新着記事一覧部分です。Ver3では可変式のカラムを使用していましたがVer4では初期の1カラムに戻りました。ただ見ていただくと分かる通り、交互に反転していくデザインになっています。

002_20150404_ver-lunchedシンプルとは非常に難しいもので、ただ飾りっけのないものがシンプルかというとそれは違います。見ていて落ち着くもの、飽きないもの、変化を与えるもの、それもシンプルなのです。今回交互に反転することで飽きさせず、また見慣れている1カラムにすることで落ち着きを与えてみました。

 

各要素を更にセミフラットに

Ver3からセミフラットデザインを取り入れたSIMPLESTERはVer4で更に強くセミフラットを取り入れました。特に各要素の下にはボーダー2px入れることによって、立体感を感じられるようになっています。

003_20150404_ver-lunched

メニューバー

007_20150404_ver-lunched

パンくずリスト

ただ立体感もあまりに強く主張すると見づらいだけです。いろいろ試した結果2pxで#eaeaeaが最適だと判断し、様々なところで使用しています。

 

メタ要素の順番

これまでSIMPLESTERでは記事一覧時に表示される各記事のメタ要素の順番を変えることはありませんでした。親テーマであるSTINGER5の順番に則っていていましたが、Ver4からはCSSのフレックスボックを活用して順番を変えてみました。

以前は１番上が記事タイトルでその下に日付やカテゴリーやタグがあり、一番下が抜粋でした。

009_20150404_ver-lunchedVer4では１番上に日付やカテゴリーやタグがあり、その下に記事タイトル、一番下に抜粋という順番になっています。

004_20150404_ver-lunchedサムネイルの真ん中に目線を自然と合わせることで全体を見てもらおうという狙いがあります。あとこれは経験上ですが、日付やカテゴリーといったメタ情報はなるべく固定位置である方が探しやすく、一番上にすることで記事タイトルの長さに関係なく固定出来る特徴があります。

 

SNSシェアボタンのデザイン変更

SNSシェアボタンに関しては不要な要素は全て省きました。以前はホバーするとアイコンが登場し点滅していましたが、このアイコンは点滅させずに、最初から表示させるようにしました。

005_20150404_ver-lunched本当はオリジナルのSNSボタンもデザインしたいところですが、CSSだけでは無理なので現在のシンプルさを追求したらこういう形になりました。でも見やすさでは他のサイトにも負けていないでしょ！

 

トップへ戻るボタンのデザイン変更

トップへ戻るボタンのデザインを変更しました。以前は四角でしたが、丸になりボーダーで囲っています。ちょっと可愛さも意識しつつやはりシンプルイズベストな考え方はこちらにも受け継いでいます。

006_20150404_ver-lunched色は自由に変えられます。

 

デフォルトフォントがOpenSansと游ゴシックへ

これまでのSIMPLESTERでは優しさと見やすさで定番のメイリオをデフォルトフォントとして指定してきましたが、Ver4からゴシック調に、それも遊ゴシックをデフォルトに指定しています。英字や数字はOpenSansを指定しています。

008_20150404_ver-lunched

 

堅苦しくならないかなと心配だったんですが、以外にも見やすくてしっくりきていて何より理想のシンプルデザインに合っています。ちょっと残念なことを言うと遊ゴシックというフォントはWindowsだと8.1、MacOSXだとMavericksにしかデフォルトでインストールされていません。当然ながらこれ以外のOSでは別途購入しないと表示することは出来ません。勿論モバイルOSでは特別なことをしない限り表示できません。

一応遊ゴシックが表示できる環境では遊ゴシックで表示、表示できない環境であればなるべく近いフォントで代用しています。ただ遊ゴシックは人気のフォントで最新のOSでもデフォルトでバンドルされているため、これからは多くのOSで表示できるようになると思われます。まぁ先取りですね！

 

SIMPLESTER Ver4

Ver4の大きな変化はこれぐらいです。これまで通り同様CSSファイルによるデザインのカスタマイズしか行っていないので、STINGER5本体への影響は無いでしょう。

ちなみにこのサイトのデザインがVer4です。いかがでしょうか！

前述した通りSIMPLESTERのバージョンはフリーソフトのようなバージョンアップではなく、シンプルを追求して変化していくデザインのバージョンです。そのため人それぞれ好き好みがあるかと思うので、過去バージョンに関してはこれからも公開していきます。Versionページにてアーカイブしており、デモサイトも設置しているので比べてみてはいかがでしょうか。

SIMPLESTER導入の流れは

SIMPLESTERとは
SIMPLESTERのインストールの仕方
SIMPLESTERのカスタマイズ

この順序で見ていただければスムーズにいくかと思います。

 

それではVer4のDL先を案内します。是非DLしてやってください！！

ダウンロードSIMPLESTERのダウンロードページに移動

 - Ver4 , , ,