MENU
なまら北海道だべさ（Since2004） 暮らしの総合情報サイト、鉄道趣味、旅行、パソコン、子育て＆受験対策
２０２０年　なまら北海道だべさチャンネル大幅リニューアル公開中 YouTube

WordPress ElementorはCSS追加も可能な最新エディタ

ICT活用・ホームページ制作
  • URLをコピーしました！

Elementorを使うとCSSの反映を瞬時に確かめながら、公開画面を直接編集する感覚で高速かつ直感的に記事を更新することが可能になります。かつて、Windows Live Writerにも衝撃を受けましたがその後継どころか、別次元の便利さを兼ね備えています。今回は「CSS」に焦点を当ててElementorを特集します。

目次

なぜCSSを使いたいのか

ホームページを作っていくと、写真の横に記事を書いたり、サイドバーをつけて2カラムにしたりとレイアウトを工夫したくなってきますよね。2000年代中盤のサイト作りではテーブルタグ（表）で枠組みをつくり、そこを埋めるような形でサイトをつくることが主流でした。枠の線は透明にして見えないようにします。ちょうどExcelで文書を仕上げることに似ています。

もっと自然で美しいデザインにしたい

エクセルに似ていてセルの結合を上手にしないと思うようなレイアウトにでません。縦と横のマスは揃えなければいけないので、微妙な段組みは難しいです。しかも、列や行の数を間違えて結合するとレイアウトが崩れます。CSSなら微妙な配置まで自由自在。並べたり重ねたり枠をつけたりやりたい放題ですし、CSSファイルで書いたものを読み込むので、毎回記述する必要もありません。

記述（データ量）を減らしたい

tableはいちいち囲まなくてはならないので、下手をすると発信したいコンテンツの内容に匹敵するくらいtable関係の記述が並んだりします。人の目には見えていませんが、それが多くなれば相対的にページの中での大切な言葉の割合は低下してきますよね。例えば・・・

  1. <table width=”640″>
  2. <tbody>
  3. <tr>
  4. <td width=”324″ height=”83″>左側のコンテンツ</td>
  5. <td width=”316″ height=”83″>右側のコンテンツ</td>
  6. </tr>
  7. </tbody>
  8. </table>

かつてはこんな感じに書いていました。しかも、左側のコンテンツの中で、文字のサイズや色を変更する時はタグで囲みます。余白や背景の設定などもここで記述していく必要があります。ところが、CSSを使うとこうなります。

  1. <div>右側のコンテンツ</div>
  2. <div>右側のコンテンツ</div>

CSSはクラス名で設定を呼び出します。上の例であれば”l”の時どうするかという命令を決めておけば、文字列だろうが画像だろうが右側に配置してくれます。横幅などはもちろんのこと、余白、色、縁、影、透明度なども全て決められます。画面のどの位置にするかとか、回り込みをするのかどうかとか、スマホの時はどうするのかなどもそこで決めておけばよいのです。ページの読み込む速度も向上し、ユーザーの利便性もアップします。

レスポンシブ対応に欠かせない

最後に、テーブルでのレスポンシブ対応に向かないということがあります。スマホなどのモバイル端末でのアクセスが主流になった時代。いかに見やすいサイトにするのかはまさに急務です。表で作成したページの場合、枠のサイズを％で指定すれば画面のサイズに合わせて伸縮しますが、セルの中が折り返しまくって見づらくなります。逆にpxで指定したら思いっきり縮小されて小さくなるか、画面のサイズを気にせず飛び出していくかどちらかです。

CSSなら表示するブラウザの解像度に合わせてどのように表示するかまで設定できるので、スマホ画面に合わせた文字サイズや色、余白などのレイアウトを作成することが可能です。もはやtableと比較できないレベルです。

ElementorでCSSを反映させたい

この、超便利なCSSですが、Elementorではなんとセクションや要素の詳細で「CSSクラス」にクラス名を入れるだけでスタイルシートを呼び出すことができます。また、面倒な段組みやカラムもElementorのパーツで視覚的に操作が可能です。加えてテーマのstyle.cssやbase.cssなど、スタイルシートに記述しているものから簡単に読み込んで反映できるので、コード不要でデザインをおしゃれにすることができます。

style.cssに記述（確認）しておく

CSS3を知らない方は、chromeの検証機能を使うと理解が深まりますので試してみてください。さて、WordPressのどのテーマにもstyle.cssやそれに代わるbase.cssなどあります。その中にはこのようなコードが書いてあります。親切に解説が書いてあるものもありますのでありがたいですね。この例でいくと、

.wellや.well2、.well3などがありますね。

この、ドット以降の英単語みたいなものがクラス名です。試しに使ってみましょう。

編集画面「詳細」で設定する（CSSクラス）

このCSSクラスというところに入れます。また、半角スペースを空けてクラス名を複数入れることも可能です。２重、３重にスタイルシートを反映させることもできます。

cssクラスに「well2」と入れてみました。このような枠が表示されました。

cssクラスに「well3 pill」と入れてみました。このような枠が表示されました。ボタン用のcssですが、枠にも使えますし見出しにも使えます。

詳細設定でCSSを変更

box_style box_style06と入れたらこのような感じになります。私は面倒なので単語登録して数字のところだけ打ち換えるようにしています。

格好いい見出しのデザインを使ったり、リンクを目立たせたりするなどスタイルシートの使い方は奥が深いものがあります。今までの更新の仕方では、一度保存してサイトにアクセスし、F5で更新するなどしてやっと確かめることができるという感じでしたが、Elementorなら、クラス名を入れた段階で瞬時に結果が反映します。結果的に、短時間でより洗練されたデザインのサイト作りが可能になるのです。

その上のCSS IDって何？

こちらはページ内リンクのアンカーで使います。目次などサイト内のリンクでそこまで飛ばしたいときにはここに目印をつけます。例えばtopic01などとしておいて、リンクアドレスの方は＃topic01とします。

CSSが反映しないときのチェックポイント

Elementorを有効化すると、テーマのデザインが若干変わってしまうことがあります。その原因と対応策をまとめました。

Elementorの設定をチェック

もしテーマデザインと異なり、意図しないカラーになっていて見づらくなってしまっている場合は、Elementorの設定画面の「一般」タブにある「デフォルトのカラー」や「デフォルトのフォント」による上書きをチェックします。

Elementor のデフォルト色が無効化され、テーマの色を継承します。

もちろん、便利な機能のひとつではありますので問題がなければチェックせずに機能を使っても構いません。

Elementorが追加するCSSをチェックする

賢威８の事例

WordPressのテーマを賢威８にバージョンアップしたところ、Elementorが見出のCSSを勝手に上書して程よい余白が無くなるという事例が発生。これまた困りました。ちなみに、賢威シリーズは現在７がメジャーですが賢威８も登場しこれから広がっていくものと思います。アクセス増、収益増、デザインの洗練を目指すならやはりそれなりの実績のあるものを使いたいですよね。時間とお金がもったいないです。



で、どんな現象が起きたのかというと、下の画像のようになったのです。本当は右の画像のように余白が欲しいのです。

で、どんな現象が起きたのかというと、下の画像のようになったのです。本当は下の画像のように余白が欲しいのです。


テーマのCSSではしっかり余白も設定されているのに、Elementorを有効にしたら余白がなくなるのです。そこでchromeの「検証」機能でCSSをチェックしたところ余白がカットされていました。

frontend.min.cssを上書きするCSSを記述

プラグインのファイルを直接上書きすると、Elementorのバージョンアップの度にまた修正しなければならなくなります。そこで、賢威８の子テーマで編集しておき、プラグインやテーマがバージョンアップしても、このCSSの修正を残るようにしようと思いました。

該当のファイルを探そう

FTPソフトなどで、plugins/elementor/assets/css/frontend.min.cssとアクセスし、該当箇所を見つけます。検索などで探せばすぐ見つかります。で、そこをコピーします。見つけられなければ下のソースをコピペしても上手くいくかもしれません。

子テーマのCSSに貼り付けよう

  1. /*余白自動修正の停止*/
  2. .elementor-widget-heading .elementor-heading-title {
  3. padding: 20px 10px!important;
  4. margin-bottom: 20px!important;
  5. line-height: 1!important;}
  6. .elementor-text-editor {margin-bottom: 10px;}

子テーマのCSSに貼り付けます。その際、paddingやmarginなどの数値を変えて!importantをつけます。すると、見出しの文字にも余白が生まれ、見た感じの違和感はなくなります。賢威8に変えてもElementorを使って記事更新することが可能になりました。

▶　スポンサードリンク

google chrome 「検証」機能でCSSを作成・編集

CSSを編集すると、どんな感じになったのかなと結果を見て確かめたいですよね。洋服の試着と同じでちょっとずつ色を変えてみたりしたいものです。その時にいちいちFTPソフトでアップロードして、F5で更新してって・・・面倒ですよね。そこで役に立つのがchromeの「検証」機能です。画面のどこでもいいので右クリックするとでてくるコンテキストメニューの一番下に「検証」とあります。


それを選択すると、このような画面がでてきます。HTMLのソースを選択したり、赤丸のところをクリックしてからサイトの中にカーソルを持って行ったりすると、なんとそこでどのようなCSSが使われているのかがわかります。これは、自分のサイトでなくてもできますので、素敵なサイトに出会ったら「検証」してみると勉強になります。

CSSの設定を試しながら変更！

この枠で囲まれたものすべてが関係するCSSです。CSSは土台から順番に積み上げていくようなイメージで書かれていくため、ページ全体の設定から順に細かい部分へと進んでいきます。で、この例の場合はnews-itemの部分の設定はこうなっていますよという例です。②のところをクリックすると、その場で色を変えて確かめることができます。③はmarginやpadding、ボーダーを図化しています。ここの数字を変えても結果が反映しますし、そうするためのCSSも枠の中に打ち出してくれます。その他、⑤のあたりというか、余白の部分をダブルクリックすると、新たにCSSを追記する欄がでますし、少し入力すれば選択肢まで表示されます。そこで出てきた結果を丸ごとコピーして、子テーマのCSSに追記すればよいのです。

CSSの設定、ファイルの場所、行数までわかる

④を見ればbase.cssの1221行目に書いてあるということまでわかります。オレンジのところにカーソルを当てればファイルのパスがでますので、もっとよくわかります。この場合、子テーマにbase.cssというファイルを置いておき、その中に張り付けてあります。ここではざっくりとしか説明していませんが、これを使えばかなり自在にアレンジができそうだということがお分かりいただけましたでしょうか？

なお、このchrome上でどれだけ勝手に編集しても実際のサイトには影響していません。これは自分の表示画面上でのテストですので、誰にも迷惑はかかりませんし、逆にこれで頑張って編集しても画面を閉じてしまったり、F5の更新ボタンを押してしまえばきれいさっぱり元通りになります。

だから、安心していろいろと試してみてください。もっというと、この仕組みが分かってしまえば、検索する言葉も絞られてくると思います。より、自分のやりたいことができるようになってくると思います。

レスポンシブ対応のチェックもできる

ついでにといったところですが、先ほどの赤丸をつけた矢印の横にあるところをクリックしたり、検証で出てくる枠と、サイトを表示している枠の境目をドラッグすると、解像度が表示されます。これを使えばこのままレスポンシブチェックも可能です。ただし、chromeを使った場合の話ですので他の記事にも書きましたが、別のブラウザや端末でも試してみることをお勧めします。

コピペして使える！使って楽しいオリジナルCSS

ソースコードをエディタ風に表示したい

ホームページ作りの技術を紹介するサイトでは、HTMLやCSSなどのソースコードを表示しています。プラグインを入れる方法もありますが、Elementorではなかなか上手くいきません。そこで、CSSを使ってそれっぽく表示する方法を調べました。

テーマファイルのCSSを編集します

まずは、WordPressのテーマフォルダ内のCSSファイルに下記のソースコードを追加します。厳密にいえば、表示だけならこれでいいのですが、「使える」ようにするためにはもうひと手間必要ですのでご注意ください。

  1. /*5.ソースコード表示枠　CSS*/
  2. .code { /* クラス名は任意（以下同）*/
  3. position:relative;
  4. margin-left: 0px;
  5. margin-bottom: 0px;
  6. padding:20px 10px 10px 20px;
  7. border:none;
  8. color: #0a190c;
  9. background:rgba(155, 180, 255, 0.35);
  10. line-height: 1.5em;
  11. }
  12. .code:after{ /* 左上のラベル部分 */
  13. position: absolute;
  14. font-family: FontAwesome,’Quicksand’,’Avenir’,’Arial’,sans-serif;
  15. content: ‘f121 code’; 
  16. position: absolute;
  17. top: 0px;
  18. left: 0px;
  19. padding: 5px 10px;
  20. background: #969998;
  21. line-height: 1;
  22. font-size: 0.9em;
  23. color: #fff;
  24. }
  25. .code li{ /* 行番号とコードの間のライン */
  26. padding-left:15px;
  27. border-left:1.5px solid #676767;
  28. margin-top: 0px;
  29. margin-bottom: 0px;
  30. }

確認！そのソース本当に使える？

せっかくソース表示がうまくいっても、WordPressにはダブルクォーテーション（ ” ）やシングルクォーテーション（ ‘ ）など、一部文字をスマート引用符やアポストロフィなどに勝手に変換してくれる余計（もとい、ご丁寧）な機能がついています。自分が表示したソースをコピペして使おうとしてもうまくいかないなんてことがあります。例えば・・・

例：’Quicksand’　これが　‘Quicksand’

これだとソースをコピペしてCSSに貼り付けてもうまくいきません。見た目にはわからないのですが全角か半角かは大きな違いです。当サイトではこの自動修正機能を停止していますので上のソースをコピペした場合、CSSでフォントの部分が青文字になるはずです。確認してみてください。

では、どうやってこの機能を停止するのかというと

  1. .add_filter( ‘run_wptexturize’, ‘__return_false’ );

WordPressのテーマフォルダにあるfunctions.phpに上記の一行を記述するだけです。（WordPress 4.0以上で有効です）

使い方

CSSファイルをアップロードしたら、実際にElementorでソースコードを表示してみます。やり方は簡単で、次のような手順で進めていきます。

① テキストエディターを使い、表示したいソースコードを入力します。その時に、番号付きのリストを選択しておきます。番号付きのリストとはテキストではこんな感じです。

<ol>
<li>.main-conts p{</li>
<li>line-height: 2.2em;</li>
<li>font-size: 1.2em;</li>
<li>color:#000000;</li>
<li>}</li>
</ol>


改行しないと１行にすべて収まっているように表示できますし、改行すればすべての行に行番号が入ります。

次にテキストエディターの詳細設定でCSSクラスに「code」と入力します。これは自分で決めたCSSのクラス名ですので、自由に変更できます。私と同じ環境で作業している人はこれで以下のようなエディター風のソースコードが表示できます。

  1. .main-conts p{
  2. line-height: 2.2em;
  3. font-size: 1.2em;
  4. color:#000000;
  5. }

▶ スポンサードリンク

CSSでテキストリンクを目立たせたい

CSSコードを作成し、子テーマフォルダにアップしておくと、Elementorの編集エディター上にある詳細にCSSクラスを入れるだけで簡単にデザインを変更することができることがわかりました。引き続き、テキストリンクを目立たせるCSSを紹介しています。


使い方は他のCSSと同じように、CSSクラスのところに入れます。すると、このエリア内にあるリンクには以下のようなデザインが付きます。

テキストリンクは、本文中の単語にリンクを貼る場合に有効です。下の文のようにリンクの部分にアイコンやアンダーバーをつけたりすると目立ちます。

なお、当サイトは   賢威 のテンプレートを使っています。とまあ、こんな感じになります。

link01のCSSソース例

当サイトは 賢威 のテンプレートを使っています。

/*基本の設定　余白・サイズ*/

  1. .link01 a {position: relative;font-weight: bold;border-bottom: dotted 3px #0080FF;}
  2. .link01 a:before {font-family: Fontawesome;color: #0040FF; content: “f0c5”;}

link02のCSSソース例

当サイトは 賢威 のテンプレートを使っています。

/*基本の設定　余白・サイズ*/

  1. .link02 a {position: relative;font-weight: bold;border-bottom: dotted 3px #0080FF;}
  2. .link02 a:before {font-family: Fontawesome;color: #0040FF; content: “f14d”;}

link03のCSSソース例

当サイトは 賢威 のテンプレートを使っています。

/*基本の設定　余白・サイズ*/

  1. .link03 a {position: relative;font-weight: bold;border-bottom: dotted 3px #FFBF00;}
  2. .link03 a:before {font-family: Fontawesome;color: #088A08; content: “f02c”;}

link04のCSSソース例

当サイトは 賢威 のテンプレートを使っています。

/*基本の設定　余白・サイズ*/

  1. .link04 a {position: relative;font-weight: bold;border-bottom: dotted 3px #0080FF;}
  2. .link04 a:before {font-family: Fontawesome;color: #0080FF; content: “f164”;}

link05のCSSソース例

当サイトは 賢威 のテンプレートを使っています。

/*基本の設定　余白・サイズ*/

  1. .link05 a {position: relative;font-weight: bold;border-bottom: dotted 3px #FA58AC;}
  2. .link05 a:before {font-family: Fontawesome;color: #FA58AC; content: “f004”;}

link06のCSSソース例

当サイトは 賢威 のテンプレートを使っています。

/*基本の設定　余白・サイズ*/

  1. .link06 a {position: relative;font-weight: bold;border-bottom: dotted 3px #013ADF;}
  2. .link06 a:before {font-family: Fontawesome;color: #013ADF; content: “f0c1”;}

link07のCSSソース例

当サイトは 賢威 のテンプレートを使っています。

/*基本の設定　余白・サイズ*/

  1. .link07 a {position: relative;font-weight: bold;border-bottom: dotted 3px #013ADF;}
  2. .link07 a:before {font-family: Fontawesome;color: #013ADF; content: “f14a”;}

画像を装飾するCSS

  1. .imgwaku01 {border: solid 10px #f0f0f0; width: 80%;}

画像を装飾するCSSです。世の中にはたくさんのデザインがありますが、結局実際に使うのは数種類です。この1行でもこんな風にできます。

使い方も他のCSSと同じように、CSSクラスのところに「.imgwaku01」と入れます。

まとめ

美しくて機能的なサイト作りには今やCSSは欠かせません。Elementorを使えばレスポンシブ対応かつ、CSSの反映まで瞬時に確認しながら記事の作成が可能です。もう、WordPressのエディタを公開画面に近づけようと努力したり、リアルタイムプレビューのプラグインを探したりする必要はありません。CSSをマスターしてElementorを使いまくりましょう！

ICT活用・ホームページ制作
よかったらシェアしてね！
  • URLをコピーしました！
目次