かんろぐ Written by kan

【SnowMonkey】WordPressデモサイトのマニュアルを配布【完全無料&実績利用OK】

CODE Snow Monkey WordPress

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

こんにちは、かんです!(»@minimal_kan)

普段はWordPressをメインにWEB制作をしたりブログをやっています。
»プロフィールはこちら

今回は初学者の0→1のサポートが出来ればと思い、Snow Monkeyのデモサイトマニュアルを作ってみました\(^^)/

デモサイトはこちら


こちらはWordPressのSnowMonkeyのテーマを使用して作成しました。本記事通りに進めていけば、上記のサイトを作成することができます!

画像70枚近く使って解説しているので、完全初心者でも安心して作成できるようになっています。

下記のような方におすすめ

  • 案件獲得をすぐに始めたい
  • WordPressでサイトを作りたい
  • これからSnow Monkeyでサイト制作してみたい
  • 提案時に使える実績や、ポートフォリオを増やしたい

Snow Monkeyを使って本記事のサイトを作れるようになれば、月5万円も達成できますね。

本記事通りに進めていけば、WordPressの基本的な操作、ブロックエディタやプラグインの使い方、追加CSSでのカスタマイズ方法が理解できるようになります。

ぜひ本記事が、実績作りや案件獲得の一歩として利用していただければ幸いです。
また、0→1をサポートをしたいので、初学者の方々に届くようにTwitterで拡散してくれたらなお嬉しいです。

ボリュームはありますが、ぜひ頑張っていきましょう!

製作時間はおよそ半日〜2、3日が目安なので、安心して焦る必要なく作っていただければと思います😌

目次

WordPressの環境設定の解説

【SnowMonkey】WordPressデモサイトのマニュアルを配布【完全無料&実績利用OK】
WordPressの環境設定から始めていきます。
WordPressがインストールできる環境は大きく2パターンです。

  1. サーバーを利用した本番環境で作成(有料)
  2. 自分のPC内で構築するlocal環境で作成(無料)

それぞれ解説していきます。

①:サーバーを利用した本番環境で作成

サーバーとドメインを取得して、WordPressをインストールします。

自分でサーバーやドメインを取得して、実際のURLが世界中に公開されているような状態を本番環境と言います。

初めての方はこちら


エックスサーバーにアクセスする

これから案件獲得に向けて行動していきたい方で、サーバーをまだレンタルしていないという方は、実案件で何度も使うことになるのでこの機会にぜひチャレンジしてみてください。
もしサーバーを契約する方で、1人では不安かも、、という方は個別サポート企画もやっているのでお気軽にご連絡ください。
»【完全無料】WordPressを始めたいあなたをサポートします

②:自分のPC内で構築するlocal環境で作成(無料)

local環境を作成して、WordPressをインストールします。
詳しくは下記の記事を参考にしてみてください!

参考記事

※Local by Flywheelでログインアカウントを設定する際、メールアドレスは自分のアドレスを登録しておきましょう。

デモサイト制作で必要なもの3つ

【SnowMonkey】WordPressデモサイトのマニュアルを配布【完全無料&実績利用OK】
まずデモサイトに必要なものを3つ解説します。

  1. SnowMonkeyテーマ
  2. プラグインのダウンロード
  3. 画像素材のダウンロード
本記事で紹介する画像はすべてクリックで拡大表示ができるようにしています。見にくい画像は拡大して表示してくださいませ🙇‍♂️

①:SnowMonkeyテーマをインストール

WordPressのインストールが完了したら、まずはSnowMonkeyのテーマファイルを取得します。(試用版と有料版がある)

試用版は申請してから数日かかることがあるので慌てず待ちましょう。
次に取得したSnowMonkeyテーマをWordPressへダウンロードします。

まずは管理画面にログインしてください。
するとWordPressのダッシュボードが表示されます。

  • 左側の「外観」→「テーマ」 をクリック

画面上部に表示される「新規追加」をクリックすると、下の画像のような画面が表示されるので、下記の順番でインストールと有効化をしていきます。

  1. 「テーマをアップロード」からダウンロードしたSnowMonkeyのテーマをzipファイルのまま追加
  2. その後「今すぐインストール」をクリック
  3. 最後に「有効化」をクリック
Snow Monkeyを購入すると「snow-monkey.zip」「my-snow-monkey.zip」「snow-monkey-diet.zip」の3種類のダウンロードが可能となりますが、ここでは「snow-monkey.zip」をアップロードします


これでテーマのインストールが完了しました。

②:SnowMonkeyのプラグインをダウンロード

SnowMonkeyのプラグインをダウンロードしていきます。

  • 左側の「プラグイン」→「新規追加」をクリック

  • 右側の検索バーから、「Snow Monkey Blocks」と検索
  • Snow Monkey Blocks」と「Snow Monkey Editor」の2つを「今すぐインストール」
  • 「有効化」をクリック

複数のプラグインを有効化するときは1つずつ完了してから行わないとバグの原因になります。

②:プラグイン:Shortcodes Ultimateをダウンロード

今回はもうひとつプラグインを使用するので、先にダウンロードしておきましょう。流れは先ほどと一緒です。

  • 検索バーから「Shortcodes Ultimate」と検索
  • 「今すぐインストール」→「有効化」をクリック


これで必要なプラグインをインストールすることができました。

③:画像のダウンロード

今回、サイトで使用する素材を用意しました。
下記よりダウンロードをしてください。

ダウンロードできたら、WordPressに読み込んでいきます。

  • 左側の「メディア」を選択して「新規追加」をクリック
  • 「ファイルを選択」から、配布した画像をアップロード


全ての画像がアップロードされれば完了です。

トップページの作成(固定ページ)

管理画面に戻って、ページを作成していきます。
「固定ページ」→「新規追加」を選択してページを新しく作成していきます。

  • 「タイトルを追加」の欄に「HOME」と入力
  • 「公開」を選択

これで新しくページが追加されました。

トップページの切り替え

初期設定で、フロントページ(トップページ)が投稿ページの画面になっているので、新規追加を行い、固定ページに切り替えていきます。

  • 「設定」→「表示設定」を選択
  • 「固定ページ」を選択。
  • その下の「ホームページ」の「ー選択ー」から先程設定した「HOME」を選択
  • 最後に「変更を保存」を選択


これでHOME画面をトップページにすることができました。

ファーストビューの作成(セクション画像背景)

先程作成した「固定ページ」→「HOME」で「編集」を選択します。

セクション画像背景の挿入

編集画面を開いていきます。

  • 「+」を選択
  • 検索バーで「セクション」と入力
  • 一覧の中にある、セクション(背景画像/動画)を選択
  • 右側の部分で写真を追加


続いて、右側の部分で写真を追加していきます。

  • 「ブロック」を開いて下へとスクロール
  • 「メディアライブラリ」を選択
  • 「ファイルを選択」を選択
  • 「トップ画像」を選択


これで写真を追加することができました。

画像のサイズを変更

  • 左上のバー2番目のマーク「幅広」→「全幅」に変更
  • 右側の「ブロック」→高さ「フィット」→「広め」に変更
  • 「コンテンツの幅をスリムにする」を解除 ※あらかじめ解除されてる場合もあります


これでトップ画面のサイズが変更されました。

画像にマスクをかける

画像に背景マスクをかけていきましょう。少しだけ雰囲気が出ます。

  • 右側の「ブロック」
  • 「背景マスクの設定」
  • 色の下にある「カスタムカラー」を選択
  • 「16進数での色指定」で「#3b352a」と入力します。
  • 不透明度を「0.4」に設定

これで背景マスクの設定は完了です。

文章を入力

文章を入力していきます。

  • 画像の中に+マークの枠があるので選択
  • 「検索バー」で「見出し」と検索して、ブロックを挿入

「system renovation」という文章を入力

文字を選択して、バーを表示させます。

  1. 「H2」→「H1」に変更
  2. 猿のマークをクリックして、文字を全選択
  3. 「文字サイズ」76pxに指定
  4. 「文字色」yとrを赤色、その他の色を白に設定
  5. 文字間隔を0.2に指定
  6. 設定バーの「H1」横にある「テキストを左寄せ」を選択

文字を入力

文字を入力していきます。

  • +マークを選択→段落を選択


「オフィスワークを快適に クリエイティブで未来を創造する会社」と入力します。
※文字数が多い時はShift+Enterを押すことで、ブロック内で改行することができます
入力したら、下記の手順で変更していきます。

  • 文字を全選択→「B」マークを選択して、太文字に変更
  • 先程と同様の手順で文字サイズを30pxに変更
  • 文字色を白に変更

画像に余白を設定

  • 文字の最後でEnterキーを押す
  • 「+」マークが表示される
  • 「検索バー」から「スペーサー」と入力して選択

余白のピクセルの変更

右のブロックから、ピクセルを変更できますので、今回は50pxに設定します。

左のバーから上下に移動が可能です。

文字の上下にスペーサーを設置して、右上の「更新」ボタンをクリックしましよう。
この「更新」は必ず定期的に行ってください。

表示を確認

保存した内容の表示を確認していきます。

  • 更新の左横「プレビュー」を選択
  • 「新しいタブでプレビュー」を選択

現時点で下記のようなページになっていればOKです。

画像の上に余白があり、フォントも初期設定のままになっていますので、
これらを含め変更を行っていきます。

ロゴ、フォント、余白の設定をしていきましょう。

  • 左のWマークをクリック
  • 「外観」→「カスタマイズ」を選択

カスタマイズ画面が表示される

下記の画像のように、カスタマイズ画面が表示されればOKです。

「サイトの基本情報」の編集

サイトの基本情報を編集していきます。

  • サイトの基本情報を選択→編集をクリック

各種設定

  1. 「ロゴを選択」→保存したメディアライブラリから「ロゴ」を選択※画像は切り抜かない
  2. サイトのタイトル「system renovation」と入力
  3. コピーライトも同様に「system renovation」と入力
  4. 「サイトアイコンを選択」から「ロゴ」を選択
  5. 「公開」ボタンで保存をする

タイトルはコピペしちゃった方が早いです。

コンテンツエリア上下余白の設定

コンテンツエリア上下余白の設定をします。
「サイトの基本情報」横にある「<」マークで一つ前のページに戻りましょう。
カスタマイズ画面の「ホームページ設定」を選択します。

  1. 「ホームページのコンテンツエリアに上下余白を追加する」のチェックを外す
  2. 「公開」ボタンで保存

フォントの変更

フォントの変更をしていきます。
「ホームページ設定」横にある「<」マークで一つ前のページに戻ります。カスタマイズ画面の「デザイン」→「基本デザイン設定」を選択します。

「基本フォント」を「セリフ(明朝体)」に変更します。

オーバーレイに変更

「基本デザイン設定」横にある「<」マークで一つ前のページに戻り、現在の画面「デザイン」→「ヘッダー」を選択します。

  1. 「ヘッダーレイアウト」を「1行」に変更
  2. 「ヘッダー位置」をモバイル版、PC用共に「オーバーレイ」に変更
  3. 「公開」ボタンで保存をする

グローバルナビゲーションのホバーエフェクト

グローバルナビゲーションのホバーエフェクトを変更します。

  • 文字色
  • 下線
  • なし

この3つから選択できるので、このサイトでは「下線」を選択します。※お好みで選択しても大丈夫です

メニューの設定

続いてメニューの設定です。

  • カスタマイズ画面から「メニュー」→「メニューを新規作成」を選択
  • メニュー名を追加
  • グローバルナビゲーション(PC用) (現在: メニュー) / ドロワーナビゲーション(モバイル用) (現在: メニュー) にチェックを入れて次へを押す
  • 「項目を追加」→「カスタムリンク」→URLとリンク文字列を設定
  • URLには#をつけて「#事業内容」※#は半角
  • リンク文字列は「事業内容」
  • 「メニューに追加」をクリックする
  • 公開をクリックして保存

という形でそれぞれ「CSRへの取り組み」「3つの特徴」「技術・実績」「採用情報」といれておきましょう。

終わったら、再度ページの編集に戻ります。

「スムーススクロール」の実装

実装しなくても問題ありませんが、やってみたい方は下記リンクから実装してみてください。

ニュースの作成(動きのある文字の作り方)

ニュース部分を作っていきます。

まずは編集画面を開きましょう。

  • 「固定ページ」→「HOME」→「編集」

こちらの動きのある文字は、先程ダウンロードしておいたプラグイン「Shortcodes Ultimate」を使用しています。

こちらのプラグインは、ショートコードを挿入するだけで、さまざまな装飾ができますので、皆さんも色々試してみてくださいね!

それでは早速作成していきます。

  1. 編集画面で+マークを選択
  2. 検索バーから「ショートコード」と検索→選択
  3. 【】のようなマークを選択



ショートコードで実装できる一覧が表示されるので「アニメーション」を選択します。

アニメーションの詳細を設定

下記のように設定します。画像を見ながら進めると分かりやすいです。

  1. アニメーション「fadeInLeftBig」
  2. 期間 「1」を入力
  3. 遅延「0」を入力
  4. 別のCSSクラス「color」を入力
  5. 内容「ニュースはこちら>>」を入力
  6. 「ショートコードを挿入」を選択


これでプレビューを表示すると、文字が動くのがわかります。

ショートコードのブロックを追加

同様に、下の段に同じような動きをつけていきましょう。
先程と同様にショートコードのブロックを追加します。

  1. アニメーション「fadeInLeftBig」
  2. 期間 「1」を入力
  3. 遅延「0」を入力
  4. 別のCSSクラス「color2」を入力

内容に下記の情報をコピペしてください。

【新着情報】
202X/7/X 営業時間変更のご案内
202X/6/X 感染症対策実施のお知らせ
202X/4/X 本社移転のご案内

※画像を参考にして文末に「br」のタグを追記してください

上記の画像のように表示されればOKです。

再度確認してみると、CSSはまだ反映されていないので、地味〜な感じになっていますね。次にCSSを追加していきます。

CSSを追加

  • 「外観」→「カスタマイズ」を選択→「追加CSS」を選択

下記のコードをコピペ


.color{
	font-size:20px;
	background-color:#689391;
	padding:4px;
	color:#fff;
}
.color2{
	background-color:#F0F0F1;
	padding:14px;
}


画像のように表示されればOKです。

綺麗に整えることができましたね。

事業内容の作成(ブロークングリッドの作り方)

事業内容の作成をしていきます。ブロークングリッドはよく使われるのでぜひ覚えておきましょう。それでは再度、編集画面に戻ります。

タイトルの設定

  1. +マークを選択
  2. 検索バーで「セクション」と検索
  3. 「セクション」をクリック

  1. 「タイトルを書く」の部分に「事業内容」と入力
  2. 「サブタイトルを書く」の部分に「ABOUT」と入力
  3. 左上のバーから「幅広」→「全幅」に変更

HTMLアンカーを設定

  • 高度な設定→HTMLアンカーに「事業内容」と入力


これを行うと、トップページのナビバーをクリックするとこのセクションへ飛ぶことができるようになります。

同じようにして、その他グローバルナビバーのメニューにもアンカー設置をしていきましょう。

ブロークングリッドの設定

ブロークングリッドの設定をしていきます。

  1. タイトルの下の+マークを選択
  2. 検索バーから「セクション」と検索
  3. 「セクション(ブロークングリット)」を選択

文章を入力

  • 左側の「タイトルを書く」から「GP企業として、多くのニーズに対応」と入力
  • その下の+マークを選択→「段落」を選択
  • 「働き方は選べる時代へ。あらゆるニーズにあわせ、幅広く対応しています。高い技術力と細やかな配慮から生まれた建築物を創出し続けます。」と入力

写真を挿入

「メディア」の「メディアライブラリ」から「ブロック1」の写真を挿入します。

  1. 右のバー「ブロック」を下にスクロールして、「コンテンツの設定」を選択
  2. 「コンテンツサイズ調整」→「+-0%」
  3. 「背景色」を薄い白に設定
  4. 「コンテンツの余白」→「M」に設定

まずは、1つ目の「ブロークングリット」の設定が完了しました。

2つ目も同様に作成していきます。

左上のバーから、メディアと文章の表示位置を変えられるので、
「メディアを右に表示」に変更し、先程と同様に作ってみましょう。

ボタンのカスタマイズ

各ブロックの下に表示されているボタンの作成方法です。

触れると動くおしゃれなボタンの実装方法ですが、こちらは「カスタムHTML」というブロックを使用しています。WordPressでは、自分でHTMLとCSSを組んで自由にアレンジすることもできます。

ボタンの実装方法は»【Snow Monkey】CSSで簡単!ボタンにエフェクトを加える方法【コピペOK】で解説しているので、ぜひ参考にしてみてください。

ボタンと文章が重なってしまう場合は、間にスペーサーを40px入れると綺麗に表示することができます。解説画像は無いので、自力でチャレンジしてみてください!

3つの特徴(パネルの作り方)

3つの特徴を作っていきます。

タイトルの入力と「パネル」ブロックの追加

セクションの中に、「タイトル」と「パネル」というブロックを追加していきます。

  1. +マークから「セクション」を検索して選択
  2. 「タイトルを書く」の欄に「3つの特徴」と入力
  3. +マークを再度選択して「パネル」を検索
  4. 「パネル」ブロックを追加

3つの特徴を作成

まず「行あたりのカラム数」を変更していきます。
画像のように白枠をクリックすると、ひとつずつパネルを編集できるので数字で3と入力してください。

カラム内を編集

  1. 「メディアライブラリ」→写真を挿入
  2. 「タイトルを書く」の欄に「顧客のニーズを1番に考えた空間」
  3. 「内容を書く」の欄に「Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.」


長いのでコピペでOKです。

残りの2つも追加

+マークを選択すると、パネルを新しく増やすことができるので、今回は「垂直レイアウト」を選択して、残りの2枚を作成してください。

3つ並べることができたら、このセクションは完了です。

CSRへの取り組み(セクション画像背景)

CSRへの取り組みを作成していきます。

  1. +マークを選択
  2. 検索バーより「セクション」と入力
  3. セクション(背景画像/動画)を選択

  1. 左上のバーから「幅広」→「全幅」に変更
  2. 右側をスクロールして、「メディアライブラリ」から画像を挿入


画像が挿入されればOKです。

セクションの中身を編集

次にセクションの中身を作っていきます。

  1. コンテンツの水平位置は右の欄から、「中央」に変更
  2. タイトルに「CSRへの取り組み」と入力
  3. 「文字サイズ」を20pxに変更
  4. 文字を全選択→「B」マークを選択して、太文字に変更

「テキスト中央寄せ」に変更

次にテキストの調整を行います。

  1. +マークを選択
  2. 検索バーで「段落」と検索→文章に「安心・安全を世界中に提供し、最適な空間を創造し続ける会社を目指して」と入力
  3. 3本線のアイコンをクリック
  4. 「テキスト中央寄せ」

背景マスクの設定

最後に背景マスクをかけます。

  1. CSRへの取り組みの画像をクリック
  2. 右のブロックをスクロール
  3. 「背景マスクの設定」を選択
  4. カラーを「グレー」
  5. 不透明度を「0.6」に設定


これで完成です。

そして先程と同様にボタンを実装するためにカスタムHTMLでブロックを追加します。
ボタンの実装方法は»【Snow Monkey】CSSで簡単!ボタンにエフェクトを加える方法【コピペOK】で解説しているので、ぜひ参考にしてみてください。

技術・実績(動き続けるスライドショーの作り方)

次に動き続けるスライドショーを作っていきます。
まずは下記の手順で、タイトル部分を作っていきます。

  1. +マークをクリック
  2. 検索バーに「セクション」と入力→選択
  3. タイトルに「技術・実績」と入力
  4. サブタイトルに「WORKS」と入力

続いて、中身を作成していきます。
実はこちらも「カスタムHTML」を利用しています。

今回は手軽にコピペで簡単に実装していきますので、安心してください。

「カスタムHTML」の挿入

まずは、セクションの中に「カスタムHTML」をいれます。

「HTMLを入力…」とでてくるので、今回は下記のコードをコピペしてください!


<div class="slider1">
  <ul>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/スライダー1-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/スライダー2-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/スライダー3-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/スライダー4-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/トップ画像.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/ブロック2-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/CSRへの...画像-scaled.jpg"></li>
  </ul>
  <ul>
     <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/スライダー1-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/スライダー2-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/スライダー3-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/スライダー4-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/トップ画像.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/ブロック2-scaled.jpg"></li>
    <li><img src="https://kan-sm-demosite.xyz/wp-content/uploads/2021/08/CSRへの...画像-scaled.jpg"></li>
  </ul>
</div>

コードの解説は割愛しますが、内容としては今回の画像がスライドショーに反映されるようにコードが書いてあります。

また、「src="×××"」の「"×××"」×の部分は画像のURLが入ります。自身のWordPressにアップロードしたURLを入れてみてください。

それでは一旦保存をします。次に追加CSSを入力していきましょう!

追加CSSの入力

  • 「外観」→「カスタマイズ」を選択→「追加CSS」を選択

/*スライダー作成*/
.slider1 {
  display: flex;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height:200px;
  overflow: hidden;
}
.slider1 ul{
	display:flex;
	padding: 0;
	margin:0;
}
.slider1 li{
	width:300px;
	list-style: none;
}
.slider1 ul:first-child {
  animation: slide1 150s -75s linear infinite;
}

.slider1 ul:last-child {
  animation: slide2 150s linear infinite;
}
@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

上記のCSSをコピペして、保存をすれば完了です。

実際に動いているかどうか確認してみてくださいね。

コピーライトの設定

ついでにコピーライトも変更しておきましょう。先程のコードの下に入力してください。


/*コピーライト変更*/
.c-copyright{
	background-color:#689391;689391
	color:#fff;
	text-align:center;
}


コピペして保存すればOKです。実際に反映されているか確認してみましょう。

この設定で綺麗にスライドショーと、コピーライトを装飾することができました。

採用情報とグループ企業一覧(項目でバナーの作り方)

採用情報とグループ企業一覧を作成していきます。

2つ横並びになっているブロックを「項目」から作成していきます。

項目を設定

  1. +マークを選択
  2. 項目を選択

バナーを設定

  1. +マークを選択
  2. バナーを選択


左側には、「バナー」ではないデフォルトで表示されるブロックがあるので、こちらを削除します。

  1. 左のブロックをクリック
  2. 左に細長いバーが表示される
  3. 3つ縦に並ぶ丸をクリック
  4. 「ブロックを削除」を選択

「採用情報」を作成

「採用情報」を作成していきます。

  1. メディアライブラリから写真を挿入
  2. タイトルを「採用情報」に変更
  3. 文字を選択
  4. 左の細長いバーの猿のマークをクリック
  5. 「文字サイズ」を36pxに変更

「グループ企業一覧」

同様の手順で「グループ企業一覧」も作ってみましょう。

背景マスク

最後に背景マスクをかけます。

  1. それぞれのブロックをクリック
  2. 右のブロックをスクロール
  3. 「背景マスクの設定」を選択
  4. カラーを「グレー」
  5. 不透明度を「0.3」に設定

この「バナー」では、画像自体にURLを貼り付けることもできますので、クリックして他のURLに飛ばせるようにしておきましょう。

  1. 細長いバーから(-)マークを選択
  2. 「#」と入力

これでリンクの設定が完了です。
実案件でもよく使われるので、実際のURLを入力してみてくださいね。

いよいよ最後になります!
フッターを作成していきましょう!

セクション(背景画像/動画)の設定

先程と同様に、セクション(背景画像/動画)を使用していきます。

  1. +マークをクリック
  2. 検索バーに「セクション(背景画像/動画)」と入力→選択
  3. 画像を挿入
  4. 幅を「幅広」→「全幅」に変更
  5. 「背景マスクの設定」→「不透明度 0.4」に設定します。

カラム内を設定

  1. +マークをクリック
  2. 「カラム」を選択
  3. カラムの33/33/33を選択します。


3つのカラムが出来上がればOKです。

左側のカラム

  • 画像を挿入
  • 白い丸をドラッグして画像のサイズを変更

中央と右側のカラム

  • 「段落」→文章を入力
  • 文字色を「白」に変更

文章は下記からコピペでOKです。

本社
〒11X-0000
東京都葛飾区亀有町XXXX
XX支社
〒10X-0000
愛知県名古屋市XXXX
本社
TEL / FAX
03-0000-0000 / 03-0000-0000
XX支社
TEL / FAX
0X-0000-0000 / 0X-0000-0000

これで完了です。

余白の調整

最後に余白の調整を行います。

それぞれの場所にスペーサーをいれましょう!

  1. +マークを選択
  2. 検索バーから「スペーサー」と検索して選択

ファーストビューの下に86pxの余白をいれる

CSRへの取り組みの上下に余白

次にCSRへの取り組みの上下に余白を設定します。
3つに並ぶ丸マーク→「複製」を選択すると作業が速くなります!

「採用情報」「グループ企業一覧」に余白

最後に「採用情報」「グループ企業一覧」に余白を設定していきます。
下の段のみ172pxに設定してください。

これで綺麗に余白も揃いました。

最後に「更新」ボタンで保存を行い、終了となります!ここまでお疲れ様でした!

終わり

【SnowMonkey】WordPressデモサイトのマニュアルを配布【完全無料&実績利用OK】
以上で、デモサイトの制作が終了です。

長かったですよね、、本当にお疲れ様でした。

ポートフォリオや制作実績など好きなように利用して大丈夫ですので、このサイト制作が営業のキッカケになったり、案件獲得の支えになったら幸いです。

そして、完成した際はぜひTwitter報告もしていただけたら嬉しいです!

リツイートする

また下記のじゃんきーさんのサイトも無料で公開されているので、ポートフォリオや製作実績を増やしたい方はぜひ、次のステップとして取り組んでみてください。

おすすめ記事:じゃんきーさんのブログ


»じゃんきーさんをフォローする

これからも一緒にWEB制作を頑張っていきましょう\(^^)/

本記事に協力してくれた方の紹介

もっとカスタマイズがしたい方はこちら

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート