KatsuhiroBlog

妻が大好きなシステムエンジニア。IT、ブログ、投資を中心に発信します。

ブログ

【WordPress】テーマのカスタマイズ方法【コピペでOK】

投稿日:2019年3月12日 更新日:

  • WordPressのテーマをカスタマイズしたいけど、やり方がわからない。
  • プログラミングも得意じゃないから、よくわからない。
  • WordPressのテーマをカスタマイズできる便利なツールはないかな?

こういった疑問にお答えします。

結論から言うと、「真似したいサイト」と、「Google Chrome」あれば、コピペでOKです。

「え、コピペなんてズルい。」「自力でカスタマイズしなきゃ!」と言う人もいるかもしれません。

しかし、そもそも、「WordPressのかっこいいサイトがある!」「同じようにカスタマイズしたい!」と最初に思ったのではないでしょうか?

このKatsuhiroBlogもWordPressを使ってますが、テーマを部分的にコピペでカスタマイズしてます。

そうです。あくまで真似したい部分部分的にコピペすればいいのです。

スポンサードサーチ

プログラミングなしで出来るWordPressのテーマのカスタマイズ方法

以下の順番で進めていきます。

  1. 真似したいサイトに移動しよう
  2. 「Google Chrome」でF12を押してみよう
  3. WordPressのテーマをカスタマイズしよう

真似したいサイトに移動しよう

まずは、真似したいサイトへアクセスしてみてください。アクセスする際は、「Google Chrome」を使ってください。今回はこのKatsuhiroBlogを参考にしてみます。

「Google Chrome」でF12を押してみよう

次に「F12」を押してみましょう。画面の右側に難しそうなものが出てきましたね。

この右側を「Chromeの検証機能(デベロッパーツール)」と呼びます。サイトがどういったプログラムで出来ているか教えてくれるツールです。

WordPressのテーマをカスタマイズしよう

今回はこの「Chromeの検証機能(デベロッパーツール)」を使って、WordPressのテーマをカスタマイズしてみます。

まずは右上の矢印をクリックしてください。

次に真似したい部分を選んでください。例えば、このリストを選びましょう。

そうすると、右側にプログラムが出てくると思います。これは先ほど選んだリストがどういったプログラムで書かれているかが表示されています。

試しに、「background-color」を削除してみましょう。

そうすると、こんな感じに背景色が消えると思います。

これで、「background-color」を変更すると、背景色が変わるということが理解できたと思います。

では次に、WordPressのテーマを変更したいサイトへアクセスして同じように「F12」を押しましょう。同じように右上の矢印をクリックしてください。

今度は変更したい部分を選んでください。例えば数字リストを選択したとします。

右側に選択した部分のプログラムが表示されます。ポイントは、赤枠で囲ってますが、「style.css」が具体的に変更するファイル「.post ol」が具体的に変更する箇所となります。

では、テーマをカスタマイズしましょう。

ダッシュボードから「外観」→「テーマエディタ」を選んでください。

「style.css」が変更するファイルだったので、「style.css」が選択されてることを確認しましょう。

変更する箇所は「.post ol」なので、その文字で検索しましょう。検索時に「.post ol {」で検索すると、ヒットすると思います。ここが具体的な変更箇所になります。

では試しに、先ほど真似したいサイトにあった背景色に変えてみましょう。

真似したいサイトにあった「background-color: #f3f3f3;」を追加してみましょう。追加したら、「ファイルを更新」を押しましょう。

ファイルを更新後に、WordPressのテーマを変更したいサイトをもう一度開くと、御覧の通り、背景色が変わってますね!

※もし、変更されない場合は、「Cookie」「キャッシュ」のクリアをやったから画面を再表示させてください。

最後に

以下の作業を繰り返していけば、きっとプログラムが書けなくても、WordPressのテーマを自分好みにカスタマイズできるようになるはずです。

  1. 真似したいサイトを探す
  2. 「Google Chrome」でF12を押してみる
  3. 真似したい箇所のプログラムを見る
  4. 自分のサイトで変更したい箇所の「具体的なファイル」と「具体的な箇所」を把握する
  5. 真似したい箇所のプログラムを自分のサイトに適用する

みなさんも自分好みにWordPressのテーマをカスタマイズしましょう!

-ブログ

執筆者:

関連記事

「このリンクはまだ評価されていません」を消してみた【作業時間は10分】

せっかくブログを作ったのに、Googleの検索結果に「このリンクはまだ評価されていません」と表示されてしまう。削除する方法はないかな? この疑問にお答えします。 こんにちは、かつひろです。 さっそくで …

【5分で出来る】スポンサー検索の配置方法【Google AdSense】

アドセンスに合格したブログ初心者「有名ブロガーのブログを見るとスポンサー検索の広告をタイトルとか目次に配置している人が多いな。アドセンスに合格したから自分も同じことがしたい!やり方を詳しく教えてほしい …

【初心者必見】TOPへ戻るのデザインを変更する方法【コピペでOK】

TOPへ戻るボタンのデザインを変えたい人「自分のサイトを運営しているが、TOPへ戻るボタンのデザインがダサい。デザインを変更する方法を教えてほしい」 この疑問にお答えします! このKatsuhiroB …

【初心者は知らない】アフィリエイトASPに登録すべき3つの理由【登録無料】

稼いだことのないブログ初心者「アフィリエイトASPってたくさんあるけど、どのサイトに登録すれば良いのだろう?結局、アフィリエイトASPに登録したあとって具体的にどうやってお金を稼げばいいの?」 こうい …

【WordPress】予約投稿で更新日に投稿日より過去の日付が表示される場合の対処方法

WordPressの予約投稿で記事を投稿したら、投稿日のとなりの更新日が過去日付になっていた。カッコ悪い。過去日付になっている更新日を非表示にする方法はないかな? こういった質問にお答えします。 Wo …