ブログのテーマを更新しました！

はい。
今回はブログテーマ(テンプレート)更新のお話。

8月下旬からボチボチと作り始めていた新しいテーマですが、とりあえず公開出来る状態になったので更新しておきます。その他にもコチョコチョと弄ってみましたが、まだ修正が必要な部分があるので、後は運営しながら随時変更していきたいと思います。

大きな変更点としては、PC用のデザインを可変グリッドからノーマルな表示に戻してみました。

その他の変更点をザクっとまとめてみます。

基本的には軽量化

今回の更新で、目標の一つとしていたブログ全体の軽量化ですが、今までのテーマより多少は成果があったように思います。

具体的には、ベースとなる画像サイズの見直しやPHP処理の削減等。jqueryに関しては、PCテーマには使用せず、スマホテーマでチョッピリ使った程度。

今まではwordpressに内包されているjqueryを使用していましたが、PC用(IE)を切り捨てられるので、2.x系のjqueryを外部から読み込んで使ってみました。

作業工程の中で、ページ遷移を減らしてみようと思い、urlも綺麗に変更してくれるpjaxを組み込んでみたんですが、導入自体は簡単に成功したものの、予想通りアドセンスの表示が解決出来ずに断念。

プラグインの削除

軽量化の一つとして、今まで定番で使っていたAll in One SEO Packを使わなくてもいいように、ヘッダー分部の記述をガリガリ条件分岐させて書いてみました。

All in One SEO Pack自体に不満は無かったんですが、P3で計測してみたところ、プラグインの中では最も読み込みに時間が掛かっていたので、思い切ってチャレンジしてみました。

ヘッダー分部を弄るついでに、検索エンジンにパンくず表示出来る様に最適化してみたつもりですが、この辺りは様子を見ながら運用してみます。

All in One SEO Packによって表示されていたコード類は、カスタムフィールドや抜粋で代用。

ブラウザとデバイス別の対応

今回一番時間が掛かったのが、この項目です。ブラウザに関しては、今まではUserAgent theme switcherというプラグインを使って各IE用のテーマを表示させていました。

ただ、今回は極力プラグインを使わないのが目標だったので、少し面倒ですがテーマ内のCSSにてIE7以上は同一テーマで表示出来る様に変更しました。

で、これに絡んでくるのがタブレットの問題。

自分はタブレットを持ってないので分からないんですが、タブレットを使用している方々が、縦持ちで使うのか横持ちで使うのか…。検索をかけて調べてみても答えは様々で…。

結論としては、縦横どちらでも対応出来るようにしておこう。

という事で、基本的にはPCサイト(横持ち用)を表示して、フッター分部に縦持ち用のスイッチを付けておきました。縦持ち用のテーマに関しては、スマホテーマを作る際にモバイル判定で条件を分岐して作製。

PCとスマホのテーマは別々に作ってあるので、モバイル判定の条件分岐でタブレット縦持ち用のテーマが表示されるハズです。

大変だったのがAndroid対応

スマホテーマを作って行く中で大変だったのがAndroidの記述。使用できるフォントの関係上、iPhoneとAndroidの表記を分けたい部分があったんですが、Androidの標準ブラウザだと何故かSafariと判定されてしまう。

一方でAndroid ChromeではきちんとAndroid判定されてるし。

しばらく解決策を探してみたんですが、答えが出ず。色々と考えるのも面倒なんで、手っ取り早くCSSのfont-familyに記載する順番を「英字フォント(共通)⇒Android用⇒iPhone用」の順番で記載して問題解決。

で、問題解決出来ないのが表示の遅さ。

手持ちのAndroid端末から閲覧すると、表示されるまでにエライ時間が掛かります。iPhoneだとスムーズに見られるんですが…。手持ちの端末が悪いのか、テーマが悪いのか…。

数ヶ月前にサーバーの設定をゴチャゴチャと弄ってから遅くなった気もするんですが、その時に何をしてたのか完全に忘れてしまって答えは見つからず…。

これは、今後の改善点の課題とします。

ブログテーマを更新のまとめ

色々と書いてみましたが、細々と変更しているので運営しながらの改善点が沢山出てきそうです。ただ、作業開始当初の目標だった分部は、とりあえずながら完了できたかと。

後は、文法のチェックをかけながら修正。
最終的にコードをminify化して終わりにしたいです。

それにしても、様々なデバイスやブラウザに対応させるのは大変ですね。こんな作業をサラっと出来てしまうエンジニアの方々、本当に凄いと思います。

話は変わりますが、更新作業中にAndroid Chromeをアップデートしてしまったらしく、ブラウザの表示が突然「中華フォント」に変わってしまい、数時間スマホ用のCSSの記載内容をチェックしたりでグッタリです。

この案件も何とかしないと…(汗

とにもかくにも、今回は定番として使ってきたものを変更している点が多いので、後は運営しながら様子を見て。

残っている作業はボチボチと処理していきますので、表示に関して不具合等がありましたら、お手数ですが教えて頂けるとありがたいです！！

それでは、失礼致します。

最後まで読んで頂き、ありがとうございます！！

今回の投稿と同じ「WordPress」にある前後の記事は、下記のようになっております。お時間がある時にでもチェックして頂けると嬉しいです！！

また、11月1日現在「 ガジェット 」には「 174 件」の投稿があります。カテゴリー内での人気記事や、ブログの最新記事リストも記載しておきますので、宜しければ合わせてご覧くださいませ。

アクセス減少はペンギンの影響？パンギンで確認と検証！
次回記事アクセス減少はペンギンの影響？パンギンで確認と検証！
2014年の秋に実施されたという、ペンギンアップデート3.0…
WordPressやWEBサイトはCSSの書き方でも高速化できる？！
前回記事WordPressやWEBサイトはCSSの書き方でも高速化できる？！
手っ取り早くWordPressを高速化するのであれば、使用す…

このエントリーをはてなブックマークに追加 シェア＆フォローして頂けると嬉しいです！
タグ:『』｜Posted By MACO


『ガジェット』の新着記事 『WordPress』の人気記事『当ブログ』の新着記事
コメント
お気軽にコメント下さい
  1. 野口明人 より:
    2014年11月24日 AM 11:05

    すごく素敵なデザインのWordPressのテーマだと思いました。

    読みやすいし、表示も速い。出来れば欲しいぐらいです。

    僕はテンプレートサイトで購入したものを使っていますが、購入したものだとどうしても表示スピードが重いです。こういうサイトを自分で作れるようになったらいいなぁ…。

    Adsenseの配置デザインも参考にさせてもらいます。

    このテーマのテンプレート、配布する時があったら、絶対に使いたい！

    返信
    • MACO MACO より:
      2014年11月26日 PM 18:08

      コメントありがとうございます！！
      お返事が遅くなり申し訳ありません！！

      今まではグリッドデザインで運営していたんですが、色々と改善したくてシンプルな物を作ってみました。まぁ、最終的にはレンタルサーバーを替えないと、どうにも解決出来ないような気もしてますが…(^_^;)

      最近は、色んなデバイスがあるので、対応させるのが大変ですよね。

      自分は、有料テーマを購入した事がないんですが、テーマ作成の労力を考えると、無料でSEO最適化済みのテーマを導入して、デザインを弄るだけの方が、記事を書くだけに集中できるのかなぁ。なんて思ったりもしています。Adsenseは、色々と試しながらの運営ですが、今のところこんな感じで落ち着いています。

      それにしても、沢山のサイトを運営されてるんですね！！
      自分は、このブログだけで手一杯です(^_^;)

      テーマを配布できる程の知識は無いので、配布の可能性はゼロに近いですが、そう言って頂けて嬉しいです！！

      ありがとうございます！！(^^ゞ

お名前(ペンネーム)

あなたのBLOG URL ※無記入でもOK！

コメント記入欄

※コメント欄の『利用規約』を読み、本規約の内容を承諾してから送信下さい。
※書き込んだコメント内容は、管理者の認証を受けた後にブログへ表示されます。