【ペライチ】タグ埋め込みにCSSを適用してみよう

ペライチにはタグの埋め込み機能がオプションで用意されており、
オリジナルのデザインを作ることができるようになります。

そこで今回はペライチのタグ埋め込み機能を活用するために
HTMLとCSSの超基礎的なことをお伝えします。

今回お伝えする内容を活用できるのはペライチの有料プラン、
もしくはオプションで「タグの埋め込み機能」が使える方に限られます。

まずはHTMLを書いてみる

まずはペライチのタグ埋め込みを追加しましょう。

ブロック選択の「その他」の中にHTML埋め込みがありますので追加しましょう。

追加したブロックの編集画面にHTMLを記述していきます。

基本的にHTMLやCSS、JavaScriptなどを記述する場合は半角英数字にて記載しましょう。
全角で記載すると正しく表示されません。

HTMLの記述において、大なり小なり記号<>を使います。
この記号のことをタグと言います。

HTMLでは文字やURL、画像などの情報を並べるために使用します。

タグ<>の中には情報の種類を指定します。

例えば、見出しを作りたい場合は<h1><h2>

本文を作りたい場合は<p>

URLにしてクリック出来るようにしたい場合は<a href=””>

というように、<>の中に記述します。

タグの種類については「HTML タグ」などで検索すると見つかります。

種類がたくさんあるので、すべてを覚える必要はないです。
頻繁に使用するタグはHTMLを書いていると覚えます。

他にはリストを作るための<li>タグや、タイトルとして使用する<title>タグ
HTMLの記述であることを表す<HTML>タグなどもあります。

そして、タグは必ず開始点終了点を指定します。

<p>を使う場合は、開始点に<p>を書き、終了点に</p>と書きます。

終了点はタグにスラッシュ/を加えて、
スラッシュ以降にタグの種類を書きます。

(例えば、<p>タグなら</p>と書きます。)

<p>本文①</p>

このように書くことで、HTMLを表示させると「本文」と表示されるようになります。

これはHTMLで書いているので、HTMLタグを追加してみます。

先ほど書いた<p>タグはすべてHTMLでの記述になりますので、
<HTML>タグの開始点と終了点は記述の前後と先頭と末尾になります。

実際に書くとこのようになります。

<HTML>

  <p>本文①</p>

</HTML>

<HTML>タグで挟まれたところがすべてHTMLによる記述であることを表します。

そして、タグで挟まれた中身には先頭にスペースがあります。

これをインデントと呼びます。

タグが包括している範囲の中身を見やすくするために段落をつけます。

複雑なコードになってくるとインデントがないと読みづらくなったり、
インデントがないことでコードが動かなくなることもありますので、
必ずタグで挟んだ場合は、中身にインデントを入れましょう。

この状態で「保存する」ボタンをクリックしてプレビューを確認してみましょう。

このように<p>タグで囲んだ中身だけが表示されています。

では、サンプルとして使用するコードを作ります。

先ほどのコードには本文だけしかなかったので、
見出しの<h1>タグ追加します。

<HTML>

  <h1>見出し①</h1>
  <p>本文①</p>

</HTML>

本文の上に<h1>タグを追加しました。

<h1>タグと<p>タグはいずれもHTMLなので、1つの<HTML>タグでまとめることができます。

プレビューを確認すると見出しが追加されています。

見出しと本文の見た目に差はありませんが、
SEOの観点から、Googleがサイトの中身を識別する際に、
見出しと本文の違いをコードから読み取りますので、用途に応じてタグを使い分けるのが望ましいです。

<div>でグループを作る

続いて<div>タグというのを使ってみましょう。

<div>タグでは、いくつかのタグを一つのグループにまとめることができます。

この<div>タグを利用することでCSSを適用する際に、細かな設定変更ができるようになります。

例えば一つ目のグループには文字の色を赤にしたり、
2つ目のグループには文字を大きくするCSSを適用するなど、
グループごとに別々の装飾をすることができるようになります。

それでは、先ほどの見出しと本文を一つのグループにまとめてみましょう。

<HTML>

  <div>

    <h1>見出し①</h1>
    <p>本文①</p>

  </div>

</HTML>

記述はすべてHTMLで書かれているので、<HTML>タグで全体を挟みます。

次に、グループにしたい箇所(見出しと本文)を<div>タグで挟みます。

見出しと本文は<HTML>タグと<div>タグで二重に挟まれているので
そのぶんインデント追加して見やすくしておきましょう。

<div>タグに名前を付ける

先ほど作成したグループに名前を付けましょう。

<div>タグに名前を付けるには下記のように書きます。

<div class=”sample1″>

このように記述することで、<div>タグ全体がsample1という名前になります。

実際にコードに記述するとこのようになります。

<HTML>

  <div class="sample1">

    <h1>見出し①</h1>
    <p>本文①</p>

  </div>

</HTML>

これで見出しと本文はsample1という名前のグループにまとまりました。

CSSを書いてみる

ここからは、先ほどのHTMLを一旦横において、CSSのお話をします。

CSSとは、先ほど作ったHTMLの中身に装飾を加える役割をします。

例えば文字の大きさを変えたり、背景色を付けたり、文字の配置を変えたりします。

CSSでできる装飾の種類については「CSS プロパティ一覧」などで調べていただくとわかるかと思います。

HTMLのタグと同じくたくさんの種類があるので、全部覚える必要はありません。

それではCSSを書いてみましょう。

CSSを書くときは、装飾を施す場所と装飾内容を記述します。

装飾を施す場所については、先ほど<div>タグにつけた名前を指定します。

.sample1{} 
このように書くことで、まず場所が指定できます。

名前を付けた<div>タグを指定する場合は必ず先頭に、「.」ドットを付けてください。

そして名前の後ろに{}波カッコをつけます。

波カッコの中に装飾したい内容を記述すればCSSの完成です。

今回は、文字の色・背景色を装飾してみます。

.sample1{

  color: red;
  background-color: #efefef;

}

このように書くことで、sample1という名前のグループは、
文字の色を赤、背景色をカラーコードの#EFEFEF(グレー)に変更されます。

今回は装飾内容が2つだけですが、内容が増えた場合、
波カッコ内に横一列で並べるとかなり読みづらくなります。

なので、HTMLを記述したときのように、改行とインデントを利用して、
一行に1つの装飾内容を記述するようにしましょう。

そしてHTMLのタグの開始点と終了点のように{}で挟みます。

ただし、このままではCSSは適用されず、文字としてページに表示されてしまいます。

実は、HTMLは<p>タグなどで挟まなくても、文字列として表示することができます。

しかし、検索順位を意識されるのであれば、HTMLのお作法に則て、タグによる記述を行いましょう。

テキストを書きたい場合は、ペライチに用意されているテキストブロックを利用しましょう。

書いたCSSに<style>をつけてHTMLに変換する

一般的には、HTMLとCSSは別々にファイルを用意して、
HTMLにCSSを適用させる処理を加えるのですが、

ペライチではHTMLしか書くことができないため、
CSSの内容をHTMLに変換する必要があります。

CSSをHTMLに変換するためには<style>タグを使って、
先ほど記述したCSSを挟みます。

これにより、CSSのルールに則って書かれたコードがHTMLとして扱われるようになります。

それでは先ほどの.sample1に<style>タグをつけてみます。

<style>

  .sample1{

    color: red;
    background-color: #efefef;

  }

</style>

このように書くことでCSSの内容が<style>タグにまとめられました。

この<style>タグは先ほどの<div>タグのように一つのグループと考えてOKです。

<style>タグによってCSSはHTMLとして扱われているので、
<HTML>タグの中にインデントを入れて追記します。

<HTML>

  <style>

    .sample1{

      color: red;
      background-color: #efefef;

    }

  </style>


  <div class="sample1">

      <h1>見出し①</h1>
      <p>本文①</p>

  </div>

</HTML>
表示エリアの関係で改行を削除してます。改行がなくても同じように表示されます。

この時、<Style>タグと<div>タグのインデントはそれぞれ同じになっていますが、

<style>タグは<div>タグに作用するだけで、
<div>タグを包括しているわけではないので、同列のグループとして扱われます。

この状態でページを表示すると、
このように文字が赤くなり、背景がグレーに変わりました。

【応用】<div>タグを追加してみる

それでは、先ほどのコードに新たな<div>タグを追加してみましょう。

<style>のグループ、<div class=”sample1″>のグループに加えて、
3つ目のグループ <div class=”sample2″>を追加してみましょう。

名前は自由に設定して頂いてかまいませんので、「sample2」のところを変更してみてください。

追加した<div>タグの中身には、1つ目の<div>タグと同じく、見出しと本文を追加してみましょう。

<HTML>

  <style>

    .sample1{

      color: red;
      background-color: #efefef;

    }

  </style>


  <div class="sample1">

      <h1>見出し①</h1>
      <p>本文①</p>

  </div>


  <div class="sample2">

      <h1>見出し②</h1>
      <p>本文②</p>

  </div>

</HTML>

2つ目の<div>タグを追加したことにより、このようなページが表示されます。

見出し②についてはCSSを設定していないため、黒文字で表示されています。

【応用】追加した<div>タグにCSSを反映させよう

先ほど追加した2つ目の<div>タグをCSSで装飾しましょう。

CSSを追加する場合は、別途<style>タグを用意するのではなく、
先ほど用意した<style>タグの中に追記すればOKです。

装飾する対象の指定は先ほど<div>タグにつけた名前(sample2)を指定しましょう。
ドットをつけるのをお忘れなく。

また、sample2以外の名前を付けた方は<div>タグにつけた名前で指定してください。

<HTML>

  <style>

    .sample1{

      color: red;
      background-color: #efefef;

    }

    .sample2{

      color: blue;
      background-color: #efefef;

    }

  </style>


  <div class="sample1">

      <h1>見出し①</h1>
      <p>本文①</p>

  </div>


  <div class="sample2">

      <h1>見出し②</h1>
      <p>本文②</p>

  </div>

</HTML>

このように表示されていたらOKです。

もしCSSが適用されずに文字の色が変わっていない場合は、
指定しているclassの名前が間違っていないか、
CSSの内容に記載ミスがないかをご確認ください。

スペルが一文字でも間違っていると、正しく表示されません。

CSSはテンプレートを使うと便利

ウェブで検索してみると、CSSのテンプレートを公開しているサイトがたくさんあります。

CSSはイチからすべて書かなくてもテンプレートをコピーしてペーストするだけで、
見た目のカスタマイズをすることが可能です。

「CSS テンプレート」などで検索してみてください。

まとめ

今回はペライチでタグの埋め込みを使ってHTMLやCSSを記述する方法をご紹介しました。

タグの埋め込みを駆使すれば、ペライチのブロックでは表現できないパーツを作ることができます。

今回ご紹介したのは、ほんの一部にすぎないので、
HTML・CSSを研究してオリジナルのサイトを作ってみてください。

この他にも<script>タグというものを使ってJavaScriptを使うことができます。

JavaScriptについては別の記事で紹介したいと思います。

それでは、最後まで読んでいただきありがとうございました。

Follow me!

【ペライチ】タグ埋め込みにCSSを適用してみよう” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です