『【2021年版】imDRESSionsのカバンの中身』で僕のカバンの中身を紹介したのですが、その時に普段とは違うレイアウトで更新してみました。
雑誌風のレイアウトを意識して記事をつくってのですが、これがなかなか好評だったので僕のブログで使っているワードプレステーマ「yStandard」での作り方を紹介していこうと思います。
この記事で紹介する方法は、ワードプレステーマ「yStandard」と純正プラグイン「yStandard Blocks」そして、WordPressを最新バージョンにしていることを前提としていますので、全てアップデートしてから実装してください。
CONTENTS
雑誌風レイアウトを制作する。
まず、僕がいう「雑誌風レイアウト」とは、どんな要素をもつのか。ざっくりというと。
- 背景が切り抜かれた画像
- テキストの塊
- プロダクト名とブランド名
- 印象的な”ずらし”
この要素があるものが「雑誌風」といえるのかなと、僕は思っています。あくまで僕の感覚ですが、これが揃うとそれっぽく見えるはず。
『背景を切り抜いた画像』も雑誌風に見える大事な要素。どんな方法でも構わないのでPNG形式の画像を用意しておきましょう。iPadユーザーの方は「iPadで画像を切り抜く方法。『Affinity Designer for iPad』」の記事で制作方法を紹介しているのでこちらを覗いてみてください。
『yStandard blocks』で雑誌風レイアウトを実装していく。
雑誌風レイアウトを作るときに重要なのが、自由な要素配置。今回はこれを実現するためにyStandardの追加プラグイン『yStandard Blocks』を使用します。無料プラグインなのでyStandardユーザーはとりあえずインストールしておきましょう。
それでは順に制作方法を紹介していきます。
▽今回目指す完成形。
α7Ⅱ
外で写真を撮ることが少なくなりましたが、ミラーレスカメラの『α7Ⅱ』は持ち歩くようにしています。TAMRONのズームレンズはブツ撮りにもスナップにもちょうどいい焦点距離でつけっぱなしになっているレンズ。ただ、カメラをそのままカバンの中に入れているので、そろそろカメラストラップでも買おうかと考えているところ。
セクションブロック
今回のレイアウトの核になるのが『セクションブロック』。見出し、本文テキスト、プロダクト画像、この3つの要素を自由な配置にしていきたいので、それぞれを『セクションブロック』で作っていきます。
このブロックで囲まれた要素は、余白や背景の設定、アニメーションの追加もできるようになります。余白やアニメーション設定は実際に要素を入れてから設定していきますので、ここでは単純にセクションブロックを縦に3つ並べるだけでいいです。
そうして、セクションブロックを3つ並べたのがこちら。セクションが分かりやすいように、1番目と最後のセクションの背景を白にしています。
▽『セクションブロック』の設定後。
1番上のセクション。
ここに『見出し』が入ります。
2番目のセクション。
ここは『本文テキスト』が入ります。
最後のセクションブロック。
ここには『プロダクト画像』が入ります。
カスタム見出し
見出しデザインも普段とは違うスタイルにする必要があります。その時に使うのが『カスタム見出し』サイズや色、サブ見出しなどをつけることができるようになります。
先ほど作った1番先頭の『セクションブロック』に雑誌風のタイトル、プロダクト名とブランド名の2つをひとまとめにしていきます。
今回は、プロダクト名の下にブランド名を少し小さく、薄くしてみました。
▽『カスタム見出し』の設定後。
α7Ⅱ
2番目のセクション。
ここは『本文テキスト』が入ります。
最後のセクションブロック。
ここには『プロダクト画像』が入ります。
カスタムカラム
次に、本文テキストの塊感を出すため『カスタムカラム』でテキストを左側に寄せていきます。
カスタムカラムは、スマホとPC、タブレットで列の設定ができます。今回は全てのスクリーンサイズで「2列表示」になるよう設定します。
ここで左側のカラムにだけテキストを入力することで、右側に大きな余白を作ることができました。
▽『カスタムカラム』の設定後。
α7Ⅱ
外で写真を撮ることが少なくなりましたが、ミラーレスカメラの『α7Ⅱ』は持ち歩くようにしています。TAMRONのズームレンズはブツ撮りにもスナップにもちょうどいい焦点距離でつけっぱなしになっているレンズ。ただ、カメラをそのままカバンの中に入れているので、そろそろカメラストラップでも買おうかと考えているところ。
最後のセクションブロック。
ここには『プロダクト画像』が入ります。
背景透過した画像を配置していく。
「iPadで画像を切り抜く方法。『Affinity Designer for iPad』」で制作した画像を使うのですが、あらかじめ画像を左右どちらに寄せて配置するのかを決めて、画像を書き出ししておきます。
今回の場合は、テキストを左寄せ、画像を右寄せに配置したいので、画像制作の段階で右側にオブジェクトを寄せて（左側に余白をとって）書き出しています。
制作した画像を、1番最後の『セクションブロック』に挿入。このセクションブロックに「下からフェードイン」のアニメーションをつけてみました。
これで要素配置は終了。ここから仕上げに入ります。
▽画像を配置後。
α7Ⅱ
外で写真を撮ることが少なくなりましたが、ミラーレスカメラの『α7Ⅱ』は持ち歩くようにしています。TAMRONのズームレンズはブツ撮りにもスナップにもちょうどいい焦点距離でつけっぱなしになっているレンズ。ただ、カメラをそのままカバンの中に入れているので、そろそろカメラストラップでも買おうかと考えているところ。
要素をずらして『雑誌風』に。
最後の仕上げとして、今まで作ってきた3つの要素をずらしていきます。ここはテキスト量や画像の形によってずらし方が変わってくるので、プレビューしながら調整。
そのためまずは全てのセクションの余白を0にしておきます。ついでに背景色もなしに戻しました。
▽全てのセクションの余白を0にして、背景色をデフォルトに変更。
α7Ⅱ
外で写真を撮ることが少なくなりましたが、ミラーレスカメラの『α7Ⅱ』は持ち歩くようにしています。TAMRONのズームレンズはブツ撮りにもスナップにもちょうどいい焦点距離でつけっぱなしになっているレンズ。ただ、カメラをそのままカバンの中に入れているので、そろそろカメラストラップでも買おうかと考えているところ。
ここから少しずつ、ずらしていきます。
見出しを印象的にするため、背景を白に変更し、ずらしていきます。
その背景の「サイズ・配置を指定する」をオンにして、幅を40％、高さを80％、そして「配置」で20px下にずらしました。
そして右寄せした画像の上余白をマイナス125pxに指定することで、上のセクションに食い込む形に。
これで完成。お疲れ様でした。
▽完成したのがこちら。
α7Ⅱ
外で写真を撮ることが少なくなりましたが、ミラーレスカメラの『α7Ⅱ』は持ち歩くようにしています。TAMRONのズームレンズはブツ撮りにもスナップにもちょうどいい焦点距離でつけっぱなしになっているレンズ。ただ、カメラをそのままカバンの中に入れているので、そろそろカメラストラップでも買おうかと考えているところ。
いつもの記事とは違うレイアウトに。
自由度の高い配置ができるWordPressプラグイン『yStandard Blocks』。他にも色々な配置方法があると思うので、調整しながらレイアウト変更していくと面白いのではないかなと思います。
いつもとは少し違う、オリジナル記事の制作に挑戦してみてください。
『【2021年版】imDRESSionsのカバンの中身』の記事では、そのアイテムごとにレイアウトを変えてあるので参考にしてみてください。
