読者です 読者をやめる 読者になる 読者になる

App Work StyleのテーマをSTINGER5に変更、そしてカスタマイズ

WordPressで運用しているApp Work StyleのテーマをSTINGER3+CANDY CRAZYからSTINGER5に変更した。変更前のデザインに特に不満があったわけではないけど、自分なりにカスタマイズしていこうと思った時、かなり仕上がっているCANDY CRAZYを使うより素のstinger5からやったほうが勉強になるし、やりがいもあるかなと。

最初は最近よく目にするSimplicityを第一候補に検討してたけど、iPadを横向きにしたときにサイドバーが表示されないので断念。Gush2も検討してて、iPhoneiPadでの表示は希望どうりだったけど、デザイン的にSTINGER5のほうが好みだった、というか白地のキャンパスに近いイメージがSTINGER5だった。

個人的なSTINGER5の難点といえばOGPへの対応だったけど、これは対応しているのかしていないのか知識不足のためよくわかっていない。とりあえず、App Work Styleが下記のように表示されているのでよしとする。


iOS 8の通知センターにアプリのウィジェットを追加する | App Work Style

カスタマイズ用の子テーマを作成

まずやったことはカスタマイズ用の子テーマの作成。こちらのサイトを参考にさせてもらった。


SEOに強いWPテーマStinger5の子テーマを作成する方法!

やったことはこのサイトの通りだけど、「stinger5_child」というフォルダを用意して、なかに「images」というフォルダとstyle.cssというファイルを放り込んで「themes」にアップ。function.phpはまだよくわからないのでパスした。style.cssの中身は下記の通り。

/*---------------------------------------------
Theme Name: stinger5_child
Template: stinger5ver20140902
Description: Customize css for stinger5
Author: aalto
Author URI:appworkstyle.com
Version:20140902
---------------------------------------------*/
@charset "UTF-8";
@import url('../stinger5ver20140902/style.css');

サイドバーのNEW POSTを下に移動

こちらのサイトを参考に、デフォルトでは一番上に表示されるNEW POSTを下に移動した。

3分で終わる!stingerのサイドバー並び順を入れ替える方法 | cv0629

親テーマのsidebar.php

  <div id="mybox">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : //サイドウイジェット読み込み ?>
    <?php endif; ?>
  </div>


 <!-- 最近のエントリ -->

の上に持ってきた。

NEW POSTの要約文を削除

NEW POSTのほうはもう少しスッキリさせたかったので要約文を削除した。参考にしたのは下記のサイト。


STINGER5のサイドバーとスタイルシートをカスタマイズ | 株式会社シスアナコム

これもそのまんまだけど、newpost.phpの下記の部分を削除した。

<div class="smanone">
  <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
</div>

サイトのタイトルの文字を少し大きく

いずれ、ヘッダー画像を作成したりロゴ画像にしたりしたいけど、取り急ぎ大きさを変えることに。子テーマのstyle.cssに下記のコードを挿入。

header .sitename {
	font-size: 32px;
}

検索バーの色を変更

背景と同化していたので検索バーの色を変更。子テーマのstyle.cssに下記のコードを挿入。

aside #s {
	background-color: #fff;
}

aside #searchsubmit {
	background-color: #1e73be;
}

ポチレバのデザインを修正

以前紹介したようにポチレバのデザインをちょっとだけ修正。子テーマのstyle.cssに下記のコードを挿入。

.pochireba {
	background: #f2f2f2;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1em !important;
	margin: 1em;
	line-height: 1.5em;
}

AppHtmlのデザインを修正

AppHtmlで出力したコードを少しいじっておすすめアプリのリストに使用していたが、テーマを変更するとアイコン画像の大きさが統一されなくなった。なので、htmlないでのcssの指定をやめて、子テーマのstyle.cssに下記のコードを記入すると上手くいった。

img.appIconImg {
	height: 60px;
}

まとめ

とりあえず自分的に最低限のところはやったつもり。ただ、やりたいことはもっともっとある。スタートしたばかりのブログで記事も増やしていきたいし、テーマのカスタマイズにかける時間のバランスをどのようにとるのか悩ましいところ。