リニューアルのご報告
「Our Story’s Diary」
ついに!お引越ししました!
9年目にして新たなスタート。です。
……8月中にもう一度(SQLiteからMYSQLへの)引っ越しという面倒な作業が控えているのですごく憂鬱ではあるのですが……。
とはいっても、一見すると何も変わってないように見えるかもしれません。……いやそれはないか?
逆に、いろいろ変わりすぎて今までできていたことをどうすればいいのか?みたいなものがあるかもしれません。
ということでまずは、今回のリニューアルポイント!を書いていきたいと思います。
Contents
オリジナルのレスポンシブデザイン。(PCとスマホのデザイン統一)
これが一番大きいのではないでしょうか。
JUGEMはレンタルブログだったので、スマホ版のデザインは用意されている中からしか使えなかったし、PC版のデザインも他の方が作ったものを借りていました。(かなり勝手にカスタマイズしてましたが……)。
それをようやく統一しました。厳密には大きくPC・タブレット・スマホの3種類の表示があり、それぞれ1カラム・2カラム・3カラムに分岐しています。
ここのタブの挙動はものすごく作りこんだ部分です。PCブラウザでウィンドウを伸縮してもらうと、割とスムーズに切り替わります。
デザインそのものについてですが、色のベースは旧ブログのスマホデザインをかなりパクりました。
同じURLでの移動になるので、「全然違うサイトだ!」って思われるのが怖いな、と……。
PCサイトのデザインはあまり残っていませんが、カレンダーのデザインは取り入れてます。
スマホ版ではメニューを全て隠して、ページ最上部左上のアイコンをタッチすることで呼び出す仕様になっています。
豆知識ですが、あのメニュー、メニューの外側の領域をタッチすることでも消すことができます。
↑こんな感じ。……酷い図だ。
そのうちメニュー出てる間だけちょっと暗くなるようにしようと思ってます。
タブ構成。
せっかくオリジナルのサイトを一から作るからには、普通のブログと違うことがしたい!と考えた末に思いついたのが3タブ構成。
……思いついたときは天才じゃないかと思ったのだけど、冷静に考えると割と邪魔なのでは?
スマホでうちのブログを見に来た人がおすすめ商品をそう何度も覗くのか謎だけど、とりあえず順番ランダムにしときました。ちょくちょく商品追加したり、あとレビュー記事へのリンク貼ったりして、どんどん充実させるつもりです。
流行りの商品を適当に並べるくらいなら、もうオススメ商品欄そのものをコンテンツにしてやろうという。……なんかYouTuberみたいな発想。
「Now」タブはですねー、どうしようかずっと悩んでいて、結局Twitterを貼ることにしました。
本当は「ミニブログ」を作ろうと思っていて、実はそのための設定も用意してあるのですが、とりあえず今回は見送り。
アメーバかどこか忘れましたけど、現在の状況を書く「ひとこと欄」みたいなのをブログ内の機能として置いてある有名人ブログ、あったじゃないですか。
ああいう形にしようかなと。あえて。時代に逆行する感じで。
しかし外部サイト(YouTubeとかAmazonとか)のシェア機能のことを考えると、ツイッターから完全に離れるというのも難しく、とりあえずは残しておきます。
……ただ別にブログにここまで大々的に埋め込む必要もない気がするんですよねー。重くなるし。
ブログ・ミニブログ・ツイッターの3つを運用していくとか、ちょっと模索中です。
あと、PCサイト(3カラム時)のレイアウトはもう少し調整します。具体的には、左側にMenu、右側にNow・Recommend・Adにした方がバランス取れそうですよね。
カテゴリーの再編と、タグの新設。
JUGEMブログに対して私の持っていた不満の1つに、タグ機能をサポートしていないことがありました。
WordPressはタグがあるので、今まで「ひとりごと」で括るしかなかった記事に新たな情報を追加できるようになりました。
とりあえず「Splatoon」「lyrical school」「Nintendo」など、ひとりごと記事によく出てくるテーマをタグとして登録してあります。
で、カテゴリーの方はといえば、今までよりも減らしました。
前は「Surface」みたいな小さなものもカテゴリーにしていましたが、これはタグでいいだろうと。
ということで、大きく4つに。
プロフィールページに解説がありますので、そこから引用。
ひとりごと(ハート)
……いわゆる普通の日記。何となく思ったこと、最近あったこと。かんがえごと(ハート)
……普通の日記よりもう少しまじめなもの、まじめに言いたいこと。ブログ(ダイヤ)
……このブログに関するお知らせなど。メディア・カルチャー(スペード)
……アニメ・ゲーム・音楽・その他コンテンツについての考察的な何か。おすすめレビュー(クローバー)
……主に買ったものの話。いわゆるアフィブログ。
トランプと言いつつ4つ以上あります。
ひとりごと・かんがえごとを厳密に分ける・位置づけすることが難しく、またあまり意味を為さなかったので、この2つは一応カテゴリー分けしてありますが、大きくハートの中に入れることにしました。
ダイヤマークが今後二度と出番がないような気がしますが、
一応、イメージとしては、自作コンテンツにまつわる話をダイヤにしようかと考えています。
たとえば、アプリ作った、とか、曲作った、動画作った、みたいなときに。
……そういうときが来れば。……来る。はず。
あとは、以前のブログでは手を出せなかった、技術ネタみたいなものも、入れていこうかなーと……。htmlの話とか、ずっと避けてたので。
あ、あと、カテゴリーページとタグページでページ送りが機能しない不具合が発生しています。
暫定措置として、カテゴリーとタグのページのみ1ページあたりの表示件数を50件にしています。
わー雑な対応!まるでPokémon GOみたい!
これは8月中に直る予定です。
ひとりごとカテゴリーとか、余裕で50件超えてるんですが、月別アーカイブとか検索とか使って何とか……というところです。月別アーカイブのページ送りはちゃんと機能してます。
今後の予定
今後の作業予定。
・メニュー欄などのレイアウト変更(次回修正予定)
・カテゴリー欄のページ送り(8月後半)
・ミニブログ(優先度:中)
この3つはもう記事内で触れてるので、それ以外に、
・Web拍手の復活(次回修正予定)
コメント欄もあるけど、やっぱり欲しい……かな?
たまに使われてたので、なるべく早めに付けます。具体的には上のレイアウト変更と同時。
・PC閲覧時、検索欄をサイドバーから右上に移動。(次回修正予定)
・スマホ閲覧時、メニューをページ最上部以外からも呼び出せるようにする。(次回修正予定)
現時点でも最低限の仕上がりにはなっているつもりですが、利便性・使い勝手は少しずつ高めていきたいと思ってます。
Windows 10みたいなものです。
・その他不具合の修正(順次)
上のページ送りも含めて、いくつか不具合はあるので、
ただ、今のところ見つかってる不具合の大半ってウィンドウを伸縮させた時のもので、更新すれば治るんですよね。
例1:最初にPC版サイズで読み込んだ後にスマホサイズにウィンドウを縮小させると、メニューアイコンを押してもメニューが開かないことがある。
例2:スマホ版でメニューを開いたままPCサイズに拡大すると、スクロールできなくなる。(次回修正予定)
ぶっちゃけレスポンシブデザインにおけるウィンドウ伸縮時の挙動なんて、開発者以外が気にするものでもないので、まあ、直せたら直します、程度の優先度。
お願い
ここで皆さんにお願いなのですが、
不具合を見つけたらぜひ教えてください。
特にmacとiPhoneユーザーの方!
私の方で動作確認してるのはGoogle Chrome(Windows)・Microsoft Edge(Windows10)・Chrome(Android)だけです。持ってないので。
さすがにFirefoxは互換問題ないと思うし、IEはそもそも捨ててるんですけど、Safariが怖い。
つい昨日も仕事で作ったサイトがSafariで見たら総崩れしてて「早く対応しろよ」っていう圧力をかけられながらもブログ書いてるんですけど、
とにかくSafariは鬼門なのでここ崩れてるよーみたいなのあったらお願いします。できればスクリーンショット付で。
あとは……あれですね、ブログ内リンクが機能してない問題。これはもう仕方ない。記事のURLが変わったので。
最近の記事とかはそれなりに直したのですが、一部リンク切れ起こしてると思います。これも記事タイトルで検索とかそんな感じでお願いします……。
あ、リンク切れのページに飛ぶとトップページと同じものが表示されちゃうのも不具合です。これも早急に直します。
……なんかこうやってまとめてたら不具合ばっかりだな!ごめんなさい。
ただ、ブログとしてはかなり見やすくなったのではないか、と思います。
特にPC版。以前のものは文字小さすぎました。
そして何よりも私の愛着が半端ない。
お仕事で作ったサイトはそこそこ多いですが、自分のためのサイトをちゃんと作ってちゃんと公開するのは久々なので。
何にせよ、ついに独自ドメイン・独自デザインでのブログとなりました。
このブログをたくさんの人に気に入ってもらえるよう、ブログシステム・コンテンツの両面で、これからも頑張っていきたいと思っています。
よろしくお願いします。