サイトのコンテンツには、プロモーションが含まれている場合があります。わからないんですけど、初心者でもできる?カスタマイズのカの字も知らないので、色々知りたい!ブログを始めて数年、ブログのカスタマイズを沢山してきました。maipyonこんにちわ。maipyon(@maipyon8)です。カスタマイズに時間を費やしすぎて本末転倒状態になりました。ブログカスタマイズの記事も沢山投稿しています。今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。WordPressテーマを自作してサイトを立ち上げた経験もあります。そんな私が、初心者向けにWordPressのカスタマイズ方法や、カスタマイズ手順について解説していきます!この記事の目次WordPressのカスタマイズより前に、テーマについて理解しよう編集をするなら子テーマを編集しようWordPressのカスタマイズに必要な要素について学ぼうテーマの改修にはCSSの改修が必要HTMLはどこに書くの?コピペで張り付けたのにうまくいかない・・・カスタマイズしたCSSを保存できなくなった場合WordPressでのカスタマイズを怖れずにやってみよう!WordPressのカスタマイズより前に、テーマについて理解しようWordPressのカスタマイズを行う前に、テーマについて理解を深めましょう。良いテーマを使えば、カスタマイズがほぼ不要の状態で使用できるから。カスタマイズに時間をかけることなく、記事の執筆に時間をかけることができるのが一番ですからね。そんなWordPressのテーマは有料のものや、無料のものがあります。私は無料テーマのStinger8→有料テーマのSANGOに切り替えた経験があります。有料テーマのメリット知識がない人でも簡単にサイトを(ある程度は)カスタマイズできるトップページなどの色をワンクリックで変更可能だったりするテーマもある広告は、いちいち検索せずとも広告用のコードを書きこむ場所に書き込めば終わりなど、初心者に嬉しい機能もたくさん分からないことは調べたら大抵出てくるこんな感じに、優れたテーマを使っていると「カスタマイズ、不必要では...?」という人も出てくるんじゃないかなぁと思います。初期設定で自分の思うように色を指定したり、チェックボックスにチェックを入れたりするだけで終わります。優れたテーマ=有料テーマになりがちなので、私は断然有料テーマをおすすめしています。テーマは、WordPressの「外観」→「テーマ」から選択可能です。途中でテーマを切り替えるのは大変なので、できるだけ初心者の頃(記事数が少ないころ)から良いテーマに設定しておくのが良いでしょう。時間をかけて大部分をカスタマイズすることを考えているのなら、いっそのこと最初から綺麗なデザイン+高機能な有料テーマを使ってみるのもいいんじゃない?と私は思っています。編集をするなら子テーマを編集しようWordPressテーマには、「子テーマ」というものが存在します。親テーマの情報を引き継いで、子テーマ上で追記(上書き)できるイメージです。子テーマのインストール方法は各WordPressテーマそれぞれで説明されていると思います。カスタマイズをするのであれば、必ず子テーマを使いましょう。親テーマを編集したとしても、時間が経った時に「更新」が入ってしまいます。maipyon更新の際に、追記したカスタマイズが全部消えます。「テーマ内容ver1.0+カスタマイズA」→「テーマ内容ver2.0」という感じ。子テーマに対しては更新が入らないので、子テーマを編集してカスタマイズするようにしましょう。WordPressのカスタマイズに必要な要素について学ぼうさて、カスタマイズに関して、本題に入りましょう!カスタマイズに必要な要素は、HTMLとCSSの二つです。maipyonHTMLは家の骨組み、CSSは家の壁みたいな感じだと思ってもらえれば!2つを組み合わせてデザインを作っていきます。プログラミングを学習している人なら、PHPという言語の部分を編集することでより高度なこともできます。(めちゃくちゃ凝り性じゃないとPHPはいじらないと思いますが。あるデザインの、ある部分の色を変えたい・・・みたいなことってよくありますよね。いう場合には、CSSのみ編集が必要になってきます。CSSは家でいうなら壁、と例えましたが、CSSで文字の色・サイズ・太さなどなど、デザイン全般ならなんでもできると思ってもらえればOKかなと思います。そのCSSを、WordPressだとどこで編集できるか?と言えば、2か所あります。外観テーマファイルエディターstyle.cssここにCSSがずらっと書かれているので、このページを編集します。maipyon基本的に、style.cssの一番下にコピペで張り付けることが多いと思います!CSSってなに???という人は、より簡単な「追加CSS」という部分に追加するだけの方がいいでしょう。こっちの方が初心者向けです。外観カスタマイズ追加CSSmaipyon追加CSSは何もしていなければまっさらな状態なので、初心者にもわかりやすい!注意どちらも、ファイル全体をバックアップ(コピペでテキストデータを別の場所に保存するなど)しておくのをオススメしておきます。カスタマイズは自己責任です。HTMLはどこに書くの?憧れのブロガーさんのやってるような、きれいな囲み枠を付けてみたいんだけど・・・という人は、CSSだけでなくHTMLも書く必要が出てきます。そのHTMLってどこに書くの?という話ですが、HTMLは単純に記事の中に書けばOKです!以下の画像のように、カスタムHTMLブロックの中に書く感じですね。クラシックエディタを使用している際はテキストモードにすることでHTML形式で見えるので、そこにHTMLをコピペなどして貼り付けるとOKです。この状態ではどのような見た目になっているか分かりませんが、プレビューにて確認できます!maipyon記事内じゃなくて、ブログのヘッダーになにか追加したい・・・とかだと、header.phpをいじることになります。ファイル構成をしっかりと認識すれば、WordPressならどこでも自由自在にいじれます!コピペで張り付けたのにうまくいかない・・・HTMLもCSSもコピペで張り付けたのにうまくいかない・・・!全く見た目が変わらないのですが・・・どうしたらいいですか?という場合が結構あるのですが、これは「キャッシュ」が原因です。サイトを見る際には、できるだけ軽くするために、「キャッシュ」を読み込みます。その結果、「キャッシュを読み込む」=「以前のデザインを読み込む」なので、デザインが変わらないままになります。そのため、キャッシュを削除して、デザイン変更後のページを読み込む必要が出てきます。(chromeを使用している場合)やり方は簡単で、windowsならctrl+F5を押せば完了です!macなら、⌘+shift+rでキャッシュを削除しつつ読み込むことができるので、もしデザインが変わらない・・・という場面に遭遇した場合は、試してみてください!maipyon上記のことを行っても、キャッシュプラグインに邪魔されてうまくいかないこともあります。プラグインを一旦停止するなどして対応してみてください。カスタマイズしたCSSを保存できなくなった場合ほぼ起こることはないのですが、特殊な部分をカスタマイズしている場合には、保存すらできなくなることがあります。間違った内容のコードを書けばエラーがでるので、それを修正すればいいのですが、保存すらできない・・・。そんな時は、WAF設定を見直しましょう。サーバーで設定されているウェブアプリケーションファイアウォールと呼ばれるもので、セキュリティ対策として使われています。CSSを変更して保存が、攻撃として見られてしまっているから保存できない。これはあなたが契約しているサーバーのWAF設定をOFFにしてから保存するしかないので、もしもの場合は見直しましょう。WAF設定が原因で変更できない場面は、外観→カスタマイズにて、テキストを入力して編集しようと思ったらできなくなることが個人的には多いかな~と思います。WordPressでのカスタマイズを怖れずにやってみよう!初心者向けに、カスタマイズの方法について説明しました。今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。【プラグインなし】WordPressの目次の作り方を解説【コピペで簡単】この記事を書いた人maipyonWebクリエイターWeb系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。雑記お問い合わせmaipyonWeb系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。