DESIGNHACK(デザインハック)

在宅ワーク・デザイン・DIY・フリーランスデザイナー系の記事を扱うブログメディア

ブログテーマをSTINGER5、小テーマをSIMPLESTERに変えてみた

      2015/11/09

今までずっとSTINGER3を使い続けていたんですが、今回STINGER5に切り替えするとともに、子テーマにSIMPLESTERを使ってみました。

今回試したこと

STINGER5のダウンロード/アップロード

だれでも簡単にだれでも簡単にレスポンシブでアドセンスに最適化したブログを始められる定番中の定番、STINGER。

スクリーンショット(2015-11-08 15.44.15)

ダウンロードして、ダッシュボード→外観→テーマ→新規追加でファイルを選択してアップロードします。

STINGER5

SIMPLESTERのダウンロード/アップロード

次に、子テーマのSIMPLESTERをダウンロード。

SIMPLESTERとは

STINGER5という素晴らしい機能の詰まったWordPress用のテーマがありますが、そのSTINGER5をよりカッコよくそしてシンプルにカスタマイズしたテーマがSIMPLESTERです。(引用:http://simplester.degitekunote.com/

What-is-SIMPLESTER

SIMPLESTER

SIMPLESTERのCSS編集

・・・ここまできて、問題が発生。どうやらSIMPLESTERはまだSTINGER5のバージョンに対応していないらしく、アップロードしても「親テーマが見つかりません」状態になってしまいます。

このままでは使えないので、SIMPLESTERのCSSを編集します。

先ほどダウンロードしたSIMPLESTERのCSS内

[css]
@charset "UTF-8";
/*———————————————————
Theme Name: SIMPLESTER-Ver5
Template: stinger5ver20150505b
Theme URI: http://simplester.degitekunote.com/
Description: STINGER5の究極シンプル子テーマです。「シンプレスター」と呼んでやって下さいな。
Author: こふす
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 5.0
———————————————————*/
@import url(‘../stinger5ver20150505b/style.css’);
[/css]

4行目と12行目にある「stinger5ver20150505b」という部分を最新のSTINGERのバージョンに書き換えます。

[css]
@charset "UTF-8";
/*———————————————————
Theme Name: SIMPLESTER-Ver5
Template: stinger5ver20151005
Theme URI: http://simplester.degitekunote.com/
Description: STINGER5の究極シンプル子テーマです。「シンプレスター」と呼んでやって下さいな。
Author: こふす
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 5.0
———————————————————*/
@import url(‘../stinger5ver20151005/style.css’);
[/css]

これで正常にSIMPLESTERが機能するはず。

参考:問い合わせとQ&A SIMPLESTER

タイトルロゴのカスタマイズ

ブログのTOPページを確認すると、デフォルトのタイトルロゴの表示がちょっと小さいように感じたので、サイズを大きく表示するように修正。

[css]
/*header 周り
——————–*/
.sitename img {max-height: 50px;}
[/css]

SIMPLESTERのCSS、36行目の25pxを50pxに変更。(SIMPLESTER推奨サイズ)
これでひと回り大きくなりました。

参考:http://raorsh.com/simplester

サムネイル画像のリサイズ

一番厄介だなと思ったのがこれ。TOPページを表示した時、記事一覧のサムネイルのサイズがまちまちになってしまい、非常に見難くなってしまったのです。

少し調べてみたところ、同じような問題に直面された方がいたので参考にさせて頂きました。

参考:http://axupu.com/simple

今回の改良は以上になります。STINEGR5のままでもスッキリとしたデザインで、悪くないのですが、SIMPLESTERを使えばよりスマートで今っぽいサイトになりますね。

今後もちょくちょく改良していこうと思います。

 

 - HACK