こんにちは！

今回は前回の続きのこのRUNABLOGの制作したときのことについて書いていきます。
前回でデザインについては書いたので、マークアップについてこちらでは記載していきます。

夏休み開始

このブログ課題は夏休みの間に、HTML、CSS、JSなどを用いてマークアップして完成させます。

自分はマークアップをするのが大好きなのでデザインから解放されようやく本当にやりたいことができます。
自分のデザインデータは特に難しいところはなく、複雑にコンテンツが入り混じるところがあるわけではないので、作成していてそこまで悩むことはありませんでした。

ただブログを作成するのに悩んだのが、スライドショーのところですね。
自分がやりたかったのは真ん中のコンテンツは大きくなり、サイドに小さく少し見えるデザインにしたかったため、そこを調べてきちんと理解して作成しました。

これを作って、頭の中だけで理解して何も見ずに書くことができないところが、エンジニアを目指すものとしてまだまだ甘いところですね。

もっと知識をつけないとです！

マークアップは好きなので夢中でやっていたところ夏休みの最初の方にできてしまったので、夏休みの期間は心置きなく遊ぶことができました。

デザインデータより変わった点

あんまり当初決めたデザインから変えるのってそんなに良くないと思いますが、マークアップしているうちに使いづらそうやこれ無いとなぁと思ったところを変えました。

1枚目はメインビジュアルになるところでマークアップして実際にブラウザで見てみてる左側が何もなく寂しかったので、「What will you do today?」という今日は何をする？という内容のことを入れ当サイトを訪れた人に興味を引く様にしました。

2枚目は新しいブログのサムネイルがスライドするところなのですが、デザインデータ上は真ん中以外のサイドのサムネイルは色が白黒になる予定でしたが、実際にやってみると真ん中は目立ちますが、やはりサイドの勢いがなくなり、タッチされづらくなるため廃止しました。

3枚目は1ページ4つの記事しか出ないため、それの推移するためのボタンなのですがデザインデータよりもボタンを見やすくして使いやすくしました。

一番変わったのは、コメントの部分です。

デザインデータのコメントでもよかったのですが、プラグインで使いやすいと話題のコメントの方にして、このサイトに合う様に色なども細かくいじったのですが意外とその作業が大変でした。
このプラグインは日本語の表記がないので、何が書いてあるかがわからなかったのが特にです…。

デザインデータから大きく変えたのはこんな感じです！

初めて書く「PHP」

web制作自体は高校の頃からやっていましたが、それでもここにくるまでPHPというものは触ったことがありません。

ただやっぱり新しい言語を学ぶのって大体大変なイメージがあるので、ちょっと不安はありました。
でもエンジニア希望としてPHPは重要なコンテンツですので、将来のことを考えるとしっかり覚えようとも思いました。

PHPの授業自体は初めて見る文法があって、最初のうちは覚えることばかりです。
開始タグで<?php ?>みたいな感じで開くPHPブロックはHTMLと比べると書くのめんどくさいと少し感じてしまいましたが、途中くらいからこれが当たり前くらいになると何にも思うことなく、それ以上に今PHP書けてるって思うと楽しさの方が高まってきました。

ただやっぱり覚えることは多く、書くことも多いので大変には変わりなかったです…。

ただこれをやっていて思ったのが設定だけすると後の管理がとても簡単だということに気がつきました。特に自分が感動したのがアイキャッチとカテゴリーのところです。

まずアイキャッチについて、自分はきちんとアイキャッチは作って載せるのですが、きちんと設定するともし載せ忘れた時でもこの画像が出てくれますからね…。すごいです。

そして次にカテゴリーのところなんですが、自分はカテゴリーのところに記事のタイトルを記載しそこからでも記事に飛べる様にしたかったのですが、きちんと記事のタイトルが出るし、その上挙げた順番通りに並んでくれるのがとてもすごいと思いました。

今回PHPに記載したコードはこちらになります。

<div class="category-item">
　<h4>School</h4>
  <ul>
    <?php
     $args = array(
     'category_name' => 'school',
     );
     $the_query = new WP_Query($args);

     if ( $the_query->have_posts() ):
      while ( $the_query->have_posts() ):
      $the_query->the_post();
      ?>

      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

      <?php
      endwhile;
      endif;
      wp_reset_postdata();
      ?>
   </ul>
</div>

6行目でカテゴリーを指定して、それのものタイトルを表示するというものです。

見る感じそこまで難しくないですよね。

これは自分がいいなと思ったポイントです！

まとめ

新しい言語を学ぶのって結構大変なのですが、やはり別の言語に触れておくと理解が早いものですね。
それと今回PHPを学んでみて、まだ初歩の段階かもしれませんがPHPというものがそこまで難しくないのだなと思いました。

最後まで読んでいただきありがとうございました！