実践Webデザインスキル - 第11章 Lesson2

第2回:記事ページのサイドバーの作成方法-2

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

複製したサイドバーの人気記事ランキングの横幅を、サイドバーの横幅と同じになるよう、変形ツール等を利用して調整していきます。



この動画で学べること

・複製した記事一覧のサイズを変更する方法



記事を複製し、余白をとって配置させよう

今回は、人気記事ランキングの記事一覧の調整をしていきましょう。
移動ツールに切り替えて、自動選択ツールで記事1のフォルダを探し出し、見出しから10pxの余白をとって配置します。
記事と記事の間の点線はもう必要ないので、自動選択ツールで点線のレイヤーを探し出し、削除していきましょう。
そして、記事の間に20pxの余白をとって次の記事を配置します。
この作業を5記事分してください。




背景とタイトルの大きさをガイドに合うように調整しよう

ランキング部分の背景が小さすぎるので、大きくしていきましょう。
ものさしツールで内側に10pxの余白をとれるように測り、ガイドを引きます。
背景の長方形のバウンディングボックスを表示し、ガイドを引いたところまで引き伸ばしていきます。


最後に、記事タイトル部分が背景からはみ出ていますので、背景から内側10pxの余白をとれるようにガイドを引き、テキストボックスのサイズを調整しましょう。
これで、サイドバーの人気記事ランキング部分の完成です。