アクツ 寒いですね。ほんと寒いですよね。寒いと足の指にしもやけができるタイプのアクツです。こんにちは。
毎度、ドリカムの歌かよ！？ばりに愛を叫んでいるSnow Monkeyで実際にゴリゴリカスタマイズしたサイトについて、「どこをどうしたらこうなったよ！」解説付きで本日はお届けしたいと思います。よろしくお願いします。
冒頭から余談
ブロックエディタってMarkdown記法したら自動でブロックタイプ変わるんですね。
なんとなくで##って打ったら勝手に見出しになって死ぬほどびっくりした年末でした。
もっと早く気づきたかった！！
はじめに
約一ヶ月半ぐらい前にどどーんと公開した「ラ・カーザ・デル・ヴェント社公式 コールドプレス製法 有機オリーブオイル」さんのサイトを実例に、どんなパーツを使用してどんな風にカスタマイズしたかを解説します。
お礼とお礼をしたいので勝手にCM [非公式]
この度、コールドプレス製法 有機オリーブオイルさんには「サイトのことSnow Monkey実例として紹介したいので、いいですか？？」と突然お願いしたにも関わらず、快く承諾いただきましてありがとうございます。
コールドプレス製法 有機オリーブオイルさんは、本場イタリアでも数々の賞を受賞しているオリーブオイルのことを紹介しているサイトでして、オイルの紹介はもとより、コラムまでふむふむとなりながら、すごく楽しく読めるのが魅力のサイトです。
まさか漫画で攻めてくるなんて！！（コラムはお客様自身で更新していただいてて、私も一読者ですごく楽しませてもらってます）
あ、肝心のオリーブオイルですが、私もサイトを作りながら知ったのですが、コールドプレス（低温で抽出する）というものが、ジュースだけじゃなくてオリーブオイルにもあるんです。
（いわれてみたら、確かに使用してて温度にも酸素にもあんだけ弱いオイルなので、しぼるときだって丁寧にあれこれ気を配る必要ありますよね）
お肉にかけても、パスタに使ってもよし！ですが、個人的にはフレッシュ感を楽しむためにパンにつける！チーズにかけるあたりも良いなって思ってます。
この冬、速水もこみちが使うべきオイルNo.1（アクツの独断ランキング）に輝くオイルなので、ぜひぜひ気になった方はサイトご覧ください。気にならなくてもぜひ見てみてください。ちょっと気になってくるはずっ！
パーツごとに実例紹介していきます！
なお、パーツというのはもれなくSnow Monkeyのウィジェットのことです。
あと、２階層目はそもそもブログとしてものすごく見やすく良い作りになっているため、ほとんどカスタマイズしていません。
なので、本日はトップページのみの紹介になりますことご了承ください。
全体
背景色つけたほうがオリーブオイル感や植物感がでるなと思い、CSSで背景色を設定しています。
文字色も最初はちょっとグレーに変えていたのですが、結果としてうすくて読みづらいという意見ももらって黒に戻しました。
ヘッダ
ファーストビューをおおーっと見せようと思い、従来のヘッダー要素はCSSで消しています。
代わりに「ショーケース」ウィジェットでヘッダを作りました。
- 背景の画像と半透明の黒、リード文についてはそのまま
- タイトル部分はタグが使えないので、小さめに出したい「ラ・カーザ・デル・ヴェント社公式」はCSSの:beforeで出力
- メインタイトルはフォントをどどーんと大きくしたかったのでCSSで大きくなるように変更
- オリーブオイルのボトルについてはスマホで見るとちょっと高さが出過ぎるので、スマホのみCSSで高さ調整
- 下の黄色の線はアクセントカラーにほしかったのでCSSで出している
製品の写真をどういれたらいいのだろうにけっこう悩みました。手元に透過画像がなかったため（photoshopであくせくしながら切抜いたあと透過画像発見して撃沈するという事件があるのですが）、最初は普通の縦長の写真を入れたりとかしてやってみたのですが、なんかパッとせず・・・
結果、写真を切り抜いてみたら一気にそれっぽくなって採用となりました。（以降私の中で製品はくり抜け！が鉄則になる）
最新の投稿パーツ
こちらはほとんどカスタマイズしていません。（Author部分をCSSで消しているぐらいかな？あと下の線）
何もしなくてもこの見た目！！さすがSnow Monkey。
内容部分その１ – ショーケースウィジェット
こちらも「ショーケース」ウィジェットで作ってます。背景色なしで利用していてウィジェット全体の色と全体の背景色が一緒な分余白が多すぎて見えてしまったため、余白だけCSSで調整しています。
このように、２カラムレイアウトのための「ショーケース」ウィジェットがこのサイトにも多数使われてます。
なぜレイアウトのためにショーケースウィジェットを使用するのか？
もちろんカスタムHTMLで自分でマークアップしていく方法もあります。そのほうがHTMLタグやCSSでのスタイルの上書きが少ない分スマートかとは思います。
しかし、私がウィジェットを使う一番の理由は、マークアップに時間がとられるのつらいのもありますが、マークアップでやってしまうとお客様自身で画像や文章差し替えるのが困難になってしまうためです。
私がサイトを作り続けてきて、見た目こだわるとお客様自身で更新が困難になってしまうことにいっつも「あああ！」と歯がゆい気持ちを抱えてきていたので、こういったウィジェットやブロックエディタで解決できることはすごくありがたいし嬉しい！
内容部分その２ – PRボックスウィジェット
こちらは「PRボックス」ウィジェットで作っています。
全体のタイトル・概要、各項目のタイトル・概要・リンクURL・リンクテキストを空欄のままにしておくとこんな画像だけのボックスができあがります。
同じような感じの見た目は、デフォルトのギャラリーウィジェットでもできるのですが、タブレットやスマホになったときに何カラムで表示するかがギャラリーウィジェットだとコントロールできないので、PRボックスを採用しています。
内容その３ – ショーケースウィジェット祭り！
こちら全部ショーケースウィジェットで作ってます。画像を左に表示するか右に表示するかは、ウィジェットの設定でできるので楽。その分といってはなんですが、余白に緩急をつけたりをCSSでコントロールしています。
内容その３ – ショーケースとPRボックスのコラボ
一番上は定番のショーケースウィジェット。目玉は２段目のところ。
こちらショーケースウィジェットの下の余白をゼロにして、下のPRボックスとくっつけてます。
２カラムで説明を入れていくとどうしても同じリズムなってしまってつまらなくなってしまうので、２つの要素をくっつけてちょっと違う感じにしています。
内容その4 – ここでまさかのカスタムHTML
ここまでくると、ああこれってこれで作ってるんだろ？っていう予測がついてるかと思います。
「コールドプレスオリーブオイルができるまで」と「取扱商品」はPRボックスでできてます！（ほぼカスタムなし！）
そして、最後のFAQコーナーだけ、カスタムHTMLウィジェット！（ウィジェットでFAQ的なのがなかったのでここだけ手動でつくりました。
今だったらSnow Monkey Blocksがある！
FAQについてですが、このサイトを制作した当時はSnow Monkey Blocksがでてなかった（いや・・・触ってなかっただけの話ですでにでてたかも）ので、手動で作ってしまってますが、今はSnow Monkey BlocksでFAQのブロックがあるので、そちらでつくるのがいいかなって思います（レイアウトもきれいだし）
まとめ
- ほとんどパーツは「ショーケース」か「PRボックス」ウィジェット
- 余白の調整がけっこう必要
- CSS頑張ればこれだけオリジナリティあふれるサイトになるよ！
みんなもぜひショーケースとPRボックス活用してみてください♪