たまろぐ

CSSを書く前にHTMLを確認する。 / WordPressのテーマを自作する。

2019年9月27日 22:36 カテゴリー: Wordpress

CSSをスムーズに書くために、まずはHTMLの構成を確認していきます。かといって、全てが必要なわけではありません。主にbox系(div等。各セクションを決めている物を使う場合もあります。)やリスト等、CSSでのデザインに必要な物をまとめましょう。

前回の「CSSを作成するための基礎知識を身に付ける」と併せて読むとわかりやすいと思います。

それでは見てみましょう!

コード

まずは全ての必要なHTMLを抜粋します。

index.html

<html lang="ja">
<head>
 head内
</head>
<body>
 <div class="header">
  <p>
   ブログ名
  </p>
 </div>


 <div class="page">

  <!--メインカラム-->
  <div class="main">

   <!--新着記事-->
   <h1>新着記事</h1>
				
    <!--一記事のセクション-->
    <section>

     <!--記事へのリンク-->
     <a href="<?php the_permalink(); ?>">

      <!--記事へのリンクのボックス-->
      <div class="entry">

       <!--サムネイル-->
       <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>

       <!--タイトルやデータ等のボックス-->
       <div class="entry-text">

        <!--記事のデータ-->
        <div class="entry-meta">
         <?php echo get_the_date(); ?>
        </div>
								
        <!--記事タイトル-->
               <h3>
                記事タイトル
               </h3>

        <div class="entry-category">
         カテゴリ:<?php the_category( ' / ' ); ?>
        </div>

       </div>
      </div>
     </a>
    </section>

    <!--ページネーション-->
    <nav class="pagination">
        <ul class='page-numbers'>
         <li>
          <span aria-current='page' class='page-numbers current'>
           1
          </span>
         </li>
         <li>
          <a class='page-numbers' href='https://tamalog.info/white/?paged=2'>
           2
          </a>
         </li>
         <li>
          <a class="next page-numbers" href="https://tamalog.info/white/?paged=2">
           →
          </a>
         </li>
        </ul>
       </nav>
   </div>

   <!--サイドバー-->
   <div class="sidebar">

    <!--カテゴリーの見出し-->
    <h2>
     カテゴリー
    </h2>
		
    <!--ナビゲーションメニューの意味-->
    <nav>
     <!--リストの始まり-->
     <ul class="category-list">

      <!--カテゴリー一覧をリストで表示する-->
           <li>
            カテゴリ1
           </li>
           <li>
            カテゴリ2
           </li>
           <li>
            カテゴリ3
           </li>

     </ul>
    </nav>
   </div>
		
	</div>

  <!--フッター-->
  <div class="footer">
   <footer>
    (c) <a href="<?php echo site_url(); ?>"><?php echo get_bloginfo('name'); ?> <?php echo site_url(); ?></a>
   </footer>
  </div>
 </body>
</html>

以上です。まずはの使い方から学んだ方がいいですね。

これはわかりやすくするため、色々省いたり、逆に足したりしています。このままコピペしても動かないのでしないでくださいね。

まとめ

今回の記事はCSSを作る為のメモです。

これを見ながらやれば迷うことはないですね!

次の記事

WordPressのテーマを作るまとめ