ただいまテーマ変更後の改装中です。少々見づらかったらすみません

OceanWPをこのブログで使っていたのは記事を書いた当時のことであり、現在はここでは違うテーマを使っています。OceanWPは違うブログで使っています。 当ブログでは、デモデザイン未使用でOceanWPを使っています。 OceanWPは、CSS・Elementorどちらでも様々なカスタマイズが可能で自由度が高い代わりにデモを含めてなにもカスタマイズをしないととてつもなくシンプルすぎるデザインになります…。 シンプルなデザインが好きだから維持したいけれど、少しくらいは華やかさとか色が欲しい！ と思ったので、どんなことを試したか書いていくことにしました。 この記事では、Elementor無し・CSS＋記事内でのタグで見出しのデザインを設定する方法を書いています。 h2はこれ、h3はこれ…と見出しごとにデザインを固定するのではなく、書いている内容に応じて、色やデザインを変えられるようにします。 Elementor不使用と書いておりますが、なにか特別なことをするのではなく他のwordpressテーマや一部のブログなどと同じ扱い方で設定をするから不使用なだけですのでwordpressやCSSに慣れている方でしたらすぐできると思います。 見出しの設定でてこずっている方やElementorが使えないと何もできないテーマなのかな…下手に何かしたらElementor使い始めた時に変なことになるんじゃないか…と思ってる方の参考になるよう OceanWPが日本語テーマではないことも踏まえ、スクリーンショットも入れて書いています。 どんな方法で設定するのか この記事内での流れをざっくりと説明すると 使いたい見出しを決める見出しを自分が分かりやすい・扱いやすいコードに設定する専用スペースに貼り付ける動作確認 です。さっきも書いたとおり、他のwordpressテーマやfc2ブログの一部テンプレートで設定する際のやり方と同じですね。 1.使いたい見出しを決める 設定を始める前の準備として、まずはデザインを探します。自分で作ることができないうちは、見出しデザインを利用可能としておられるサイトのものを使ってみます。 OceanWPだと、デモを設定していない状態では見出しはそれぞれこのように表示されます。 とてもシンプルで、このままだと扱いが難しいですがだからこそclass指定やElementorで好きに設定できます。 この記事で利用したのはサルワカさんの見出しです。 サルワカ｜CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 ストライプの下線と書いてあるものを使います。 2.見出しを自分が分かりやすい・扱いやすいコードに設定する サルワカさんに書いてある通り、コピーして貼り付けますが指定するclass名を、自分が管理しやすいように変更します。 これはストライプ柄で、この柄では初めて作る指定コードなのでh1と書かれているところをstripe1としました。 3.専用スペースに貼り付ける class指定する際には、見出しに設定するのと少し書き方が変わるようなので最初にピリオドをつけて ダッシュボード左のメニューから外観→カスタマイズ→Custom CSS/JSと移動したら出てくる 【 CSSコード 】と書かれているほうの入力スペースに貼り付けます。 これで【公開】を押し、さっき書いたものを見てみると… 反映されました！(画像であることを分かりやすくするため、文章を一部映しています) 4.動作確認 この記事で書いたコードを実際に記事内で使うと、上のように反映されます。 冒頭で使った見出しがh2なのですが、違うデザインなのにh2見出しとして表示できてますね。 終わりに これはクラス指定で、classと書き込んで呼び出しているからできることで ある記事ではh2、また別の記事ではh3さらに別の記事では、hを設定せず目立たせるためだけに使う… と使い分けできます。 念のため、Elementorでも触ってみましたが この画面からは分かりづらいかもしれませんが 同じ画面・同じページにh2見出しとして置いても レイアウトがおかしくなるなどの干渉は見られなかったので Elementorの使い方を覚えたから見出しをElementorで作ることにしよう！ と思い立っても、それまでにclass指定で設定した見出しを全部変えなきゃいけない…ということにはならなさそうです。(もしなってしまったら、その時にどうしたかを書きますね)

Elementorなし

OceanWPで、あえて記事内の見出しを固定する方法

OceanWPでラベルつきのボックスを作る【Elementor不使用】

OceanWPでCSSを使ってリストの外側の囲み(デザイン)を作る【Elementor不使用】

OceanWPで見出しデザインの設定をする【Elementor不使用】