Learning site for website creation

10-2:トップページを作成

  • 投稿日:2019年07月17日
  • 更新日:2019年07月19日

トップページで編集する箇所

今回管理画面で編集する箇所は「プロフィール」になります。

方法1:「カスタム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 -->

「更新」をクリックします。

表示結果

方法2:「見出し」「段落」「メディアと文章」でプロフィールを作成

「見出し」ブロックに「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クラス」を設定した後「更新」します。

表示結果

完成

現状

かなり近い感じに仕上がっています。

あとは値を少しずつ変えて微調整します。