MENU

「自作ホームページ・デジタルキット」

この度はmicotoの「自作ホームページ・デジタルキット」をご購入いただき、ありがとうございます。

自作でホームページを作って頂くにあたり、画像とテキストで分かりやすく説明しております。

ホームページを制作していただく流れは・・・

①事前準備
②基本編
③実践編
その他役に立つツールの紹介

の3つのブロックに分かれています。

以下の流れで進めていきます

本ガイドは基本的に飛ばさずに①~③の順番に進めていく事をおススメします

事前準備

Xserver契約・ドメイン取得・Wordpress導入

  1. サーバーの契約・ドメイン取得
  2. WordPress導入

WordPress初期設定

  1. WordPressのログイン
  2. WordPressの初期設定
    • パーマリンクの設定
    • SSL化の設定
    • 不要データを削除

GoogleChrome導入・拡張機能ツール取得

  1. GoogleChrome&Googleアカウント作成方法
    • Chromeのダウンロード方法
    • Chromeからの新規アカウント作成方法
  2. GoogleChrome拡張機能ツール取得
    • LastPass
    • ColorZilla
    • Clear Cache
    • GoFullPage – Full Page Screen Capture

WordPressテーマ「SWELL」の購入

  1. WordPressテーマ「SWELL」の購入
  2. 「SWELL」をインストール
    • テーマをインストールし有効化する
    • 不要なテーマの削除
    • SWELL認証の完了

SWELLのカスタマイズ

  1. SWELLの設定・カスタマイズ
    • 着せ替えデザインの設定方法
    • サイト名・ファビコン設定
    • メインカラーの設定
    • ヘッダーの設定
    • メインビジュアルの設定

プラグインの設定と使い方

  1. プラグインの導入と設定
    • Google XML Sitemaps
    • EWWW Image Optimizer
    • Imsanity
    • Wordfence Security
    • BackWPup
    • SEO SIMPLE PACK

基本編

サイト整理

  1. グローバルメニュー(ヘッダー)の作成
    • 固定ページの作成
    • グローバルナビの表示
  2. サイドバーの作成
    • ウィジェットの編集
  3. フッターの作成

お問い合わせフォームの作成方法

  1. プラグイン「MW WP Form」のインストール
    • お問い合わせフォーム詳細設定
    • お問い合わせフォームの挿入
    • お問い合わせフォームのカスタマイズ
    • 動作確認

予約システムとの連携

  1. STORES予約会員登録&連携
    • 予約ページの作成
    • WordPressとの連携
    • 予約ボタンの設置

主に使用するSWELLブロックの使い方

  1. ホームページ制作で使用するブロック
    • テーブル
    • メディアとテキスト
    • カラムとリッチカラム
    • フルワイド
    • 区切り
    • ボタンとSWELLボタン
    • アコーディオン
    • FAQ
    • ステップ
    • 投稿リスト

実践編

サイト確認(デモサイト)

  1. 造形全般、看板製作会社(ホームページ)
    • トップページ(ヘッダー・グローバルメニュー・トップ画面)
    • トップページ(下層部)①~⑥
    • メニュー項目の階層化
    • 下層ページ(会社概要)
    • 下層ページ(ご注文の流れ)
  2. 居酒屋(飲食店)
    • トップページ(ヘッダー・グローバルメニュー・トップ画面)
    • トップページ(下層部)①~⑥
    • 下層ページ(メニュー)※投稿カテゴリー作成

ホームページ制作

  1. サイト構成の作成
    • ページを分類
  2. トップページをカスタマイズする
    • トップ画面・メインビジュアル・テキスト
    • ヘッダー設定・グローバルメニュー
    • トップページのブロック設定
    • フッターの設定
  3. 固定ページの作成方法

その他役に立つツールの紹介

無料で利用できるツール

  • Dropbox(クラウドストレージサービス)
  • ペライチ(1ページ完結型HP制作ツール)
  • CANVA(グラフィックデザインツール)
  • Vimeo(動画配信サービス)
  • Zoom(オンラインセミナーアプリ)
  • LINE公式アカウント
  • Pixabay(フリー画像素材)
  • photoAC(フリー画像素材)
  • remove bg(背景切り取りツール)
  • COMPRESS JPEG(画像圧縮ツール)

SWELLホームページ制作デザイン集

  • 弁護士法人浅野総合法律事務所
  • Smile Dance
  • 恋活・婚活パーティー アル
  • 庭革命株式会社
  • アビコムデザイン合同会社
  • Uncle Jam
  • YOGA DHALSHIM
  • MY BODY LABO
  • K3ケイスリー
  • 答志島
  • 【人形専門店】八千代人形 府中本店
  • totonoelle
  • 有限会社ティーアンドティー
  • I KAGATTE