とりあえずHP の使い方

基本的な使い方

その他の機能CSS編集機能を活用する(β版)

このページは上級編となります。まずは初級編・中級編をマスターしてからご覧頂くことをおすすめいたします。焦らずじっくりと取り組んでいこう!
上級者向けの機能です

「CSS編集機能(β版)」では、選択中のデザインテンプレートのスタイルシートを管理画面から編集することができます。
※「CSS編集機能(β版)」はHTML・CSSの基本的な知識を習得していただいていることを前提としてご使用ください(誤って記述した場合、レイアウト等を崩してしまう可能性があるため)。
※CSS編集機能はパソコン版の管理画面でご利用いただけます(スマホ版管理画面では編集できません)。

現在、β版でのリリースとなっております

お試しいただいた結果、「もっとこういうことができたらいいのに」「ここはわかりにくい」といったご意見をいただき、よりよく改善していきたいと思っています。
ご利用になってお気づきのことや、使ってみての感想がありましたら、ぜひ 「CSS編集機能・β版」へのご意見・ご感想フォーム よりお聞かせください。

HTMLとCSSについて

「HTML」は、ヘッダー情報、見出し、文章といった、ホームページの文書の構造を作るための、ウェブ上の言語です。ホームページは、見出しや段落など様々な要素を表すHTMLタグを使って構成されています。
これに対し「CSS(Cascading Style Sheets)」は「スタイルシート」とも呼ばれ、ホームページの“見た目”を設定するための技術です。HTMLだけではただの文章ですが、CSSで装飾することによって、デザインやレイアウトを表現することができます。例えば、ホームページの「書体」「文字色」「背景色」、写真や文章の「配置(レイアウト)」を調整するために、CSSが使われています。

CSS編集の手順

管理画面のメニューで[デザインの選択]をクリックします
[デザインの選択]ボタンのクリック画面
「現在選択されているデザイン」の[CSSの編集]をクリックします
01

※現在選択されていないテンプレートを編集したい場合は、[このデザインを選択]をクリックしてから、編集を行なってください。

[初期CSSをコピーして編集を開始する]をクリックします
02

テンプレートによっては、パソコンとスマホで別々にスタイルシートが存在しているものもあります。
その場合は、CSSが「CSSの適用(パソコン版)」と「CSSの適用(スマホ版)」に分かれています。
スタイルを変更したい方のCSSを編集してください。

[編集CSS]のタブで編集を行います

※HTML・CSSの基本的な知識を習得していただいていることを前提としてご使用ください(誤って記述した場合、レイアウト等を崩してしまう可能性があるため)。
※このページの下部に、よく使うHTMLタグとCSSプロパティを記載していますので参考にしていただければと思います。

※セキュリティ上、長時間操作されない場合、自動的にログアウトされます(CSSの編集のみでは、約20分ほどでログアウトされるため、必ず[上記の内容で保存]をクリックしてください。自動ログアウトされてしまった場合、変更内容が破棄されます)。編集を行う場合は、こまめに保存していただくか、コピーしたCSSをご自身のパソコンのテキストエディタに貼り付けて編集する等の方法をおすすめします。

03

「初期CSS」のタブをクリックすると、編集前のCSSが確認できます。
※「初期CSS」の下の[ソースをコピー]をクリックすると、ソースがコピーできます。念のため、編集前にCSSをコピーして、ご自身のパソコンで「メモ帳」などに保存していただくことをおすすめします。
※「初期CSS」の下の[初期CSSでプレビュー]をクリックすると、CSS編集前の表示を確認できます。

07
[上記の内容で保存]をクリックします

CSSの編集が完了したら、編集画面下部の[上記の内容で保存]をクリックします。

05

設定ボタンをクリックすると、下記のような注意書きが表示されます。
問題がなければ[OK]をクリックしてください。

04
実際のホームページを確認します

管理画面右上の[ホームページの確認]をクリックして、ホームページを開き、変更箇所が反映されていることを確認します。
※変更が反映されない場合、「古いページ情報(キャッシュ)」が残っている可能性があるため、ページを再読み込みして確認してください(CSSの場合、キャッシュが強く残ることがあります/キャッシュクリアの方法はこちらの記事をご参照ください)。

04

よく使うCSSプロパティとHTMLタグ

よく使うCSSプロパティ
コード名 コードの意味
#●●●(id名) HTMLコードで「id=”●●●”」と記述されている箇所
.●●●(class名) HTMLコードで「class=”●●●”」と記述されている箇所
background 背景の色や模様
※「#ffffff」などの文字コードで指定します(文字コードの参考サイトはこちら)。
color 文字の色
※「#000000」などの文字コードで指定します(文字コードの参考サイトはこちら)。
font-size 文字の大きさ
※「px」や「em」という単位を使って調整します。
font-family 文字の書体
font-weight 文字の太さ
※「normal」や「bold」で調整します。
text-decoration 文字の装飾(下線など)
width、height 要素の横幅、高さ
※「px」や「em」という単位を使って調整します。
margin、padding 要素の余白を調整するコード
※「px」や「em」という単位を使って調整します。
border
よく使うHTMLタグ一覧
タグ名 タグの意味
h1、h2、h3… 見出し
p 段落・文章・文字
ul、li リスト、リストの要素
table、th、td 表、表のセル
a リンク
div ブロック
nav ナビゲーション

※上記以外のCSSやHTMLタグ、CSSプロパティの記述方法等がわからない場合、インターネットで検索すると、様々な情報がみつかるかと思います。

ホームページのHTMLコードを確認する方法

ご自身のホームページのHTMLコードを確認したい場合は、ブラウザでホームページを表示し、マウスの右クリックで表示されたメニューから「ページのソースを表示」をクリックします(Google Chromeの場合)。別のタブで、ホームページのHTMLコードが表示されます(編集は行えません)。

CSS編集済みのテンプレート一覧について

デザインの選択画面で「現在選択されているデザイン」の枠のすぐ下にある[CSS編集済み一覧]をクリックすると、すでにCSSを編集したテンプレートが表示されます。
※現在選択していないデザインのCSSをもう一度編集する場合は、[このデザインを選択]をクリックしてデザインを選択後、[CSSの編集]のボタンをクリックしてください。

ご意見をお寄せください

「CSS編集機能」は、現在、β版でのリリースとなっており、まだ完成ではないと考えております。
お試しいただいた結果、「もっとこういうことができたらいいのに」「ここはわかりにくい」といったご意見をいただき、よりよく改善していきたいと思っています。
ご利用になってお気づきのことや、使ってみての感想がありましたら、ぜひお聞かせください。
※上級者向けの使い方として開発しております。

「CSS編集機能・β版」へのご意見・ご感想フォーム

  • 大変恐れ入りますが、上記のフォームからいただいたご意見・ご感想につきまして個別の返信は致しません。今後のアプリ改良・改善の参考とさせていただきます。あらかじめご了承ください。
  • サポートからの返信が必要なものは、「お問い合わせフォーム」よりご連絡をお願いいたします。

ロゴマークを表示させる

文字に装飾やリンクを設定する

Googleマイビジネスに登録しよう

外部フォームを利用する

SNSリンクを設定する

Googleアナリティクスの設定

アクセス解析を見る

PAGE TOP