ワードプレスの子テーマでCSSをカスタマイズしよう！。CSSと聞くと難しく思うかも知れませんが大丈夫です。今回は、ワードプレスの子テーマでCSSをカスタマイズしよう！について書いていきます。
「子テーマ」が適切に設定されていれば「子テーマ」とブログのカスタマイズが可能です。この際、基本的には「親テーマ」は変更されません。また「親テーマ」を更新しても「子テーマ」でカスタマイズした内容は保持されます。
| 結論を先に話ししておきます |
| カスタマイズのページとしてテーマの「子テーマ」を準備したのなら、そのスタイルシート(CSS)を変更します。ここでは「子テーマ」の「style.css」を編集して、テーマのフォント、書体を見やすいものに変更します。
また小規模でビジネスサイトの作成をしてみるのもありかと思います。ワードプレスでビジネスサイト用のテーマを使って中小規模のビジネスサイトを構築します。テーマには「DIVER」を使用します。
前回投稿した「ワードプレスをカスタマイズする前に子テーマを準備！」も参考にしてみて下さい。 |
目次はコチラ
【探偵事務所のWebサイト作り(動画付き)】
私が例として、探偵事務所のWebサイト作りに着目した理由について、特に理由などはありません。あくまでも例として捉えて下さい。まずは専門的な職種で開業している個人あるいは少人数のグループを想定しているとしましょう。
具体的には、人やモノを探すことを業務とする数人規模の探偵事務所です。会社や商品の仕事における内容を知って貰うWebサイトには「会社の強み」「商品の特徴」「従業員の教育育成」などのコンテンツを載せることが重要です。
また仕事を依頼するにこと足りると感じて貰えるような「信頼性」「清潔感」「堅実性」の他、業種によっては、スピード感などのイメージもWebサイトの重要な要素となる訳です。そのこともしっかり覚えておきましょう。
| Webサイトの構築、サイトのデザインでは、これらの要素の中で、どの要素をイメージ化していくかを明確にすることと、特に何をアピールするのかを絞り込んで、それをデザインに反映することが重要です。 |
カスタマイズする為には、仮のものでも構わないので、コンテンツを準備しておいて下さい。ワードプレスのコンテンツデータは、データーベースに保存されているので、テーマをカスタマイズしてもコンテンツが変更されることはありません。
| Webサイトのページ構成(探偵事務所の場合) |
| 探偵事務所を例に、図解にしてみました。下記の図解はあくまでも一例として載せておりますので、そのまま鵜呑みにしないで下さい。探偵事務所によっては、もっと細かく詳細を分けているかも知れませんから。
|
ではここで動画を視聴してみて下さい。題して「【衝撃映像】地獄のガチ喧嘩に発展した尾行調査の全貌を公開します」です。下記の動画は「Webサイト作成に関する動画ではありません」のでご注意下さい。
【ビジネスサイト用のベーステーマ(DIVER)(動画付き)】
まず初めに、ビジネスサイト作りに活用できそうなWebサイト制作のベースになるワードプレステーマを選びましょう。ここでは、私が実際にブログだけではなく、Webサイト作成にも使っている「DIVER」のワードプレステーマを紹介します。
| ワードプレステーマの「DIVER」とは |
| 「DIVER」は、初心者でも簡単に利用することが可能な「高品質・高機能」なハイスペックのワードプレステーマです。今まで、企業に納品してきたノウハウと技術を全ての人に利用可能なワードプレステーマとして最適化してきました。
知識だけで作られたテンプレートは山ほどある訳ですが、実績に基づいて作られた内部構造や無駄の無い美しいデザインについては、とても洗練されています。私達だけの知識だけでなく「DIVER」を利用して頂いている全ての方の実績に基づくノウハウが詰まっています。
ではここで動画を視聴してみて下さい。題して「【WordPress】ブログテーマ「Diver」各種カスタマイズ方法を詳しく解説！」です。
|
【子テーマでCSSをカスタマイズする】
「Diver」のテーマは、Webサイトをカスタマイズする機能を多く備えています。本格的なカスタマイズをおこなう為には、どうしてもテンプレートファイルを編集することが必要になってきます。
まずはページ全体のフォントを変更してみましょう。ページに使用されている「フォント」「書体」「フォントサイズ」「色」などを変更する方法については、実際に「DIVER」を使ってみないと分からないと思います。
「子テーマ」の方でも、同じ要領でCSSを変更します。「子テーマ」の「style.css」の変更が「親テーマ」の「style.css」の同じ部分を書き換えてくれます。前回の投稿でも「子テーマ」について投稿していますので参考にしてみて下さい。
| 前回投稿した「ワードプレスをカスタマイズする前に子テーマを準備！」も参考にしてみて下さい。 |
| 下記の図解で紹介している内容は、ワードプレステーマの「DIVER」を用いて説明している内容となります。予めご了承下さい。 |
- 下記の図解は、当ブログ(miブログ)で使用しているワードプレステーマ「DIVER」の「親テーマ」です。「オレンジ色枠」で囲まれているボックス内の文字が「diver」となっていることが分かります。
- 下記の図解は「子テーマ」です。「赤色枠」で囲まれているボックス内を見ると「diver_child」となっていることが分かるかと思います。
|
DIVERの場合 |
| ワードプレスのダッシュボードにログイン後、サイドメニューの「外観」→「テーマエディター」を開きます。開いた段階で「子テーマ」に切り替わっていなければ「編集するテーマを選択」ボックスで「子テーマ」を選択し、選択ボタンを押して下さい。
また「style.css」を選択すると「子テーマ」のCSSが編集モードになります。この章では「子テーマ」のCSSには、テーマ名及びテンプレートとして参照する「親テーマ」のテーマ名しか記述されません。 |
- 下記の図解は「緑色枠」で囲まれている「diver_child」の中の「style.css」だと言うことが分かります。「赤色枠」で囲まれている中には「diver_child」と記載されています。
- 下記の図解で「桃色枠」で囲まれているボックス内には「diver_child」と表示されており「オレンジ色枠」で囲まれている枠内には、インストールされている情報が記載されています。
また「緑色枠」内には「この子テーマは、親テーマのテンプレートを引き継ぎます」と記載されています。
- 次に「水色枠」で囲まれているボックス内には「親テーマ」である「diver」と記載されており「黄色枠」で囲まれている中には「親テーマ」内にインストールされている情報が沢山あることが分かります。
CSSを変更したのなら、ファイルを更新ボタンを押して「子テーマ」のWebサイトを表示し、フォントデザインが変更されたのを確認してみましょう。フォントを変更すると、ページの細部でレイアウトが「ずれる」ことがあります。
子テーマの変更が反映されない時(動画付き)
「子テーマ」のCSSファイルを編集して保存したとしましょう。その後、その結果を確認してみようと、Webブラウザーでページを読み込む訳ですが、ページは編集する前の状態です。この場合、変わらないと言うことです。
その原因が何だか分かりますか？答えは簡単です。それは「編集のミス」です。保存する際、エラーメッセージが表示されていませんか？CSSをたった1文字間違えただけでも正しく表示されません。
もう一つの原因は、Webブラウザーの「キャッシュ」です。Webブラウザーでは、一度表示させたページをキャッシュと言う特別の方法で保存します。これは次に表示する時に素早く表示する為の仕組みです。
| 上記の場合、Webブラウザーは、キャッシュしているページ情報と、今回、読み込もうとするページ情報が全く同じかどうかは調べません。 |
ではここで動画を視聴してみて下さい。題して「【超入門】初心者必見！CSSが効かなくて困った時のチェック項目リスト」です。
もし同じであれば、キャッシュを使って表示してしまう訳です。この為「子テーマ」の変更が反映されないのです。これらを解消する為には、表示するWebブラウザーで過去(1時間～24時間)のキャッシュをクリアする必要があります。
では念の為に「グーグルクローム」と「マイクロソフトエッジ」の各ブラウザにおけるキャッシュのやり方を図解を用いて説明してみたいと思いますので、まずは下記の図解を参考にしてみて頂ければと思います。
グーグルクローム側のキャッシュ方法
- 下記の図解は「グーグルクローム」のWebブラウザ画面です。キャッシュをおこなう際、右上部の「赤色枠」で囲まれている「縦3本線」のところをクリックしてみて下さい。
- するとプルダウンメニューが表示されます。その中の「オレンジ色枠」で囲まれている「履歴」を選択すると、左側に次のプルダウンメニューが表示されます。「黄色枠」で囲まれている「履歴」を押しましょう。
- 次の画面では「緑色枠」で囲まれている「閲覧履歴データの削除」が表示されます。そこを押して下さい。
- すると「紫色枠」で囲まれている「閲覧履歴データの削除」画面が表示されます。次に「黄色枠」で囲まれている「基本設定」を選択して下さい。「緑色枠」で囲まれている箇所を見ると、チェックが入っているところがあります。
ここは、私が実際に設定している画面です。最後に「オレンジ色枠」で囲まれている「データを削除」を押しましょう。チェックが入っていないCookieと他のサイトデータについては、定期的に実行している為、ここではチェックを外しています。
| キャッシュは定期的におこなった方が良いです。私の場合、毎日おこなうようにしています。キャッシュをおこなわないでいると、Webサイトでもブログでも、上手く表示されないことが多々あります。では続いて、マイクロソフトエッジ側のキャッシュ方法も見ていきましょう。 |
マイクロソフトエッジ側のキャッシュ方法
- 下記の図解は「マイクロソフトエッジ」のWebブラウザ画面です。キャッシュをおこなう際、右上部の「赤色枠」で囲まれている「横3本線」のところをクリックしてみて下さい。
- するとプルダウンメニューが表示されます。その中の「オレンジ色枠」で囲まれている「履歴」を押してみましょう。
- 次の画面で今度は、上部の「紫色枠」で囲まれている「横3本線」のところを押してみて下さい。
- 次に「桃色枠」で囲まれている「閲覧データをクリア」を押しましょう。
- すると閲覧データをクリア画面が表示されます。「水色枠」で囲まれているボックスをクリックすると、プルダウンメニューが表示されるので、その中の「緑色枠」で囲まれている「すべての期間」を選択しましょう。
- 最後に「桃色枠」で囲まれているチェックボックスには、全てチェックを入れて「黄色枠」で囲まれている「今すぐクリア」を押すと完了です。
「グーグルクローム」「マイクロソフトエッジ」それぞれに於いて、それほど難しく感じなかったのではないでしょうか。覚えてしまえば1分も掛からずに終わってしまいます。本当に簡単です。
今回は以上となります。ワードプレスの子テーマでCSSをカスタマイズしよう！。については理解できましたか？前回投稿した「ワードプレスをカスタマイズする前に子テーマを準備！」も参考にしてみて下さいね。
