今回、テーマを The Bootstrap から Stinger の最新版 Stinger 3 に変えてみました。
なぜテーマを変えたのか？
一つはスピード、Stinger 2 を使っているサイトは割と軽快に動いているように感じたので、軽さに魅力を感じました。もう一つは、今までのテーマ The Bootstrap だとモバイルブラウザで横幅がうまく調整できないことがあったり AdSense がうまくレイアウトにハマらなかったりしたので、個々に調整するより一気にテーマ変更で対応できないかな、という目論見によるものです。
Stinger 3とは
ちょっと前から、自分の周りの方々で Stinger に変える方が増えていました。見た目がシンプル、動作が軽快に感じたので、テーマ候補として調べてみました。SEO対策に強い無料WordPressテーマ「Stinger」
「SEO対策に強い」という触れ込みのテーマ。SEO ついては、色々な意見があると思いますし、正直良くわからないのですが、実際にテストサイトに設定して色々と触ってみたところ関連記事の表示の適切さや、プラグインをだいぶ減らせそうなことから Stinger を本格的に使ってみました。
画像の横幅に課題が
いざ使おうと思って、まず最初に引っ掛かったのが画像のサイズ。横幅をフィットさせようとすると 546px にしないとなりません。546px というのは WordPress のデフォルトでの最大横幅サイズ。私の今は 600×450 にしていたのですが、今回のテーマにするにあたり画像のサイズは 546x410px にすることにしました。既に登録済みの画像は、そのうち SearchRegex で変更するとして、まずは、今後の画像サイズを 546px にするために MarsEdit のデフォルト設定を変更しました。
ショートコードが動かない
Stinger3 の ver20130925 ではショートコードを無効化する関数が functions.php の中に定義されているため、ショートコードが動きません。とりあえず、これを何もしないように変更してしまいます。
|
191 192 193 194 195 196 197 198 199 200 |
//ショートコードを外す function stinger_noshotcode( $content ) { if ( ! preg_match( '/\[.+?\]/', $content, $matches ) ) { return $content; } $content = str_replace( $matches[0], '', $content ); return $content; } |
関数呼び出しをテーマ側でやっているので子テーマで直そうにも直せないため、親テーマ側の functions.php を直接変更しました。
|
191 192 193 194 195 196 197 198 199 200 |
//ショートコードを外す function stinger_noshotcode( $content ) { // if ( ! preg_match( '/\[.+?\]/', $content, $matches ) ) { // return $content; // } // // $content = str_replace( $matches[0], '', $content ); // return $content; } |
画像が上にズレる
もう一つの課題として、画像が上にズレてしまうという問題がありました。
style.css の中の以下のコードの margin-bottom を固定値で 20px 上げられてしまっているのが影響しているようです。
|
196 197 198 199 200 201 202 203 204 |
/*---------------------------- 各コンテンツの最大サイズを制限 -----------------------------*/ .kizi img, .kizi .wp-caption { margin-bottom: 20px; height: auto; max-width: 100%!important; } |
キャプションとかの話はあると思うので、.kizi img は対象外にしました。本来は子テーマ側で設定するべきなのでしょうけど、margin-bottom のスタイルを設定させない、というのを子テーマ側で設定するのは面倒だったので親テーマの Style ファイルを書き換えました。
|
196 197 198 199 200 201 202 203 204 205 |
/*---------------------------- 各コンテンツの最大サイズを制限 -----------------------------*/ /*.kizi img, .kizi .wp-caption { */ .kizi .wp-caption { */ margin-bottom: 20px; height: auto; max-width: 100%!important; } |
こんな感じに表示されるようになりました。今のところ他に弊害はでていないようです。
さて、ここまでで最低限のテーマ適用ができるようになりましたので、これをベースに次回はカスタマイズをしていこうと思います。
WordPress 関連のエントリ
インストールや設定変更とデータ移行
プラグイン
バージョンアップ
カスタマイズ
Stinger 3関連
チューニング
MAMPを使ったバックアップサイトの構築
開発関連
最後まで読んでいただきありがとうございます。
左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいですFacebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします
RSSリーダへの登録は こちら からどうぞ。
コメントを残す