WordPressテーマのSnowMonkeyでWebサイトを作る方法【マニュアル配布】
PR ※当サイトではアフィリエイト広告を利用しています
こんにちは、かんです！(»@minimal_kan)
普段はWordPressをメインにWEB制作をしたりブログをやっています。
»プロフィールはこちら
今回は初学者の０→１のサポートが出来ればと思い、Snow Monkeyのデモサイトマニュアルを作ってみました＼(^^)／
デモサイトはこちら
こちらはWordPressのSnowMonkeyのテーマを使用して作成しました。本記事通りに進めていけば、上記のサイトを作成することができます！
画像７０枚近く使って解説しているので、完全初心者でも安心して作成できるようになっています。
下記のような方におすすめ
- 案件獲得をすぐに始めたい
- WordPressでサイトを作りたい
- これからSnow Monkeyでサイト制作してみたい
- 提案時に使える実績や、ポートフォリオを増やしたい
Snow Monkeyを使って本記事のサイトを作れるようになれば、月５万円も達成できますね。
本記事通りに進めていけば、WordPressの基本的な操作、ブロックエディタやプラグインの使い方、追加CSSでのカスタマイズ方法が理解できるようになります。
ぜひ本記事が、実績作りや案件獲得の一歩として利用していただければ幸いです。
また、0→1をサポートをしたいので、初学者の方々に届くようにTwitterで拡散してくれたらなお嬉しいです。
ボリュームはありますが、ぜひ頑張っていきましょう！
第２段はこちらから
【SnowMonkey】WordPressデモサイトのマニュアルを配布【完全無料&実績利用OK】
【完全無料&実績利用OK】SnowMonkeyで作成するWordPressデモサイトのマニュアルを無料配布します。実績利用、ポートフォリオなど自由に使っていただいてOKです。これを元に案件獲得や営業活動の支えになれれば幸いです。WordPressの操作〜ブロックエディタの使い方をマスターできるようになります。
この記事を書いている僕ですが、３０代未経験からWeb業界へ転職して約１年ほど。「Twitter」で転職について発信をしていたり、転職コミュニティ「CodeChange」を運営したり、「未経験からの転職完全ロードマップ【プレゼント配布有】」を執筆してます。※なお、8000字まで無料で読めます。
WordPressの環境設定の解説
WordPressの環境設定から始めていきます。
WordPressがインストールできる環境は大きく2パターンです。
- サーバーを利用した本番環境で作成（有料）
- 自分のPC内で構築するlocal環境で作成（無料）
それぞれ解説していきます。
①：サーバーを利用した本番環境で作成
サーバーとドメインを取得して、WordPressをインストールします。
自分でサーバーやドメインを取得して、実際のURLが世界中に公開されているような状態を本番環境と言います。
初めての方はこちら
【月５万稼ぐ】無料で出来るWordPressブログの始め方を初心者向けに解説【40枚の画像で紹介】 » かんろぐ
『ブログで稼ぎたいけど、始め方が分からない』という方のために１５分でできるWordPressブログの始め方を画像４０枚以上使って記事にしてみました。クイックスタートという方法を使えば、誰でも簡単にブログを始めることができます。
もしサーバーを契約する方で、１人では不安かも、、という方は個別サポート企画もやっているのでお気軽にご連絡ください。
»【完全無料】WordPressを始めたいあなたをサポートします
②：自分のPC内で構築するlocal環境で作成（無料）
local環境を作成して、WordPressをインストールします。
詳しくは下記の記事を参考にしてみてください！
参考記事
※Local by Flywheelでログインアカウントを設定する際、メールアドレスは自分のアドレスを登録しておきましょう。
超簡単にローカル環境が構築できるLocalbyFlywheelの使い方
Local by Flywheel（ローカルバイフライホイール）とは、簡単にWorpdressサイトを構築できる、ローカル環境構築ツールである。 プログラムのコードが書けない人や、コマンドを理解できない人でも簡単にインス […]
デモサイト制作で必要なもの３つ
まずデモサイトに必要なものを３つ解説します。
- SnowMonkeyテーマ
- プラグインのダウンロード
- 画像素材のダウンロード
本記事で紹介する画像はすべてクリックで拡大表示ができるようにしています。見にくい画像は拡大して表示してくださいませ🙇♂️①：SnowMonkeyテーマをインストール
WordPressのインストールが完了したら、まずはSnowMonkeyのテーマファイルを取得します。（試用版と有料版がある）
- »テーマのダウンロードはこちら ※試用版の申請ができます。
試用版は申請してから数日かかることがあるので慌てず待ちましょう。
次に取得したSnowMonkeyテーマをWordPressへダウンロードします。
まずは管理画面にログインしてください。
するとWordPressのダッシュボードが表示されます。
- 左側の「外観」→「テーマ」 をクリック
画面上部に表示される「新規追加」をクリックすると、下の画像のような画面が表示されるので、下記の順番でインストールと有効化をしていきます。
- 「テーマをアップロード」からダウンロードしたSnowMonkeyのテーマをzipファイルのまま追加
- その後「今すぐインストール」をクリック
- 最後に「有効化」をクリック
snow-monkey.zip」「my-snow-monkey.zip」「snow-monkey-diet.zip」の３種類のダウンロードが可能となりますが、ここでは「snow-monkey.zip」をアップロードします
これでテーマのインストールが完了しました。
②：SnowMonkeyのプラグインをダウンロード
SnowMonkeyのプラグインをダウンロードしていきます。
- 左側の「プラグイン」→「新規追加」をクリック
- 右側の検索バーから、「Snow Monkey Blocks」と検索
- 「Snow Monkey Blocks」と「Snow Monkey Editor」の2つを「今すぐインストール」
- 「有効化」をクリック
②：プラグイン：Shortcodes Ultimateをダウンロード
今回はもうひとつプラグインを使用するので、先にダウンロードしておきましょう。流れは先ほどと一緒です。
- 検索バーから「Shortcodes Ultimate」と検索
- 「今すぐインストール」→「有効化」をクリック
これで必要なプラグインをインストールすることができました。
③：画像のダウンロード
今回、サイトで使用する素材を用意しました。
下記よりダウンロードをしてください。
- »画像をダウンロード
※GoogleDriveに飛びます
ダウンロードできたら、WordPressに読み込んでいきます。
- 左側の「メディア」を選択して「新規追加」をクリック
- 「ファイルを選択」から、配布した画像をアップロード
全ての画像がアップロードされれば完了です。
トップページの作成（固定ページ）
管理画面に戻って、ページを作成していきます。
「固定ページ」→「新規追加」を選択してページを新しく作成していきます。
- 「タイトルを追加」の欄に「HOME」と入力
- 「公開」を選択
これで新しくページが追加されました。
トップページの切り替え
初期設定で、フロントページ(トップページ)が投稿ページの画面になっているので、新規追加を行い、固定ページに切り替えていきます。
- 「設定」→「表示設定」を選択
- 「固定ページ」を選択。
- その下の「ホームページ」の「ー選択ー」から先程設定した「HOME」を選択
- 最後に「変更を保存」を選択
これでHOME画面をトップページにすることができました。
ファーストビューの作成（セクション画像背景）
先程作成した「固定ページ」→「HOME」で「編集」を選択します。
セクション画像背景の挿入
編集画面を開いていきます。
- 「+」を選択
- 検索バーで「セクション」と入力
- 一覧の中にある、セクション（背景画像/動画）を選択
- 右側の部分で写真を追加
続いて、右側の部分で写真を追加していきます。
- 「ブロック」を開いて下へとスクロール
- 「メディアライブラリ」を選択
- 「ファイルを選択」を選択
- 「トップ画像」を選択
これで写真を追加することができました。
画像のサイズを変更
- 左上のバー2番目のマーク「幅広」→「全幅」に変更
- 右側の「ブロック」→高さ「フィット」→「広め」に変更
- 「コンテンツの幅をスリムにする」を解除
※あらかじめ解除されてる場合もあります
これでトップ画面のサイズが変更されました。
画像にマスクをかける
画像に背景マスクをかけていきましょう。少しだけ雰囲気が出ます。
- 右側の「ブロック」
- 「背景マスクの設定」
- 色の下にある「カスタムカラー」を選択
- 「16進数での色指定」で「
#3b352a」と入力します。 - 不透明度を「0.4」に設定
これで背景マスクの設定は完了です。
文章を入力
文章を入力していきます。
- 画像の中に＋マークの枠があるので選択
- 「検索バー」で「見出し」と検索して、ブロックを挿入
「system renovation」という文章を入力
文字を選択して、バーを表示させます。
- 「H2」→「H1」に変更
- 猿のマークをクリックして、文字を全選択
- 「文字サイズ」76pxに指定
- 「文字色」yとrを赤色、その他の色を白に設定
- 文字間隔を0.2に指定
- 設定バーの「H1」横にある「テキストを左寄せ」を選択
文字を入力
文字を入力していきます。
- ＋マークを選択→段落を選択
「オフィスワークを快適に クリエイティブで未来を創造する会社」と入力します。
※文字数が多い時はShift＋Enterを押すことで、ブロック内で改行することができます
入力したら、下記の手順で変更していきます。
- 文字を全選択→「B」マークを選択して、太文字に変更
- 先程と同様の手順で文字サイズを30pxに変更
- 文字色を白に変更
画像に余白を設定
- 文字の最後でEnterキーを押す
- 「＋」マークが表示される
- 「検索バー」から「スペーサー」と入力して選択
余白のピクセルの変更
右のブロックから、ピクセルを変更できますので、今回は50pxに設定します。
左のバーから上下に移動が可能です。
文字の上下にスペーサーを設置して、右上の「更新」ボタンをクリックしましよう。
この「更新」は必ず定期的に行ってください。
表示を確認
保存した内容の表示を確認していきます。
- 更新の左横「プレビュー」を選択
- 「新しいタブでプレビュー」を選択
現時点で下記のようなページになっていればOKです。
画像の上に余白があり、フォントも初期設定のままになっていますので、
これらを含め変更を行っていきます。
ロゴ、フォント、余白の設定
ロゴ、フォント、余白の設定をしていきましょう。
- 左のWマークをクリック
- 「外観」→「カスタマイズ」を選択
カスタマイズ画面が表示される
下記の画像のように、カスタマイズ画面が表示されればOKです。
「サイトの基本情報」の編集
サイトの基本情報を編集していきます。
- サイトの基本情報を選択→編集をクリック
各種設定
- 「ロゴを選択」→保存したメディアライブラリから「ロゴ」を選択
※画像は切り抜かない - サイトのタイトル「system renovation」と入力
- コピーライトも同様に「system renovation」と入力
- 「サイトアイコンを選択」から「ロゴ」を選択
- 「公開」ボタンで保存をする
タイトルはコピペしちゃった方が早いです。
コンテンツエリア上下余白の設定
コンテンツエリア上下余白の設定をします。
「サイトの基本情報」横にある「＜」マークで一つ前のページに戻りましょう。
カスタマイズ画面の「ホームページ設定」を選択します。
- 「ホームページのコンテンツエリアに上下余白を追加する」のチェックを外す
- 「公開」ボタンで保存
フォントの変更
フォントの変更をしていきます。
「ホームページ設定」横にある「＜」マークで一つ前のページに戻ります。カスタマイズ画面の「デザイン」→「基本デザイン設定」を選択します。
「基本フォント」を「セリフ（明朝体）」に変更します。
オーバーレイに変更
「基本デザイン設定」横にある「＜」マークで一つ前のページに戻り、現在の画面「デザイン」→「ヘッダー」を選択します。
- 「ヘッダーレイアウト」を「1行」に変更
- 「ヘッダー位置」をモバイル版、PC用共に「オーバーレイ」に変更
- 「公開」ボタンで保存をする
グローバルナビゲーションのホバーエフェクト
グローバルナビゲーションのホバーエフェクトを変更します。
- 文字色
- 下線
- なし
この３つから選択できるので、このサイトでは「下線」を選択します。※お好みで選択しても大丈夫です
メニューの設定
続いてメニューの設定です。
- カスタマイズ画面から「メニュー」→「メニューを新規作成」を選択
- メニュー名を追加
- グローバルナビゲーション（PC用） (現在: メニュー) / ドロワーナビゲーション（モバイル用） (現在: メニュー) にチェックを入れて次へを押す
- 「項目を追加」→「カスタムリンク」→URLとリンク文字列を設定
- URLには#をつけて「#事業内容」
※#は半角 - リンク文字列は「事業内容」
- 「メニューに追加」をクリックする
- 公開をクリックして保存
という形でそれぞれ「CSRへの取り組み」「３つの特徴」「技術・実績」「採用情報」といれておきましょう。
終わったら、再度ページの編集に戻ります。
「スムーススクロール」の実装
実装しなくても問題ありませんが、やってみたい方は下記リンクから実装してみてください。
【Snow Monkey】ナビバーメニューリンクでページ内をスムーススクロールで飛ばす方法【５分で完成】
本記事では、Snow Monkeyでスムーススクロールを付けてみたい。トップページ内をスクロールで移動できるようにしたい。こういった悩みを解決します。 スムーススクロールとは、ナビバーのリンクをクリックすると特定のセクションまでスクロールするものがありますね。今回はSnow Monkeyで実装する方法を紹介します。
ニュースの作成（動きのある文字の作り方）
ニュース部分を作っていきます。
まずは編集画面を開きましょう。
- 「固定ページ」→「HOME」→「編集」
こちらの動きのある文字は、先程ダウンロードしておいたプラグイン「Shortcodes Ultimate」を使用しています。
こちらのプラグインは、ショートコードを挿入するだけで、さまざまな装飾ができますので、皆さんも色々試してみてくださいね！
それでは早速作成していきます。
- 編集画面で+マークを選択
- 検索バーから「ショートコード」と検索→選択
- 【】のようなマークを選択
ショートコードで実装できる一覧が表示されるので「アニメーション」を選択します。
アニメーションの詳細を設定
下記のように設定します。画像を見ながら進めると分かりやすいです。
- アニメーション「fadeInLeftBig」
- 期間 「１」を入力
- 遅延「０」を入力
- 別のCSSクラス「color」を入力
- 内容「ニュースはこちら>>」を入力
- 「ショートコードを挿入」を選択
これでプレビューを表示すると、文字が動くのがわかります。
ショートコードのブロックを追加
同様に、下の段に同じような動きをつけていきましょう。
先程と同様にショートコードのブロックを追加します。
- アニメーション「fadeInLeftBig」
- 期間 「１」を入力
- 遅延「０」を入力
- 別の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です。
綺麗に整えることができましたね。
事業内容の作成（ブロークングリッドの作り方）
事業内容の作成をしていきます。ブロークングリッドはよく使われるのでぜひ覚えておきましょう。それでは再度、編集画面に戻ります。
タイトルの設定
- ＋マークを選択
- 検索バーで「セクション」と検索
- 「セクション」をクリック
- 「タイトルを書く」の部分に「事業内容」と入力
- 「サブタイトルを書く」の部分に「ABOUT」と入力
- 左上のバーから「幅広」→「全幅」に変更
HTMLアンカーを設定
- 高度な設定→HTMLアンカーに「事業内容」と入力
これを行うと、トップページのナビバーをクリックするとこのセクションへ飛ぶことができるようになります。
同じようにして、その他グローバルナビバーのメニューにもアンカー設置をしていきましょう。
ブロークングリッドの設定
ブロークングリッドの設定をしていきます。
- タイトルの下の＋マークを選択
- 検索バーから「セクション」と検索
- 「セクション（ブロークングリット）」を選択
文章を入力
- 左側の「タイトルを書く」から「GP企業として、多くのニーズに対応」と入力
- その下の＋マークを選択→「段落」を選択
- 「働き方は選べる時代へ。あらゆるニーズにあわせ、幅広く対応しています。高い技術力と細やかな配慮から生まれた建築物を創出し続けます。」と入力
写真を挿入
「メディア」の「メディアライブラリ」から「ブロック1」の写真を挿入します。
- 右のバー「ブロック」を下にスクロールして、「コンテンツの設定」を選択
- 「コンテンツサイズ調整」→「+-0%」
- 「背景色」を薄い白に設定
- 「コンテンツの余白」→「M」に設定
まずは、1つ目の「ブロークングリット」の設定が完了しました。
2つ目も同様に作成していきます。
左上のバーから、メディアと文章の表示位置を変えられるので、
「メディアを右に表示」に変更し、先程と同様に作ってみましょう。
ボタンのカスタマイズ
各ブロックの下に表示されているボタンの作成方法です。
触れると動くおしゃれなボタンの実装方法ですが、こちらは「カスタムHTML」というブロックを使用しています。WordPressでは、自分でHTMLとCSSを組んで自由にアレンジすることもできます。
ボタンの実装方法は»【Snow Monkey】CSSで簡単！ボタンにエフェクトを加える方法【コピペOK】で解説しているので、ぜひ参考にしてみてください。
【Snow Monkey】CSSで簡単！ボタンにエフェクトを加える方法【コピペOK】
Snow Monkeyでボタンにエフェクトを実装する簡単な方法を紹介しています。これができれると普段と違ったサイトの雰囲気が出てきたり、スタイリッシュなサイトやコーポーレートサイト、そういった企業向けに使えると思います。また、Snow Monkeyだけでなく、普段のコーディングでも使えるのでぜひ試してみてください。
ボタンと文章が重なってしまう場合は、間にスペーサーを40px入れると綺麗に表示することができます。解説画像は無いので、自力でチャレンジしてみてください！３つの特徴（パネルの作り方）
３つの特徴を作っていきます。
タイトルの入力と「パネル」ブロックの追加
セクションの中に、「タイトル」と「パネル」というブロックを追加していきます。
- +マークから「セクション」を検索して選択
- 「タイトルを書く」の欄に「３つの特徴」と入力
- ＋マークを再度選択して「パネル」を検索
- 「パネル」ブロックを追加
３つの特徴を作成
まず「行あたりのカラム数」を変更していきます。
画像のように白枠をクリックすると、ひとつずつパネルを編集できるので数字で3と入力してください。
カラム内を編集
- 「メディアライブラリ」→写真を挿入
- 「タイトルを書く」の欄に「顧客のニーズを1番に考えた空間」
- 「内容を書く」の欄に「Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.」
長いのでコピペでOKです。
残りの２つも追加
＋マークを選択すると、パネルを新しく増やすことができるので、今回は「垂直レイアウト」を選択して、残りの２枚を作成してください。
３つ並べることができたら、このセクションは完了です。
CSRへの取り組み（セクション画像背景）
CSRへの取り組みを作成していきます。
- ＋マークを選択
- 検索バーより「セクション」と入力
- セクション（背景画像/動画）を選択
- 左上のバーから「幅広」→「全幅」に変更
- 右側をスクロールして、「メディアライブラリ」から画像を挿入
画像が挿入されればOKです。
セクションの中身を編集
次にセクションの中身を作っていきます。
- コンテンツの水平位置は右の欄から、「中央」に変更
- タイトルに「CSRへの取り組み」と入力
- 「文字サイズ」を20pxに変更
- 文字を全選択→「B」マークを選択して、太文字に変更
「テキスト中央寄せ」に変更
次にテキストの調整を行います。
- +マークを選択
- 検索バーで「段落」と検索→文章に「安心・安全を世界中に提供し、最適な空間を創造し続ける会社を目指して」と入力
- 3本線のアイコンをクリック
- 「テキスト中央寄せ」
背景マスクの設定
最後に背景マスクをかけます。
- CSRへの取り組みの画像をクリック
- 右のブロックをスクロール
- 「背景マスクの設定」を選択
- カラーを「グレー」
- 不透明度を「0.6」に設定
これで完成です。
そして先程と同様にボタンを実装するためにカスタムHTMLでブロックを追加します。
ボタンの実装方法は»【Snow Monkey】CSSで簡単！ボタンにエフェクトを加える方法【コピペOK】で解説しているので、ぜひ参考にしてみてください。
【Snow Monkey】CSSで簡単！ボタンにエフェクトを加える方法【コピペOK】
Snow Monkeyでボタンにエフェクトを実装する簡単な方法を紹介しています。これができれると普段と違ったサイトの雰囲気が出てきたり、スタイリッシュなサイトやコーポーレートサイト、そういった企業向けに使えると思います。また、Snow Monkeyだけでなく、普段のコーディングでも使えるのでぜひ試してみてください。
技術・実績（動き続けるスライドショーの作り方）
次に動き続けるスライドショーを作っていきます。
まずは下記の手順で、タイトル部分を作っていきます。
- ＋マークをクリック
- 検索バーに「セクション」と入力→選択
- タイトルに「技術・実績」と入力
- サブタイトルに「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です。実際に反映されているか確認してみましょう。
この設定で綺麗にスライドショーと、コピーライトを装飾することができました。
採用情報とグループ企業一覧（項目でバナーの作り方）
採用情報とグループ企業一覧を作成していきます。
２つ横並びになっているブロックを「項目」から作成していきます。
項目を設定
- +マークを選択
- 項目を選択
バナーを設定
- ＋マークを選択
- バナーを選択
左側には、「バナー」ではないデフォルトで表示されるブロックがあるので、こちらを削除します。
- 左のブロックをクリック
- 左に細長いバーが表示される
- ３つ縦に並ぶ丸をクリック
- 「ブロックを削除」を選択
「採用情報」を作成
「採用情報」を作成していきます。
- メディアライブラリから写真を挿入
- タイトルを「採用情報」に変更
- 文字を選択
- 左の細長いバーの猿のマークをクリック
- 「文字サイズ」を36pxに変更
「グループ企業一覧」
同様の手順で「グループ企業一覧」も作ってみましょう。
背景マスク
最後に背景マスクをかけます。
- それぞれのブロックをクリック
- 右のブロックをスクロール
- 「背景マスクの設定」を選択
- カラーを「グレー」
- 不透明度を「0.3」に設定
この「バナー」では、画像自体にURLを貼り付けることもできますので、クリックして他のURLに飛ばせるようにしておきましょう。
- 細長いバーから(-)マークを選択
- 「#」と入力
これでリンクの設定が完了です。
実案件でもよく使われるので、実際のURLを入力してみてくださいね。
フッター（セクション画像背景）
いよいよ最後になります！
フッターを作成していきましょう！
セクション（背景画像/動画）の設定
先程と同様に、セクション（背景画像/動画）を使用していきます。
- ＋マークをクリック
- 検索バーに「セクション（背景画像/動画）」と入力→選択
- 画像を挿入
- 幅を「幅広」→「全幅」に変更
- 「背景マスクの設定」→「不透明度 0.4」に設定します。
カラム内を設定
- ＋マークをクリック
- 「カラム」を選択
- カラムの33/33/33を選択します。
３つのカラムが出来上がればOKです。
左側のカラム
- 画像を挿入
- 白い丸をドラッグして画像のサイズを変更
中央と右側のカラム
- 「段落」→文章を入力
- 文字色を「白」に変更
文章は下記からコピペでOKです。
〒11X-0000
東京都葛飾区亀有町XXXX
〒10X-0000
愛知県名古屋市XXXX
TEL / FAX
03-0000-0000 / 03-0000-0000
TEL / FAX
0X-0000-0000 / 0X-0000-0000
これで完了です。
余白の調整
最後に余白の調整を行います。
それぞれの場所にスペーサーをいれましょう！
- ＋マークを選択
- 検索バーから「スペーサー」と検索して選択
ファーストビューの下に86pxの余白をいれる
CSRへの取り組みの上下に余白
次にCSRへの取り組みの上下に余白を設定します。
３つに並ぶ丸マーク→「複製」を選択すると作業が速くなります！
「採用情報」「グループ企業一覧」に余白
最後に「採用情報」「グループ企業一覧」に余白を設定していきます。
下の段のみ172pxに設定してください。
これで綺麗に余白も揃いました。
最後に「更新」ボタンで保存を行い、終了となります！ここまでお疲れ様でした！
終わり
以上で、デモサイトの制作が終了です。
長かったですよね、、本当にお疲れ様でした。
ポートフォリオや制作実績など好きなように利用して大丈夫ですので、このサイト制作が営業のキッカケになったり、案件獲得の支えになったら幸いです。
そして、完成した際はぜひTwitter報告もしていただけたら嬉しいです！
また下記のじゃんきーさんのサイトも無料で公開されているので、ポートフォリオや製作実績を増やしたい方はぜひ、次のステップとして取り組んでみてください。
おすすめ記事：じゃんきーさんのブログ
WordPressテーマのSnowMonkeyでWEBサイト制作をする方法
SnowMonkeyでデモサイトを制作する方法をまとめてみました。初心者の方もこの手順で制作すればサイトが作れるようになってます。ぜひ活用してください！
これからも一緒にWEB制作を頑張っていきましょう＼(^^)／
本記事に協力してくれた方の紹介
- ゆりり（@yuri601206）»本記事のデザイン〜製作までやってくれました
- だいすけ(Silverdogs49)
- K.A.T(kat_brave_life)
- マイ(mai___design)
- ナカタニ(nktnmtkweb)
- ひとみ(@chasu_hito)
- わっかー(waka_niigata94)
- とこ(@toko_snowhare)
- けい(kei_Dr_K)
- けいいち(kichi2023)
- ゆうり(yur_web)
- tae(ttaaeetae)
- あやなか(nyakotan10)
- みい(mii_dtp_web)
- テツ(tetsu_swa_web)
もっとカスタマイズがしたい方はこちら
【まとめ記事】Snow Monkeyのカスタマイズをすべて紹介＋解説
本記事にこれまでのSnow Monkeyのカスタマイズ記事をまとめてみました。この記事から各カスタマイズのページに飛べるようになっています。アレンジの幅があると何かと便利ですよね。ぜひ使ってみてください。Snow Monkeyを上手に活用して素敵なライフを送りましょう。
- 【画像１２枚で解説】My Snow Monkeyを使って本番環境のサイトを直接編集する方法【Snow Monkey】
- 【コピペOK】Snow Monkeyにアニメーションを付ける方法【AOSでサイトに動きを付ける】
- 【Snow Monkey】コピペで使えるブレイクポイントをまとめてみた【Sassもできる】
- 【サクッと５分でOK】Snow Monkeyにアニメーションを付ける方法【wow.js / Animate.css】
- 【簡単】Snow Monkeyのドロワーをカスタマイズをする方法【コピペOK】
- 【Snow Monkey】CSSで簡単！ボタンにエフェクトを加える方法【コピペOK】
- 【Snow Monkey】ナビバーメニューリンクでページ内をスムーススクロールで飛ばす方法【５分で完成】
合わせて読みたい記事
