10-2：トップページを作成
トップページで編集する箇所
今回管理画面で編集する箇所は「プロフィール」になります。
方法１：「カスタムHTML」でプロフィールを作成
本文
フォーマットカテゴリ「カスタムHTML」ブロックを選択します。
コーディング済みのコードを「カスタムHTML」ブロックにペーストします。
<h2 class="title">Profile</h2>
<div class="subtitle">人物</div>
<div class="flex">
<div class="flex-item photo">
<img src="img/human.png" alt="YourName">
</div><!-- .flex-item -->
<div class="flex-item text">
<div class="name">YourName</div>
<div class="item-text">
<p>
ウェブに特化したデザイナーです。
SEOを踏まえた正しい文法でコーディングします。お客様にはショップオーナー様、企業のホームページ担当者様、また制作会社様など様々です。
</p>
<p>
ウェブサイトに関することはお気軽にご相談ください。
</p>
</div><!-- .item-text -->
</div><!-- .flex-item -->
</div><!-- .flex -->
プロフィールに使用する画像をアップロード
別タブで管理画面左メニュー「メディア」>「新規追加」を表示します。
下記画面から使用する画像をアップロードします。
画像パスをコピー
管理画面左メニュー「メディア」>「ライブラリ」
アップロードした画像を選択します。
「添付ファイルの詳細」画面の「リンクをコピー」から画像パスをコピーします。
固定ページ編集画面
元のタブの「固定ページ編集画面」に戻り画像パスをメディアで取得したURLに変更します。
<h2 class="title">Profile</h2>
<div class="subtitle">人物</div>
<div class="flex">
<div class="flex-item photo">
<img src="http://localhost/lesson3/wp-content/uploads/human.png" alt="YourName">
</div><!-- .flex-item -->
<div class="flex-item text">
<div class="name">YourName</div>
<div class="item-text">
<p>
ウェブに特化したデザイナー兼プラグラマです。
SEOを踏まえた正しい文法でコーディングします。お客様にはショップオーナー様、企業のホームページ担当者様、また制作会社様など様々です。
</p>
<p>
ウェブサイトに関することはお気軽にご相談ください。
</p>
</div><!-- .item-text -->
</div><!-- .flex-item -->
</div><!-- .flex -->
「更新」をクリックします。
表示結果
方法２：「見出し」「段落」「メディアと文章」でプロフィールを作成
「見出し」ブロックに「Profile」を入力します。
「段落」ブロックに「人物」を入力します。
「更新」をクリックします。
表示結果
ブラウザで現状を確認します。
完成
現状
HTMLを確認
Chrome検証ツールで文章構造を確認します。
<h2>Profile</h2> <p>人物</p>
追加CSSクラスでデザイン
コーディング済みのCSSがあるので、そのデザインを「文章」部分に反映させます。
.profile .title {
font-size: 60px;
font-weight: 400;
padding: 1em 0 0;
}
.profile .subtitle {
font-size: 24px;
padding: 0 0 2em;
}
「Profile」の「見出し」ブロックを選択します。
右側「高度な設定」パネルの「追加CSSクラス」に「title」を指定します。
「人物」の「段落」ブロックを選択します。
右側「高度な設定」パネルの「追加CSSクラス」に「subtitle」を指定します。
追加CSSクラスを設定したら「更新」をクリックします。
表示結果
ブラウザで現状を確認します。
余白が広く空いているのでマージンの調整をして再度確認します。
.profile .title {
font-size: 60px;
font-weight: 400;
margin: 0;
padding: 1em 0 0;
}
.profile .subtitle {
font-size: 24px;
padding: 0 0 2em;
margin: 0;
}
完成
現状
コンテンツ部分作成
フォーマットカテゴリ「メディアと文章」ブロックを選択します。
使用する「画像」と「文章」を入力します。
固定ページを「更新」してブラウザで表示します。
表示結果
完成
現状
まだ完成に近づいていません。
追加CSSクラスでデザイン
「画像」と「文章」を入力した後、「メディアと文章」ブロックを選択します。
右側「高度な設定」パネルの「追加CSSクラス」に「media」と入力します。
「更新」をクリックしてページを更新します。
HTMLを確認
Chrome検証ツールで追加CSS「media」がブロックに付与されていることを確認します。
検証ツールでHTMLの文章構造を確認しながらCSSを記述します。
<div class="wp-block-media-text alignwide media">
<figure class="wp-block-media-text__media">
<img src="画像パス" alt="" class="wp-image-番号">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">YourName</p>
<p>
ウェブに特化したデザイナー兼プラグラマです。
SEOを踏まえた正しい文法でコーディングします。
お客様にはショップオーナー様、企業のホームページ担当者様、
また制作会社様など様々です。
</p>
<p>ウェブサイトに関することはお気軽にご相談ください。</p>
</div>
</div>
CSSを追記
セレクタのポイント数を高くして既存のデザインを上書きします。
.profile .media {
grid-template-columns: 300px auto; /* 幅設定 */
align-items: start; /* 縦方向上揃え */
}
.profile .media .wp-block-media-text__content {
padding-left: 20px; /* 左余白調整 */
}
CSSセレクタについて
セレクタにはパーツのグループ名「profile」を使用しポイント数を稼ぐとともに、CSSによる変更がグループ外に及ばないようにします。
<div id="profile" class="profile"> <div class="inner"> <?php /***** メインループ開始 *****/ ?> <?php if (have_posts()) :?> <?php while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; ?> <?php endif; ?> <?php /***** メインループ終了 *****/ ?> </div><!-- .inner --> </div><!-- .profile -->
表示結果
CSS変更後、ブラウザを更新して表示内容を確認します。
完成
現状
「文章」の上部に余白があったり文字サイズが違います。
追加CSSクラスでデザイン
コーディング済みのCSSがあるので、そのデザインを「文章」部分に反映させます。
.profile .name {
font-size: 24px;
font-weight: bold;
margin: 0;
}
.profile .item-text {
font-size: 18px;
}
「YourName」の段落ブロックを選択します。
右側「高度な設定」パネルの「追加CSSクラス」に「name」を指定します。
文章の段落ブロックを選択します。
右側「高度な設定」パネルの「追加CSSクラス」に「item-text」を指定します。
CSSは既に記述済みなので「追加CSSクラス」を設定した後「更新」します。
表示結果
完成
現状
かなり近い感じに仕上がっています。
あとは値を少しずつ変えて微調整します。
