【実績掲載OK】Snow Monkeyカスタマイズ講座【中級編】

こんにちは、じゅんぺーです。

先日Twitterでこんな投稿をしたのですが、予想以上の反響を頂くことができました、、

「リツイート」「いいね」「コメント」下さった方、本当にありがとうございます。

今回は「SnowMonkey」カスタマイズ講座【中級編】というタイトルで執筆していこうと思います。

SnowMonkeyカスタマイズ講座【中級編】：前置きメッセージ

あなたは「SnowMonkey」の学習をしていて「初級編以上の教材がない！」と困ったことはありませんか？

少なくとも僕はそうでした。

実は「SnowMonkey」はカスタマイズをしてこそ本領発揮するテーマだと思っているので、「少しのテクニック」と「少しのアイデア」があれば、様々なデザインに対応できる柔軟なテーマなんです。

自分で全て調べて答えに辿り着ける方であれば問題はないのですが、割と情報にたどり着くのって難しいですよね。

そこで今回の記事は「SnowMonkey」の扱いに慣れてきたけど、具体的に「もっと複雑なカスタマイズ方法が知りたい！」「実際に案件で使うようなカスタマイズ方法が知りたい！」といった方に向けて執筆を行います。

いわゆる「初級編」の学習を終えてブロックや「SnowMonkey」の仕様に慣れてきた方が「中級編」以上の学習教材がなく、ステップアップするのに躓いていた方にはとても有益な記事になっていると思います。

ブロックの使い方などまだ理解できていない方は『SnowMonkey』をカスタマイズしてお洒落なウェブサイトを作ろうで一度学習してみましょう！
個人的なお勧めですが上記教材は僕が学習を始めた際にとてもお世話になりました。
他には、たにぐちまことさんの「ともすたチャンネル」や、
じゃんきーさんの「じゃんきーブログ」でもとても詳しく説明されています！

※この記事ではCSSの知識がある前提で執筆しています。
多くのCSSを使用してカスタマイズを行っていますが、CSSの内容について説明はほとんどできておりません。
ただ、なるべくコメントを入れて説明しておりますので、そちらを参考にして頂ければと思います。

SnowMonkeyカスタマイズ講座【中級編】：実際に作成するサイトデザインを確認しよう

環境構築や「SnowMonkey」のインストールは先ほど紹介したサイトで全て紹介されているので省きます！

これから作成していくサイトはこのようなデザインとなっています。

完成したサイトはこちら

サイト制作をしていく上で某テーマがよく引き合いに出るので、こちらのテーマに寄せる形で作成してみました。（わかる人にはわかるはず、、）

実際に使用している技術はそこまで高いわけではありませんが、「SnowMonkey」の設計をある程度理解していないとできないカスタマイズになっていると思います。

この記事を読み終えて使い方をマスターした方は「SnowMonkey」でハイレベルな「ポートフォリオ」や「実案件」をこなせるようになるでしょう。

また、今から作成するサイトは【実績掲載OK】としています。
公開するにはサーバーとドメインが必要になりますので、エックスサーバーやお名前.comで契約を行うと良いでしょう。

実案件ではクライアントとの確認作業で必ず必要となるものなので、まだサーバーとドメインがない方はぜひ契約をしておいてくださいね！

それでは早速制作に取り掛かりましょう！

※この記事では環境構築などの簡単な設定は省いて説明しているので初期設定の手順は上記で紹介している記事などで学習しておきましょう。

SnowMonkeyカスタマイズ講座【中級編】：「SnowMonkey」でカスタマイズを行うための準備

今回は、フリー素材の「Unsplash」からダウンロードしており、実際に使用した画像データを準備しておきましたので、必要であればご自由にお使いください。
僕が作成したあまりかっこよくないロゴも入っているので是非使ってください。。

そして、使用する画像は全てダッシュボードの「メディア」からアップロードしておきましょう。

「mysnowmonkey（子テーマ）」をアップロードしよう

まず初めに「mysnowmonkey」と言われる「SnowMonkey」専用に開発されたプラグインをインストールします。「mysnowmonkey」はテーマ購入特典として配布されていますので、試用版を利用している方は「子テーマ」を利用して環境を作成しましょう。

「my-snow-monkey」は購入特典であり、「子テーマ」はオレインさんが作成して下さっているので「my-snow-monkey」や「子テーマ」に下記添付のファイルを貼り付ける形で実装していきます。

WordPress テーマ Snow Monkey

WordPress テーマ Snow Monkey どんな味付けにも染まる。高級お出汁のような WordPress テーマ、Snow Monkey

オレインデザイン

Snow Monkey専用のWordPress子テーマテンプレートを公開しました | オレインデザイン 100%GPL WordPressテーマのSnow Monkeyを使っています。 とても優れたテーマなので手を加える必要はほとんどないのですが、ちょっとしたことをしたい場合には以下の２つの...

ここでは「SCSS」での作成を行います。

下記に雛形を添付しているので是非使ってみてください。

こちらの雛形は説明の都合上、簡易的なものとなっていますので実案件などこなす場合は自分なりにカスタマイズして使ってみてください！

ダッシュボードから「プラグイン」をクリックして新規追加から、用意している「my-snow-monkey.zip」をアップロードして「有効化」しましょう。

子テーマを使用されている方は「外観」から「テーマ」をクリックし、同じ要領で子テーマをアップロードして「子テーマの有効化」をしておきましょう。

ついでにその他必要なプラグインもインストールしておきましょう！

プラグインを新規追加しました！

上3つのプラグインは説明する必要は無いと思いますが、「Show Current Template」というプラグインは現在表示しているテンプレートを見える化してくれます。

開発時はとても便利なので追加しておくことをお勧めします！

ファイルを整えよう

この講座では「SCSS」での作成を行いますので、まだダウンロードしていない方は配布している雛形を下記に添付しているので是非使ってみてください。

※「SCSS」を使用するには「CSS」にコンパイルをする必要があります。

「VS Code」を使用している方は「Live Sass Compiler」という拡張機能をインストールしておきましょう。

「Live Sass Compiler」がないと記述したコードを読んでくれないので、必ず導入し設定しましょう。

「Live Sass Compiler」を使用する方法でもよいですが、「Gulp」という「Node.jp」をベースとしたタスクランナーを利用することでも実現可能です。
コマンドを打つ必要があるので、黒い画面に慣れていない方には少しハードルが高いかもしれません。（私も慣れていませんが、、、）

SCSSを使いこなすことで、CSSだけを利用するよりもかなり効率的にコードを書くことができます。

いくつか質問を頂いたのですが「Live Sass Compiler」を使用する場合は「VS Code」の右下に「Watch Sass」と記載が出るのですが、必ずクリックして「Watching…」の状態にしてください！
上記を行わないとコンパイルしてくれずにコードを読み込んでくれないので注意が必要です！

他にもSCSSを使用するメリットは山ほどあります。SCSSの勉強をされたい方は、下記の書籍がとても分かりやすく網羅されているので興味がある方は勉強してみてください！

SCSSを学べるおすすめ教材

書籍よりも動画派の方も多いと思うので、udemyの動画教材もおすすめです。

月に1度はセールをしているので、必ずセール期間中に購入しましょう！

SCSSを網羅できるudemyの教材はこちら

SCSSには本来上記に挙げているような、さまざまな機能が用意されているのですが、ここでは少しややこしくなってしまうので「ネスト（入れ子）」の機能のみを使用します。

早速ですが、配布しているファイルをインストールしたらローカル環境の「mysnowmonkey」（子テーマ）があるディレクトリへ移動しましょう。

「local by flywheel」を使用している方は、
「Local Sites」→「billion」→「app」→「public」→「wp-content」→「plugins」→「my-snow-monkey」というファイル構成になります。
子テーマを使用している方は、「wp-content」までは同じで→「themes」→「子テーマ」となります。

ダウンロードしたファイルの中にある「scripts」と「styles」をコピーして、「my-snow-monkey」のファイルの中に貼り付けましょう。

「子テーマ」を使用している方も同様に「scripts」と「styles」を用意していますので、コピーして貼り付けてください。

このようなファイル構成になっていればOKです！

my-snow-monekey.phpにスタイルを読み込ませる記述をしよう

先ほどインストールしたフォルダの中にfunctions.phpのファイルを用意しているので、ファイルをエディタで開いて添付画像のようにmy-snow-monkey.phpにコピペしましょう。

子テーマを使用されている方も同様にfunctions.phpを用意しているので、丸ごとコピーして貼り付けましょう。

「my-snow-moneky」を使用されている方と「子テーマ」を使用されている方では、準備している中身のコードが異なりますので気をつけましょう。

このようなファイル構成になっていればOKです！

ファイルが読み込まれているか確認しよう

読み込まれているか確認するには、下記画像のように「styles」→「breakpoints」の直下にある「_base.scss」に下記コードを記述してみましょう。

body {
  background-color: red !important;
}

コードの記述ができたらブラウザをリフレッシュして反映されているか確認しましょう！

画像のように記述したスタイルが反映されて背景が赤くなっていればOKです！

SnowMonkeyカスタマイズ講座【中級編】：固定ページの設定や準備

ここまででやっと環境が整ってきましたね。

ここでは、固定ページの各種設定やなどを行なっていきます。

固定ページを作成しフロントページに設定しよう

まずは必要な固定ページを追加していきましょう。

ダッシュボードから「固定ページ」をクリックして「新規追加」で新しく必要なページを作成をしていきましょう。

ポイントは「スラッグの設定」「順序の設定」をしておくと後から整理がしやすくなりますよ！
また、僕の場合、順序は「100」ずつで設定しています。
理由としては、後からページが増えた場合でも間にページを挿入できるからですね！

画像のように「Billion」「事業案内」「会社案内」「採用情報」が追加できたら次に進みましょう。

ここではスラッグを「Billion→billion」「事業案内→business」「会社案内→company」「採用情報→recruit」としています。
※特に決まりはないので好きな固定ページやスラッグにカスタマイズしてもいいですね！

カテゴリーの追加をしよう

後から投稿の内容を出力する予定なので、先にカテゴリーを追加しておきましょう。

ダッシュボードから「投稿」の「カテゴリー」をクリックすると「カテゴリー」を追加できるので下記画像のように追加していきましょう。

「建築施工」「リフォーム」「リノベーション」は「施工例」が親カテゴリーになるように設定しておきましょう！

カスタマイザーで各種初期設定をしよう

現在はhome.phpが使用されている状態なので、先ほど追加した固定ページ（front-page.php）が使用されるように設定していきましょう。

カスタマイザー画面へ移動して、「ホームページ設定」から「固定ページ」にチェックを入れましょう。

そして、「ホームページ」のドロップダウンメニューからフロントページにする固定ページ（ここではbillionを選択）を選びましょう。

画像のようにヘッダーメニューに「billion」と表示されればOKです！

※たまに上手く表示されない時があるので、上手くいかない場合は「公開」をクリックした後にブラウザをリフレッシュしてみてください。

ここまでできたら、ついでに「ホームページのコンテンツエリアに上下余白を追加する」のチェックを外しておきましょう。

コンテンツの上下に余白ができるのを防ぐので、ここはチェックを外すことをお勧めします。

次にヘッダーメニューを登録していきましょう！

「ホームページ設定」から戻ると「メニュー」という項目があるのでクリックします。

添付画像の画面に遷移すると「メニューの新規作成」をクリックし画像のように「メニュー名」に「global nav」のような分かりやすい名前を記述して、「グローバルナビゲーション（PC用）」と「ドロワーナビゲーション（モバイル用）」にチェックを入れて「次」をクリックしましょう！

すると、画像のようにメニューを追加できるタブが出てくるので、追加したいメニュータブをクリックしましょう！

ここでは「事業案内」「お知らせ」「会社案内」「施工例」「採用情報」「ブログ」を追加しました。

「リフォーム」「リノベーション」「建築施工」は「施工例」と親子関係を持たせています。

次にメニュー名を変更しましょう！

現在は「施工例」というメニューがありますが、クリックすると「ナビゲーションラベル」という項目があり、変更したいメニュー名を記述すると反映されます。

ここでは「実績紹介」に変更しておきましょう！

次はコンテンツ幅の設定をしていきます。

「メニュー」から戻ると「デザイン」→「基本デザイン設定」に移動し「コンテンツの最大幅」を「1180px」に変更しておきましょう。

フォント設定もできるので、好きなフォントに変えてもいいですね！（ここではNoto Serif JPを使用します。）

コンテンツ幅を設定したら、「ヘッダーレイアウト」を変更します。

「デザイン」→「ヘッダー」へ移動し「ヘッダーレイアウト」を「2行」に変更します。

そして「PC 用ヘッダー位置」も「ノーマル」に変更しておきましょう。

最後に「ロゴの追加」と「コピーライト変更」を行います。

「サイト基本情報」に移動し、お渡しした画像データにあるロゴを追加しましょう。

ロゴの追加ができたらロゴを追加した下部に「コピーライト」という項目があるので画像のように変更しましょう。

※使用版の方はコピーライトは変更できません。

お疲れ様です！ここまでで初期設定が完了しました。

さて、次回からのセクションからが本番ですね！

SnowMonkeyカスタマイズ講座【中級編】：SnowMonkeyでリッチなスライダーを再現する方法【Swiper.js】

すみません！

スライダーの実装なのですが、ありがたいことに多くの方にスライダーの導入方法について興味を持って頂いたので、別記事にて公開させていただいています。

スライダーの実装方法はこちらの記事【SnowMonkeyカスタマイズ講座【中級編】：SnowMonkeyでリッチなスライダーを再現する方法】からご参照頂ければと思います。

SnowMonkeyカスタマイズ講座【中級編】：グローバルナビに装飾を加えよう

ここではグローバルナビゲーションのテキストの間に区切り線を追加します。

こちらのセクションでは、主に上記の作業を行います。

それでは詳しくご説明しますね！

「_global-nav.scss」を作成しコードを記述しよう

それでは新しいファイル「_global-nav.scss」を作成してヘッダーの記述を小分けにして管理がしやすいようにしましょう。

「styles」→「modules」の直下に先ほどの「_global-nav.scss」を新規作成します。

画像のような構成になればOKです。

新しく作成した「_global-nav.scss」を読み込ませるために「style.scss」に下記コードを記述しましょう。

@import 'modules/global-nav';

「_global-nav.scss」が読み込まれるようになりましたので、早速コードを記述しましょう。

作成した「_global-nav.scss」に下記のコードを記述してください。

/* ヘッダー */
/* グローバルメニュー位置調整 */
.l-header {
  .c-navbar {
    &__item {
      position: relative;

      &::after {
        /* メニューアイテムの左に区切り線 */
        content: '';
        position: absolute;
        top: 50%;
        display: block;
        height: 30px;
        margin-top: -15px;
        border-right: 1px solid #ccc;
      }

      &:last-of-type::before {
        /* 最後のメニューアイテムの右に区切り線 */
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        display: block;
        height: 30px;
        margin-top: -15px;
        border-right: 1px solid #ccc;
      }
    }
  }
}

こちらのコードを記述してうまく読み込みができていれば、下記画像のようになっているはずです。

これでヘッダーの装飾が終わりました。

SnowMonkeyカスタマイズ講座【中級編】：トップのパネルを作ろう

1. パネルブロックを挿入する
2. パネルを1カラムに変更する
3. 自由入力に変更する
4. パネルにクラスを付与する

今回のセクションでは、上記の作業となります。

では、実装していきましょう！

ブロックエディターでパネルを挿入しよう

それではダッシュボードから「固定ページ」の「フロントページ（Billion）」をクリックしましょう。

こちらの画面に行ったらプラスボタンを押して「パネル」を選択しましょう。

初期設定の状態ではパネルのカラムが2カラムになっています。

これを1カラムに変更したいので画像で説明している場所をクリックします。

クリックすると右側にある設定項目にカラムの変更ができる画面が出てきます。

「行あたりのカラム数」という項目があるので、これを2カラムから1カラムに変更しましょう。

カラムの変更ができたら大きな1カラムのパネルになります。

1カラムになったら、表示されているパネルの左上の「赤い四角のボタン」をクリックします。

画像の「自由入力」をクリックします。

自由入力が選択できたら、自由項目の中にテキストを入力できるようになります。

自由項目の中でもプラスボタンが選択できるので、ここでは「見出し」を選択して好きなテキストを入力していきましょう。

ここでは、「私たちは未来を創造します。」と記述します。

記述ができたら、その下の段落にテキストを記述しましょう。

このままでは、テキストが左寄せになっています。

これを「中央寄せ」にしたいので「見出し」を選択した状態で、画像の３本線ボタンをクリックして中央寄せにします。

同じ要領で下にあるテキストも中央寄せにしましょう。

ここまでできたら、「パネル（自由入力）」に「class」をつけましょう。

パネルを選択して、設定項目に「高度な設定」という項目があるので、クリックすると「class」を付与できるようになっています。

この時に画面左下に現在選択されているブロックが表示されているので注意して確認をしましょう。

「文章」→「パネル」→「項目（自由入力）」となっていればOKです。

選択できていることを確認できたら「top-panel」というクラスをつけましょう。

ここまででブロックエディタの操作が終わりました。

更新ボタンを押して、保存できたらエディタでスタイルを当てていきましょう。

パネルのデザインを整える

1. SCSSでパネルをスライダーに重ねる
2. 見出しの背景やボーダーを消す
3. 余白の調整をする
4. 影の調整をする

ここでは上記のような変更を加えていきます。

それでは、エディタを開き「_base.scss」を選択し、下記コードを記述します。

/* TOPのパネル */
.top-panel {
  /* 位置調整 */
  position: relative;
  transform: translateY(-100px);
  z-index: 1;

  .smb-panels__item {
    /* パネルの影 */
    box-shadow: 0 -6px 8px rgba(0, 0, 0, 0.1) !important;

    &:hover {
      /* 標準であるホバーエフェクトの除去 */
      box-shadow: none;
    }

    &__body {
      /* 標準のh2装飾の除去 */
      padding: 80px;

      h2 {
        background-color: transparent;
        border-left: none;
      }
    }
  }
}

記述ができたら確認してみましょう。

画像のようになっていればOKです。

ただ、今回はタブレット以下でスライダーの重なりを無くしたり、余白の調節がしたいので「_1023down.scss」に下記コードを記述します。

/* タブレット以下でパネルの画像の重なりをなくす */
.top-panel {
  margin-top: 30px;
  transform: none;

  /* パネルの影を調節 */
  .smb-panels__item {
    box-shadow: 10px 0 -10px rgba(0, 0, 0, 0.2);

    &__body {
      padding: 30px;
    }
  }
}

これでタブレットやスマホでのスタイルが整いました！

SnowMonkeyカスタマイズ講座【中級編】：事業紹介（3枚のカード）を作ろう！
ついでにボタンも

画像のカード部分を作成していきます！

1. パネルで基本デザインを作る
2. ついでにボタンも作る
3. テキストと画像の反転
4. パネル周りの余白を除去
5. ホバーエフェクトをつける

主に行う作業は上記となります。

詳しく説明していきますね。

ブロックを使用してパネルを3枚並べよう

それではブロックエディターに戻って先程のパネルと同様にパネルを選択します。

パネルを挿入したら、3カラムに変更して画像とテキストを挿入します。

画像のようになっていればOKです。

次にクラスを付与とタブレット時のカラムを「2カラム」に変更しましょう。

「文章」→「パネル」を選択した状態で設定項目の「行あたりのカラム数（ミディアムウィンドウ）」でタブレット時のカラムを変更できるので変更しましょう。また、「高度な設定」で「panels」というクラスを付与します。

ここまで出来たらボタンも追加しましょう。

ブロック追加ボタンから「ボタン（赤い方）」を追加しましょう。

追加ができたら、中央寄せを行い「会社案内」と記述しておきましょう

次にボタンの丸みを無くしたいので設定項目の「角丸半径」を「０」にします。

最後にボタンにもクラスを付与します。

「文章」→「ボタン」→「ボタン」を選択した状態で「btn」というクラスを記述してください。

ここまででブロックエディターでの作業が終了です。

SCSSでデザインや動きをつける

エディタの「_base.scss」に下記コードを記述してください。

/* 3枚並んだパネルの装飾 */
.panels {
  .c-row__col {
    /* パネルの余白除去 */
    padding: 0;
  }

  .smb-panels__item {
    display: flex;
    flex-direction: column;
    box-shadow: none;
    padding: 0;

    &__figure {
      /* テキストと画像の位置変更 */
      position: relative;
      order: 2;
      overflow: hidden;

      &::before {
        /* ホバー時の装飾 */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        content: '新しい暮らしを始めたい方\Aのためのリフォーム\A\A老後のために暮らしやすい\Aバリアフリーの住宅\A\A未来を創造し作り上げられる\A Billion自慢の住宅設計';
        white-space: pre;
        background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
        color: #fff;
        font-size: 13px;
        transition: all 0.6s 70ms;
        opacity: 0;
        z-index: 1;
      }

      img {
        /* 変化の時間 */
        transition: all 0.6s;
      }
    }

    &__body {
      /* パネルのボーダー部分 */
      box-shadow: 0 0 0 1px #ccc;
      /* パネルのテキストと画像の順序を変更*/
      order: 1;
    }

    &__title {
      font-size: 24px;
    }

    &__content {
      font-size: 14px;
    }

    /* パネルホバー時の装飾 */
    &:hover {
      .smb-panels__item__figure {
        &::before {
          /* ホバー時に文字浮き出して見えるようにscaleで拡大 */
          transform: scale(1.4);
          opacity: 1;
        }

        img {
          /* ホバー時に画像を拡大 */
          transform: scale(1.2);
        }
      }
    }
  }
}

コードの記述ができたら一度ブラウザをリフレッシュして確認してみましょう。

このような画面になっていればOKです。

ですが、まだスマホ時のスタイルが崩れているので整えます。

エディタの「_639down.scss」に下記コードを記述してください。

/* 3つ並んだパネル */
.panels {
  /* パネルの余白追加 */
  .c-row__col {
    padding: 0 14px;
  }
}

「_base.scss」でパネル周りの余白を除去していたので、スマホのみに適応します。

最後にボタンのスタイルを整えます。

「styles」→「modules」の直下に「_button.scss」を作成し、これを読み込むために「style.scss」に下記コードを記述します。

@import 'modules/button';

そして「_button.scss」に下記コードを記述します。

.btn {
  .smb-btn {
    align-items: center;
    width: 240px;
    height: 60px;
    margin-top: 60px;
  }
}

スマホ時のスタイルも整えたいので、「_639down.scss」に下記コードを記述します。

/* ボタン */
.btn {
  .smb-btn {
    width: 180px;
    height: 45px;
    margin-top: 30px;
  }
}

コードが記述できたらスライダーのボタンと同様のスタイルになりました！

これでこのセクションが終わりです。

少しずつデザインが整ってきましたね！

SnowMonkeyカスタマイズ講座【中級編】：NEWSセクションを作成しよう

1. 7件の投稿を行う
2. セクションブロックを挿入する
3. 最近の投稿を挿入する

それでは詳しく説明していきます！

最近の投稿に表示させる投稿をしよう

ダッシュボードに戻って「投稿」をクリックし、各投稿をしていきます。

僕の場合は画像のような投稿をしました。

投稿をするときに「カテゴリー」の選択や「アイキャッチ画像」の追加を忘れないようにしましょう！

投稿ができたら、固定ページからフロントページに移動しブロックを挿入していきます。

ブロックの追加ボタンから「セクション」を選択し「全幅」にしておきましょう。

全幅にできたらセクションブロックの中にあるブロックの追加ボタンから「最近の投稿」ブロックを選択しましょう。

「最近の投稿」を選択すると「リッチメディア」というレイアウトになっているので「テキスト」に変更し「表示する投稿数」も「7」に変更しておきましょう。

そして、前回同様にボタンブロックの追加もしておきます。

この時にクラス「btn」をつけ忘れないようにしましょう。

ボタンにはすでに「btn」クラスにスタイルを当てているので、クラスを追加した時点でボタンのスタイルが整っているはずです。

画像のようになっていればOKです。

最近の投稿のスタイルを整える

1. カテゴリーを出力させる
2. カテゴリーごとに色分けする
3. 投稿のタイトルを整列させる

それではSCSSでスタイルを整えていきます。

このサイトでは、セクションのタイトルの下線やフォントサイズを変更していますので、下記コードを「_base.scss」に記述してください。

.smb-section__title {
  /* セクションタイトルサイズ変更 */
  font-size: 2.5em;

  &::after {
    /* 標準であるセクションタイトルの下線除去 */
    display: none;
  }
}

記述ができたら、いつものように「styles」→「modules」の直下に「_text-posts.scss」というファイルを作成し「style.scss」に下記コードを記述し、ファイルを読み込みましょう。

@import 'modules/text-posts';

最後に新しく作成したファイル「_text-posts.scss」に下記コードを記述します。

/* 最近の投稿（テキスト）のスタイル */
.c-entries--text {
  position: relative;
  background-color: #f9f9f9;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;

  .c-entries__item {
    a {
      padding-right: 2em;
      padding-left: 2em;
    }

    .c-entry-summary {
      position: relative;
      display: flex;

      &__title {
        transition: color 0.3s;
      }

      &__figure {
        display: block;
        position: absolute;
        top: -2px;
        left: 6em; /* 日付の長さに合わせて調整 */
        background-color: transparent;

        img,
        &::before {
          display: none;
        }

        span {
          background-color: #fff;
          border-radius: 15px;
        }
      }

      /* 作成したカテゴリーIDによって末尾の番号が変わります */
      &__term--category-2 {
        color: #333;
        border: 1px solid #333;
      }

      /* 作成したカテゴリーIDによって末尾の番号が変わります */
      &__term--category-6 {
        color: #cd162c;
        border: 1px solid #cd162c;
      }

      /* 作成したカテゴリーIDによって末尾の番号が変わります */
      &__term--category-5 {
        color: #104f96;
        border: 1px solid #104f96;
      }

      /* 作成したカテゴリーIDによって末尾の番号が変わります */
      &__term--category-7 {
        color: #e97501;
        border: 1px solid #e97501;
      }

      &__term {
        position: relative;
        left: 0;
        white-space: nowrap;
      }

      &__meta {
        margin-right: 10rem; /* カテゴリー名の長さにあわせて調整 */
      }
    }

    &:hover {
      .c-entry-summary__title {
        color: #cd162c;
      }
    }
  }
}

この時に「 /* 作成したカテゴリーIDによって末尾の番号が変わります */」と記述のある下のコードに「&__term–category-□」とありますが、各自の環境により、カテゴリーIDが異なっているので番号を変更しましょう。

因みに、上記で記述したコードは、サポートフォーラムにあった内容を参考にして作成しました。

困った時はサポートフォーラムを覗いてみると、答えに辿り着けることはとても多いです。

何か分からないことがあれば、一度覗いてみることをおすすめします。

このようになっていればNEWSセクションの完成です！

SnowMonkeyカスタマイズ講座【中級編】：サービスセクションを作成しよう

サービスセクションなのですが、少し前のセクションでほぼ同じデザインを作成しています！

『事業紹介（3枚のカード）を作ろう』と画像のデザインを参考にしつつ、作成してみましょう。

クラスなどがすでに当たっているので、ブロックを組むだけで完成してしまいます！

少し面倒だなと思う方は、ブロックごとコピーすれば簡単に作成でます。

ポイントとしては、背景色を追加していることと、タイトルの出力や余白の調節として「セクション」ブロックで囲っているので参考にしつつ作成してみてください。

SnowMonkeyカスタマイズ講座【中級編】：バナーセクションを作成しよう

1. セクションブロックの中にバナーブロックを挿入する
2. 標準のホバーエフェクトを削除
3. 画像にfilterをかける
4. ホバー時にテキストを右に動かす

それでは作成していきましょう。

バナーブロックを挿入し基本デザインを作成しよう

ブロックエディター画面で先程作成した「サービスセクション」の下に「セクション」ブロックを挿入します。

ここでは、タイトルが必要ないので設定項目の「ブロック設定」→「タイトルタグ」を「none」にします。

「none」にすることでタイトルが削除できます。

次に、セクションブロックの中に「項目」ブロックを挿入し、左上に表示されている赤いボタンをクリックすると「バナー」を選択できます。

同様にバナーを2枚並べて画像をアップロードします。

テキストを記述し左寄せにします。

最後にクラスを付与しましょう。

「文章」→「セクション」→「項目」が選択されている状態で、高度な設定から「banners」を追加しましょう。

ここまで出来たらあとはスタイルを当てていきます。

バナーのスタイルを整えよう

SCSSでバナーのスタイルを整えましょう。

「_base.scss」に下記コードを記述してください。

/* バナーの装飾 */
.banners {
  .smb-items__banner {
    &__figure {
      /* デフォルトのfilterの除去 */
      filter: none !important;

      img {
        /* 常時filterをかける */
        filter: brightness(0.8);
      }
    }

    &__body {
      /* 変化にかける時間 */
      transition: transform 0.3s;
    }

    &__title {
      font-size: 24px;
      font-weight: 600;
    }

    &__lede {
      font-size: 16px;
    }

    &:hover {
      .smb-items__banner__body {
        /* ホバー時に文字を右に移動 */
        transform: translateX(15px);
      }
    }
  }
}

上記のコードが記述できたら完成です。

最後に確認をしてデザイン通りになっていればOKです。

SnowMonkeyカスタマイズ講座【中級編】：Worksセクションを作成しよう

1. セクションの中に「任意のタクソノミーの投稿（施工例）」を挿入
2. 投稿のテキストを80文字取得する
3. ホバー時に画像を拡大する
4. テキストの左にボーダーを追加

任意のタクソノミーの投稿を挿入して基本のデザイン作ろう

バナーセクションの下にセクションブロックを追加しましょう。

追加したセクションブロックの中に「任意のタクソノミーの投稿」を追加します。

追加をしただけだと、投稿が何も出てこないのですが、設定項目に「カテゴリー」を選択できるので、ここでは「施工例」を選択しましょう。

カテゴリーを選択すると投稿が表示されます。

この時に「モバイル端末時のカラム数」を「1カラム」に変更しておきましょう。

この時にボタンも追加しておきましょう。

「btn」クラスを付けるのを忘れないようにしておきましょう！

このような形になっていればOKです。

取得する文字数を80文字にしよう

画像部分のテキストの取得文字数を変更します。

デフォルトであれば、テキストの文字数が「50文字」となっています。

「my-snow-monkey.php」（子テーマの方はfunctions.php）に下記コードを記述してください。

/* 投稿の文字数トリム */
function custom_excerpt_length($length) {
  return 80;
}
add_filter('excerpt_length', 'custom_excerpt_length', 999);

取得される文字数が「80文字」に変更されました。

リッチメディアのスタイルを整える

「styles」→「modules」の直下に「_rich-posts.scss」を作成し、「style.scss」に下記コードを記述しましょう。

@import 'modules/rich-posts';

それでは、先ほど新しく作成した「_rich-posts.scss」に下記コードを記述してください。

/* 任意のタクソノミーの投稿（リッチメディア）のスタイル */
.c-entries--rich-media {
  .c-entries__item {
    &:nth-of-type(-n + 3) {
      /* メディアの下に余白を増やす */
      margin-bottom: 80px;
    }

    .c-entry-summary {
      &__figure {
        /* border-leftを適応するためmarginを消す */
        margin-bottom: 0;

        img {
          /* 変化の時間 標準の装飾を除去 */
          transition: transform 0.6s;
          filter: none !important;
        }
      }

      /* 作成したカテゴリーIDによって末尾の番号が変わります */
      &__term--category-6 {
        background-color: rgba(#cd162c, 0.8);
      }

      /* 作成したカテゴリーIDによって末尾の番号が変わります */
      &__term--category-5 {
        background-color: rgba(#104f96, 0.8);
      }

      /* 作成したカテゴリーIDによって末尾の番号が変わります */
      &__term--category-7 {
        background-color: rgba(#e97501, 0.8);
      }

      &__body {
        /* 見栄えを良くするため左側に余白をつける テキスト左側の縦線 */
        padding-left: 30px;
        border-left: 5px solid #cd162c;
      }

      &__header {
        /* c-entry-summary__figureでmarginを除去したので余白を埋め合わせ */
        padding: 20px 0;
      }

      &__content {
        /* テキスト部分の装飾 */
        color: #333;
        font-size: 14px;
        line-height: 2.25em;
      }

      &__meta {
        /* 投稿者・日時の除去 */
        display: none;
      }
    }

    & a:hover {
      .c-entry-summary__figure {
        img {
          /* ホバー時の画像拡大 */
          transform: scale(1.2);
        }
      }
    }
  }
}

リッチメディアのスタイルが整いましたが、スマホ時には崩れてしまうので「_639down.scss」に下記コードを記述しましょう。

/* 任意のタクソノミーの投稿（リッチメディア）のスタイル（スマホ） */
.c-entries--rich-media {
  .c-entries__item {
    &:nth-of-type(-n + 5) {
      /* 6番目を除く */
      margin-bottom: 30px;
    }
  }

  .c-entry-summary__content {
    /* スマホでテキスト除去 */
    display: none;
  }
}

これで完全にスタイルが整いましたので、確認してみましょう。

かなり完成に近づいてきましたね！

次のバナーセクションですが、こちらもすでにほぼ同じものを作成しているので各自前回のセクションを参考にしながら作成してみてください！

SnowMonkeyカスタマイズ講座【中級編】：フックを使用してフッター上部にHTMLを出力しよう

1. フック「snow_monkey_prepend_footer」を使用しよう
2. フックに挿入するHTMLを記述しよう
3. デザインを整えよう

ここのデザインですが、実はフックを使用してHTMLを挿入しています。

それでは詳しく説明していきます。

「my-snow-monkey.php」にフックを使用してHTMLの記述をしよう

それではエディタ画面の「my-snow-monkey.php（functions.php）」に下記コードを記述しましょう。

add_action(
  'snow_monkey_prepend_footer',
  function () {
  ?>
ここにHTMLを記述します。
<?php
  }
);

このフックの利用によりフッターの最初にHTMLを挿入できるようになります。

厳密にはウィジェットのソーシャルアイコンが表示される場所の下になります。

アクションフックやフィルターフックについて詳しく調べたい方は、開発者の北島さんの「github」で公開されているので、確認しておきましょう。

GitHub

Action hooks Premium WordPress Theme. This theme is published here for users and developers. Please buy themes when using themes on live site. we can not provide support to ...

フックの記述ができたら、HTMLを記述します。

先程記述したフックの「ここにHTMLを記述します。」に下記のコードを記述します。

<div class="info">
  <div class="info-inner c-container">
    <div class="info__logo">
      <a href="#">
        <img src="<!-- ここにファイルパスを記述 -->" alt="">
      </a>
    </div>
    <p class="info__text">私たちは未来を創造します。</p>
    <ul class="social-nav">
      <li class="social-nav__icon"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
      <li class="social-nav__icon"><a href="#"><i class="fab fa-twitter"></i></a></li>
      <li class="social-nav__icon"><a href="#"><i class="fab fa-instagram"></i></a></li>
      <li class="social-nav__icon"><a href="#"><i class="fas fa-rss"></i></a></li>
    </ul>
  </div>
</div>

そして「ここにファイルパスを記述」とある部分は各自パスが違うので、ダッシュボード→メディアへ移動してパスを確認して記述しておきましょう。

記述ができたら、ブラウザをリフレッシュして表示を確認してみましょう。

まだ、SCSSによるスタイルの調整ができていないので画像のような形で表示されていればOKです。

記述したHTMLのスタイルを整えよう

それでは、スタイルを整えていきますのでエディタでいつものように「styles」→「modules」の直下に「_footer.scss」のファイルを作成しましょう。

そして「_footer.scss」を読み込む記述を「style.scss」にしていきますので、下記コードを記述していきましょう。

@import 'modules/footer';

このようになっていればOKです。

そして「_footer.scss」に下記コードを記述してください。

/* フッターの上 */
.info {
  /* フッター上部にボーダー */
  border-top: 1px solid #ccc;

  &-inner {
    display: flex;
    align-items: center;
    max-width: 1180px;
    height: 140px;
  }

  &__logo {
    margin-right: 30px;

    img {
      width: 150px;
    }
  }

  &__text {
    flex: 1;
    font-size: 14px;
  }

  .social-nav {
    margin-left: 0;
    &__icon {
      display: inline;
      margin: 0 10px;
      list-style: none;

      a {
        color: #212121;
      }
    }
  }
}

スタイルが読み込まれているか確認してみましょう。

良い感じですね！

ですが、まだスマホ時にはスタイルが崩れてしまっています。

ロゴ、テキスト、アイコンが3つ縦に並ぶようにしていきます。

下記コードを「_639down.scss」に記述してください。

/* フッター */
.info {
  &-inner {
    display: block;
    text-align: center;
    height: auto;
    padding: 40px;
  }

  &__logo {
    margin-right: 0;
    margin-bottom: 25px;

    img {
      width: 120px;
    }
  }

  &__text {
    margin-bottom: 25px;
  }
}

デザインが整いましたね！

いよいよ次のセクションで完成します！

もう少しなので、最後まで頑張ってくださいね！

SnowMonkeyカスタマイズ講座【中級編】：フッターを作成しよう

1. ウィジェットでフッターを作成する
2. 標準であるタイトル両サイドのボーダー除去
3. 区切り線の追加
4. タブレット以下では2カラムにする

それではみていきましょう！

フッターにウィジェットを挿入しよう

ウィジェットの挿入にはカスタマイズが画面から行うのでダッシュボードの「外観」→「カスタマイズ」をクリックしましょう。

カスタマイズ画面へ行くと「ウィジェット」→「フッター」→「ウィジェットを追加」をクリックしましょう。

そして「固定ページ」「カテゴリー」「固定ページ」「カテゴリー」と追加していきましょう。

割と適当なものを入れているので、好きなウィジェットを追加してもいいかもしれませんね！

これでフッターの追加ができました！

あとはデザインを整えていきます。

フッターのデザインを整えよう

今回は標準であるタイトル左右のボーダーの除去や、区切りの線を追加していきます。

それでは、エディタを開き「styles」→「modules」の直下に「_footer-widget.scss」というファイルを作成しましょう。

現在のファイル構成はこのような形です。

それでは、先程作成した「_footer-widget.scss」に下記コードを記述してください。

/* フッターウィジェットエリア */
.l-footer-widget-area {
  /* ウィジェットエリアの上部にボーダーを入れるため、paddingを除去 */
  border-top: 1px solid #ccc;
  padding: 0;

  .c-row {
    /* 左右にボーダー */
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }

  &__item {
    /* paddingを除去し、詰まったのでこちらで追加 */
    padding: 40px;

    &:nth-of-type(n + 2) {
      /* 最初の一つ目を除くブロックにボーダー */
      border-left: 1px solid #ccc;
    }

    .c-widget__title {
      /* タイトルを左寄せ */
      justify-content: flex-start;
      color: #cd162c;
      &::before,
      &::after {
        /* 左右のボーダーの除去 */
        display: none;
      }
    }
  }
}

PC画面のスタイルが完成しましたね！

ただ、タブレット以下では2カラムで表示させたいので「_1023down.scss」に下記記述をしてスタイルを整えましょう。

/* フッターウィジェットエリア */
.l-footer-widget-area {
  &__item {
    flex: 0 1 50%;
    border: none !important;
  }
}

記述ができたら、タブレット以下の表示で2カラムで表示されるようになりました。

ブラウザをリフレッシュして確認してみましょう！

フッターの実装が完了しました。

これで全てデザインの実装が完了しました！

お疲れ様です！

最後に

冒頭でもご説明しましたが、SnowMonkeyは「少しのテクニック」と「少しのアイデア」でいくらでも化けてしまうテーマです。

この記事で最後まで学習された方は、ある程度の知識が身についたと思うので、今回学んだことを活かしつつ自分なりのホームページを作ってみるのもいいかもしれませんね。

また、今回制作したホームページは【実績公開OK】としています！
実績として公開するには、ドメインとサーバーを契約する必要があります。

実績公開する際や、案件でお客様との確認で仮サーバーとして自分のサーバーにアップすることもよくあるので、あらかじめサーバーの扱い方にも慣れておいた方がいいかもしれませんね。

価格も月額1000円前後なので、今後WEB制作を続ける上で必須になるので投資して損はないですね。

おすすめのサーバー・ドメインは、下記に記載しておきましたのでよければ参考にしてみてください！

最後までご覧いただきありがとうございました！

もし何か分からないことがあれば、Twitterやお問い合わせからご連絡いただければわかる範囲でお答えします！