エンジニアが学んだことをお伝えします

   
2019-04-03    Blog
   

ブログデザイン変更メモ。トップページの構成を若干変更。特定の個別ページ用に専用のテンプレートPHPを用意する【WordPress】

2019年度が始まった。

だからかわからないけど、ブログのデザインをちょっと変更したいなぁと思っていた。

今回はマイナーチェンジ。

この記事は、未来の自分のために書いている。「あのときこういう変更したんだぞ」というメモを残しておくと、忘れた頃に役に立つことがあるから。

ほかの誰の役にたつんだ、という疑問もあるものの、こんなこと考えながらブログをつくってます、という意味で今日の記事を投稿させていただきます。

変更点1 ブログのタイトル周りの余白

ブログのタイトル周りのスペース(キャプチャ画像の上部エリア)。ちょっと狭く感じていたので、空白を広げてみた(CSSで微調整しただけ)。余白の広さで見た目が結構変わるので、思い立ったらまたちょっとずつ改善していこうと思っている。

Beforeのキャプチャを取り忘れたのだけど、ちょっとバランスととのえました、くらいの変更です。

ちなみに、当ブログのタイトルは「エンジニアが学んだことをお伝えします」の方である。Yo_MechEngineerはTwitterでも使っている名前で、ブログでも統一しようかなと思って表示している。

トップページに表示するカテゴリーを削減

僕はブログで伝えたいことが多いのもあって、ブログのカテゴリーが15もある。これらのカテゴリーごとにWordPressで固定ページを設け、各々にアイキャッチ画像を設定しているのだが、ちょっとシンプルじゃないなと感じていた。

トップページ上部

キャプチャをとろうとしても、15個もカテゴリーカードが表示されていると、すべてが画面に入りきらないくらいだった。

今回、まずはトップページに表示するカテゴリーをいくつか減らしてみようと思い立ち、15個表示していたものを9にまで削減。そのかわり、「すべてのカテゴリーを見る」というボタンを設置して、すべてのカテゴリーを表示する固定ページ(新規作成)に飛ぶようにした。

すこしはすっきりしたかな。

なお、削減した対象のカテゴリーはアクセス数が少ないものから選んでいる(Google Analyticsで確認)。

Category Access ranking:

  1. Fashion
  2. Goods
  3. Mac-iPhone-iPad
  4. Money
  5. Less is More
  6. Blog
  7. Book
  8. English
  9. Life
  10. Work Engineering
  11. Camera
  12. Cafe-Tea
  13. Travel
  14. View
  15. Music

こういう整理をしてみるのも面白くて、ああ、旅行ブログじゃないから旅行のカテゴリーはあまりニーズがないんだな、とか気付きもあった。意外と英語カテゴリーが見られていたので、今後記事を充実させていきたいと思う。

“すべてのカテゴリーページ“作成

「カテゴリーごとにつくった個別ページを、すべて一覧で並べる」。これを実現すべく以下の対応を行った。

これにより、以下のようなページに修正完了。

すべてのカテゴリー表示ページへのリンク

まとめ

誰向けの記事というわけではなく、今回は備忘録的な記事を作成した。
ブログのデザインや構成をちょこちょこいじるというのは楽しいもので、素人ながらにPHPやCSSを修正して遊んでいる。

シンプルなデザインだからこそ伝えたいことも目立つかな、と思っている。だから今後も可能な限り改善を加えていきたい。

関連記事

HOME

Related Posts

   

New Posts

Category



Yo
30代エンジニア。日々の生活や読書、仕事や海外での経験から学んだことをまとめるブログ。
好きなものはApple製品、コーヒー、革製品、デニム。旅とカメラも。Less is More.な生活に憧れる。
Profile詳細

© Yo 2017-2019