2021年6月にWordPressでブログサイトを始めた者です。超初心者向けの本を買って、ある程度WordPress仕組みを理解したので、見た目のカスタマイズをしようと頑張りました。ネットには「初心者向け」「コピペするだけ」と記載がある記事をたくさん拝見しました。しかし、全然うまくいきません。
そもそもhtmlとcssの違いや子テーマと追加cssの違いもわからない。コピペするだけと書いてあるのに、どこにコピペしたらいいかわからない。まずは基礎の基礎の基礎を調べるところからのスタートでした。
自分のブログサイトを壊してしまって元に戻せなくなったり、レイアウトが崩れたり、反映されなくなったり、ワードプレスは本当に難しいです。今回はそんな私と同じ超初心者の方にわかるように、htmlとcssをコピペして見た目をカスタマイズする方法と、ハマってしまう注意すべき罠について説明したいと思います。
htmlとcssとは何？
HTMLとは「Hyper Text Mark Language」の略で、Webページの土台となるファイルを作成する言語です。Webページに表示したい文章を「<」と「>」で挟まれた「タグ」と呼ばれる文字列で囲んで書いていきます。CSSとは「Cascading Style Sheets」の略で、文章の見た目を装飾するための言語です。
はい。わからないですよね。すごく簡単な言い方をすれば同じようなものです。両方ともWebページを作るための言語です。すべてhtmlで文章を書くと恐ろしく言語が長くなってしまうため、省略するためにできたのはcssというだけです。
例えば、
これは例文です。
という文章をhtmlで書くと
<p>これは例文です。</p>
となります。
cssは装飾でしたよね。この文章の見た目をカスタムしようとするとき、cssというものを使うと便利という理屈なわけです。実際にカスタマイズしてみると
これは例文です。
はい。青い枠で囲んでみました。
このとき使ったhtmlは
<div class=”box26″>
<div>
<p>これは例文です。</p>
</div>
これは”box26″という青い枠の装飾を使うよ！って意味です。
では～このhtmlを自分のサイトに貼り付ければ、同じような見た目になるんだ！っと思う方もいると思います。私も最初そうでした。ネットで検索して見つけたやつを貼り付けてました。
残念ながら結果は同じ見た目にはなりません。
“box26″という装飾データを自分のサイトに教えておかないとhtmlが反映されません。自分のサイトに教えるために使うのがCSSです。
別に”box26″という名前じゃなくでもいいです。”aoiwaku”でも”hakodayo”でもいいんです。”box26″有志の方が作った装飾データの名前なんです。
htmlとcssはどこに貼り付ければいいか
上の説明を読んでも意味がわからないので、貼り付ける場所だけ知りたいという方へ
まずはcssを貼り付けます。cssを先に貼り付けないとカスタマイズは反映されません。
ネットで調べると追加cssや子テーマやstyle.cssに貼り付けてください。と記載されているのを見たことがあると思います。まず親テーマであるstyle.cssには貼り付けない方がいいです。テーマを更新するとカスタマイズデータが飛んでしまうし、元に戻せなくなると壊れます。
追加cssと子テーマは何？違いは何？と思う方も多いとですよね。大雑把に言えば同じです。どちらに貼り付けても同じです。私の場合は文章のカスタマイズは追加cssに貼り付けています。
まずネットで見つけたカスタマイズのデータを見つけたら、そのプログラム文字列がcssなのかhtmlなのか確認します。
①CSSを貼り付ける
プログラムがcssだと確認したら、WordPressの【外観】→【カスタマイズ】に進み
追加CSSに貼り付けます。
②htmlの貼り付け方
CSSを貼り付けたら、htmlを記事に貼り付けます。WordPressはブロック内に文章を書いていきますが、何もないブロッククリックすると、右側に黒い＋があります。
クリックすると以下のメニューが表示されます。
カスタムHTMLを選択して、そこにHTMLを貼り付けます。
終わりです。
これで文章の見た目等をカスタマイズすることができます。
貼り付けた後に反映されるまで時間がかかる
貼り付けたので見た目が反映されなくて私も困りました。いろいろな原因があるので必ずコレだと断言するのは難しいです。よってカスタマイズした直前にしたことを確認することが問題解決の近道になります。WordPressで発生した不具合には必ず原因があります。
まずは焦らず１歩づつ確認していきます。
初めて見た目のカスタマイズしたという方へ
先ほどお話した通り、まずは確認です。
- コピペしたものがhtmlかcssを確認する
- どこに貼り付けたのか確認する
私の場合は最初に詰まったのは上記の内容をよく確認していなかったので、反映されませんでした。
対処法としては、cssは【外観】→【カスタマイズ】→【追加CSS】と進み、追加CSSに貼り付けます。
htmlはブロックの「＋（ブロック追加）」からカスタムHTMLを開いて貼り付けます。そんなの出てこないよって方は、一度Enterボタンを押して新しいブロックを出してください。＋のマークが出てくるのですぐわかります。
貼り付ける場所はわかっているという方へ
なんどかカスタマイズした経験はあるので、貼り付ける場所はわかっているけどなぜか反映されない。
私も何度も経験しました。
結論はキャッシュでした。少し時間をおいて待てば、反映されるようになります。
おそらく、目次や箇条書きなどの文章などは崩れずに表示されているけど、装飾した部分は反映されてないのではないでしょうか？私の場合はまさにこのパターンが多かったですね。
ネットでGoogle検索して見つけたhtmlとcssを、記事の記載通り貼り付ければ
ほぼほぼ大丈夫です。
プラグインを入れたらおかしくなった
プラグインのエラーや機能が重複してしまうことはあります。プラグインが原因で発生したものなら、プラグイン名と症状をGoogleで検索すると事例がたくさんあるので、すぐに原因が判明します。
また私は目次のプラグインを入れているのですが、cssの目次のカスタマイズとプラグインのカスタマイズの両方が反映されて崩れてしまったパターンもありました。
この場合はプラグインの表示をOFFなどにすることによって対応しました。
コピペするhtmlとcssはクラス属性があるものを選ぶ
クラス（class）とID（id）はタグの中に記述できる属性の１つで、すべてのタグを指定することができます。HTMLでクラスやIDを割り振っておき、CSSと紐づけることでその部分だけデザインを変えることができます。
要するにネットで参考にするものでも、htmlを貼り付けるものにclass
という記述があるものを選んでおけば、とりあえず大丈夫です。htmlに以下のclassという文字があればOKです。
<div class=”box26″>
<p class=”blue”>
たまにclass属性がないものがネットにある場合があります。
以下のようなhtmlです。
<ul>
<li>例文１</li>
<li>例文２</li>
</ul>
<ol>
<li>テスト１</li>
<li>テスト２</li>
</ol>
私はそのままcssをコピペして上記のhtmlを使おうとしましたが、サイドバーの箇条書きが崩れました。
ネットに置いてあるものが全部使えるとは限らないので、注意が必要です。
