ねこらぼ( 'ω')

名古屋でこそこそと活動っぽいことをしている橋本ねこのブログ( 'ω')

ブログのカスタムがひと段落しました

f:id:hashimoto_neko:20200504233046j:plain

ずっと続いていたブログのカスタムがようやくひと段落。

長かった…。

 

 

大まかに言うならば「カテゴリー分け」をずっとやっていたわけなんだけど、今までのブログの全ての記事に対してカテゴリーを付け直したのでもう大変で大変で。

しかしやるならば完全にこのタイミングだったので。

 

昨今のステイホームのあれこれのおかげで部屋の掃除が捗っている人も多いかと存じます。要はそういう事で、このブログのカスタマイズはつまりお掃除というか模様替えのようなもの。

こうやってまとまった時間の取れる今のうちにやりたかった。

 

 

というわけで、おおまかに紹介。

記事のカテゴリー分け

まずはブログ記事をすべてカテゴリー分け。

一旦カテゴリーの分類を全て消去し、新たに割り振りをしていく。

 

このブログは2018年7月から始め、300を超える。

1つの記事に1分掛けたら5時間も掛かってしまう。地味な作業だ。

 

まずは記事を大きく6つのカテゴリーに分けた。

日記」「ニュース」「コラム・読み物」「グルメ・食べ物」「音楽」「お仕事だ。

日記は文字通り、普段の記録や日々の雑記を。

ニュースにはライブのお知らせや橋本ねこの最新情報なんかを。

コラム・読み物は思った事や感じた事を自由に記述。日記のようにその時の記録を主題としていないもの。

グルメ・食べ物には行った居酒屋の話やコンビニの新商品、期間限定物や季節のグルメなんかに触れる。

音楽は専門的な記事が多く、DTMをやっている方向けの物が多い。

お仕事には今までの案件をまとめてあったり。

 

その中にはさらにそれぞれ細分化されたカテゴリーもある。

が、大カテゴリーに属する物が全ていずれかの小カテゴリーに属しているわけではない。

例えば、音楽のカテゴリーに入っていても、その下の小カテゴリーのどれにも属していないような記事もある。

 

カテゴリー:日記

どうやらブワーっと毎日のように日記を書く時期と全く書かない時期があるようだ。(振り返ってみて気付いた)

雑記なのだけど、だからこそ読み返すとその時々の思考が垣間見れて面白さはある。

カテゴリー:ニュース

ニュースのカテゴリーの中にはお知らせ」「ライブ」「DDDDをスタンバイ。

ライブやドロドリのお知らせはそれぞれのカテゴリーにて。もしくは「お知らせ」でほぼすべてのお知らせを見れる。

カテゴリー:コラム・読み物

こちらはジャンルではなく、記事の長さでカテゴライズ。

短めは2,000字以下。ふつうは4,000字まで。長めは4,000字を超える。

空き時間に合わせてどうぞ。

カテゴリー:グルメ・食べ物

こちらでは食べ歩きをしたり新商品を食べたりした記事が並ぶ。

主にコンビニでのアレコレを扱う新商品や居酒屋での飲み食いの様子を勝手に届けるお店紹介

他にも食に関するコラム用の食のコラムも。こちらのカテゴリーは「コラム・読み物」を兼用されていることが多い。

カテゴリー:音楽

専門的な記事が多いけども、YouTubeに不定期でupしている弾いてみたや普段見れない部分が垣間見れる機材・裏側紹介は割とライトに楽しめる。

カテゴリー:お仕事

お仕事内容ごとに作曲」「アレンジ等のカテゴリー分けをしている。

制作事例を見れば一通り分かると思う。

 

 

ブログヘッダーの編集

ブログのヘッダーにはカテゴリーごとのリンクを付けている。

やっとここの編集も終わり、ある程度納得の出来る形にはなった。

 

cssを分からないながらに見様見真似で設定し、ある程度勝手の知れているhtmlと組み合わせて、なんか組んだ。

 

一応レスポンシブデザインというものを取り入れた。

要するにスマホでもタブレットでもPCでも同様の見た目を保持させる手法だ。

基本的には「画面幅に対してこの割合で表示」みたいな相対値で記述していく方式を取る

f:id:hashimoto_neko:20200504231550p:plain

f:id:hashimoto_neko:20200504231821p:plain

こちらはスマホをそれぞれ縦と横にした様子。

f:id:hashimoto_neko:20200504231922p:plain

んで、こちらがPC。

ちゃんと文字のサイズがデバイスによって可変している。

ブログの題字(ねこらぼ)が同じ文字サイズなので、そこと比較すると差が分かりやすい。

 

ちょっと専門的な話だけど、そのまま相対的な比率のみのcssを記述するとスマホで表示したときに小さくなりすぎるので、

calc([ピクセル数]px + [相対比率]vw);

という感じで、ピクセル数と比率を組み合わせて最小限のサイズは維持している。

 

この記述だけでもそれなりに時間が掛かったので、こういう記述をさらりとやれる人はすごいなと思いましたとさ。

 

 


 

これでブログのカスタムはひと段落。

また物足りなくなったら増やしたり変えたりしていく予定。

とりあえずしばらくはこれ。もし見た目でエラーやバグがあったら教えてくれると嬉しい。

 

blog.neko-labo.work