どうも。
こんばんは。
9月も中盤を終えつつあります。
連休初日を迎えました。
いかがおすごしでしょうか。
さて、モノブログDXのTwitter開始から
3周年を迎えました！
今回は3周年記念のブログデザイン、
マイナーアップデートであります！
やったね！
モノブログDX@monoblogdx
Twitterに登録した日を覚えていますか？#MyTwitterAnniversary モノブログDXのTwitterを開始から3周年を迎えました。 https://t.co/lijz7jldnu
2020年09月17日 14:44
ちなみに文章を間違え、
自分にリプライをしてなんか赤っ恥をかく
モノブログくんであります。
文法がちょっと違うンゴね。 「Twitterを開始して、3周年を迎えました。」 やっぱ孤独です。
2020年09月18日 18:13
なんか中途半端な切り出しでありました。
そういやあTwitterって
後から編集できないのであります。
この時コード書く休憩中で疲れており、
自分でもなにやってんのか、
わかんない時であります。
あとは、このTwitterが
開始した時のプロフィール欄は、
「友達が欲しくて始めました」
だったので、
「そういやあ友達できなかったな。」
なんて、ふと思って孤独ってつぶやいたのであります。
あと、なんていうのかな？ブログを濃く書いてると、
フォロワーを増やそうと思わなくなるというか、、
なんかTwitterがあんま向いてない
っていう感じもあるかもしれません。
そして、お酒飲んだ時と
疲れている時のインターネットは
あんまいいことないです。
過去にお酒を飲んで行ったインターネットの失敗は、
ちゅきだった女の子のTちゃんに絡みかけ、
そこから彼女は鍵アカウントになっていました。
（まあそうでしょうね。）
そして、Twitterから
3周年記念のステッカーをもらいました。
実はここからデザインの細々とした刷新が始まっています。
ただ、見られる人と見られない人がおり、
アメーバアプリからの閲覧、
スマートフォンから現在のパディントンデザインの閲覧の人は、
gampリンクを採用しており、アプリの方は、
CSSの反映ができないため、
見られないかもしれません。
html4だった場合、html編集が出来るのですが、
html5に移行してからデザインはCSSの時代で、
モバイルに向けてのCSSを
サイバーエージェントは
触らせてくれないのであります。
アメーバアプリの読者登録してる人は、
表示されるページが違い、
ちょっとよくわかっていないので、
この記事が公開されたあとに
自分ブログを確認しに行くのであります。
今回はコンピュータの閲覧の人でしか
わからないかもしれません。
技術的な話がほとんどであります。
それでは、マイナーアップデートの内訳であります。
前回までのモノブログDXは
Galaxyのアメブロデザインを使用しておりました。
今回からCSS適用デザインで刷新し、
ブログを公開しております。
ただ、下地の白からデザインを作るには、
まだかなり効率が悪いため、
「ふむふむこんな感じじゃね。」と読んでから、
Galaxyデザインをパクって編集してあります。
そして、このTwitterの画像なのですが、
元から切り出して貼るのではなく、
WEBコーディングから切り出して貼っています。
反映前の画像であります。
反映後の画像であります。
CSSセレクタを自分で作り、
border-radiusという処理で
縁の半径を削る処理で丸くしてあります。
角丸も作成しました。
「がんばったね。モノブログくん。」
って聞こえてきました。
（疲れてるのかな？頭の中がおめでたそうですね。）
そして、フォントの仕様にも要素を更新・加筆しました。
ここで、多分なのですが、
このブログ読者はゴシック体、
（サン（否定する）セリフ（とめ・はね・ひげ）体）
の書体で読んでいるのだと思います。
いちおうWEBでは段落（文章）として読みやすいのはゴシックで、
見出しとして目を引きやすいのは
明朝（セリフ体）とも呼ばれていたりします。
これは英語圏もそうらしく、
Googleにインターンに行ってYahooの代表を務めた
マリッサメイヤーが言ってました。
そこで、アップルだとヒラギノ角ゴシックで、
アンドロイドがモトヤでいいのかな？
WindowsがMSゴシックかメイリオであります。
このゴシック体が中心の中で、明朝体（セリフ体）の
呼び出しを出来るようにしました。
思い返せば初期のTwitterには、ヘッダー写真に、明朝体で、
俺の童貞を奪ってみやがれ
なんて画像をはっていた時期もありました。
冷静で力強い明朝体であります。
（書いてあることはクソ）
この、電車でTwitterを開いた時に、チラッと画面が見え、
「やべえやつのタイムラインを見ている」と思われる、
閲覧テロを目論んだものでもありました。
（あたまおかしい）
そして、HG創英字ポップ体、変性ゴシックも取り入れました。
日本のカリグラフィの領域で古い昭和の書体で、
元気のある駆け抜けるような、目立つ書体であります。
10代から20代の女の子の読者層を増やすため、
親しみやすいフォントを採用するのであります。
22歳以下の女の子にアタックチャーンス
（児玉清ですか。おかしいですよ）
ムムッ！く〜！
これからはJKとヤりたいんです！！
（川平慈英ですか。それもおかしいですよ）
このブログをどげんかせんといかん。
（なんで博多で降りずに宮崎に行くんですか）
こんなことやってっから
おっさんしかこのブログを見にきません。
このブログは年々高齢化が進みつつあり、
この流れも、結構歳が行った人たちにしか、
わからないのであります。
ちなみに創英字ポップ体は25年以上歴史のある書体で、
フォントを手書きで作成していた頃のものであります。
身近なモノは「まいばすけっと」で、
100%創英字ポップと言われています。
ただ、テクノロジーの発展により、
ダサいと酷評の時期を迎えている時期がありました。
WEBデザイン系はかなり酷評が多く、
その名残がGoogleにあります。
そして、昔の映像技術は背景を写したフィルムに、
文字を撮影したフィルムを重ねて、
2枚同時に光を当てて放映していました。
この名残でいいのでしょうか？
タイトルコールの時に
誰もいない壁紙を採用しているところが
名残のような印象であります。
HIPHOPにもその流れがあり、
EXILEのマキダイの青春は、
音楽のカセットテープの端を切って、
曲の中間と中間をつなぎとめ、
流した時に一つの曲のテープにする、
DJとして曲を作っていました。
デジタルを用いたデザインの領域では、
下地と上地の「レイヤ」と呼ばれる、
重ねる技術が、多く利用され、
これが描画・合成の基本的な技術であります。
フォントは意図に
端末、時代、閲覧方法で、
大きく左右されることが多い印象の領域もあります。
この工業芸術の領域で、
今回創英字ポップ体の他に
さまざまなフォントをモノブログくんは
採用しました。
ただ、マニアックなフォントで、
Shift_JISを採用してないかもしれない、
未確認なうえ、
Macは反映されていないかったです。
ここはまだ試験中であります。
そして、透過処理であります。
opacityと呼ばれる薄くなっていく要素を取り入れました。
仕様としてはレベルを5段階に振り分けてあり、
今回はこれで四コマを作っています。
え？本当に本番できるの？
え？生でしてもいいの？
しゅごい！なんてしゅごい締まりなんだろう！
アッァー！ｲｸッ！
わかんない人の前でこんなのやってると、
なんか恥ずかしくなってくるのですが、
画像だとこんな印象であります。
（書いてあることがやっぱクソ）
そして、メモパッド風デザインであります。
これはまだ試験中で、
大幅なCSSの記述で、
メモパッドっぽいデザインを記述しています。
ここはほとんどコピペで、
リスト記述とし3色支度しました。
青デザインであります。
プロフィール
- なまえ：モノブログDX（デジタル・クロス）
- せいべつ：ち●この大きな男の子
皮はかぶってる
- 好きな食べ物：ハンバーグ・カレー・寿司・焼肉
- 性感帯：乳首
- S？M？：普段は誰も寄せ付けない一匹狼なドS。
ベッドでは常にマグロ
（全然聞いてねえな）
黄色デザインであります。
モノブログくんのトリセツ
- 1人で買い物に行けません。
注文には気を利かせましょう。
- 月に一回制服を着ているところが見たいようです。
合わせましょう。
- 下着の上下は統一しましょう。
- 白い綿の下着、リボンがついている下着
これが正装です。
- 男の子の話はしてはいけません。
（ひどい）
【警告！】こんなことしてませんか？
- 「過剰な露出の高い洋服を着ていませんか？」
モノブログくんは絶滅危惧種です。
それでは離れていってしまいます。🙅♂️
- 「寝る前に布団の中でツンツンしてきた？」
それはムラムラしている証拠です。
見逃してませんか？🙅♀️
- 「勃たない？」
ティクビが性感帯です。
忘れていませんか？🙅♂️
- 『頭に来ても殴ってはいけません。』
一発、力の強いことをすると、
涙目になります。🙅♀️
（サーバーがもったいないんだよな）
まだ全て読みきれてないので、
試験中でありますが、メモパッド風デザインであります。
ここから修正するか、
飽きてやらなくなるかは未来のワシが判断します。
未だ、時間がかかるのであります。
そういったCSSデザインの刷新でありました。
WEBの勉強を始めて初めてCSSで記述できるまで、
あんま人より早くなかったのですが、
2ヶ月程度だったかな？
かかりました。
サーバーアップロードも勉強し、
一週間程度レンタルサーバーで、
製作をレンタル無料期間を
公開していた時期もありました。
量書かないとなかなか伸びないところが、
プログラミング・コーディングの技術力であります。
そして今回は「WEBコンテンツ」として、
誰もが見られる領域に自分のCSSを加筆できた
段階であります。
お金がないので、
学生からほんの少しアマチュアであります。
気持ち、というかほとんどコードを読みきれてないもないのですが、
サイバーエージェントって大きい会社なんだなと実感する瞬間がありまして、
アメーバブログ自体のコードを読みこむのに想像よりコード量が多く、
最初にWEBファイルをダウンロードし、
分析に入ったところ、
真っ先にインテルコアを積んだはずのMacBook Airが
もっさりしはじました。
いい環境でコード書いているんだろうな。
と実感したのであります。
そういったWEBデザインの刷新であります。
比較的古いWEBサービスの、
アメーバ、はてなあたりは
CSSを触らせてくれるのですが、
note、mediumはCSSを触らせてくれないのであります。
いい勉強になったのであります。
また明日。