簡単にキレイなサイトが作れるSnowMonkey。サイト制作で使用しているorしたい方も多いのではないでしょうか。
ただ、SnowMonkeyを使っているうち、
- いつも同じようなサイトしか作れない…。
- SnowMonkeyでどうやってオリジナリティの高いサイトを作ればいいかわからない…。
- 基本的な操作はわかったけど、もっと詳しくなってSnowMonkeyを使いこなしたい！
と、思うようになるという声も多いです。
この記事では、
そんな方へ向けて、CSSなどを活用してSnowMonkeyを綺麗にカスタマイズする方法を解説します！
【初心者向け】で制作したサイトをカスタマイズしていく【中級者向け】の記事となっています。
まだ読んでいないという人はそちらから始めてください。
制作するサイトの確認
本記事を最後まで進めることで下記の画像のようなWebサイトが完成します。
実際のサイトはこちらから確認できます。
ぜひご覧になってみてください！
CSSとJavascriptを使ってホバーアクションを追加したりもしているので、動きを確かめながら進めてみてください。
【中級者向け】を始める準備
以前初心者向けに制作したサイトを中級者向けにカスタマイズしていきます。
- 【初級編】Snow Monkeyで綺麗なWebサイトを作る方法で制作したサイト
- CSSを記述する環境
- 【中級編】で追加する画像
【初心者向け】Snow Monkeyで綺麗なWebサイトを作る方法の記事はこちら
CSSを記述する環境については「SnowMonkeyでsassを使う方法」で解説しています。
【中級者向け】で追加する画像はこちらからダウンロードしてください。
サイト全体の文字色を変更する
それでは、早速始めましょう！
まずは、サイト全体の文字色を変更するところからです。
my-snow-monkeyのファイルをVscodeで開き、style.scssにコードを記述します。
body {
color: #2e2e2e;
}ここまでは簡単ですね！
ヘッダーナビに区切り線とホバーアクションを追加する
次は、ヘッダーナビを装飾していきます。
区切り線の追加
ナビの間に区切り線を加えるため、下記コードを記述してください。
/* =========================================================
# ヘッダーナビ
========================================================= */
/*
# 区切り線の追加
---------------------------------- */
.c-navbar__item:not(:first-child):before {
content: "";
display: inline-block;
width: 1px;
height: 30%;
background-color: #2e2e2e;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}下の画像のようになっていればOKです。
ホバーアクションを追加する
マウスを乗せたときにクリックできることが伝わりやすいようにホバーアクションを追加します。
色が変わって下線が出てくるようにします。下記コードを記述しましょう。
/*
# ホバーアクション
---------------------------------- */
.c-navbar__item > a {
transition: all 0.3s;
}
.c-navbar__item > a::after {
content: "";
position: absolute;
bottom: 20px;
left: 20%;
width: 60%;
height: 1px;
background-color: #dc861b;
transition: all 0.3s;
transform: scale(0, 1);
transform-origin: left top;
}
.c-navbar__item > a:hover {
color: #dc861b;
}
.c-navbar__item > a:hover::after {
transform: scale(1, 1);
}マウスを乗せることで文字の色が変わり、下線が横から出てくるようになりました。
メインビジュアルのカスタマイズ
メインビジュアルには画像が自動で切り替わっていくスライドショーが多く設定されています。
スライドショーを簡単に実装する方法として、Slick.jsやSwiper.jsなどのJSライブラリが代表的ですが、今回はライブラリを使用せずに画像が切り替わる方法でやっていきます。
HTMLコードを表示させる
SnowMonkeyでコードを記述するにはフックを利用します。
my-snow-monkey.phpに下記コードを記述します。
// mvセクションを追加する
add_action(
'snow_monkey_prepend_main',
function () {
// フロントページにのみ表示する
if (is_front_page()) {
?>
<div class="mv-slide">
<figure id="imageSlide" class="mv-slide__img">
<div class="mv-slide__bg01"></div>
<div class="mv-slide__bg02"></div>
<div class="mv-slide__bg03"></div>
</figure>
<div class="mv-slide__title">走る喜びを手に入れる</div>
</div>
<?php
}
}
);レイアウトを調整する
次に、各スライドのレイアウトを調整していきます。
style.scssに下記コードを記述します。
/* =========================================================
# mv
========================================================= */
/*
# スライドショー
---------------------------------- */
#imageSlide {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: relative;
}
#imageSlide::before {
content: "";
display: block;
padding-top: 51.59722%;
}
#imageSlide div {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.mv-slide__bg01 {
background-image: url(画像のURLをペースト);
}
.mv-slide__bg02 {
background-image: url(画像のURLをペースト);
}
.mv-slide__bg03 {
background-image: url(画像のURLをペースト);
}
/*
# 640以下で画像を切り替え
---------------------------------- */
@media screen and (max-width: 640px) {
#imageSlide::before {
content: "";
display: block;
padding-top: 157.8666%;
}
.mv-slide__bg01 {
background-image: url(画像のURLをペースト);
}
.mv-slide__bg02 {
background-image: url(画像のURLをペースト);
}
.mv-slide__bg03 {
background-image: url(画像のURLをペースト);
}
}画像のパスを設定する
背景に画像を表示させるための設定を行いましょう。
background-image: url(画像のURLをペースト);に画像を表示させるためにパスを入力します。
まず、管理画面の「メディア」→「ライブラリ」の中から表示させる画像をクリックします。
「URLをクリップボードにコピー」をクリックします。
background-image: url(画像のURLをペースト);コピーしたURLをペーストします。
JSファイルを準備する
今のままでは画像の切り替えがおこなわれていないので、JSファイルを準備して切り替えができるようコードを記述します。
「my-snow-monkeyフォルダ」内に「JSフォルダ」を作成し、「JSフォルダ」内に「main.js」を作成します。
JSファイルを読み込む
次に、下記コードをmy-snow-monkey.phpに記述します。
先ほどHTMLコードを表示させるために記述したコードの上に記述してください。
// jQueryの読み込み
add_action('wp_enqueue_scripts', 'msm_enqueue_style_script');
function msm_enqueue_style_script()
{
/* js読み込み */
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/js/main.js',
['jquery'],
filemtime(MY_SNOW_MONKEY_PATH . '/js/main.js'),
true
);
}続いて「main.js」に下記コードを記述します。
jQuery(function ($) {
function slideshow(target) {
setTimeout(function () {
var slide = $(target).children().last();
$(slide).fadeOut(1000, function () {
$(target).prepend(slide);
$(slide).show();
slideshow(target);
});
}, 2000);
}
slideshow('#imageSlide');
});画像が切り替わっていることが確認できます。
タイトルを調整する
タイトルの色と配置を調整します。
style.scssに下記コードを記述します。
.mv-slide{
position: relative;
}
.mv-slide__title{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
color: #fff;
font-size: 44px;
font-weight: bold;
text-align: center;
}mvセクションを削除する
【初級編】で作成したmvセクションは不要になるので、トップページを編集して「mvセクション」の3点リーダーをクリックし、セクションを削除します。
これでメインビジュアルが完成しました！
会社案内をカスタマイズ
続いて、会社案内をカスタマイズしていきましょう。
ホバーアクションを追加する
マウスを乗せた時のホバーアクションを画像に加えていきます。
クラスを追加する
固定ページ一覧からトップページの編集をクリックします。
画像の赤枠部分をクリックして右側メニューにある「高度な設定」→「追加CSSクラス」にabout-itemと入力します。
あと2つのバナーブロック「メッセージ」「会社概要」も同様に、追加CSSクラスにabout-itemと入力します。
コードを記述する
style.scssに下記コードを記述します。
/* =========================================================
# 会社案内
========================================================= */
/*
# ホバーアクション
---------------------------------- */
.about-item .smb-items__banner__figure > img {
transition: all 0.3s;
}
.about-item:hover .smb-items__banner__figure > img {
transform: scale(1.2);
}画像だと分かりづらいかもしれませんが、マウスを乗せると画像が拡大し、外れると元の大きさに戻るようになりました。
背景の色を変更する
赤枠の会社案内（about）セクションをクリックします。
先ほどと同様に右側メニューの高度な設定で、「about」というクラスを追加します。
下記、コードをstyle.scssに記述しましょう。
/*
# 背景
---------------------------------- */
.about {
background: linear-gradient(225deg, transparent 0, transparent 50%, #dc861b 50%, #dc861b 100%);
}斜めに背景色がつき、スタイリッシュな雰囲気になりましたね！
事業内容をカスタマイズ
では、会社案内と同様に事業内容の背景に色をつけていきましょう。
背景の色を変更する
事業内容(service)セクションをクリックして、「service」というクラスを追加します。
コンテンツ幅を全幅に変更しておきます。
コードを記述する
style.scssに下記コードを記述します。
/* =========================================================
# 事業内容
========================================================= */
.service {
background: linear-gradient(-225deg, transparent 0, transparent 50%, #15156b 50%, #15156b 100%);
}すると、画像のように会社案内のセクションとは反対の向きで、色を変更した背景色がつきました。
クラスを探しやすくするため、ネストは使わない！
お気づきの方もいるかもしれませんが、sassを使う上でメリットでもあるネストを使っていません。
理由としてはクラス名を探しやすくするためです。
コーディングやカスタマイズする際、検証ツールは必ず使うと思います。
しかし、この時修正やスタイルの当たり方を検証ツールで試し、style.scssに変更箇所を記述したい場合、困ったことが発生します。
それは、該当箇所のクラス名を検証ツール上でコピーしVscodeの検索機能で探しても、ネストされているとstyle.scssファイルから検索結果が得られず、コンパイルされたcssファイルからしかクラス名は見つからないということです。
下の画像の左がscss。右がコンパイルされたcssです。
scss（左）の下のコードがネストした書き方ですが、コンパイルされると右側のような記述になります。
検証ツールで出てくるクラス名はコンパイル後の右側のコードなので、Vscodeで検索をしてもstyle.scssファイルからは見つからないということです。
このような理由から、コードの記述や修正をstyle.scssで行うなら、クラス名がすぐに見つかるネストを使わない書き方をオススメします。
お知らせをカスタマイズする
さて、続いてお知らせのセクションをカスタマイズしていきます。
レイアウトを変更する
newsセクションの「最近の投稿」ブロックをクリック。
右側メニューの表示する投稿数を5、レイアウトをテキスト2にします。
カテゴリーの色分け
カテゴリーごとに色分けするには、カテゴリーIDというものを調べる必要があります。
調べる方法はいくつかありますが、カスタマイズが目的なので検証ツールで調べます。
検証ツールで調べるとIDがクラス名として出力されています。
下記コードを記述します。
/* =========================================================
# お知らせ
========================================================= */
/*
# カテゴリーの色分け
---------------------------------- */
.c-entry-summary__term--category-4 {
background-color: #256ba0;
}
.c-entry-summary__term--category-5 {
background-color: #c7c814;
}
.c-entry-summary__term--category-6 {
background-color: #ad4a4a;
}
.c-entry-summary__term--category-7 {
background-color: #38b09c;
}
/*
# 角を丸く
---------------------------------- */
.c-entry-summary__term {
border-radius: 3px;
}色分けができました。
新たにカテゴリーを追加した場合は、検証ツールでIDを調べてstyle.scssに記述をしましょう。
ブログ・採用情報をカスタマイズする
会社案内のセクションと同様に、マウスオーバーで画像が拡大するようにします。
クラスを追加する
blog/recruitセクションの項目内にある上のバナーをクリックします。
高度な設定の追加CSSクラスに「blog-item」と入力しましょう。
下のバナーには「recruit-item」とクラス名を入力します。
次に、style.scssに下記のコードを記述します。
/* =========================================================
# ブログ・採用情報
========================================================= */
/*
# ホバーアクション
---------------------------------- */
.blog-item .smb-items__banner__figure > img,
.recruit-item .smb-items__banner__figure > img {
transition: all 0.3s;
}
.blog-item:hover .smb-items__banner__figure > img,
.recruit-item:hover .smb-items__banner__figure > img {
transform: scale(1.2);
}トップページをリロードして、画像が拡大することを確認できればOKです。
フッターをカスタマイズする
ウィジェットを追加する
「外観」→「カスタマイズ」→「ウィジェット」→「フッター」をクリックし、「＋マーク」をクリックしてナビゲーションメニューを選択します。
タイトルにMENU。メニューを選択はグローバルナビを選択します。
ブロックを追加しウィジェットグループを選択します。
ウィジェットグループ内の「＋マーク」から「カテゴリー」を追加。タイトルに「CATEGORY」と入力します。
さらにウィジェットグループを追加。段落を追加して会社情報を記載します。
タイトルに「ABOUT US」と入力します。
ここまでで下の画像のようになります。
レイアウトを調整する
「外観」→「カスタマイズ」→「デザイン」→「フッター」を選択します。
フッターレイアウトを「フッター4」。カラム数を「3カラム」に変更します。
このままでも綺麗にレイアウトされていますが…もう少し調整していきます。
style.scssに以下のコードを記述します。
/* =========================================================
# フッター
========================================================= */
/*
# 中央寄せ・ボーダー
---------------------------------- */
.l-footer-widget-area__item.c-row__col {
text-align: center;
border-left: 1px solid #e3e3e3;
}
@media screen and (max-width: 1023px) {
.l-footer-widget-area__item.c-row__col {
text-align: center;
border-left: none;
}
}
/*
# 1023以下でロゴ消す・幅70％
---------------------------------- */
@media screen and (max-width: 1023px) {
.l-footer__body .c-container {
width: 70%;
}
.l-footer__body .c-container .c-site-branding__title {
display: none;
}
}「外観」→「カスタマイズ」→「メニュー」→「グローバルナビ」→メニューの位置のフッターサブナビゲーションのチェックを外します。
コピーライトの調整
それでは、コピーライトを調整します。もうひと踏ん張りですよ！
style.scssに下記のコードを記述してください。
/*
# コピーライト
---------------------------------- */
/*
# 背景色
---------------------------------- */
.l-footer--footer-4 .l-footer__footer, .l-footer--footer-5 .l-footer__footer {
background-color: #2e2e2e;
}
/*
# テキスト
---------------------------------- */
.l-footer--footer-4 .l-footer__footer, .l-footer--footer-5 .l-footer__footer .c-copyright {
color: #fff;
}
/*
# 中央寄せ
---------------------------------- */
.l-footer__footer .c-row {
justify-content: center;
}下の画像のようになっていればOKです。
これですべての工程が終了しました。
まとめ
お疲れ様でした！以上で中級者向けサイトカスタマイズ制作終わりとなります。
今回はsassを使用し、初級者向けで制作したサイトにデザインを足していきました。
ここまででSnowMonkeyの操作にも大分慣れてきたのではないでしょうか？
SnowMonkeyはブロックとsassやJSと組み合わせることで、自由度の高いサイト制作が可能になります。
今回紹介したコードを自分なりに変更し、独自性の高いサイトを作って今後のWeb制作に活かしてみてください！
