ブログのURLにSを付けてデザインも変えた
はてなブログが HTTPS 対応したからついでにデザインも変えた。
HTTPSにするメリットがあまり実感できないのだけど、メリットというよりHTTPSにしないといけないような流れになってきているようなので。時間経てば放って置いても自動でなってくれるんでしょ?と思ってたら混在コンテンツの問題があるから自動では切り替わらないみたい。
画像とか動画で外部のURLがHTTPの所があると表示されなくなるから手動で直していくことになる。画像表示は大体はてな記法で書いてたから自動で変換されたけど、Youtubeやニコ動の動画なんかは一度編集サイドバーから貼り直して対応した。HSP部屋の埋め込み利用してた所はサイトがHTTPなので普通のリンクだけにした。手直しはあまり記事書いてないのが逆に手間少なくて助かったw
ハマったのが解析ツールで自動生成される部分にHTTPがあったの。書き直し終わっても混在コンテンツ解決しねーとブラウザのコンソール見たら確かにHTTPのURLがあるのだけど、そんなの使ってないぞ…と調べたらどうやらGoogleの解析ツール関連のものだった。そういえば以前ブログでGoogle Search Console設定したのだった。解析ツールの登録先をHTTPSに変えてしばらくしたら混在コンテンツもなくなった。
デザインははてなブログのテンプレートの Boilerplate をちょこちょこ弄って使用。
以前も利用してたんだけど少し前にバージョン上がったようなので合わせた。2カラムは繁雑になって避けてたけど、情報アクセスの利便性も大事だよなーとか思うようになって採用。一応横幅サイズ小さくすると縦に並ぶように元から作ってあるみたい。レスポンシブデザインてやつか。
それでサイドバーで検索モジュール使ったときボタンのアイコンが右にはみ出た。
上のは Firefox 59.0.2 での表示だけど Chrome 65.0.3325.181 でも少しはみ出てる。ブラウザで表示が異なるからブラウザの実装バグなのかな。css見たら flex という見たこと無いの出てきたけどCSS3で出た配置に関するプロパティらしい。見ない内に進化しとる…とりあえずボタンは従来の position 使って書き直したら正常に表示できた。
CSSの進化は他にもいっぱいあるけど、CSSだけで簡単なアニメーションできるようになったのは興味津々。Webで動くもの作るにはJavascriptが定番だった時代はとっくに終わってた。
さっそくロゴを無駄に出現アニメーションさせた。
ブログにこんなアニメーションいらんだろーとか思うものの、ホームページ弄りで動くものは憧れなので仕方ないです。そりゃ文字を点滅させたり左右にスクロールさせたりもする。一応ブログ巡回時はアニメしないようにはしてる…
上のはgifアニメでfps抑えてるけどロゴ実物の方はFirefoxだとヌルっと動いてくれる。Chromeだと他の読込の関係か結構カクつく。火狐できる子だった。最近ブラウザ使用はまた火狐メインにもどってる。
横のサイドバーに何置くかも悩み。あまり色々置いてごちゃっとするのも嫌で(一応記事がメインなので…)あまり目立たないような感じで落ち着いた。Twitterの埋め込みも試しに置いてみたけどしっくりこなくて止めた。カテゴリは初め置いてなかったけどこれから積極的にカテゴリ付けていきたいところなんで置いてみた。ただ、記事にどういうカテゴリ付けるのが適切か難しい…
ってことでHTTPSになったしデザインも変えたんでもっと書きなさいよ自分。CSSとかデザイン弄り無限に楽しめるから気をつけんと。ゲームも作りなよ。ゲームも作りなよ!