歴代最長タイトル？
分かんないけど長いね、どうもざれんですー。
ブログ「すちゃらかぁん。」は、2024年6月7日にいよいよ10周年を迎えます！
大々的にイベントを開催したりだとか、特殊なことをしたりだとかはありませんが、タイトル通りブログデザインを一新しました！ 構想1年、開発3日(笑)！ サブブログを作った辺りから自作の気持ちがあったよね。始めるまでが遅いんだなぁ。
ということで、今回はそんなリニューアルした「すちゃらかぁん。」を眺めて参りましょう(笑)！ よろしくどうぞ！
ビフォー！
見辛い。
左がパソコン、右がスマートフォン。
アフター!!
あれ、肝心のスマートフォンは？
アップロード出来ませんでした……(サイズオーバー)。
えぇ……。
ええ、アフターはなうなんですから、その目で見よ！ というやつです(笑)！
しかしどうです？ めちゃくちゃ変化したでしょう？
色味は可能な限り変えずに、デザインCSSを丸々書き換えました。背景もそのままですから、全くの別物と感じることは恐らくないと思います。あーいや、別物って思ってもらった方が私的には頑張った甲斐があるのか……(笑)？ さあ？
まあこんなように、はてな公式デザインをずーっと引っ張ってきた「すちゃらかぁん。」ですが、とうとうオリジナルデザインへと変化を遂げました！
サブブログ「ざれんの不定期ブログ」を去年作ってから、段階を経て、ちゃんとした物が作れたと思っています！ 流れとしてはなかなか良かったのではないかと！ 間が1年空くけどね。6月が周年なせいで、寸前の4月5月にならないとやる気にならないのが痛いところ……(苦笑)。
今から遡ること、5年半近く前。このブログが収益化する頃ですね。
スマートフォンページすら無かった「すちゃらかぁん。」に、とりあえずとはてなのデフォルトページを適用したことがありました。
そうです、実にこれ以来、スマートフォンのことを考えてブログ作りしたことなどなかったのです(笑)！ スマホ嫌いが悪い。自分じゃ見ないから良い、の論じゃいかん。
いやあ、そりゃあスマートフォンからの維持率ダダ下がりしますわね(笑)。本当に、スクロールだったり動きカス過ぎて見ていられなかったでしょう？ 余所からおいでの方も、はてなブログ巡りをスマートフォンで行っている方も、きっと厄介と思っていたはずです。
10周年を目前に、ついにやっとこさ、スマートフォン等モバイル端末へ目を向けた、といったところなのです！ 一大事です！ 天変地異です！ 本当に珍しい。
ま、そんな感じで、この後は部分部分に注目していきましょう！
ヘッダが私も貴方も超便利!!
これはプレシャス。
いやあ、良いですね(笑)！
まずはヘッダ画像です。
5周年の時に作った、ざれん丸オールスターを最新版に更新。2019年以降、2024年直近寸でまでに生み出された絵やら何やらをぎゅっと詰め込みました！
例えば、年末企画のアイキャッチですとか、サブブログ「ざれんの不定期ブログ」サードブログ「カマザチャ開発日記、(亜種らかぁん)」のアイコン、SUZURIで発売中のグッズ画像、YouTubeチャンネルアイコン、ホームページ「ざれんの小部屋」に使われている画像まで、とにかく手元にあるだけ突っ込みました！ 更にはちゃっかり、失われた旧はてなグローバルヘッダを挿入！ 押してもここのトップへ行くだけですが、全面なことも相まって生き返った感じがして良いでしょう？
hiyapaさん(id:hiyapa)にも許可を頂いて、今から4年前にはてなブログ内で流行したブロガーバトンの画像も入れさせてもらっています！ ありがとうございます！
こうして見ると、この5年間は沢山描いたんですね。絵だけは無理ぃー、が口癖なのに(笑)。ともあれ、生み出せていることには喜びがありますよ！
以前のヴァージョンは、サイドバーにあります旧バナーか、上のビフォーをご覧くださいませ！
そしてグローバルメニュー！
4段もある盛り沢山なメニューの為に、わざわざ3つのCSSを導入しています(笑)。色や大きさを変える為に、ですね(笑)。
1段目はヘッダ画像にも入れました、旧はてなグローバルヘッダにあった項目へのリンクです。これは素晴らしいですよ！ 私だけでなく、はてなブロガー皆さんがクリックしても使えるようになっています！ 正にグローバルヘッダそのもの！ ダッシュボードや記事を書く等、どれを押しても自分自身のページに飛ぶようになっています。これで皆さんが「すちゃらかぁん。」をブラウザのホームに設定する日も近いか(笑)!?
2段目、3段目は、私のゴリゴリリンク集です(笑)。2段目は「すちゃらかぁん。」のカテゴリーへのリンクで、一応更新率高めの物を選びましたがどうでしょうね……(笑)？ インドカレー……(苦笑)。……3段目は、「すちゃらかぁん。」以外へのリンクです！ 「ざれんの不定期ブログ」「 カマザチャ開発日記、(亜種らかぁん)」はもちろん、「ざれんの小部屋」にもYouTubeにも飛べます！ 最強!!
そして4段目はなんと！ Amazonリンク(笑)!! ここから飛んで、すぐにでもお買い物出来ます！ 超便利！ ふたつ目の項目は……？ あ、いや、えと、ほしい物リスト……(小声)。※漢字とひらがなが逆だったから直しておきました。
ちなみにこちらのメニュー、スマートフォンで見るとよくある開閉式ではなく、スライド式になっております。まあこれは単純に、私が開閉式嫌いだからですね(笑)。
そしてそして、作りましたおすすめメニュー!!
これは急に手作り感満載ですよ！ 画像はこれの為に当時の物を引っ張り出して文字を入れましたし、おすすめ矢印くんは新規に描いた上に何故かクリックも出来ます(笑)。更になんとなんと、そもそものコードはホームページで培ったゴリゴリのHTML方式、<marquee>を利用しております(笑)！ 急に時代に逆行！ ここにざれんくんらしさを見出して欲しいです！
おすすめ記事自体は、2024年から2014年に遡る形で各年からひとつずつ選出。これがなかなか選ぶのが苦しくって……。本当はふたつくらい入れたかったですが、大行列になってしまうので一旦保留です(笑)。初期の方はお写真すら無いですから、完全に1から画像を作りました。結構オシャンティでしょう(笑)？
是非この行列を眺めて、過去も今も見てみてくれたらと思います！ あ、その他ランキング、グッズ、YouTubeリンクもありますよん！ おすすめ行列。良い名前じゃん！
記事一覧にはらしさがたっぷり！
色が重要。
はてな公式デザインを使っていた身としてこのブログらしさを出していたのは、それぞれの場所に使っていた色だと思っています。
その色を可能な限り変えず、新デザインを作成しましたから、そこを注目して頂きたいのです！
まずはフォントですかね！
日付表示は変えずに筆記体が魅力の「Allura」です。
それからゆるゆるのタイトルが特徴的でしたが、そこはごめんなさい、見やすさ重視でWin7頃のデフォルトフォント「メイリオ」に変更しました。これは今回の新デザインで、中心となっているフォントです。この本文もそう。Zちゃんねる2では逝ってよし、とか言ってるクセに……。
カテゴリー、概要欄、後は先走っちゃいますがサイドバーのタイトルには「ふいフォント」です。お馴染み、このブログに良く合った緩さを表現してくれているふい字を無くすわけにはいきませんでした！ ですので、私が口から発していそうな部分に採用(笑)。概要欄なんてぴったりですね(笑)！
色！
これはもう、見ての通りです(笑)。背景色は全てそのまま、無かった輪郭部分だけ新しく設定しまして、まあ後はタイトルはまたもや強調すべく濃いめに変更しました(笑)。
カテゴリーやタグなんかはよく見てください。私のブログではお馴染み、リンクは紫色、が適用されていますよ！ これは特に個別に設定しなかったリンク全てに適用されていますので、超便利。いちいち弄らなくて良くなったんですもん(笑)。
あ、タイトル横にはバートル君がいます(笑)。
これは去年作ったサブブログのカエルの応用ですね。ちゃんと自分のオリジナルキャラクターにして、らしさを出しまくっています(笑)。
ちなみにバートル君は、私が人生で一番最初に生み出したキャラクターで、1度描いた子は2度と描けない私にしては珍しく、今でも描けるのでさすがに気に入っている子です。ここに来る前にも、うごメモ時代にもいたんですよ、実は。
そうだ！ 画像が縦長なので書き忘れそうになりましたが、アイキャッチ画像は4:3で表示されるように変更しました！
これつまり、横向きのお写真をアイキャッチにすればそのまま表示されるという物で、切れたり伸びたりせず綺麗に見えるという優れた設計！ これは推しポイントですね(笑)！
記事内ビフォーアフター！
これだけ見辛い画像でも、ヘッダのインパクトが格段に上がったね。
いやあ全面表示素晴らしいですわ。
もっと褒めて。
まずはご覧の通り、ヘッダだけでなく、記事やサイドバーの横幅がかなり広がっています！ 何と言いますか、余裕があるというか、ふっくらした感じでしょう(笑)？
先程も書いた通り、記事内の背景色も変わらずそのままです。
記事上や記事下をコンパクトにして、前よりも纏まって見えるようになったと思います。でも本文の文字間隔は広げているので、見やすさは上がっているというばっちしな作り(笑)！
可哀想に、いつかの私が導入後すぐに頑張って書いた本文末尾はリストラです(笑)。
サブブログ「ざれんの不定期ブログ」にそのまんま掲載したので、見てあげてください。忘れないでいてあげてください。
そうだ、それこそこのはてなブログオリジナルの、リンクカードもデザイン弄ってみました。可愛らしくなりましたでしょう？
代わりに導入したのが、追加の関連記事とブログランキングリンクです。綺麗に纏まってますね。
本文末尾の代わりに、記事下にSNSリンクやブログリンク等を掲載しています！
サイドバーの方にもありますが、SNSリンクや読者登録ボタンも今回の為に描きました！ 素材借りてくるよりも、らしさが出る方がやっぱり良いですよね！
そんなところでしょうか？ あ、記事上の各色説明文が、ほんのちびっとだけ変わっています(笑)。本当にちょっとだよ(笑)。
それから、比較の為に使った記事はこちら。
「すちゃらかぁん。」再始動時の記事ですね。なんかシーズンで物を分けておりますが、今見ると何言ってるのか全然分かりません(笑)。
サイドバーもより分かりやすく、より便利に！
なんかCMの宣伝文句みたいで嫌だそれ。
サイドバーは基本的にはそのままですが、注目して欲しいのは最初と最後。
ニコニコミュニティはまるで使っていないので削除、グッズやほしい物リストはグローバルメニューへお引越ししました。
最初、プロフィール！
長い。
はてなブログでは、サイドバーモジュールが幾らか用意されているのですが、今回はそのデフォルトのプロフィールを使用せずにHTML入力しています。おかげで、自由に詰め込むことが出来ました！
アイコンは贅沢に3つ、ロゴも突っ込んでブランド感を出しています(笑)。名前も文字色と一緒にして、水色イメージを推しています。
プロフィール文は、時が進んだような物に書き換えています。読み比べてみてくださいね！
デフォルトの読者ボタンがあって、YouTubeとオリジナルSNSボタンと続いて、オリジナルの読者ボタンで再び購読を催促しています(笑)。しつこいですね(笑)。
最後は3つのブログを、こじんまりとしたリンクカードで載せて締め。かなり綺麗に出来たと自惚れています(笑)。ボクを褒めなさいボクを。
最後、時計にフィードにバナーが付いてくる！
長い。
そればっかり言わないでよ。
ホームページ作成時よりずっと使っている、日付と時間を取得してくれる時計スクリプトがまず流れています。去年作成のサブブログでも採用していて、いやあ、全てが繋がっていますね……(感動)。早い早い。
そしてフィードです！ 元々サブブログで「すちゃらかぁん。」の記事更新情報を見せびらかす為に導入した物でしたが、便利だったので今回3ブログ全てを取得して表示するようにしました！ これははてな関係なく、Livedoorの機能です(笑)。いやあ、全てが繋がっていますね…………(感動)!! 早いってば。こちらではブログアイコンも設定して、どのブログの記事かをひと目で分かるようにしてありますよ！
そしてそしてバナー！ 「ざれんの小部屋」と「すちゃらかぁん。」の5周年ヴァージョンに加えて、今回の10周年ヴァージョン、それから掘り出し物の2016年版も掲載！ いやあああ、全てが繋がっていますねえええ!! 泣け。
で、更にこちらの項目、追尾機能が搭載されています！ 本文が長い記事の場合、サイドバーがあっという間に尽きて、右側が寂しくなることが多かったのですがもう安心。これからはいつでも一緒、ですよ。なんかやらしい。
フッタは据え置きで安心安全！
下にもおすすめ行列。
すぐに下にスクロールされてせっかくのおすすめが見られないのも、ちょっぴり寂しいものです。せっかくですから、そんなに重いわけでもないのでフッタにも同様のおすすめ行列を搭載しました。変わった点はそのくらいなのです。
サイドバーにあったお問い合わせリンク等がフッタにお引越ししたのと、上に戻るボタンが少し小さくなりました。これはレスポンシブ対応の弊害(?)ですね(笑)。スマートフォンでもこの子に会えると考えれば安いもんじゃありませんか。
ちなみに上に戻るボタン搭載時の記事はこちら。
そうなんだよ、ざれん丸1号くん、目がワインレッドなのがかっこいいんだよねえ(笑)。
6年前なんだ……。
一部の方にしか見えないアレも……！
お見せしちゃうの？
しちゃう。
もしかすると既に見たよ、って方もいるかもしれませんね！
こちらです！
スペシャルメッセージ。
物は言い様っスわね。
サブブログ「ざれんの不定期ブログ」で先に試験的に導入していた、所謂広告ブロックブロック、広告ブロックブロッカーです。
広告ブロッカーに反応して表示される仕組みになっていまして、この特別なメッセージを見ることが出来ます(笑)。
とにかく気を付けたのは、強制しないこと、危険信号的に見られないこと。
たまにかなり厳しい口調で書かれているサイトや、機械的でどこかおっかなさを感じる淡々とした表示がありますが、私はそんな物は「すちゃらかぁん。」に導入したくなかったので色から何から出来るだけ普段通りにしてみました。
それに、許可しなくても見られる設定にしていますし、私は何だったら右上のバッテンを押す派ですしガバガバです(笑)。本人のご自由に、と書いてある通りです。
Google先輩の、日本語フォントの安っぽさが良くないんだと思うんだよね……(苦笑)。
以上！ こんなところです！
大まかに。
普段からブログ巡りの一環でも、「すちゃらかぁん。」に来てくださっている皆さん、本当にありがとうございます！
10周年を間近にして、ようやく、ようやくレスポンシブに対応することが出来ました(笑)！
かつて私が書いたひとことです。
本来ブログは日々改善であるべきです。 ただ書くだけじゃあ、進みませんね。これからも何かあれば、ガンガン……はちょっと嫌だな…………それとなく変更を加えてくつもりです！
記事とかサイドバーじゃなくて、あの囲ってるとこ色変えたかったのよ！ - すちゃらかぁん。
常にこの言葉を胸に、しておきながらレスポンシブ対応は渋りながら(笑)、ようやくまた一歩「すちゃらかぁん。」が改善出来たと思っています。
4月はデザイン適用に向けて動いていた為に、かなりのネタが貯まりながら記事投稿が滞っておりました。
こうして今、デザインが新しくなった「すちゃらかぁん。」です。新しい画面で新しい記事を、なんて私が普段口にしないようなことを書きつつ、これからも好きなことをだらだら書けるよう、やっていきたいと思いますので、どうぞよろしくお願いします！
おわり！
このデザイン、投稿しようか考え中……(笑)。
これらもよろしくお願いします。
関連記事ーの。
おすすめ行列の悩んだ分、あれを紹介する記事を書きたいな。
サブブログ関連記事ーの。
ついで……(笑)。
活動宣伝用のXTwitterXが再始動しています！
https://twitter.com/TetsuChiKonaZRN
プレビューが出ない寂しさ。
こちらのアカウントは、ブログやYouTubeの更新を自動で共有してくれる素晴らしいシステムを導入しています。なので基本的には無人みたいな感じです(笑)。
ただ、あんまり活動量が多くないので支援リツイート、リポスト？ もしていこうと思っています。
なので是非、はてなブロガー仲間の皆さんが繋がってくれると記事更新の投稿等をバンバンRTだかRPしますので、よろしくお願いします！ 気ままにね(笑)。
以上告知等終了！ 今後ともよろしくどうぞ！ よろしくお願いします！
5月もすちゃらかぁん。をよろしくお願いしますー！
読んでくれてありがとうございますー！ すすー！
ではまた～。
