Elementorを使うと、詳細の「CSSクラス」にクラス名を入れるだけでデザインをおしゃれにすることができます。

「img」を使うと白枠が着きます。白枠が大きすぎる場合は、「img-fit」とすると小さくなるように作りました。なお、どのようなCSSを書いたのかは、このサイトのCSSのページを参考にしてください。そのままコピペで使えるものもあれば、ご使用のテーマによってアレンジしなければいけないものもあります。

imgrとすると枠の付いた写真が右に傾きます。

imgとすると枠の付いた写真が右に傾きます。

あまり使う場面が無いかも知れませんが、imgl-fitにすると、大きな画像も傾けることができます。

見出しに使えるCSS

「詳細」のCSSクラスに入力すると事前に作成した様々なCSSが呼び出せます。複数のCSSを組み合わせて使うことも可能です。

色を変えるCSS

-blue
-navy
-green

-orange

-purple

-red

-black

mi01

mi02

mi03

mi04

mi05

mi06

mi07

mi08

mi09

mi10

mi11

mi12

mi13

mi14

mi15

mi16

mi17

mi18

mi19

mi20

mi21

mi22

mi23

mi24

mi25

mi26

mi27

mi28

mi29

mi30

mi31

mi32

mi33

mi13とmi16を組み合わせて、下線を2重線に変更するというような表示方法もできます。

mi13 mi16

 アイコンのある見出しの場合、見出しレベルをh3,h4とした場合、アイコンのサイズが合わなくなります。cssを以下のようにして調整します。

↓注意!

h4で「mi13」そのままの場合

 アイコンと下線が重なっていますね。そこで、h4というCSSを合わせて打ち込めば、それに合わせたサイズになるようにしています。

 使用例 h4 mi13-blackやmi13h4-blackなど。

「h4」を追記した場合

このようにすっきりします。

囲みに使えるCSS

囲みに使うCSSも見出しと同様です。囲みの中の文字の色を黒くしたい場合は、スタイルの「テキスト色」で変更します。

色を変えるCSS

-blue
-navy
-green

-orange

-purple

-red

-black

これはテキストブロックです。cssクラスに「waku01」を使っています。

これはテキストブロックです。cssクラスに「waku02」を使っています。

これはテキストブロックです。cssクラスに「waku03」を使っています。

これはテキストブロックです。cssクラスに「waku04」を使っています。

これはテキストブロックです。cssクラスに「waku05」を使っています。

これはテキストブロックです。cssクラスに「waku06」を使っています。

これはテキストブロックです。cssクラスに「waku07」を使っています。

これはテキストブロックです。cssクラスに「waku08」を使っています。

これはテキストブロックです。cssクラスに「waku09」を使っています。

これはテキストブロックです。cssクラスに「waku10」を使っています。

これはテキストブロックです。cssクラスに「waku11」を使っています。

これはテキストブロックです。cssクラスに「waku12」を使っています。

これはテキストブロックです。cssクラスに「waku13」を使っています。

これはテキストブロックです。cssクラスに「waku14」を使っています。

これはテキストブロックです。cssクラスに「waku15」を使っています。

これはテキストブロックです。cssクラスに「waku16」を使っています。

これはテキストブロックです。cssクラスに「waku17」を使っています。

これはテキストブロックです。cssクラスに「waku18」を使っています。

これはテキストブロックです。cssクラスに「waku19」を使っています。

これはテキストブロックです。cssクラスに「waku20」を使っています。

これはテキストブロックです。cssクラスに「waku21」を使っています。

これはテキストブロックです。cssクラスに「waku22」を使っています。

これはテキストブロックです。cssクラスに「waku23」を使っています。

これはテキストブロックです。cssクラスに「waku24」を使っています。

これはテキストブロックです。cssクラスに「waku25」を使っています。

これはテキストブロックです。cssクラスに「waku26」を使っています。

これはテキストブロックです。cssクラスに「waku27」を使っています。

これはテキストブロックです。cssクラスに「waku28」を使っています。

これはテキストブロックです。cssクラスに「waku29」を使っています。

これはテキストブロックです。cssクラスに「waku30」を使っています。

これはテキストブロックです。cssクラスに「waku31」を使っています。

これはテキストブロックです。cssクラスに「waku32」を使っています。

これはテキストブロックです。cssクラスに「waku33」を使っています。

背景に使えるCSS

背景のCSS単独でも使えますし、見出しや枠と組み合わせるとその部分に背景を入れることもできます。

色を変えるCSS

-blue
-navy
-green

-orange

-purple

-red

-black

背景にbg01を使った場合です。

背景にbg02を使った場合です。

背景にbg03を使った場合です。

背景にbg04を使った場合です。

背景にbg05を使った場合です。

背景にbg06を使った場合です。

背景にbg07を使った場合です。

背景にbg08を使った場合です。

背景にbg09を使った場合です。

背景にbg10を使った場合です。

背景にbg11を使った場合です。

背景にbg12を使った場合です。

背景にbg13を使った場合です。

背景にbg14を使った場合です。

背景にbg15を使った場合です。

背景にbg16を使った場合です。

背景にbg17を使った場合です。

背景にbg18を使った場合です。

背景にbg19を使った場合です。

背景にbg20を使った場合です。

背景にbg21を使った場合です。

背景にbg22を使った場合です。

背景にbg23を使った場合です。

背景にbg24を使った場合です。

背景にbg25を使った場合です。

背景にbg26を使った場合です。

背景にbg27を使った場合です。

背景にbg28を使った場合です。

▶ スポンサードリンク

リンク効果に使えるCSS

 リンクを目立たせ、クリック率を少しでも高める方法です。テキストリンクも文の中に埋もれてしまえば意味がないのでうまく目立たせることが必要です。

link01を使った例

2004年開設の老舗サイトなまら北海道だべさをよろしくお願いします。

link02を使った例

2004年開設の老舗サイトなまら北海道だべさをよろしくお願いします。

link03を使った例

2004年開設の老舗サイトなまら北海道だべさをよろしくお願いします。

link04を使った例

2004年開設の老舗サイトなまら北海道だべさをよろしくお願いします。

link05を使った例

2004年開設の老舗サイトなまら北海道だべさをよろしくお願いします。

link06を使った例

2004年開設の老舗サイトなまら北海道だべさをよろしくお願いします。

link07を使った例

2004年開設の老舗サイトなまら北海道だべさをよろしくお願いします。

ホバー効果のCSS

マウスカーソルを乗せると背景の色が少し変わるような効果を出すCSSです。

背景にbg27を使った場合です。これに、-onを追加するとこうなります。

背景にbg28を使った場合です。これに、-navy-onを追加するとこうなります。

-black-onだけの場合はこのようになります。

-navy-onだけの場合はこのようになります。

-green-onだけの場合はこのようになります。

-orange-onだけの場合はこのようになります。

-purple-onだけの場合はこのようになります。

-red-onだけの場合はこのようになります。

最後にリンクボタンです。Elementorのボタンを使うと簡単ですが、見出しやテキストに「btn」を使うとボタンができます。背景が白だと文字が見えにくいので-redなどと一緒に使うと格好よくなります。

btn-red

btn-blue