文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

心機一転、テーマを変更してみました

あけましておめでとうございます。今年もよろしくお願いします。

f:id:treeapps:20170104180018p:plain

ということで、新年1件目の記事となります。

テーマの変更

このブログの読者様は解るかもしれませんが、ブログのテーマを一新しました。

何故テーマを変更したのか

  • 新年になったので、丁度区切りがついた感がある。
  • 既存のテーマに飽きた。
  • テーマにカスタムcssを適用しすぎて訳が解らないレベルで改造してしまった。
  • レスポンシブテーマにしたかった。

最大の理由は「レスポンシブ対応」です。

皆さんご存知の通り、検索エンジンも完全にスマホに舵を取っているので、そろそろレスポンシブ対応しないとな〜、と思い変更しました。レスポンシブにする事で、PC・スマホの両者でhtmlの内容が一致するので、より安全で検索エンジンにも優しくなります。

あと、変更前のテーマをcssであまりにも魔改造してしまっており、もう元のテーマの原型を留めない程にカスタマイズしてしまいました。あまりにもやり過ぎてしまったので、描画が少し重く、カスタマイズcssもあまりもの行数が増えてしまい、cssの修正が大変になっていました。

そこで今回は以下のテーマを適用し、マテリアルデザイン風に少しcssをいじりました。

CONTENTS - テーマ ストア

テーマのカスタマイズで意識したこと

  • マテリアルデザイン風にすること。
  • ドロップシャドウを画像に適用する。
  • 狭すぎるマージンは避ける。
  • adsenseは全部レスポンシブにする。
  • ごちゃごちゃしすぎないようにする。

こんなところです。このテーマは元々フラットデザインなのですが、やはり個人的にマテリアルデザインのドロップシャドウが好きなので、主に画像に適用してみました。いい感じに立体的になり、おもわずクリックしてみたくなるようにしました。

レスポンシブなので、マージンを多めに取り、スマホからでもリンクやボタンがタップしやすいように、マージンが狭すぎないように、文字が小さすぎないようにしてみました。

キャッチコピー画像

キャッチコピー画像ですが、ドロップシャドウを適用した時に綺麗に見えるように、ちゃんとキャッチコピー画像を作っています。昔の記事はキャッチコピー画像を作っていないので、順次作成していっています。頑張ってPhotoshop Elementsで作成していますが、プログラミングより時間かかりますね。。。

雑感

最近以下のブログを始めました。WPblogでWordPressなのですが、結構色々思う所がありますね。
tech.tree-maps.com

WordPressは何をするにしてもpluginのインストールが必要で、初期状態の機能は実は貧弱で、プラグインは必須です。そのプラグインも種類が沢山あるうえ、プラグイン同士の機能が被ってしまい、あのプラグインでもこの機能があるし、そのプラグインにも同じ機能がある、という事が多いです。

さらに、プラグインがテーマに影響を与えることもあり、プラグイン同士の相性問題、テーマとプラグインの相性問題、に遭遇します。上記ブログはマテリアルというテーマですが、Jetpackをインストールするとコメント機能に影響を与えてしまいました。ソースコードをいじれば回避できますが、WordPressのバージョンアップでソースコードの回収が上書きされて元に戻る可能性があります。

一方はてなブログ等のレンタルブログの場合、プラグインこそありませんが、標準機能が非常に高機能なので、今はてなブログで記事を書いていて、本当に楽だと感じています。WordPressの方がプラグインを駆使すれば確かにそこそこ色々できますが、やはりこのはてなブログの方が圧倒的に楽に記事が書けます。

ということではてなブログとWordPressの両方を運営していくことになりましたが、今後WordPressでブログはやりたくないかなあ、と思っています。唯一WordPressでいいなと思ったのは、テーマが多いことですね。