後楽エンブログ

「後」の人生を「楽」にするために「エン」ジニアにキャリア変更した私が初心者エンジニアを応援するブログです。

【模擬コーディング実践】頻出デザインをおさえよう!カテゴリーラベル、記事の小見出しなど~第3章~

f:id:rikei-venture:20190524130735j:plain

ブログ風デザインの続きを始めちゃいます!

【ブログ風サイトの制作手順】

① レイアウトの基本構造を作る

② ボックスにコンテンツを入れる

③ レイアウトの調整

④ レスポンシブ調整

⑤ パーツの追加&調整

④までは前回までの記事でお伝えしました。

ここまでのおさらいをしたい方は記事一覧ページをご用意いたしましたので、こちらのページから飛びましょう。

ついに最後⑤パーツの追加に入ります。

本格的なサイトに近づけましょう。

パーツの追加・修正

①Webフォントでサイト名を表示

②記事の投稿日にアイコンをつけて表示

③記事の分類をラベルの形で表示

④記事に小見出しを追加

⑤リストマーク付きのメニューに変更

⑥サムネ画像付きメニューに変更

⑦サムネ画像にテキストを重ねたメニュー

⑧フラットなSNSボタンを追加

⑨関連記事メニューを追加

本記事では①~④までやります。

⑤~⑧は次回の記事でお送りいたします。

Webフォントによるサイト名の表示

少し特殊なフォントに変更してみましょう。目標は下の画像です。

f:id:rikei-venture:20190524142525p:plain

Google FontsのWebフォントを利用します。

Google Fontsにアクセスして使いたいフォントを選びます。

f:id:rikei-venture:20190524140200p:plain

 

今回は「Paytone One」を使用するので、検索に入力。

使用したいものが決まっていない時は、標準で一覧で出てくるものから選べばよいです。

「+」をクリックしたら、次のようなページが現れます。

f:id:rikei-venture:20190524141234p:plain


①<link>の設定をコピーして、<head>~</head>の中に追加します。

②Font-familyの設定をコピーして、サイト名のh1のCSSに追加します。

③太さ、色の調整

これらを施したのがコチラになります。

f:id:rikei-venture:20190524142406p:plain

 これで完了です。

記事の投稿日をアイコン付きで表示

下の画像を目標に作っていきましょう。

f:id:rikei-venture:20190601170714p:plain

投稿した日を追加する

①記事の投稿日を追加

②日付の情報として<time>でマークアップ

③全体は<div>でマークアップし、クラス名を「kijiinfo」と指定。

④レイアウトの調整

f:id:rikei-venture:20190524150014p:plain

記事の投稿日の下に20pxの余白をとりたいので、「margin-bottom:20px」は問題ないと思います。

「margin-top:-10px;」についてもう少し考察してみましょう。

f:id:rikei-venture:20190524151529p:plain

記事のタイトルと投稿日の間にはすでにh1のmargin-bottomの指定で20px余白が入っています。

このとき<h1>のmargin-bottomの変更でもいいのですが、あえて別の方法をとってみました。

投稿日の表示位置を上に10pxずらして調整しています。

アイコンフォントを使用する

f:id:rikei-venture:20190524160938p:plain

「Font Awesome」というアイコンフォントを使用するために次のように<link>の設定を追加します。

See the Pen ZNxOgj by Jwataru (@jwataru) on CodePen.

こちらを<head>要素に追加しましょう。

Font Awesomeにアクセスし、「clock」と検索しましょう。

使用したいアイコンを決定したら「Start using this icon」をクリックしますと次のような画像が表示されます。

f:id:rikei-venture:20190524160200p:plain

こちらをコピーし、表示したい場所に追加します。

適当にCSSをあてます。

f:id:rikei-venture:20190524161340p:plain

カテゴリーをラベルの形で表示

下画像のようにカテゴリーラベルを追加していこうと思います。

f:id:rikei-venture:20190524165652p:plain

カテゴリーを追加する

記事を分類したカテゴリーの情報を追加して、同じ分類の記事に効率よくアクセスできるようにします。

今回は「カテゴリー1」「カテゴリー2」の二つのカテゴリーを追加してみます。

パーツで準備してある「メニュー(横並び)」を使用しましょう。

クラス名は「kijicat」とします。

 

作業をまとめます。

①メニューパーツ(横並び)を追加

②クラス名を「kijicat」と変更

③リストの中身を「カテゴリー1」「カテゴリー2」とする

④リンクをラベルの形にする

4-1 背景色

4-2 色

4-3 ラベルの間隔

4-4 ラベルの角を丸める

4-5 ラベルの大きさ調整

4-6 ホバー時の色の調整

4-7 タイトルとの間隔の調整

①~③までがコチラとなります。

f:id:rikei-venture:20190524165245p:plain

 ④はコチラとなります。

f:id:rikei-venture:20190524170945p:plain

記事に小見出しを追加 

下画像のように小見出しに簡単なデザインを加えてみましょう。

f:id:rikei-venture:20190524173504p:plain

施す作業は以下になります。

①小見出しを追加し、h2でマーキングする

②小見出しの上の余白サイズを大きくする

③小見出しの左側にバーをつける

④小見出しを細字にする

f:id:rikei-venture:20190524173826p:plain

まとめ

パーツの追加・修正

①Webフォントでサイト名を表示

②記事の投稿日にアイコンをつけて表示

③記事の分類をラベルの形で表示

記事に小見出しを追加

⑤リストマーク付きのメニューに変更

⑥サムネ画像付きメニューに変更

⑦サムネ画像にテキストを重ねたメニュー

⑧フラットなSNSボタンを追加

⑨関連記事メニューを追加

④まできました。

次回はいよいよ最終章です。

⑤、⑥、⑦では3種類のサイドメニューの表示をやります。

どのさいと全てサイトにも使われているような超王道かつこれさえおさえておけば大丈夫という3つのメニューの表示のさせ方ですので、しっかりおさえていきましょう。

 ⑧では記事の最後につけるSNSのシェアボタンのつけ方です。

コチラも頻出です。これをつけるとなぜか一気にサイトっぽくなり見栄えが良くなります(笑)

⑨関連記事メニューはサイドメニューではなく、一般的に記事の下に配置されます。

コチラの表示のさせ方もおさえていきましょう。