WordPressの外観をレスポンシブのテーマに替えてみた話。


WordPressの外観、テーマと言われるテンプレートは数千種類もあることはご存知の方も多いと思います。
このブログのテンプレートは2007年に始めてから数年後に1回だけチェンジしました。
それを昨日まで(6年半の間)ずっと使わせていただいていました。

そんな古いテーマだったので、当然ながらPC用オンリーでして、その後仕方なくスマホ用のテンプレート・プラグイン(WPSmart Mobile)をインストールして、PC、スマホのユーザーエージェントでテンプレートを切り替えていたのですが・・。

飽きました。

というのも、いままで使っていたPC用のテーマが左右3カラム(メイン+右カラム2つ)でしたが、最近のWebサイトは、ほぼフラットで、ブロックの余白もゆったりとしたデザインで、フォントサイズも高解像度化にともなって大き目になってきている傾向が顕著で、どんどん違和感が強くなってきてしまいました。

・・・ということで、重い腰を上げました。

今回、新しく切り替えたテーマはフレキシブル・レイアウト系なので、グリッドっぽくないし、あまりフラットなデザインではないですが、昨日まで使っていたテーマに比べればかなり進歩しています。
少なくとも「レスポンシブに替えた」という点は満足しています。

備忘録として、やった作業を簡単に書いておきます。

1.テーマを探す
最近のテーマはレスポンシブが主流なので、それほど苦労はしませんでした。
苦労といえば、私が求めていたのはメインイメージもないシンプルなものだったのですが、意外にそれが少なかったこと。
シンプルで右にサイドバーがあって、レスポンシブを条件にしました。
Wordpressの管理画面>外観>新規追加 で探し、このブログは「pacify」というものに決め、ダウンロードしました。

2.DLしたテーマから子テーマを作る
この子テーマを作ってカスタマイズすれば、親テーマがバージョンアップで更新されても、カスタマイズした仕様は守られるというものです。
昨年、
今さらですがWirdpressのカスタマイズ「子テーマ」作成の話。(2015/04/24)
という記事を書きましたが、ご存じない方はご参考にどうぞ。

カスタマイズするファイルについては、上記の記事と重複するのでここには書きませんが、子テーマのスタイルシート(style.css)はイジリ倒しました。

テーマ(テンプレート)を替えて心配だったのは、ガラッとイメージを変えたときの違和感でしょうか。
まあ、特に人気のあるブログではないので(悲)、どう変わろうと影響はないはずですが、とりあえずいままで使っていたCSSのリンク色(赤色)などは、今回もスタイルシートで踏襲することにしました。
その他、地色(削除とか)、囲みの線(影をトルとか)、フォントサイズなどなど。
さすがに最近の流れとはいえ、見出しなどのフォントサイズはデカ過ぎる感があったので、サイズダウンしました。

3.その他(アフィリエイト広告を選びなおす)
アフィリエイトをやっている人にしか関係ない話ですが、テンプレートに直接書き込んだアフィリエイト広告については注意しました。

今回からテーマ(テンプレート)がPCもタブレットもスマホも共通になるので、レスポンシブ対応の広告にするか、固定サイズであれば左右300ピクセル以下のものでないと最小画面になったときに画面からはみ出てしまいます。
Adsenseはレスポンシブ対応の広告がありますが、amazonには未だないので選択肢がそれほどありません。

スクリプトでユーザーエージェントを判断して広告をPC用とかスマホ用とか、出し分けをされている方も多いようですが、私はレスポンシブ対応の広告と、左右300ピクセル+それ以下の広告を貼ることにしました。

結局2時間ぐらい試行錯誤して、やっとレスポンシブにてリニューアルしました。

(追伸)
pacify のテーマでヘッダー(header.php)に記述順のミスがあると思います。
オリジナルの記述

<header id="masthead" class="site-header" role="banner">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'pacify' ); ?></a>
<div id="headersection" class="hfeed site">

div id=”headersection”の位置が悪く、1つ上のリンクタグを含めるように、

<header id="masthead" class="site-header" role="banner">
<div id="headersection" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'pacify' ); ?></a>

の順が正確かと思います。


コメントを残す

メールアドレスが公開されることはありません。