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

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

SIMPLESTER Ver5リリース!より美しく、よりシンプルにSTINGER5が生まれ変わります

   

02_20150809_simplester5

どうも、SIMPLESTERを開発&公開しています私こふすです。degitekunote2というブログもやってるので是非ご覧くださいな!

さてさて、遂にSIMPLESTER Ver5を公開することになりました。Ver1からVer4まではほぼ月一でリリースしていたんですが、Ver4リリースから約4ヶ月経ちまして、「これはヤバイ」と思い急ぎ足で制作しましたという本音が出た所で、Ver5についてご紹介しましょう。

急ぎ足とはいえVer5はこれまでのSIMPLESTERの中で1番の出来になっているかと思います。SIMPLESTER好き、またSTINGER5でこれからブログを始めたいという方にもピッタリと思いますよ〜

SIMPLESTER Ver5の特徴

とりあえず全体像をご覧あれ。Ver5はカード型デザインと「まとまり」を意識して作成を行いました。

11_20150809_simplester5

 

カード型デザインは名刺をヒントにデザインを作成。flexboxレイアウトを用いてデスクトップ画面ではこの様に画像が大きく表示されるようにしました。ただしSTINGER5ではデフォルトではトップページの画像は小さいサムネイルを使用するように設定されているため、綺麗な画像を使用するためにはSTINGER5を一箇所編集する必要があります。これは後ほど方法をご紹介します。

12_20150809_simplester5

 

カード型デザインはホバーすると以前から好評のアイコンが点滅し、画像が大きくなります。インパクトがあるので記事の魅力がより伝えやすいかなと思います。

04_20150809_simplester5

 

個人的にこだわった部分が記事のメタデータ。パンくずやタイトル、日付などSTINGER5標準よりもシンプルで洗練されたデザインにしてみました。

14_20150809_simplester5

 

メニューバーは無駄な要素を一掃し、ホバーするとborderが表示されるだけにしました。子要素も勿論綺麗に表示されます。

03_20150809_simplester5

 

スマートフォンでも綺麗に表示できます。

01_20150809_simplester5

 

関連記事などはカラム表示で少ない領域で多くの記事を見せる事が出来るように工夫してみました。

15_20150809_simplester5

 

カード型デザインで綺麗な画像を表示する

そのままでも機能に問題はありませんが、小さい画像を大きく表示することになるのでデザイン的に汚くなります。SIMPLESTERのCSSだけでは画像サイズを制御出来ないので、親テーマのSTINGER5を直接編集して画像サイズを大きくして綺麗な画像を表示してみまます。

まず外観テーマ編集>に進み、右ペインから親テーマの編集画面へ移動します。itiran.phpを選択し「thumb150」の部分を「thumbnail」に変更します。

005_20150809_simplester5

 

これで保存します。「thumb150」はSTINGER5で設定されたサムネイルで大きさが150pxになっていますが、「thumbnail」にすることでWordPress標準のサムネイルを使用することが出来ます。

006_20150809_simplester5

 

後は設定メディアと進み、サムネイルのサイズを変更します。STINGER5 Ver5では350px辺りがオススメです。

08_20150809_simplester5

 

既に画像などをアップロードしている方は再度サムネイルを作成するプラグインを使用します。おすすめは「Regen. Thumbnails」です。

 

インストールした後にツールRegen.Thumbnailsと進みます。

09_20150809_simplester5

 

後はボタンを押せばサムネイルの再作成が始まります。これで綺麗な画像が表示されます。

10_20150809_simplester5

 

Ver5の美しさを体験すべし

代表的な変化は以上の通りですが、細かな点は結構変わっていてこれまでのSIMPLESTERのどれよりも素晴らしいデザインになっているかと思います。

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

ちなみにこのサイトのデザインがVer5です。どうです?STINGER5に見えないでしょっ

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

SIMPLESTER導入の流れは

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

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

 

 - Ver5 , , , , ,