ゲーム開発
Unity
UnrealEngine
C++
Blender
ゲーム数学
ゲームAI
グラフィックス
サウンド
アニメーション
GBDK
制作日記
IT関連
ツール開発
フロントエンド関連
サーバサイド関連
WordPress関連
ソフトウェア設計
おすすめ技術書
音楽
DTM
楽器・機材
ピアノ
ラーメン日記
四コマ漫画
その他
おすすめアイテム
おもしろコラム
  • ゲーム開発
    • Unity
    • UnrealEngine
    • C++
    • Blender
    • ゲーム数学
    • ゲームAI
    • グラフィックス
    • サウンド
    • アニメーション
    • GBDK
    • 制作日記
  • IT関連
    • ツール開発
    • フロントエンド関連
    • サーバサイド関連
    • WordPress関連
    • ソフトウェア設計
    • おすすめ技術書
  • 音楽
    • DTM
    • 楽器・機材
    • ピアノ
  • ラーメン日記
    • 四コマ漫画
      • その他
        • おすすめアイテム
        • おもしろコラム
      1. ホーム
      2. 20220508_01

      【ブログ改造計画】都会のエレキベアを一新!カテゴリ整理からデザイン修正までを振り返る【WordPress】

      都会のエレキベアWordPress関連JavaScriptフロントエンド関連
      2022-05-08

      マイケル
      マイケル
      みなさんこんにちは!
      マイケルです!
      エレキベア
      エレキベア
      こんにちクマ〜〜〜
      マイケル
      マイケル
      みなさんゴールデンウィークはいかがだったでしょうか?
      自分はこの通り・・・
      ↑修正前
      ↑修正後
      マイケル
      マイケル
      都会のエレキベアのデザインを一新していました!!
      エレキベア
      エレキベア
      おおーーー!
      ダサいダサい言っていたクマがついに手を出したクマね
      スタイリッシュになった気がするクマ
      マイケル
      マイケル
      遊びに出掛けたりもしていたけど、半分くらいはこれに注いだ気がするよ・・・。
      ざっくりとした修正は終わったから、今日はどんな修正をしたか振り返っていくよ!
      エレキベア
      エレキベア
      それはおつかれさまだったクマね・・・
      楽しみクマ〜〜〜〜

      カテゴリ整理と振り直し

      マイケル
      マイケル
      デザインを修正する前に、まずはカテゴリの整理から行いました!
      下記が修正前のカテゴリと記事数になるのですが、どこが問題か分かるでしょうか?
      エレキベア
      エレキベア
      なんか偏りがある気がするクマね〜〜
      マイケル
      マイケル
      その通り!
      「ゲーム・アプリ開発」「ラーメン日記」の子カテゴリが肥大化してしまっているし、
      親カテゴリもざっくりしすぎていて、見たい記事まで辿り着けない状態になっているんだ。
      エレキベア
      エレキベア
      確かに最初は何書くかすら曖昧な状態から始めたからクマね〜〜
      マイケル
      マイケル
      そのため、「PC創作」カテゴリを大きく「ゲーム開発」「IT関連」に分けて
      その中で更に言語やジャンル単位で辿り着けるように分割してみました!
      ↑カテゴリを検索しやすいように分割
      エレキベア
      エレキベア
      多すぎる気もするクマが、これなら見たいジャンルの記事に辿り着けそうクマね
      マイケル
      マイケル
      ゲーム開発以外にもいろいろやっていたから分けるのが大変でした・・・。
      そしてこれを200近くの記事全てに振り分けました・・・。
      エレキベア
      エレキベア
      おつかれさまクマ・・・。

      デザインの修正

      マイケル
      マイケル
      カテゴリ整理が完了したところで、デザイン修正に入っていきます!

      全体のデザイン方針を決める

      マイケル
      マイケル
      まずはざっくりとしたデザイン方針を決めました。
      ↑修正前
      ↑修正後のイメージ
      マイケル
      マイケル
      このような感じで、
      ・色数を少なくはっきりとさせる
      ・なるべくシンプルにする
      ・記事アイテムをグリッド表示、ウィジェットを個々で表示する

      といった方針で進めることにしました。
      エレキベア
      エレキベア
      こうやって見比べると以前のはかなり濁っている感じがするクマね・・・。
      マイケル
      マイケル
      メインカラーは黄色、濃いグレー、明るいグレー、白の4色!
      デザインセンスにはあまり自信が無いので黄色以外はモノクロ系を使用していきます。
      
      /** 都会のエレキベアカラー */
        --eleki-color-yellow: #fff500
        --eleki-color-dark-gray: #222222
        --eleki-color-light-gray: #3d3b39
        --eleki-color-white: #f2f2f2
      
      エレキベア
      エレキベア
      堅実な判断クマ・・・。

      記事アイテム一覧のデザイン修正

      マイケル
      マイケル
      方針が決まったところでデザインを修正していきます。
      全体の見た目変更が優先のため、記事アイテム一覧のグリッド表示から進めていきました。
      マイケル
      マイケル
      開発環境構築については以前紹介した下記記事の内容で構築しています。
      エレキベア
      エレキベア
      TypeScriptとStylus環境クマね
      マイケル
      マイケル
      修正手順としては元々設定されていたクラスをいじる形で
      ・一覧の背景色を削除してflex指定
      ・記事アイテムの見た目を修正

      といった手順で進めて、最終的には下記のようになりました!
      ↑記事アイテムをグリッド表示に修正
      エレキベア
      エレキベア
      なんかすっきりしたクマね
      マイケル
      マイケル
      また表示時、ホバー時にはフェードや動きも少し付けています。
      ↑動きも少し付ける
      エレキベア
      エレキベア
      これだけでもだいぶ古臭い感じは取れたクマね

      サイドバーのデザイン修正

      マイケル
      マイケル
      同じ要領でサイドバーのデザインも修正しました。
      記事アイテムと同じ様に、
      ・背景色を削除
      ・ウィジェット全体の見た目を修正

      といった形で進めています。
      ↑サイドバー、ウィジェットの修正
      エレキベア
      エレキベア
      案外さらっといけるものクマね

      ヘッダアニメーション作成

      マイケル
      マイケル
      ざっくりとした見た目を修正したところで、ヘッダのアニメーションを作成していきました。
      完成形は下記のようになります!
      ↑ヘッダアニメーションの作成
      エレキベア
      エレキベア
      カッコいいクマ〜〜〜〜
      マイケル
      マイケル
      こちらは個人的にGWで一番楽しみにしていたところで、
      p5jsを使用して動的にアニメーションさせています!
      エレキベア
      エレキベア
      p5js懐かしいクマ〜〜〜
      なんでまたこれを使ったクマ?
      マイケル
      マイケル
      ビルの図形は丸や四角といった簡単な図形で描画できるし、
      ランダムで高さや窓の形が変わったら面白いだろうなと思ったんだ!
      エレキベア
      エレキベア
      ええ、これ毎回ランダムに生成していたクマね・・・
      負荷がかからないかが心配クマ・・・
      マイケル
      マイケル
      俺もそこは心配だったけど、重い端末でも動いていたから大丈夫なはず、、!
      また問題が出たら、フレームレート測定して低かったらGIFアニメーションにしたりといった対応をしてみようと思うよ!
      エレキベア
      エレキベア
      (そこまでランダム生成したかったクマか・・・)
      マイケル
      マイケル
      p5jsでのアニメーションをwordpressに導入するのは面白いと思うから、
      詳細はまた別の記事で紹介しようかと思います!
      エレキベア
      エレキベア
      そっちも楽しみクマね〜〜〜

      画面遷移の実装

      マイケル
      マイケル
      そして次は画面遷移アニメーションの実装!
      これはよくある感じの横から流れるアニメーションですね。
      ↑画面遷移の実装
      エレキベア
      エレキベア
      画面遷移があるとやっぱりカッコいいクマ〜〜
      マイケル
      マイケル
      アニメーションは基本的にCSSで実装していて、
      JavaScript側で「eleki-page-in」「eleki-page-out」といったクラスを付与することで発火させています。
          // 読み込み完了時(画像やリソースも含む)
          window.addEventListener("load", function(e) {
              // ローディングをフェードアウトする
              $(".eleki-splash-loader").delay(100).fadeOut('fast');
              // 一定病後に処理を行う
              window.setTimeout(() => {
                  // bodyにappearクラスを付与
                  $('body').addClass('eleki-page-in');
                  // ヘッダーを表示する
                  window.setTimeout(() => {
                      Header.showHeader();
                  }, 500);
              }, 200);
          });
      
          // ページアウト検知処理
          $(function() {
              // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
              $('a:not([href^="#"]):not([target])').on('click', function (e) {
                  // ナビゲートをキャンセル
                  e.preventDefault();
                  // 遷移先のURLを取得
                  let url: any = $(this).attr('href');
                  if (url !== '' && url !== undefined) {
                      // bodyにページアウト用のクラスを付与
                      $('body').addClass('eleki-page-out');
                      // 一定時間後に取得したURLに遷移
                      setTimeout(function(){
                          window.location = url;
                      }, 700);
                  }
                  return false;
              });
          });
      ↑画面遷移のクラス付与
      マイケル
      マイケル
      また、1つ問題としてiOS Safariでは戻るボタン押下時にキャッシュされて遷移がうまく動作しないといった事象が起きたため、
      下記のように強制リロードすることで対処しています。

      参考:
      iphone iOS safariの「戻る」ボタンの問題

          // iOSの戻るボタンでキャッシュが効かないよう再読込
          // https://stray-light.info/wp/ios-safari-backbutton/#toc2
          window.onpageshow = function(event) {
              if (event.persisted) {
                  window.location.reload();
              }
          };
      ↑iOSの強制リロード
      エレキベア
      エレキベア
      OS依存は面倒くさいクマね〜〜〜

      キャラクター画像の描き直し

      マイケル
      マイケル
      そしてキャラクター画像の描き直しも行いました。
      基本的なデザインは変えていませんが、線をはっきりとして綺麗に描き直しています!
      (左:修正前 右:修正後)

      ↑キャラクターの描き直し

      エレキベア
      エレキベア
      (2年間もこんな適当な絵で進めていたクマか・・・。)

      ウィジェット作成

      マイケル
      マイケル
      デザイン修正はざっくりとこれで完了ですが、
      ウィジェットも新たにいくつか作成しました。

      登場人物紹介

      マイケル
      マイケル
      1つ目は「登場人物」ウィジェット!
      ヘッダーからキャラクターが消えた分、サイドバーに載せておこうという根端です。
      エレキベア
      エレキベア
      サイドバーにあった方が分かりやすくていいと思うクマ
      ゴロヤン
      ゴロヤン
      ゴロ〜〜〜〜〜

      開発アプリ、アセット紹介記事の掲載

      マイケル
      マイケル
      そして開発アプリ、アセット紹介記事についても
      サイドバーに載せることにしました。
      マイケル
      マイケル
      (これでみんなアプリダウンロードしてくれるはず・・・。)
      エレキベア
      エレキベア
      心の声が漏れてるクマ・・・。

      ラーメン占い

      マイケル
      マイケル
      最後に遊びで「ラーメン占い」ウィジェットを作ってみました!
      エレキベア
      エレキベア
      (なんだこれクマ・・・)
      マイケル
      マイケル
      無駄に大量に書かれたラーメン記事を活用するため、ランダムで1つ表示しています。
      これによりラーメン記事を見てくれる人が増えるはずだ!!
      エレキベア
      エレキベア
      飯テロはやめてほしいクマ
      マイケル
      マイケル
      処理内容としては、
      ・PHPで何件か取得してidを採番、非表示にしておく
      ・ボタンがクリックされたらランダムで表示する

      といった処理にしています。
              <script>
                  /**
                   * ラーメンをランダム表示する
                   */
                  function OnRandomRamenClick() {
                      // 全て非表示にする
                      $('.js-random-ramen-item').hide();
                      // hiddenパラメータからmax値を取得し、ランダムでラーメンを表示する
                      let max = $('#random-ramen-max-count').val();
                      let random = Math.floor(Math.random() * (max - 1));
                      $('#ramen'+random.toString()).show();
                  }
              </script>
      ↑ラーメンのランダム表示
      エレキベア
      エレキベア
      案外面白いアイデアかもしれないクマね

      おわりに

      マイケル
      マイケル
      というわけで今回は都会のエレキベア大改修でした!
      どうだったかな??
      エレキベア
      エレキベア
      大変そうな感じはしたクマが、1つ1つやっていくと
      案外簡単にカスタマイズできて楽しかったクマ
      マイケル
      マイケル
      Webの勉強にもなったし楽しかったけど、
      やっぱりWordPressやプラグインの更新で表示が崩れないかは心配だね・・・。
      まあ仕組みは理解したから何かあった時にもすぐ対応できるでしょう!
      エレキベア
      エレキベア
      あとは吹き出しや見出しあたりの
      細かいデザインも修正していきたいクマね
      マイケル
      マイケル
      その辺も今後少しずつ修正していく予定だよ!
      それでは今日はこの辺で!!アデュー!!
      エレキベア
      エレキベア
      クマ〜〜〜〜

      【ブログ改造計画】都会のエレキベアを一新!カテゴリ整理からデザイン修正までを振り返る【WordPress】 〜完〜


      都会のエレキベアWordPress関連JavaScriptフロントエンド関連
      2022-05-08

      関連記事
      【謹賀新年】2025年こそクマ年!振り返りと抱負を決める
      2025-01-01
      【ゲーム数学】第九回 p5.jsで学ぶゲーム数学「フーリエ解析」
      2024-05-12
      【謹賀新年】2024年こそクマ年!振り返りと抱負を決める
      2024-01-21
      【Node.js】廃止されたAmazonアソシエイト画像リンクをAmazon Product Advertising API経由で復活させる
      2024-01-08
      【都会のエレキベア】ブログを大幅リニューアル!WordPressからNext.jsに移行するまでの流れをまとめる
      2024-01-01
      【Next.js】第四回 WordPressブログをNext.jsに移行する 〜サーバ移行・SEO・広告設定編〜
      2023-12-31
      【Next.js】第三回 WordPressブログをNext.jsに移行する 〜Markdown執筆環境構築編〜
      2023-12-31
      【Next.js】第二回 WordPressブログをNext.jsに移行する 〜WordPressデータの移行・表示編〜
      2023-12-31