2021年ブログデザインアップグレード!今回のテーマは「こどもおじさん」です。 | モノブログDX

モノブログDX

友達が欲しくて始めました。
This sentence is written by Mono blog.

 

 

どうも。

こんばんは。

 

7月も半ばに入りました。これから夏本番であります。

 

いかがおすごしでしょうか。

 

 

さて、今回のテーマは「『2021年の』ブログデザインのアップデート」であります。ウインク

(こういうのは年の始めにやるんだよなぁ)

 

 

ブログデザインが変わっても「綺麗になったね」に「すごいジャマイカ」なんて全く言われないため、今回は褒めて欲しい気持ちをだるだるにこめて投稿しております。ウインク

(自分から言っちゃうタイプなんだなぁ)

 

 

この試みは初めてイチからテーマを考えて作りまして、思った以上に時間がかかったところであります。もぐもぐ

 
 

さて、今回のブログデザインのテーマは「こどもおじさん」であります。ウインク

昨年、モノブログくんは節目の年齢に入りまして、三十路を迎えました。もう、20代で始めた「モノブログくん」という一人称がサムい年齢でありまして、仕方なく、未だ子供っぽく、というか精神年齢が人より遅れているので、こどもの手書きのようなデザインをテーマにしてきました。照れ

 

 

昔見た単色の漫画の挿絵のようなイメージを用いまして、おじいさんの頃の漫画、ペンで描く下書きのイラストのようなイメージであります。最近だと写真を手書きでなぞるエモい手書き加工の線画が流行っているようであります。もぐもぐ

 

 

それでは今回のこだわりポイントの紹介であります。ニコ

 

 

今回のこだわりポイント

さて、ここからカスケーティング・スタイル・シート(CSS)とその他を用いた、こだわったポイントの紹介であります。もぐもぐ

 

 

グレーx黒x白xリンクだけ明るい水色

中心を構成する色をこの黒と白とグレーで統一し、リンクのみ明るい水色(#00a5b8)を用いました。アメブロのブログデザインにトライアングルというデザインがあるのですが、そこから発想をパクりました。ウインク

 

 

急上昇フォントを大きく

ブログランキングが上がると、ブログランキング横に<注目>という要素がアメブロにありまして、ここをわざと大きくしました。

大人の世界では全く勝てないので今年も小学生ランキングの右肩上がりを目指すのであります。照れ

(おかしいですよ)

 

 

ちなみに、ランキングから転がり落ちると小さく表示されるようになっています。ウインク

(たまにあるよなこういうの)

 

 

自作背景画像

今回の背景の主役はアメバくんとモノブログくんの好きなモノ、あるいはモノブログくんを象徴するものが背景に描かれています。もぐもぐ

この画像は一つ一つトレースをして描いたあと、合成したものでありまして、四隅、縦・横の平面をBackground:repeatで逆手に取り、気持ち「つなぎ目がわかりにくい」背景になっています。ニコ

 

 

みんなも何が描かれているか探してみてくれよな!ウインク

 

 

隠し要素もあるよ

メディアクエリというモバイル・デスクトップ向けの記述をして、画面サイズに合わせて少しブログデザインが変わる要素も追加しました。この読者登録ボタン下のフリースペースに画面サイズによってダルメバくんが出現します。キョロキョロ

最新のコンピュータはもう高解像度で、かなり画面サイズが大きくなっています。それらに変更されたときに表示されるよう、大きな画面を中心に作成されています。出現させるにはディスプレイサイズの仮想環境を呼び出すか、ディスプレイらにつないで、画面サイズを変更すると、30pxごとにダルメバくんが出現します。キョロキョロ

 

 

標準の画面だとモノブログくんのところでは発見されておりません。合計6体、ダルメバくんがいます。ウインク

 

 

ブックマークの出現

そして、今回の試みでブックマークを取り付けました。ニコ

SNSリンク以外にも、欲しいものリストを公開しました。現場からは以上です。ウインク

 
 
欲しい!お願い
 
 
これが今回のブログデザインアップデートであります。ニコ
 
 
他にもたくさんあるから探してみてくれよな!ウインク
 
 
また明日。ニコ