はじめに

今回は、このブログの制作について紹介します。

制作について：デザイン

今回の私のブログデザインのテーマは「中華風のブログ」でした。このテーマにしたきっかけは、好きな色である寒色を封印して自分らしさのあるデザインを制作したかったからです。

配色で当初はメインカラーを朱色にしていましたが、色の主張が強かったのと中華感がありませんでした。なので中華の伝統色であるチューピャオ（硃膘）をメインカラーにしました。オレンジ寄りの赤色であり、少しチープなかわいさを出すことができたと思います。ベースカラーは白ではなく、少し灰色味のある色を使うことで中華丼のような色にしました。

タイトルや所々にある装飾は中国の装飾を調べ、Illustratorで作成しました。配置自体はよくあるシンプルなブログなので、なるべく華やかになるように心がけました。

制作について：htmlとcss

htmlとcssでは、なるべく誰が見ても分かるようなid名やclss名をつけることを意識しました。ハイフンを活用して、後から手直ししてもわかるようにしました。

記事の一覧はflexを使わずgridで配置をしました。要素が不確定に増えないレイアウトなのでgridに挑戦してみました。授業では苦手意識がありましたが、ブログで活用できたのでよかったです。

今回は初めてPHPも使ったので楽しかったです。

制作について：アニメーションとその他の工夫

このブログではcssとjsでアニメーションを作りました。特に頑張った点は、中華丼のメニューボタンや、特定の位置までスクロールをすると上部に戻るボタンが下から出てくるなど、作ってみたかったアニメーションを作ることができました。

このサイトで工夫したところは、検索フォームです。検索機能を追加して試してみた時、複数の言葉を入力した際に空白が全角だと検索結果を取得することができませんでした。調べてみたところ、全角スペースを半角スペースに変換することで対処ができるみたいなのでfunctions.phpで取り入れました。機能の面でも工夫ができたと思います。

// 全角スペース繋ぎで複数キーワードを検索するための処理
function convert_fullwidth_space_to_halfwidth($query)
{
    if (is_search() && !is_admin()) {
        $s = $query->get('s');
        $s = str_replace('　', ' ', $s); // 全角スペースを半角スペースに変換
        $query->set('s', $s);
    }
    return $query;
}

add_filter('pre_get_posts', 'convert_fullwidth_space_to_halfwidth');

さいごに

このブログでは、勉強の内容をたくさん投稿していきたいと思っています。ローディング画面でcookieを使いたい、エラー画面でゲームを作りたいなど、まだまだこのブログではやってみたいことがあります。なので、どんどんバージョンアップして充実したブログにしていきたいです。