雪夏2019年10月7日サイト・ブログ0件のコメント当ブログでは、デモデザイン未使用でOceanWPを使っています。OceanWPは、CSS・Elementorどちらでも様々なカスタマイズが可能で自由度が高い代わりにデモを含めてなにもカスタマイズをしないととてつもなくシンプルすぎるデザインになります...。華やかさとか色が欲しい!と思ったので、どんなことを試したか書いていくことにしました。この記事では、Elementor無し・CSS+記事内でのタグで見出しのデザインを設定する方法を書いています。書いている内容に応じて、色やデザインを変えられるようにします。Elementor不使用と書いておりますが、なにか特別なことをするのではなく他のwordpressテーマや一部のブログなどと同じ扱い方で設定をするから不使用なだけですのでwordpressやCSSに慣れている方でしたらすぐできると思います。見出しの設定でてこずっている方やElementorが使えないと何もできないテーマなのかな...下手に何かしたらElementor使い始めた時に変なことになるんじゃないか...と思ってる方の参考になるようOceanWPが日本語テーマではないことも踏まえ、スクリーンショットも入れて書いています。どんな方法で設定するのかこの記事内での流れをざっくりと説明すると使いたい見出しを決める見出しを自分が分かりやすい・扱いやすいコードに設定する専用スペースに貼り付ける動作確認です。他のwordpressテーマやfc2ブログの一部テンプレートで設定する際のやり方と同じですね。1.使いたい見出しを決める設定を始める前の準備として、まずはデザインを探します。自分で作ることができないうちは、見出しデザインを利用可能としておられるサイトのものを使ってみます。OceanWPだと、デモを設定していない状態では見出しはそれぞれこのように表示されます。シンプルで、このままだと扱いが難しいですがだからこそclass指定やElementorで好きに設定できます。この記事で利用したのはサルワカさんの見出しです。サルワカ|CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選ストライプの下線と書いてあるものを使います。2.見出しを自分が分かりやすい・扱いやすいコードに設定するサルワカさんに書いてある通り、コピーして貼り付けますが指定するclass名を、自分が管理しやすいように変更します。これはストライプ柄で、この柄では初めて作る指定コードなのでh1と書かれているところをstripe1としました。】と書かれているほうの入力スペースに貼り付けます。上のように反映されます。違うデザインなのにh2見出しとして表示できてますね。終わりにこれはクラス指定で、classと書き込んで呼び出しているからできることである記事ではh2、また別の記事ではh3さらに別の記事では、hを設定せず目立たせるためだけに使う...と使い分けできます。念のため、Elementorでも触ってみましたがこの画面からは分かりづらいかもしれませんが同じ画面・同じページにh2見出しとして置いてもレイアウトがおかしくなるなどの干渉は見られなかったのでElementorの使い方を覚えたから見出しをElementorで作ることにしよう!と思い立っても、それまでにclass指定で設定した見出しを全部変えなきゃいけない...ということにはならなさそうです。wordpress続きを読む次の投稿へOceanWPでCSSを使ってリストの外側の囲み(デザイン)を作る【Elementor不使用】おすすめ2019年の振り返りと2020年の目標。コメントをキャンセル次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。最近の投稿OceanWPの記事一覧ページで画像のサイズがバラバラにならないように設定を変える【カスタマイズを触るだけの簡単作業】2019年の振り返りと2020年の目標。