実践Webデザインスキル - 第10章 Lesson3

第8回:新着記事一覧を作成する方法-5

   

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

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

テキストボックスを使って記事本文の抜粋を表示させます。



この動画で学べること

・記事の説明部分の作成方法
・カテゴリタグの複製と配置



一部だけスタイルの違うテキストを作成しよう

今回は、記事の説明部分を作成しましょう。
前回作った投稿日時とタグの部分から、20pxの余白が必要なので、ガイドを引いておきます。



次にテキストツールに切り替えて、ガイドに沿ってテキストボックスを作成します。
文字を入力し、一度確定してからスタイルの変更をしていきます。
「…続きを読む」のところだけ、他とは違うデザインにしたいので、
再度文字の編集モードに入り、「…続きを読む」の部分をドラッグで選択してください。
色をロゴと同じオレンジにし、下線を引いて完成です。




カテゴリタグを複製して配置しよう

次に、サムネイル部分のカテゴリタグを作成しましょう。
特集記事で作ったカテゴリタグと同じデザインなので、自動選択で背景とカテゴリ名のレイヤーを探し出し、Altを押しながらドラッグで複製します。
移動ツールでサムネイルの右上に配置させ、完成です。



一つ目の記事ができあがったので、一度レイヤーを整理してフォルダにまとめておきましょう。