【マーティング戦略】売上アップにつながるホームページを自作する全手順を完全解説

ナレッジ

ホームページは自社が持つブランド価値を発信し、売上にも直結するとても大切なツールであり、「誰に、何を、どのように」伝えるかというマーケティング戦略に基づいて作られるべきものです。

であるならば、戦略変更に伴っていつでも自由に改変できることがベストであり、そのためにも自作することは必要不可欠です。

とは言え、ホームページを自作することは決して難しくはありませんし、外部委託に比べて時間もコストも大幅に抑えられます

この記事では、ホームページを開設するうえで押さえておくべきマーケティング戦略と、ホームページ自作の全手順を知りたい方にとって役立つ記事となっています。

こんな方に読んでいただきたい

1.起業や副業でホームページを自作したいけれど、手順が分からない
2.ホームページを自作したいけれど、クオリティも下げたくない
3.売上アップにつながるホームページを自作したい

4.ホームページのマーケティング戦略について知りたい

ホームページとマーケティング戦略

マーケティングの概要

経営学者のピーター・ドラッカーは、「マーケティングの理想は、販売を不要にするものである」と言っています。つまり顧客に「買ってください」と売り込まなくても、商品が売れるようにブランドを作り上げることがマーケティングの理であるということです。

1.目的:
最終的なゴールである目的はひとつに絞り、魅力的かつシンプルにすることが大切です。

2.誰に(中心顧客):
中心顧客(WHO)は自社のブランドを届けたい最もコアな顧客層のことです。

3.何を(ベネフィット):
自社ブランドが顧客に与える価値のことであり、自社ブランドが選ばれる理由にあたります。

4.どのように(手段):
ベネフィットを中心顧客に届ける仕掛けや仕組みのことです。

中心顧客の深層心理にある本能的欲求を把握することが大切です。

そして、中心顧客の本能的欲求をコミュニケーションで刺すと、顧客はベネフィットを理解しやすくなったり、欲しくなったりするのです。

ホームページ戦略

それでは、ホームページ制作にあたっての戦略構築について解説していきたいと思います。

まずはーケティングのポイントを考えていきましょう。

例えばホームぺージで売上をアップすることを目的とするのであれば、中心顧客を定義して、その顧客の深層心理にある本能的欲求を把握しましょう。

ここで把握した本能的欲求を、ホームページ上に盛り込むことを忘れないようにしましょう。

そして、顧客の本能的欲求に対して自社ブランドが与える価値を伝えてください

自社ブランドが与える価値が顧客に刺されば、強い購買意欲が生まれることになりますので、申し込みページや問い合わせページへと誘導してください。

下記のようなボタンを設置して、クリックしてもらうように誘導していきます。

緑色のボタンはクリック率を高めると言われています。

緑色が与えるのは安心感であり、消費者心理とも密接に関連していると言えるでしょう。

―知りたい項目にジャンプできます―

サーバーとドメインの手続き方法
DNS(ネームサーバー)の設定
独自ドメインの設定方法
SSL化の手続きの仕方
WordPressの導入方法
WordPressの基本設定の仕方
サイトのカスタマイズについて
サイト基本情報の設定
ヘッダーメニューの設定方法
フッターメニューの設定方法
モバイルメニューの設定方法
ウィジェットの設定方法
推奨テーマのインストール方法
Cocoon設定の変更の仕方
プラグインの初期設定について
テーマのカスタマイズ(コード入力)
ホームページトップ画面の編集の流れ
見出しの設定方法
投稿記事のリンクを載せる方法
記事の投稿の仕方
メインページにスライドを挿入する方法(おまけ)
仕上がりを確認する

ホームページ自作の流れ

サーバーとドメインの手続き方法

まずは、最低限の基礎知識として、サーバーとドメインの概念についてご説明します。

サーバーとは、インターネット上の「土地」のこと
ドメインとは、インターネット上の「住所」のこと
ホームページとは、その土地の上に建てる「家」のこと

レンタルサーバーは様々な会社が提供していますが、本WEBサイトでも利用させていただいている「ロリポップ」で機能面、料金面においても充分に満足できると思います

レンタルサーバーを利用して、自分の土地を手に入れることから始めましょう。手順は決して難しくありませんので、安心してください。

まずは、ロリポップのトップページへアクセスしましょう。メインメニューにあるお申込みボタンをクリックしてください。

次にプランの選択ですが、ロリポップがおすすめする「ハイスピードプラン」でよいと思います。容量はWEBサーバーとして法人利用する場合であっても350GBあれば充分です。各プランの最下部にある「10日間無料でお試し」を選択してください。

次に、「パスワード」「メールアドレス」を入力してください。

次に、黄色い枠の中の「利用する」にチェックを入れてください。

独自ドメインとは、世界に1つしかないオリジナルのドメインのことです。自分で好きな文字列を指定して取得することができます。

一度取得したら更新し続ける限り、自分専用のドメインとして会社のホームページやメールアドレス、個人のブログサイトなどに利用することができます

※このサイトであれば『taikoutatata.com』の部分です

利用するにチェックを入れると、取得する独自ドメインの入力画面がプルダウンしますので、取得する独自ドメインを入力してください。

ムームーID(メールアドレス)、ムームードメインパスワードを入力してください。入力するメールアドレスはメールが届くものであれば何でも構いません。

ドメインの「.com」や「.net」の部分は、どのタイプを選んでもSEO(検索エンジン最適化)には影響しませんのでお好きなものをお選びください。

すでに使われているものは利用できないので、「取得可能」になっているタイプを選びましょう。また、 一度決めたドメイン名は変更できないので、永続的に使用するという観点から慎重に決めてください

次に、SMS認証による本人確認のため、担当者の携帯電話番号を入力してください。

入力した携帯番号宛てにショートメッセージで4桁の認証番号が届きますので、その4桁の数字を入力してください。

SMSの認証が完了すると、お申込み内容入力画面に遷移するので、必要情報を入力していきます。

自動更新設定(契約期間は12ヶ月以上)をすることを条件に、無料で独自ドメインを取得できるので、決済方法はクレジットカードになります。

もちろん、クレジットカードを使いたくない場合には、 コンビニ支払いや銀行振り込みなどの決済手段を選択することもできます。 その場合には、無料独自ドメインの取得を利用することはできませんのでご注意ください。

とは言え、有料独自ドメインと言えど1,500円/年程度で取得できるのでお好きな方を選択すればよいと思います。

有料独自ドメインを取得するのであれば「お名前.com」で希望するドメインが使えるか確認してみると良いと思います

以上の入力が終われば、レンタルサーバーとドメインの手続きは完了です。

DNS(ネームサーバー)の設定

まずは、ムームードメインのコントロールパネルにログインしてください。メニューの中の「ドメイン操作」内にある「ネームサーバ設定変更」をクリックしてください。

ムームードメインで作成したドメインをロリポップで利用する場合には、ムームードメインのネームサーバー設定画面で「ロリポップ!」を選択するだけで設定が完了します。

ムームードメイン以外でドメインを取得された方は、下記手順で進めてください。

例として、お名前.comでドメインを取得した場合の設定方法を解説します。

下図の赤枠で囲まれた部分、管理画面のネームサーバーの設定 > その他のネームサーバーを使う>ネームサーバー1と2に下記の情報を入力して確認をクリックすれば設定は完了です。

プライマリネームサーバーuns01.lolipop.jp
セカンダリネームサーバーuns02.lolipop.jp

ネームサーバー1にはプライマリネームサーバーの「uns01.lolipop.jp」を、ネームサーバー2にはセカンダリネームサーバーの「uns02.lolipop.jp」を入力します。

独自ドメインの設定方法

次に、先ほど所得した独自ドメインをロリポップに反映していきます。ロリポップの管理画面を開いていただき、メニューの中の「独自ドメイン設定」をクリックします。

そして、「設定する独自ドメイン」に先ほど取得した独自ドメインを入力します。また、公開(アップロード)フォルダ必ず入力(フォルダ名はご自身が分かれば何でも構いません)してください。

※このフォルダ設定をしていないと、あとで他のドメインを追加した時に(例えばサーバー上にもうひとつホームページを作りたい場合など)、既存のフォルダに上書きされてしまいます。

最下部の独自ドメインをチェックするをクリックすれば設定完了です。これで土地(サーバー)に住所(ドメイン)を設定できました

SSL化の手続きの仕方

次に、サイトの安全性を高めるための独自SSLの設定手続きについて解説していきます。

お金のかからない無料のSSLで充分ですし、手続きも簡単ですので、まだ対応していない方はすぐに対応されることをお勧めします

独自SSLとは、暗号化通信を行うことでサイトへの不正な侵入を防止し、検索結果ランキングを高めてくれる効果があります

企業のホームページ等はSSL化の有無が安心感に直結するので、必ずSSL化の対応をしておきましょう。

まずは、ロリポップのコントロールパネルのメニューから「セキュリティ」をクリックしてください。

「無料独自SSLを設定する」をクリックしてください。

無料のSSLでも有料のSSLでも、セキュリティの強度や機能の違いはありませんので、無料の独自SSLの設定で充分です。

「SSLで保護されていないドメイン」が表示されます。

独自SSLを適用するドメインを選択してください。選択後、各独自ドメイン単位で「独自SSL(無料)を設定する」をクリックします。

申請後、独自ドメインの状態が「SSL設定作業中」に変わります。

設定が完了するまでに5分程度がかかります。5分程待ってページを再読み込みすると、設定が完了したドメインは「SSL保護有効」となり、「SSLで保護されているドメイン」に移動されます

「SSL保護有効」となったドメインで、https://を冒頭に付けたURLでアクセスできれば、独自SSLの設定が完了しています

WordPressの導入方法

サイト作成ツールから「WordPress簡単インストール」をクリックしてください。

利用データベースは「新規自動作成」を選択してください。

WordPressの設定に必要な事項を入力してください。プライバシーの「検索エンジンによるサイトのインデックスを許可する」のチェックは外さないでください

内容に間違いないかを確認して「インストール」をクリックしてください。

これでWordPressのインストール作業は完了です。

WEBページデザイン編

WordPressの基本設定の仕方

ここでは、会社ホームページのデザイン設定の方法を解説していきます。

基本的にはその後のカスタマイズが不要になるように、見た目も洗練され、シンプルな設計を基本ベースご紹介していますので、この記事の手順通りに進めていただければ問題ありません

Wordpresの管理者ページURL(https://~/wp-amin/)を開いて、設定画面で入力したユーザー名とパスワードを入れます。

※注)SSL化する前の「http://~」ではなく、SSL化した後のURLである「https://~」で管理ページを開くようにしてください

WordPressのダッシュボードが開きます。

まず、メニューの「設定」から「一般」を選択します。

そして、「Wordpressアドレス(URL)」「サイトアドレス(URL)」の初期設定が「http://~」となっているので、「https://~」に変更してください。

※管理画面のログイン用のアドレスも変わるのでご注意ください。
http://ドメイン名/wp-admin/ ⇒ https://ドメイン名/wp-admin/

次に、メニューの「設定」から「パーマリンク」を選択し、「投稿名」にチェックを入れて最下部の変更を保存をクリックしてください。

ここまでで基本設定は完了です。

サイトのカスタマイズについて

いよいよサイトのカスタマイズに入っていきます。ダッシュボードから「サイトをカスタマイズ」を選択してください。

※管理メニューの「外観」「カスタマイズ」の順で選択してもいけます。

サイト基本情報の設定

「サイト基本情報」を選択します。

サイトのタイトルとキャッチフレーズについては、Wordpressのインストール段階で決定しているかと思いますが、変更の必要があればこちらから変更できます

ヘッダーメニューの設定方法

「メニュー」を選択します。

「メニューを新規作成」を選択します。

まずは、ヘッダーメニューを作っていきましょう。

ヘッダーメニューとは、WEBページ閲覧の際にトップページ最上部に表示されるメニューのことです(

メニュー名に「メインメニュー」と入力して、メニューの位置は「ヘッダーメニュー」を選択してください。

最下部にある「次」をクリックしてください。

「+項目を追加」をクリックしてください。

固定ページの「新規固定ページを追加」の部分にメニューとして加えたい項目を入力してください。はじめは、「ホーム」「会社概要」「事業紹介」「お問い合わせ」などがあれば充分かと思います。

「ホーム」「会社概要」「事業紹介」「お問い合わせ」 とそれぞれ入力して「+追加」ボタンを押してください。

左サイドの「メインメニュー」の下に新たに「メニュー」の項目が追加されていきます

順番の並べ替えが必要であれば、「並べ替え」ボタンを押すと上図のような画面が出ますので、必要に応じて並べ替えてください。

フッターメニューの設定方法

続いてフッターメニューの作成方法についても解説しておきます。

フッターメニューとは、WEBページ閲覧の際にトップページ最下部に表示されるメニューのことです。

フッターメニューはヘッダーメニューに登録している以外のメニューを作りたい場合など、必要に応じて設定してください。

❶「外観」>「メニュー」
❷「新しいメニューを作成しましょう」をクリック
❸「フッターメニュー」と入力
❹「メニュー」を作成をクリック

「固定ページ」からフッターメニューに入れたいページをチェック
❸「フッターメニュー」にチェック
❹「メニューを保存」をクリック

ヘッダーメニューとは別のメニューを入れたい場合は、あらかじめ固定ページを作成しておく必要があります

例えば、ヘッダーメニューには「会社案内」等を入れて、フッターメニューには「ご利用規約」などを入れたいという場合です。

※固定ページの作成は管理メニューの「固定ページ」>「新規追加」で作成できます。

ホームページの表示設定

管理メニューの「設定」>「表示設定」をクリックしてください。

ホームページの表示の「固定ページ」のチェックボックスにチェックを入れてください

ホームページはさきほどメニューの設定の章で作成した固定ページである「ホーム」を選択してください。

この設定をすることによって任意の固定ページをホームページのトップページに設定することができます。

モバイルメニューの設定方法

モバイルメニューはスマホでWEBページを閲覧した際にトップページ最上部に表示されるメニューのことです。※上図赤枠

まずは、管理メニューの「外観」>「メニュー」を選択してください。「新しいメニューを作成しましょう」をクリックしてください。

メニュー名には「モバイルメニュー」と入力してください。

メニュー設定は「ヘッダーモバイルメニュー」にチェックを入れてください。

最下部の「メニューを作成」をクリックしてください。

メニュー項目の追加で、 ヘッダーメニューで作成した固定ページの「ホーム」「会社概要」「事業紹介」「お問い合わせ」 を選択してください。

「メニューに追加」にチェックを入れます。

最期に右下にある「メニューを保存」をクリックすれば完了です。

ウィジェットの設定方法

最後にウィジェットのカスタマイズを実施していきましょう。

ウィジェットとは、アプリを開くことなくホーム画面上に表示しておけるショートカット機能のことです。最新の投稿一覧、バナー広告の貼り付けなど、行動を促すショートカットに活用できますので、慣れてきたらどんどんカスタマイズしてみてください。

ウィジェットは後からカスタマイズできますが、まずは基本ベースとしてウィジェットを表示しない設定にしておきます

管理メニューのダッシュボード>「サイトをカスタマイズ」を選択してください。

右側のメニューから「ウィジェット」を選択してください。

ウイジェットはサイドバー(画面の横部分)や、フッター(画面の下部分)など任意の箇所に設定することができます

初期設定ではサイドバーに3つのブロックが入っていますので、これらを削除していきます。

それぞれのブロックを選択すると下図のような画面が出てきますので、「削除」ボタンを押して削除してください。

サイドバーのウィジェットがなくなったことを確認して、左上の「公開」をクリックしてください。

これでサイトの基本カスタマイズは完了です。

推奨テーマのインストール方法

初心者でも使いやすい無料テーマである「Cocoon」のインストール方法をご紹介します。

まずは下記よりCocoonのダウンロードページに移動してください。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

Cocoon親テーマと、Cocoon子テーマを両方ともダウンロードしてください。

親テーマのみインストールした場合は、テーマのアップデート時にCSSやテンプレートカスタマイズがリセットされてしまいます。

子テーマをインストールすることで、テーマカスタマイズを保持したままアップデートができます。

必ず子テーマもインストールしてください

次にWordpress管理画面メニューから「テーマ」を選択します。

「新規追加」ボタンをクリックします。

「テーマのアップロード」ボタンをクリックします。

「参照」ボタンから親テーマ「cocoon-master.zip」を選択して「今すぐインストール」ボタンをクリックしてください。

親テーマをインストールしたら、テーマページに戻ります。

そして、テーマのアップロードページを開いて今度は子テーマ「cocoon-child-master.zip」をインストールします。

子テーマのインストールを終えたら「有効化」リンクをクリックしてください。

有効化後、以下のように「Cocoon Child」が有効化されていればOKです。

親テーマではなく、子テーマを有効化してください!!(要注意)

れで、Cocoonの親テーマ、子テーマのインストールが完了しました。

Cocoon設定の変更の仕方

ここからはインストールしたCocoonの設定変更を行っていきます。

管理メニューから「Cocoon設定」を選択してください。

まずは、タブの「ヘッダー」を選択してください。

ヘッダーレイアウトは『トップメニュー(右寄せ)』に設定します。

へッダーロゴの画像データがあれば添付します。

様々なフォントを使ったPNG画像が作れる便利なサイトがあるのでリンクを貼っておきます。

キャッチフレーズの配置は「表示しない」を選択します。

グローバルナビメニュー幅を「180」に設定してください。

「変更をまとめて保存」は都度クリックしてもよいですが、すべてのカスタマイズが完了してからでも大丈夫です。

続いて、タブの「SEO」を選択してください。

表示する日付は「表示しない」にチェックを入れます。

続いて、タブの「OGP」を選択してください。

ホームイメージの画像をアップロードしてください。

ここのホームイメージをアップロードしないとWEBページのURLシェア時などにCocoonのデフォルト画像が表示されてしまうので注意してください。

続いて、タブの「投稿」を選択してください。

パンくずリストの配置は不要であれば「表示しない」にチェックを入れます。

表示させたい場合には「メインカラム手前」が良いでしょう。Googleは公式に検索エンジン最適化のためにパンくずリストの使用を推奨しています。

続いて、タブの「固定ページ」を選択してください。

こちらも同様にパンくずリストの配置は不要であれば「表示しない」にチェックを入れます。表示させたい場合には「メインカラム手前」です。

続いて、タブの「本文」を選択してください。

上図のように投稿関連情報のチェックをすべて外してください。この作業は投稿日付を表示しないようにするために行います。

続いて、タブの『目次』を選択してください。

ここでは目次の表示の有無と、目次をどのページ表示するかを選べます。

目次の表示の有無は固定ページや投稿ページ個別にも選択できるので、ここでは「目次を表示する」にチェックを入れてください。

表示ページは「投稿ページ」にチェックを入れておけばよいです。

続いて、「SNSシェア」を選択してください。

上図の赤枠部分のチェックを外していく作業を行っていきます。

『メインカラムボトムシェアボタンを表示』のチェックを外して下さい。

表示位置、表示ページもすべて外してしまいましょう

ツイート設定、プロモーションの中の「ツイート後にフォローを促す」のチェックも外してください

続いて、タブの「SNSフォロー」を選択してください。

フォローボタン表示の中の、「本文下のフォローボタンを表示する」のチェックを外してください

続いて、タブの「ブログカード」を選択してください。内部ブログカードの設定を以下のように設定してください。

❶ブログカード表示:有効
❷リンクの開き方:チェックしない(新しいタブで開かない)

続いて、タブの「フッター」を選択してください。

フッター色の中の、「フッター背景色」「フッター文字色」を選択してください。お好きな色を選んでください。イメージカラーを選択するとよいかもしれません。

フッター表示タイプは『メニュー&クレジット(左右)』を選択するとよいと思います。とは言え、お好みに合わせて選択すればよいと思います。

Cocoon設定の変更はこれで完了です。

プラグインの初期設定について

プラグインとは、Wordpresの機能を拡張するソフトウェアのことを指します。個別に追加してバージョンアップが可能で、不要になれば、アプリケーションに影響を与えることなく削除することができます。

初期段階ではプラグインはあまり気にせず、「バックアップを楽に取りたい」、「申し込みフォームを入れたい」など、カスタマイズが必要になった時に考えれば大丈夫です。

まずは管理画面のメニューからプラグインの、「インストール済みプラグイン」をクリックします。

初期段階で更新が必要なプラグインがある場合には「更新」をクリックしてください。

とりあえずはすべてのプラグインを有効化していただいて構いません。

ただし、「SiteGuard WP Plugin」のプラグインを有効化する手順には注意が必要です。

このプラグインを有効化するとログインページURLが変更されてしまいます

必ず、上図のように新しいログインページURLをクリックして、URLをブックマークなどに保存しておいてください。

これで、初期のプラグインの設定は完了です。

テーマのカスタマイズ(コード入力)

管理メニューの「外観」から「テーマエディター」を選択してください。

編集するテーマは「Cocoon Child」を選択してください。その中のstyle.cssにコードを貼り付けていきます。

/必要ならばここにコードを書く/の次の行から以下のコードをコピーして貼り付けてください。ここで貼り付けるコピーでは、本文やメニューのデザインを定義するためのものです。

@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** 白抜きボックス線の太さと破線の変更について
************************************/
.blank-box{
  border-width: 1px;
border: 1px dashed;
}
/*白抜きボックスの太さと破線の変更はここまで*/
/************************************
** ブログカードのデザインの変更について
************************************/
.blogcard-wrap {
	margin: unset;
	padding: unset;
	max-width: 500px;
}
.blogcard {
	border: unset;
	border-radius: 4px;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
	margin: 0 8px;
	padding: 0.5rem;
	word-wrap: break-word;
	position: relative; /*「続きを読む」表示用*/
}
.blogcard-thumbnail {
	margin: 0 0.5rem 0 0;
	width: 100px !important;
	height: 100px !important;
}
.blogcard-content {
	margin: 0;
	padding: 0;
}
.blogcard-title {
	color: initial; /*文字色を青に*/
	font-size: initial;
	line-height: 1.5;
	margin: 0;
}
.blogcard-snippet {
	display: none; /*抜粋を非表示*/
}
@media screen and (max-width: 560px){
	.blogcard-title {
		font-size: 0.95rem; 
	}
}
/*ブログURLを非表示*/
.blogcard-footer {
	display: none;
}
/*続きを読む*/
.blogcard {
	position: relative; /*「続きを読む」表示用*/
}
.blogcard-content::after {
	content: '続きを読む';
	background-color: #4169e1;/*#4169e1の部分は『続きを読む』の背景色を定義しています。お好きなカラーコードに変えてください*/
	border-radius: 1em;
	color: #ffffff;/*#ffffffの部分は『続きを読む』の文字色を定義しています。お好きなカラーコードに変えてください*/
	font-size: 0.8em;
	padding: 0.2em 1.5em;
	position: absolute;
		right: 0.5rem;
		bottom: 0.5rem;
}
/*リンクの色など*/
#toc_container a {
    text-decoration: none;
    text-shadow: none;
    color: #454545 !important;
}
/*ブログカードのデザインの変更はここまで*/
/************************************
** 見出しデザインの変更について
************************************/
/* H2 */
.article h2{
background:none;
padding: 0;
	
color: #1a1a1a;/*#1a1a1aの部分はH2見出しの文字色を定義しています。お好きなカラーコードに変えていただいて構いません*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px  #4169e1;;/*#4169e1の部分はH2見出しの上線の色を定義しています。お好きなカラーコードに変えていただいて構いません*/
  border-bottom: solid 3px  #4169e1;;/*#4169e1の部分はH2見出しの下線の色を定義しています。お好きなカラーコードに変えていただいて構いません*/
}
 
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
color:#1a1a1a;/*文字色*/
  /*線の種類(点線)2px 線色*/
  border-bottom: dashed 2px #4169e1;/*#4169e1の部分はH3見出しの下線の色を定義しています。お好きなカラーコードに変えていただいて構いません*/
}	
/* 見出しデザインの変更はここまで*/
/************************************
** 目次デザインの変更について
************************************/
div#toc_container {
	border: 1px solid  #000000;
	border-radius: 5px;
	display: block !important;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: 90% !important;
	background-color: #ffd700; /* ★ ボックス背景色 */
}
p.toc_title {
	border-bottom: 1px dotted #000000;
	margin-bottom: 10px;
	padding: 5px 10px;
	
}
#toc_container span.toc_toggle {
	font-weight: 400;
	font-size: 90%;
}
ul.toc_list {
	margin-bottom: 0;
	
}
.post ul.toc_list {
	counter-reset: my-counter;
	list-style: none;
	padding-left: 30px;
	
}
.post .toc_list ul {
	list-style: none;
	padding-left: 10px;
	
}
ul.toc_list >li {
	position: relative;
	
}
ul.toc_list >li:before {
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: #000000;
	color: #fff;
	display: block;
	float: left;
	line-height: 22px;
	margin-left: -30px;
	text-align: center;
	height: 22px;
	width: 22px;
	border-radius: 50%;
}
ul.toc_list >li,
.toc_list ul > li,
.toc_list ul ul > li {
	padding: 1px 0;
}
.toc_list ul > li:before {
	color: #ffffff;
	content: '\f105';
	font-family: FontAwesome;
	margin-right: 5px;
}
.toc_list ul ul > li:before {
	color: #ffffff;
	content: '\f101';
	font-family: FontAwesome;
	margin-right: 5px;
}
/* 目次デザイン変更はここまで*/
/************************************
** ●全画像のホバー時エフェクト処理
************************************/
a:hover img{
  opacity: 0.6; /*不透明度*/
  transition: all 0.8s ease; /*アニメーション*/
}
/************************************
** グローバルメニュー PC
************************************/
 /* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100%;
  height: auto;
  max-width: 210px;
  vertical-align: middle;
  margin: 20px 0;
}
#header-container {
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
}
.site-name-text-link {
  color: #fff;
}
.navi {
  background: none;
}
.navi-in > ul .sub-menu {
  background: #fff;
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
}
.navi-in > ul li {
  width: auto;
}
.navi-in a {
  font-size: 13px; /* ナビ文字大きさを定義しています。 */
  font-weight: bold;
  position: relative;
  color: #1a1a1a; /* ナビ文字色を定義しています。 */
  padding: 0 20px;
  display: block;
  text-decoration: none;
}
.navi-in a:hover {
  background: none;
}
.navi-in a:before {
  position: absolute;
  left: 0;
  bottom: 6px;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #4169e1; /* #4169e1の部分はマウスON時の下線色を定義しています。お好きなカラーコードに変えていただいて構いません */
  transform: scale(0, 1);
  transition: 0.4s;
}
.navi-in a:hover:before {
  transform: scale(1);
}
.navi-in > ul .sub-menu a {
  color: #666; ; /* #666の部分はサブメニュー文字色を定義しています。お好きなカラーコードに変えていただいて構いません */
  font-size: 12px;  /* サブメニュー文字の大きさを定義しています。 */
}
.navi-in > ul .sub-menu a:before {
  background: #4169e1;  /* #4169e1の部分はサブメニューマウスON時の下線色を定義しています。お好きなカラーコードに変えていただいて構いません */
}
.header-container-in.hlt-top-menu .logo-header {
  max-height: 100%;
}
.header-small {
  opacity: 0.9;
}
.header-small .header-container-in.hlt-top-menu .logo-header img {
  max-width: 130px;
  margin: 10px 0;
}
#container {
  padding-top: 90px;
}
[id^="toc"]:target {
  padding-top: 85px;
  margin-top: -85px;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

コード中の『#4169e1』などはカラーコードを定義しているので、サイトのイメージカラーに合わせてお好きなカラーコードを入力してください。

カラーコードの参考になるリンクを貼っておきます。

上図がPC画面での途中経過イメージです。だいぶホームページっぽくなってきましたね。

上図がスマホ画面での途中経過イメージです。

メインページの作成編

ホームページトップ画面の編集の流れ

今回は、メインページの作成方法を解説していきます。それでは、早速メインページを作っていきましょう。

管理メニューから固定ページ>固定ページ一覧>ホームーフロントページを開いてください

まずは、タイトルの「ホーム」を削除してください。

タイトルがブランクになってしまいますが、気にしなくて大丈夫です。

見出しの設定方法

次にメインページの見出しを作っていきます。

ブロックにある「+」をクリックして「見出し」をクリックしてください。

例として『ニュースリリース』『新着記事』『タイムライン』の見出しを作成してください。

見出しのレベルは「H2」に設定してください。

投稿記事のリンクを載せる方法

続いて、新着記事のアップロード方法を説明していきます。

ブロックにある「+」をクリックして、「ブログカード」をクリックしてください。

あとは、ブログカードの中に投稿した記事のURLを添付するだけです。

記事の投稿の仕方

ここで記事の投稿の仕方について簡単にご説明します

管理メニューの「投稿」から「新規追加」をクリックしてください。

新規投稿画面が出たら、まずはタイトルを入れてみましょう。ここでは『【お買い得】〇〇〇ついに発売!!』としてみます。

本文部分の「+」をクリックして「見出し」をクリックしてください。

見出しの大項目はH2を選択してください。中項目はH3になります。

記事の読みやすさを考えるとH4以降の小項目は使わないほうが無難だと思います。

段落を記述する方法は「+」をクリックして、「段落」をクリックして本文を記載していきます。

続いて画像の貼り付け方法をご説明します。

「+」をクリックして、「画像」をクリックしてください。

「アップロードボタン」をクリックしてください。

貼り付けたい画像を選択して、開くをクリックしてください。

これで本文に貼り付けできました。

最後にサイドメニューにあるアイキャッチ画像を設定します。

アイキャッチを設定しないと上図のようにブログカード表示時に画像がブランクになってしまいますので、見栄えを考えるとアイキャッチを設定しておいたほうが無難です。

それではアイキャッチの設定方法について解説していきます。

サイドメニューにある「アイキャッチ画像を設定を」クリックしてください。

貼り付けたい画像を選択して、開くをクリックしてください。

左側のサイドバーにある投稿設定から「目次を表示しない」をチェックしてください。

目次を表示させたい場合にはチェックを入れなくてOKです。

左側のサイドバーにある投稿設定のURLスラッグに任意の英数字を入力してください。

デフォルト設定は、投稿のタイトル名がURLに反映されています。日本語がエンコードされることでURLが長くて意味不明な文字の羅列になってしまいます

右側のサイドバー最上部にある「公開」をクリックすれば投稿が完了します。

これで投稿は完了です。

メインページにスライドを挿入する方法(おまけ)

管理メニューの「プラグイン」をクリックして、「新規追加」を開いてください

キーワード部分にmetasliderと入力してmetasliderのプラグインを今すぐインストールして、インストール完了後に有効化してください。

有効化すると管理メニューにmetasliderが追加されるので、クリックして開いてください。

空のスライドショーを作成するをクリックしてください。

新規スライドショーが開くので、スライドを追加をクリックして表示させたい画像ファイルをアップロードしてください。

画像サイズの幅、高さについては、アップロードした画像サイズによって適したサイズに微調整してください。

高度な設定の中の、中央揃えにチェックを入れてください

設定が完了したら、上図赤枠部分(metaslider id=”数字”)をコピーしてください。

管理メニューの外観>テーマエディタ>tmp-user>main-before.phpの順で開いてください。

<?php if(is_front_page() ): ?>
<?php echo do_shortcode(''); ?>
<?php endif; ?>

上記コードを以下のとおり編集して、貼り付けます。

shortcode(‘ここに先ほどのコードを貼り付けます‘)

貼り付けができたらファイルを更新をクリックして完了です。

これでスライド挿入は完了です。

仕上がりを確認する

PC画面での仕上がりイメージです。シンプルで見やすいホームページが完成しました

PC画面での仕上がりイメージです。スマホでもストレスなく見られるページになりました

コメント

タイトルとURLをコピーしました