最近ブログデザインに迷走してましたがようやく落ち着いてきました。
やりたかったコト
- PC上で見た場合のカラムを3から2へ。
- スマホ対応WPtouchを使わず、レスポンシブテーマにする。
- オリジナリティを出すために見出し(h1からh6)の装飾。
以上の三点を念頭に毎晩試行錯誤。
WordPressテーマ選び
まずはテーマを決めなければ始まりません。
レスポンシブ、WordPressで検索し、様々なサイトを見て自分好みのテーマを探しました。
そこで見つけたのがCatch Boxです。
カスタムしやすくベーシックなデザインで基本2カラムなテーマです。
公式ダウンロードページ↓
WordPress › Catch Box « Free WordPress Themes
Catch Box
設定の仕方はこちらのサイトを参考に！
無料テーマ『Catch Box』の紹介と設定方法 | WordPressの使い方｜WP初心者入門サイト
設定
ごちゃごちゃしたデザインよりシンプルな感じのものが良かったのでこれに決まりました。
WPtouchは使わない！
WordPressを始めた当初は、テーマEaselとプラグインWPtouchを使用しスマホ表示に対応していました。Google adsenseも表示させ簡単なカスタムはしていましたが、このプラグインは利用者が多いため、オリジナリティが出しづらいなと思うように。
それならレスポンシブテーマしかないと思った訳です。レスポンシブテーマとは閲覧端末の画面表示にテーマデザインが自動的に最適化されるものです。HTML&CSSに強ければWPtouchでもオリジナリティも出せるのでしょうけど当方は完全素人な独学派です。また、PCテーマとWPtouchの両方をカスタマイズするのは大変というのも理由の一つです。
見出しの装飾
通常見出しはh1からh6までのHTMLを利用して使いますが、デフォルトではフォントの大きさや太さが変わるだけです。しかしこれでは単調ですし見栄えが質素です。見出しだけでも装飾されれば記事の印象ががらりと変わると考えました。そこでネット検索の結果、CSS(スタイルシート)の編集が必要と分かりました。
全くの素人だとHTMLをいじるコトが、難しい、よく分からないと挫折しそうですがここを頑張ってクリアすると、カスタマイズが少しづつ楽しくなってきます。
このサイトを参考にしました。
見出しのデザインをCSS（スタイルシート）で変更する方法 | WPナビ
見出しの編集
WordPressのダッシュボードから外観→テーマ編集でスタイルシートが表示されます。
このスタイルシート内のcommet-contentのhタグを編集する訳ですね。
写真はこのブログで使用されている見出しの装飾にカスタマイズされたものです。
comment-content h3のみ編集してあります。
まだまだカスタム研究中！
WordPressのカスタマイズには終わりはありません。自分の納得のいく自分好みのサイトになるよう独学ですが少しづつ勉強しながら進めて行きます！
