WEEBLYの教科書
  • Weeblyを始めよう!
    • このHPについて
    • 直感的につくれるWeebly
    • Weeblyの教科書での学び方
    • 無料プレゼントのご案内
    • Weeblyで制作依頼の費用
    • News & Topics
    • 管理人日誌
    • セミナー情報 >
      • Weebly Lesson 1
      • Weebly Lesson 2
      • 3時間で学ぶHTML >
        • テキストダウンロード
      • VScodeインストール
  • weeblyについて
    • CMSの種類と選び方
    • こんなCMSは利用するな!
    • Weeblyのメリット、デメリット
    • Weeblyの特長 >
      • Weeblyの無料と有料プラン
      • 特長01 ドラッグ&ドロップで簡単編集
      • 特長02 100種類以上の豊富なデザイン
      • 特長03 強力なホスティング
      • 特長04 迅速で役立つサポート
      • 特長05 簡単なブログ設置&投稿
      • 特長06 優れた画像編集機能
      • 特長07 優れた画像設置・編集機能
      • 特長08 簡単なビデオ、オーディオ配置
      • 特長09 フォームも簡単設置&高度な編集機能
      • 特長10 詳細なトラフィック統計情報が確認できる
      • 特長11 独自ドメインホスティング
      • 特長12 無料版でも広告表示なし
      • 特長13 スマホ、タブレットから編集できる専用アプリ登場!
      • 特長14 さらなる高機能なツールが続々登場!
    • これからのHPとは?
    • 役立つホームページとは
    • 事業に役立つHPの作り方
  • サイトを作ってみよう!
    • ホームページ作成準備 >
      • 構成を考えよう!
      • 素材を用意しよう!
    • Weebly登録・設定・基本操作 >
      • Step 01 登録&スタート >
        • デザインテーマの変更
        • 仮ドメインで始めよう!
        • ドメイン豆知識
      • Step 02 サイト設定
      • Step 03 サイトの管理画面
      • Step 04 編集操作画面
      • Step 05 編集操作の基礎知識
    • サイト作成・編集 >
      • 編集操作項目一覧
      • ページの追加・削除
      • 画像と文字の配置・編集
      • ギャラリーの配置・設定
      • スライドの配置・設定
      • HD動画・YouTube動画の配置と設定
      • 地図(Google Map)の配置・設定
    • SEO設定について
    • 独自ドメイン設定方法
    • ドメイン設定にかかる時間
  • 逆引き
  • 機能を拡張しよう!
  • Q&A
  • お問合わせ
  • Weeblyで制作したHP例一覧
    • 制作事例01-SIX SENSES
    • 制作事例02-いけばな作家 大泉麗仁
    • 制作事例03-アクロキューブ株式会社
    • 制作事例04-mom healing
    • 制作事例05-光苑 -書道教室-
    • 制作事例06-マウスガード -EPOCH-
    • 制作事例07-(株)ハイパフォーマー
    • 制作事例08-高橋工業有限会社
    • 制作事例09-横浜精密 精密ゲージ製作会社
    • 制作事例10-ミズモリサーチ 水漏れ調査第三者機関
    • 制作事例11-イタリアンレストラン TRATTORIA TOMATO

Step 04
Weeblyの操作画面

ホーム > サイトを作ってみよう! > Step 04 編集操作画面

Step 04

編集画面の各種操作方法
  • 管理画面から編集画面へ Step 04-1

04-1 管理画面からサイトを選んで編集画面へ

管理画面のトップページに表示されている機能を説明しています。
サイトへの一週間のアクセス数、一週間の総ページ観覧数を見ることができます。

04-2 編集画面ページでできること

  • 最初に表示されている左側の「要素」
  • トップナビゲーションを選んで画面を切り替えてできる機能の概要を紹介
編集ページが開いた時はサイトのトップページ(index.htmlになるページ)が開いていて、レイアウト編集ができる「要素」ツールが左側に表示されています。(「要素ツール」については別のStepで詳しく案内します)トップナビゲーションに表示されているタブで操作画面を切り替えることができ、それぞれ
  • ビルド(ページレイアウトを編集する操作画面)
  • ページ(ページ一覧が表示され、ページ追加や、各ページの各種設定ができる操作画面)
  • テーマ(基本デザインの変更や、デザインの要素(各パーツ)のCSSで設定されている仕様の変更や、HTML、CSSの変更ができます)
  • ストア(ネットショップとして販売したい商品がある場合はストアの設定をする必要があります。ストアを始める場合の設定からストア登録された商品等の設定を操作する画面です)
  • 設定(サイトの公開・非公開、SEO設定等サイトの基本的な操作登録ができる操作画面)
がナビゲーションに表示されています。

04-3 編集画面-ページ内容の編集-[ビルド]タブ

  • ページの内容を編集
STEP 05 編集画面の基礎知識へ

04-4 編集画面-ページ追加方法-[ページ]タブ

  • ページの追加方法
ブログのような機能ではない、普通のページは無限に追加できます。

Weeblyのサイト編集画面 [ページ]を選ぶと既に登録されいているページの上に「+」マークが表示されます。
そこをクリックすると新しいページが作成できます。
  • 標準ページ
  • ブログのページ
  • ストアのページ
  • 外部ページ(ページは作られず、ナビゲーションに表示されるだけでクリックすると外部サイトが表示される設定のタブを作ることができます)
  • Non Clickable menu(ページは作られず、ナビゲーションに表示され下層にあるページを表示させるだけの機能のタブを作ることができます。クリックできません。)
の4種のサイト(またはナビゲーションタブ)を作ることができます。
ページの追加・削除

04-5 編集画面-ページの各種設定-[ページ]タブ-[ページ設定]

  • ヘッダーレイアウトの変更
  • アクセス制限設定
  • SEO設定
Weeblyのサイト編集画面 [ページ]ではそのページの基本的なレイアウト設定やアクセス制限、SEO設定などが操作できます。

基本レイアウトの仕様を変更する時は予めセットされているHTML設定を変えることでレイアウトを変えられます。

[ヘッダーの種類]の所に表示されているレイアウト名(Header)クリックしてプルダウンメニューを表示させると
  • ヘッダーあり
  • ヘッダーなし
  • スプラッシュ(ランディングページにようなもの)
が表示されます。

予め3タイプのヘッダーレイアウトが登録されているので、そこからそのページに設定したいヘッダーレイアウトを選びます。
※選んでいるデザインによっては「長いヘッダー」「短いヘッダー」などが
元からセットされている場合があります。

ヘッダーの種類を追加したり編集することもできます。
それは次のステップで概要をお伝えします。

ナビゲーション(ナビ、タブ)に表示させる名称と、実際のサイトのURL(ディレクトリー)の名称を変えて設定できます。

そのページがブラウザーで開いている時にタブに表示されるページタイトルも個別に設定することができるのもこの[ページ]→[編集ページ]設定→[SEO設定]のところで設定できます。
STEP 5 編集操作の基礎知識

操作方法についてご質問

共有できるご質問へは無料でご案内しています。
個別案件は内容によって有料の場合があります。
お気軽にご相談ください。
操作質問フォーム

Weeblyでサイト作成相談・依頼

¥55,000-(税別)〜 +オプションで制作します。詳しくはお問合せください。
​お気軽にご相談ください。
新規作成・ご相談フォーム

Weeblyへサイト移行相談・依頼

デザインブラッシュアップも含め¥55,000-〜 +オプションで制作しています。
​お気軽にご相談ください。
サイト移行・御相談フォーム

Weeblyで作成したサイトを
​ブラッシュアップ相談・依頼

Weeblyで作成しているサイトをデザイン、イアウト、構成などブレッシュアップを相談・依頼など​お気軽にご相談ください。
Weebly制作サイトをブラッシュアップ相談・依頼

Weeblyの基本設定・操作・集客できるサイト運営など、セミナー開催しています。
開催場所:東京 新宿駅から京王線で桜上水駅下車 徒歩7分

最新のスケジュール公開中! 受講お待ちしております。
セミナー情報・お申込み
セミナー情報・お申込み
セミナー情報・お申込み
セミナー情報・お申込み

Weeblyをすぐ始める

Weebly.comを今すぐ始めたい方は、
Weeblyのバナーをクリック ▶▶▶
登録からサイトOPENまで ▶
Create your online store and start selling. Try it free at Weebly.com!
The Easiest Way to Create a Website. Weebly.com

サイトマップ

ホーム
このHPについて
├ HPの作り方無料プレゼントのご案内
└ これからのHPとは?
    ├ 役立つHPの作り方
    ├ 事業に役立つHPの作り方
    └
こんなCMSは利用するな
└ Weebly.comの特長
    ├ 他のCMSとの比較
    ├ Weeblyの有料プラン紹介
    └ Weeblyメリット、デメリット
└ Weeblyの特長の詳細 
 ├ ドラッグ&ドロップで作成
    ├ 豊富なデザイン
    ├ 強力なホスティング
    ├ 迅速で役立つサポート
    ├ 簡単ブログ配置&編集
    ├ 優れた画像設置・編集機能      
    ├ 簡単なビデオ,オーディオ配置
    ├ フォームも簡単配置・編集
    ├ トラフィック統計
    ├ 独自ドメインホスティング
    ├ 無料版でも広告なし
    └さらなる様々な機能
└  こんなHPが作れます!
 サイトを作ってみよう!
​
└ホームページの作成準備
 ├ サイトの構成を考えよう!
 └  素材を用意しよう!
​
└ WEEBLY登録・設定・基本操作
 └ Step01登録&スタート
     ├ デザインの選択
​  
└ コラム・ドメインについて
 ├Step02 サイトの設定
 
├ Step03 サイトの管理画面
 
├ Step04 サイトの編集操作画面
 └ Step05 サイトの編集操作の基礎知識

└ サイト作成・編集
 
└ 編集操作項目一覧
     ├ デザインテーマの変更
     ├ ページの追加・編集
  └ タイトルを横長のロゴ画像に変更
    └ ブログページの追加・編集
       └ SNSと連携設定
    ├ 画像と文字の配置・編集
    
├ 複数の画像をポートフォリオ表示
    ├ 複数の画像をスライド表示
    ├ 動画の配置
    ├ リンクボタンの配置
    ├ Google Adsenseの配置
    ├ Google Mapの設置
    ├ ブログ一覧(RSS FEED)の設置
    ├ お問合せフォームの設置・編集
    ├ アンケートの設置・編集
    ├ Googleカレンダーの設置
    ├ オリジナルHTMLコードの設置
    ├ ページ内検索BOXの配置
    └ ダウンロード書類の配置
└ SEO対策の設定 
機能を拡張しよう!
├ Facebook「いいね!」boxの設置
├ Fecebook Recommend Boxの設置
└ Twitter連携BOXの設置

Q&A

カスタマイズ(有料会員専用)
├ RSS FEEDの設定&カスタマイズ
├ カスタムHTMLの設定
├ CSS3を活用した設定
├ デザインのカスタマイズ
├ ナビのカスタマイズ
└ フッターのカスタマイズ
└ Google Analitycsの設置
└ Google Webmasterコードの設置

お問合せ
└ 有料サポートのご案内

管理人プロフィール

2012- Copyright © Weeblyの教科書. All Rights Reserved

  • Weeblyを始めよう!
    • このHPについて
    • 直感的につくれるWeebly
    • Weeblyの教科書での学び方
    • 無料プレゼントのご案内
    • Weeblyで制作依頼の費用
    • News & Topics
    • 管理人日誌
    • セミナー情報 >
      • Weebly Lesson 1
      • Weebly Lesson 2
      • 3時間で学ぶHTML >
        • テキストダウンロード
      • VScodeインストール
  • weeblyについて
    • CMSの種類と選び方
    • こんなCMSは利用するな!
    • Weeblyのメリット、デメリット
    • Weeblyの特長 >
      • Weeblyの無料と有料プラン
      • 特長01 ドラッグ&ドロップで簡単編集
      • 特長02 100種類以上の豊富なデザイン
      • 特長03 強力なホスティング
      • 特長04 迅速で役立つサポート
      • 特長05 簡単なブログ設置&投稿
      • 特長06 優れた画像編集機能
      • 特長07 優れた画像設置・編集機能
      • 特長08 簡単なビデオ、オーディオ配置
      • 特長09 フォームも簡単設置&高度な編集機能
      • 特長10 詳細なトラフィック統計情報が確認できる
      • 特長11 独自ドメインホスティング
      • 特長12 無料版でも広告表示なし
      • 特長13 スマホ、タブレットから編集できる専用アプリ登場!
      • 特長14 さらなる高機能なツールが続々登場!
    • これからのHPとは?
    • 役立つホームページとは
    • 事業に役立つHPの作り方
  • サイトを作ってみよう!
    • ホームページ作成準備 >
      • 構成を考えよう!
      • 素材を用意しよう!
    • Weebly登録・設定・基本操作 >
      • Step 01 登録&スタート >
        • デザインテーマの変更
        • 仮ドメインで始めよう!
        • ドメイン豆知識
      • Step 02 サイト設定
      • Step 03 サイトの管理画面
      • Step 04 編集操作画面
      • Step 05 編集操作の基礎知識
    • サイト作成・編集 >
      • 編集操作項目一覧
      • ページの追加・削除
      • 画像と文字の配置・編集
      • ギャラリーの配置・設定
      • スライドの配置・設定
      • HD動画・YouTube動画の配置と設定
      • 地図(Google Map)の配置・設定
    • SEO設定について
    • 独自ドメイン設定方法
    • ドメイン設定にかかる時間
  • 逆引き
  • 機能を拡張しよう!
  • Q&A
  • お問合わせ
  • Weeblyで制作したHP例一覧
    • 制作事例01-SIX SENSES
    • 制作事例02-いけばな作家 大泉麗仁
    • 制作事例03-アクロキューブ株式会社
    • 制作事例04-mom healing
    • 制作事例05-光苑 -書道教室-
    • 制作事例06-マウスガード -EPOCH-
    • 制作事例07-(株)ハイパフォーマー
    • 制作事例08-高橋工業有限会社
    • 制作事例09-横浜精密 精密ゲージ製作会社
    • 制作事例10-ミズモリサーチ 水漏れ調査第三者機関
    • 制作事例11-イタリアンレストラン TRATTORIA TOMATO