行政書士ホームぺージリリースまでの流れ(ワードプレスの設定など)

行政書士開業 ウェブ屋コラム
行政書士開業と事務所要件とウェブサイト作成

WordPress(初期設定)a

httpsにする

  • 設定→一般→「WordPress アドレス (URL)」→httpsにする
  • 設定→一般→「サイトアドレス (URL)」→httpsにする
  • 設定→パーマリンク設定→投稿名

テーマの設定

ダウンロード

テーマの設定

  • 外観→テーマ→新規追加→cocoon-master.zipを選択→いますぐインストール→テーマのページに戻る
  • 新規追加→cocoon-child-master.zipを選択→いますぐインストール→有効化をクリック
    【有効:Cocoon Chird】になっているか確認

プラグインのアップロード

  • プラグイン→新規追加→プラグインを検索→今すぐインストール→有効化

初期設定でアップロードするプラグイン

  • Contact Form 7
  • Contact Form CFDB7
  • zipaddr-jp(参考サイト
  • insert pages
  • EWWW Image Optimizer
  • Google XML Sitemaps(作者: Auctollo)

cocoon設定

  • 全体→フォント→Noto Sans JP
  • 全体→サイト背景色→白に設定
  • 全体→サイドバーの位置→左(右がデフォルト)
  • 全体→サイドバーの表示状態→フロントページで非表示
  • ヘッダー→ヘッダーレイアウト→トップメニュー右寄せ(前はセンターロゴスリムメニュー)
  • ヘッダー→ヘッダーの固定にチェック
  • ヘッダー→高さ→50に設定
  • ヘッダー→高さ(モバイル)→空にする
  • ヘッダー→グローバルナビメニュー色→オフィシャルカラーに設定
  • タイトル→フロントページタイトル→サイト名
  • SEO→日付の設定→表示する日付→更新日のみ
  • インデックス→投稿関連情報の表示→投稿日の表示(スニペット=サムネイル)(×投稿日〇更新日)
  • 投稿→カテゴリー→同一カテゴリーのものを表示するにチェック
  • 投稿→コメント設定→チェックを外す(コメントを表示しない)
  • 本文→投稿関連情報→更新日の表示のみにチェック(投稿日の表示×投稿日〇更新日×投稿者名)(スニペット=サムネイル)
  • 目次→目次表示の深さ→h2見出しまで
  • 目次→目次の中央表示→チェックがついていればOK(目次をメインカラムの中央に表示する)
  • SNSシェア→トップシェアボタンの表示をオフ
  • SNSシェア→ボトムシェアボタンの表示をオフ
  • SNSフォロー→フォローボタンの表示をオフ
  • フッター→フッター背景色→オフィシャルカラーに設定
  • フッター→フッター文字色→白色に設定
  • フッター→フッター表示タイプ→メニュー&クレジット(中央揃え)
  • ボタン→ボタンのアイコンフォント選択
  • ボタン→ボタン色→オフィシャルカラーに設定(濃色の場合は文字色も設定)
  • モバイル→モバイルボタン→モバイルボタンの固定表示にチェック
  • AMP→AMPの有効化→チェックボタンがついていないことを確認(有効化しない)
  • その他→簡単SSL対応→内部URLをSSL対応(簡易版)にチェック

画像設定関連(デザイン校了後)

ファビコン

  • 外観→カスタマイズ→サイト基本情報→サイトアイコンを選択

画像サイズ

  • 512×512 px

OGPの設定

  • cocoon設定→OGPの設定→画像アップロード

画像サイズ

  • 800×660 px

NO IMAGE画像の設定

  • cocoon設定→NO IMAGE画像→画像アップロード

画像サイズ

  • 1200×675 px

ロゴ

  • cocoon設定→ヘッダー→ヘッダーロゴ→画像アップロード

WordPress(初期設定)t

ワードプレス設定

  • 表示設定>ホームページ:固定ページ(トップページ)設定
  • 表示設定>投稿ページ:固定ページ(ブログ)設定
  • ディスカッション>新しい投稿へのコメントを許可をOFF

コンタクトフォーム設定

  • コンタクトフォーム>作成
<div class="table">

<div class="tr">
<div class="td">
<label> <b>氏名</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[text* your_name] 
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>氏名フリガナ</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[text* your_name_furigana] 
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>住所</b><u class="nini">任意</u> </label>
</div>
<div class="td">郵便番号(7桁半角数字ハイフンなし)<br>[text zip]<br>住所<br>[text pref] [text city] [text addr]<br>[text addr2]</div></div>


<div class="tr">
<div class="td">
<label> <b>電話番号</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[tel* your_denwa] 
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>メールアドレス</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[email* your_email] 
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>お問い合わせに対する<br>ご希望の連絡方法</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[radio your_renraku use_label_element default:1 "電話にて" "メールにて"]
電話にてご連絡する場合の希望時間<br>(例:いつでも、平日午前中、○日18:00以降など)
[text your_renrakujikan]
</div>
</div>

<div class="tr">
<div class="td">
<label> <b>お問い合せ内容</b><u class="hissu">必須</u></label>
</div>
<div class="td">
[textarea* your_naiyou]
</div>
</div>

</div>
<br>
[submit "送信する"]
お問い合わせがありました。
対応お願いいたします。

■氏名
[your_name]

■氏名フリガナ
[your_name_furigana]

■郵便番号
[zip]

■住所
[pref][city][addr]
[addr2]

■電話番号
[your_denwa]

■メールアドレス
[your_email]

■お問い合わせに対するご希望の連絡方法
[your_renraku]

■電話にてご連絡する場合の希望時間
(例:いつでも、平日午前中、○日18:00以降など)
[your_renrakujikan]

■お問い合せ内容
[your_naiyou]

-- 
送信元ページ:[_post_title]
送信元URL:[_post_url]
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
/************************************
** フォームとテーブルのデザイン
************************************/
form u.hissu {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #bf0000;
	border: 1px solid #bf0000;
}
form u.nini {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	border: 1px solid #999;
}
form u.kotei {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #333;
	border: 1px solid #333;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item{
	display:block;
}

/* 禁止マーク */
input:disabled {
    cursor: not-allowed;
}
label.disabled {
    cursor: not-allowed;color:#999;
}
/* 郵便番号 */
input[name="your_name"]{width:30%;}
input[name="your_name_furigana"]{width:30%;}
input[name="your_denwa"]{width:40%;}
input[name="your_email"]{width:90%;}
input[name="zip"]{width:30%;}
input[name="pref"]{width:30%;}
input[name="city"]{width:30%;}
input[name="addr"]{width:30%;}
input[name="addr2"]{width:100%;}

/* フォームオブジェクト */
input[type="submit"] {
    display:block;
    background-color: #bf0000;
    color:#fff;
    font-weight:bold;
    text-align:center;
    margin: 0 auto;
    width: 80%;
	font-size:1.5em;
}
input {border: 1px solid #808080 !important;margin:4px 0;}
textarea {border: 1px solid #808080 !important;margin:2px 0;}
input:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
textarea:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
input:focus[type="submit"] {background-color: #0000ff;}


/************************************
** テーブルのデザイン
************************************/
.table{
	background-color: #fff;
	font-size:0.9em;
	border-collapse: collapse;
}
.table .tr{
  display: table;
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr{
    display: block;
    width:100%;
  }
}
.table .tr .td{
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 8px 13px;
  vertical-align:top;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr .td{
    display: block;
    width:100%;
  }
}
.table .label{
	background    : #fcfcfc;
	width:30%;
}
.table .input{
	width:70%;
}

.table .tr .td:nth-child(2){
width:70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2){
    display: block;
    width:100%;
  }
}
  • 送信先→[_site_admin_email]
  • 送信元→[_site_title]
  • 題名→[_site_title]お問い合わせ
  • 追加ヘッダー→空にする

プラグイン設定

  • Site Kit by Google(Search Consoleで、sitemap.xml を設定)

メニューの作成(外観>メニュー)

パソコンのメニュー(ヘッダーメニュー)

その先生に応じて作成

スマホのメニュー(フッターモバイルボタン)

URL#menu
ナビゲーションラベル取扱業務
CSS class (オプション)fa fa-angle-double-right
URLtel:09012341234
ナビゲーションラベルお電話お待ちしております
CSS class (オプション)fa fa-phone

サイト制作開始前 決定事項

インフラおよび広告管理関連

  • ドメインの決定
  • メールアドレスの決定
  • グーグルアカウントの決定

広告関連

  • 目標とする検索キーワードの決定
  • 競合サイトのピックアップ

デザイン関連

  • ロゴ作成
  • サイトイメージ(目標とするサイトのピックアップ)
  • オフィシャルカラーの決定

ご注文者がご提供(ある場合)

  • ウェブサイト
  • ロゴ
  • 名刺
  • 記事コンテンツ

サイト制作開始後 初期設定

まず最初にやること

  • 設定→一般→「WordPress アドレス (URL)」→httpsにする
  • 設定→一般→「サイトアドレス (URL)」→httpsにする
  • 設定→パーマリンク設定→投稿名

アカウント・インストール関連

  • ドメイン取得とDNS設定
  • メールアドレスの取得と転送設定
  • グーグルアカウントの新規取得
  • ワードプレスのインストール
  • コクーンのインストール(参考サイト
  • 子テーマのインストール(参考サイト
  • 個別CSSのアップロード
  • アナリティクスのアカウント作成と設定
  • SITEKITの設定
  • リリース時プラグインのインストール

リリース時プラグイン

  • Contact Form 7
  • Contact Form CFDB7
  • (必要に応じて)zipaddr-jp(参考サイト
  • (必要に応じて)Really Simple CAPTCHA
  • (ファイル触れるならば、できるだけいれる)EWWW Image Optimizer(参考サイト
  • (必要に応じて)Meta Slider
  • insert pages
  • (コピーしたいとき)Yoast Duplicate Post

ワードプレス上の設定

  • サイトタイトル・キャッチフレーズの設定
  • WordPress アドレス・サイトアドレスをSSLに対応させる
  • 固定ページ作成し、「ホームページ」に設定
  • 固定ページ作成し、「投稿ページ」に設定
  • 投稿設定→更新情報サービスの設定(PING送信)
  • お問合せフォームの作成
  • お問合せフォームのテスト送信とDB格納確認
  • スライダーの設定
  • トップページの仮テキスト入力
  • メニューの作成
  • サイドバーウィジェット調整

コクーン上の設定

  • 全体→フォント→Noto Sans JP
  • 全体→サイト背景色→白に設定
  • 全体→サイドバーの位置→左(右がデフォルト)
  • 全体→サイドバーの表示状態→フロントページで非表示
  • ヘッダー→ヘッダーレイアウト→センターロゴスリムメニュー
  • ヘッダー→ヘッダーの固定にチェック
  • ヘッダー→高さ→50に設定
  • ヘッダー→ヘッダーロゴ→作成後(175×50)アップロード
  • ヘッダー→グローバルナビメニュー色→オフィシャルカラーに設定
  • タイトル→フロントページタイトル→サイト名
  • SEO→日付の設定→表示する日付→更新日のみ
  • OGP→画像アップロード
  • アクセス解析→Google AnalyticsトラッキングID
  • インデックス→投稿関連情報の表示→投稿日の表示(スニペット=サムネイル)(×投稿日〇更新日)
  • 投稿→カテゴリー→同一カテゴリーのものを表示する
  • 投稿→コメント設定→コメントを表示しない
  • 本文→投稿関連情報→投稿日の表示(スニペット=サムネイル)×投稿日〇更新日×投稿者名
  • 目次→目次表示の深さ→h2見出しまで
  • 目次→目次の中央表示→中央表示させる(チェックがついていればOK)
  • SNSシェア→トップシェアボタンの表示をオフ
  • SNSシェア→ボトムシェアボタンの表示をオフ
  • SNSフォロー→フォローボタンの表示をオフ
  • 画像→NO IMAGE画像→画像アップロード
  • フッター→フッター表示タイプ→メニュー&クレジット(中央揃え)
  • フッター→フッター色→オフィシャルカラーに設定
  • ボタン→ボタン色→オフィシャルカラーに設定(濃色の場合は文字色も設定)
  • モバイル→モバイルボタン→モバイルボタンの固定表示させる
  • AMP→AMPの有効化→チェックボタンをはずし無効化する
  • 管理者画面→項目数が多いので表示エリアを考慮し設定する
  • その他→簡単SSL対応→内部URLをSSL対応(簡易版)を設定する

納品時共有情報

  • SSL設定済みのURLを共有
  • メールアドレスを共有し転送設定
  • URL・メールアドレスのQRコードを提供
  • グーグルアカウントの共有

オススメ画像サイズ

スマホ版ファーストビュー・全体

みんなの使ってるスマホの画像サイズ

横:360px〜1080px 、縦:600px (レティーナディスプレイを考慮し2倍にして横750pxで作成)

画面横縦サイズ750x1334
メインに使う大きめの画像750x550
2カラムに使う小さ目の画像750x550

パソコン版(ファーストビュー・全体)

みんなの使ってるパソコンの画像サイズ

画面横縦サイズ1920x1080
メインに使う大きめの画像1080x550
2カラムに使う小さ目の画像540×350

記事のアイキャッチ画像

パソコン版800px(圧縮形式はwebp)

比率16:9
きれい1200x675
普通800x450