【WordPress】CSSとHTMLの知識なしでデザイン見出しを作成する【超初心者】

【WordPress】CSSとHTMLの知識なしでデザイン見出しを作成する【超初心者】

 

コピー&ペーストだけでかっこいい見出しが作れます!

 

記事の更新に慣れてくると、記事のデザインをカッコよくしたいという欲が出てきます。

しかしCSSHTMLも勉強していないため、デフォルトのままで来ていました。

 

でもカッコよくしたいのです!

 

なら勉強をすればいいと思われそうですが、勉強は大変なので後回しにしたいです・・・。

ということで、前回は知識なしで何とかする方法はないかと調べたのでした。

そしてCSSを自動で作成してくれるサイトを見つけました。

詳しくはこちらのページをご覧ください。

デザイン見出しを作成してくれるサイト紹介

 

CSSを書けなくてもコピー&ペーストだけでサイトに組み込むことに成功しました。

実は貼り付け先がどこか分からず、小一時間悩んでやっとうまくいきました。

私と同じ超初心者の方用に、やり方を記録しておきます。


CSSジェネレーターで好みのデザインを作成する

 

今回は「WEB道」さんで作成させていただきました。

とても簡単に見出しのデザインを作ることができます。

こちらが「WEB道」さんのCSS見出しジェネレータの設定画面です。

見ての通り、本当に見た目を選んでいくだけです。

自分で難しいプログラムなどを書く必要は一切ありません。

 

色を表す部分が難しそうですが、クリックするとこうなります。

パレットみたいなものが出てくるので、やっぱり選ぶだけでOKです。

 

不器用さんに親切です!

 

自分の好みになるようにポチポチと選んでいきます。

選び終わったら、一番下の「ジェネレート」ボタンをクリックします。

 

私は吹き出し型で、今使っているテーマに合う緑系の色にしました。

クリックすると、設定した見出しの見本が作成されます。

無事に見出しのデザインが完成しました!

見本が見られるのはありがたいですね。

自分のサイトで公開する前に、気に入ったデザインになっているか確認できます。

 

見本の下にはCSSHTMLが自動で作成されていますので、確認してみてください。

自分でこれを書けなくても、コピー&ペーストするだけで見本と同じ見出しになります。


CSSを編集する前の注意点

 

ここからWordPressでの作業になりますが、必ず守ってほしい注意点があります。

CSSを編集するときは必ずバックアップを取ってください。

CSSを編集することでサイトが表示されなくなる可能性もあるそうです。

サイトのバックアップを取る方法は以下のページをご覧ください。

<プラグイン>UpdraftPlusでサイトのバックアップを取る

 

いきなり本番のサイトで試すのが不安な場合は、Instant WordPressで試すと良いと思います。

私は知識もなく不安だったので、一度試してからこのサイトに組み込みました。

Instant WordPressで練習環境を作る方法は、以下のページをご覧ください。

「Instant WordPress」を導入し練習環境を作る

 

準備ができましたら、いよいよCSSを編集していきます!


スタイルシートのCSSを編集する

 

WordPressの「外観」からCSSを編集できます。

右のメニューの「外観」から「テーマの編集」をクリックします。

 

するとなんだか難しい画面に移ります。

スタイルシート(style.css)を編集していきます。

こうなっていれば、貼り付け先はあっていますので、一番下までスクロールしましょう。

違っていた場合は、右のメニューからスタイルシートを選びましょう。

下の方にあるはずです。

 

スタイルシートの一番下に、先ほど「WEB道」さんで作成したCSSを貼り付けていきます。

貼り付けたらファイルを更新しておきましょう。

以上でスタイルシートの編集は終了です。

貼り付ける場所さえ分かっていれば簡単でしたね。


記事のHTMLを編集する

 

HTMLコードもCSSコードと一緒に作成されています。

こちらは記事を作成する際に使用するものです。

いつもは記事を書くときは「ビジュアル」タブで行っているかと思います。

HTMLを編集するときは「テキスト」タブを使用します。

テキストの方に「WEB道」さんで作成したHTMLを貼り付けます。

「ビジュアル」タブに戻って見出しができていればOKです!

 

ちなみに私は出来ませんでした・・・


見出しの見た目が変わらない場合

 

調べると、ブラウザのキャッシュというものを削除するとうまくいくそうです。

以下のサイトに詳しく書いてありました。

WordPressでCSSを修正したけど反映されないときに確認すべきこと

私の場合、キャッシュの削除スーパーリロードを試すとうまくいきました!


 

ということでCSSとHTMLの知識なしでも見出しのデザインが変更できました。

自分で自由にデザインできた方が楽しそうですが、初心者にはハードルが高いです。

しかし、不器用に優しい素晴らしいサイトがたくさんあるので、ありがたいですね。

 

ここまでお読みいただき、ありがとうございました。

 

関連:知識ゼロからホームページ作成・公開するまでの手順と公開後の作業まとめ<画像付き>

 

 

WordPressカテゴリの最新記事