・「グーペ」のエディタとは?・手軽にかけるHTMLタグ・フォントサイズを変える・文字の色を変える・文字の背景に色をしく・まとめ:まずはHTMLを書いてみよう「グーペ」のエディタとは?まずは、今回利用する「グーペ」のエディタについて紹介します。2019年3月時点で、「リッチエディタ」「HTML入力」「旧エディタ」があります。本記事では「HTML入力」を使用して解説しますが、その特徴をお伝えするために「リッチエディタ」と「HTML入力」を比較してみます。リッチエディタHTML入力<リッチエディタ>ご覧のとおり、上部にアイコンが並んでいます。このアイコンをクリックすることで、通常はHTML入力が必要な装飾がワンクリックで行えます。HTML入力したい場合は、エディタ内にある程度入力してから、ソースコードアイコンをクリックしてHTMLタグを入力することも可能です。本記事では、リッチエディタのどのアイコンで装飾が可能なのかもあわせてお伝えします。<HTML入力>その名称のとおり、直接HTMLタグを入力します。今回はこちらのエディタを使って、HTML入力の方法を紹介します。「グーペ」の管理画面でエディターがあるメニューは、たくさんあります。あらい出しかけたところで、すでにこの数。このほかにもまだまだありますが、本記事が縦長になってしまいそうなので、これ以降は探してみてください。手軽にかけるHTMLタグ今回は、次の3つを紹介します。フォントサイズを変えるテキストの色を変えるテキストの背景に色をしく▼フォントサイズを変える<タグ>HTML入力に書いていただくタグはこちらになります。好みのサイズに変更していただくことで、文字が大きくなったり小さくなったりします。14px;">テキスト</span><グーペの表示>タグ記述前タグ記述後<HTML入力の手順>(1)HTMLタグを直接入力します(2)更新ボタンをクリックしますこれだけのステップで完了です。<リッチエディタの手順>(1)入力したテキストをなぞって選択状態にします(2)上部からフォントサイズアイコンをクリックして変更したいサイズを選びます(3)フォントサイズが変更になりましたここで、ソースコード(HTML)を直接編集する方法を紹介します。(1)上部からソースコードアイコンをクリックします(2)ソースコードが表示され、HTML入力で書いたHTMLと同じタグが挿入されていることがわかりますこのフォームを直接編集することも可能です※入力後、保存せずに「リッチエディタ」と「HTML入力」を切り替えると、入力した情報が消えてしまうためご注意ください。▼文字の色を変える<タグ>HTML入力に書いていただくタグはこちらになります。好みのカラーコードに変更していただくことで、テキストの色を変えることができます。カラーコードは、インターネット上にくわしく紹介されたページがたくさんあります。ホームページの雰囲気に合う色や、お好みの色を探してみてください。今回は、こちらの組み合わせる方法で解説します。color:#99ccff;">テキスト</span><グーペの表示>タグ記述前タグ記述後<HTML入力の手順>(1)HTMLタグを直接入力します(2)更新ボタンをクリックしますこれだけのステップで完了です。<リッチエディタの手順>(1)入力したテキストをなぞって選択状態にします(2)先ほどの手順でフォントサイズを18pxに変更します(3)上部から文字の色アイコンをクリックして変更したい色を選びます(4)フォントサイズとフォントカラーが変更になりましたここで、ソースコード(HTML)を直接編集する方法を紹介します。(1)上部からソースコードアイコンをクリックします(2)ソースコードが表示され、HTML入力で書いたHTMLと同じタグが挿入されていることがわかりますこのフォームを直接編集することも可能です※入力後、保存せずに「リッチエディタ」と「HTML入力」を切り替えると、入力した情報が消えてしまうためご注意ください。▼文字の背景に色をしく<タグ>HTML入力に書いていただくタグはこちらになります。好みのカラーコードに変更していただくことで、背景色を変えることができます。#f9f9ee;">テキスト</div>これだけだと、テキスト同士やテキストと背景の間に余白がなく窮屈な印象を受けるので、次のような記述にすることでテキストのまわりに余白がうまれます。好みの数値に変更していただくことで変えることができます。#f9f9ee;">テキスト</div>それぞれが指定している箇所は以下になります。内側の余白<グーペの表示>タグ記述前タグ記述後<HTML入力の手順>(1)HTMLタグを直接入力します(2)更新ボタンをクリックしますこれだけのステップで完了です。<リッチエディタの手順>リッチエディタでは、今回紹介したような背景色をしく機能はありません。似た機能として、文字部分にのみ背景色をしく方法を紹介します。(1)入力したテキストをなぞって選択状態にします(2)上部から背景色アイコンをクリックして変更したい色を選びます(3)文字の背景に色がつきましたこちらの方法は、文字を強調したい時などに便利です。用途に合わせて使い分けてみてください。※入力後、保存せずに「リッチエディタ」と「HTML入力」を切り替えると、入力した情報が消えてしまうためご注意ください。まとめ:まずはHTMLを書いてみよう今回は「グーペ」のエディタで使えるHTMLタグを紹介しましたが、いかがでしたか。大幅なカスタマイズをする場合はCSSをつかって装飾することが一般的です。CSSって何?については、次の記事でくわしく解説しています。▶︎CSSとは?「グーペ」の管理画面の「デザイン>編集」をご覧いただくと、CSSの編集画面があることがわかります。HTML・CSSの知識がある場合には、こちらをご利用いただくことももちろん可能です。なにより今回紹介したエディタでの装飾方法で、ホームページ作成が少しでも楽しく感じていただけたらうれしいです。【2020年1月】グーペの機能改善まとめホームページ作成サービス「グーペ」で行った、2020年1月の機能改善をお知らせします。「グーペ」で作成されたホームページの中から、優れているホームページを決定する『グー...グーペホームページ大賞ホームページ大賞2019【2019年12月】グーペの機能改善まとめホームページ作成サービス「グーペ」で行った、2019年12月の機能改善をお知らせします。ホームページ作成サービス「グーペ」...グーペホームページ大賞ホームページ大賞2019【2019年11月】グーペの機能改善まとめホームページ作成サービス「グーペ」で行った、2019年11月の機能改善をお知らせします。【2019年10月】グーペの機能改善まとめホームページ作成サービス「グーペ」で行った、2019年10月の機能改善をお知らせします。あなただけのホームページが1分で出来ます。はじめるツイートホームページ作成のヒントは「グーペ」のWebメディアでホームページをつくる上でのヒントや小ワザを、ホームページ作成サービス【グーペ】のスタッフがご紹介!書いている人は、Webディレクター、デザイナー、エンジニア、カスタマーサポートと職種もいろいろ。Console]の使い方、SNSアカウントの活用方法など幅広い記事をお届けします!ホームページをつくりたい、今あるホームページをもっとよくしたい、ホームページ運営に役立つツールを楽しく学びたい、といったみなさんの「やりたい」「知りたい」を応援します。