はてなブログモバイル改造一時終了！それよりもはてブロに危機が！？
はじめに
おはようございますかなたです。
本日は昨日休日出勤だったため代休を頂いております。
ひなたも本日までお休みを頂いているため、歯医者さんに行ってきたのですが、隣に隣接している公園に「ばってん城次」が撮影に来ていたようです。
ばってん城次を知らない方はこちら
batten-jyouji.com
それでは話がそれましたが、本日ははてなブログモバイル改造のお話です。
はてなブログモバイル改造休止
以前お話ししていたはてなブログモバイル改造の件
そうだ！はてブロモバイルサイトを改造しよう！ - ひなかな
とりあえず一旦目途がついたのでここらへんでやめておきます。
といいますのも、実装したい機能がどのように実装していいのかわからなくなったためです。
実装したい機能は記事を書いている人を判別して、その書いている人によって「div」の中の記述を変えるというもの。
書いている人を判別するのはカテゴリを書いている人の名前で分けておくことで、カテゴリに特定の名前が含まれているか含まれていないかで判別できるのでは？？
とも思ったのですが、まず「カテゴリの文字をどうやって認識させるよ？」というところにぶち当たりまして・・・(笑)
どなたか「これ実装できるよ！」という方がいらっしゃいましたらご助力いただければと思います。
改造した部分
ヘッダの非表示
私の記事をご覧になってくださっている方の中ではてなブログユーザーは一部分にすぎないため、デフォルトのヘッダはあるだけ邪魔になる可能性があります。
「それならない方がいいんじゃないか？」という認識から消させていただきました。
ヘッダ固定メニュー設置
ヘッダの非表示に伴いまして、新しくヘッダ固定メニューを設置しました。
左側にロゴ代わりとして日本語WEBフォントにエフェクトをかけて設置
右側にもWEBフォントアイコンを設置
アイコンでモーダルウィンドウを表示させてシェアボタンと検索ボックス・読者になるボタンの設置、カテゴリ一覧をプルダウンメニューで設置しました。
これでどこからでも移動が楽になったかな？
プロフィールの非表示
通常ではプロフィール項目が下の方に出てきますが、そもそもデザインが恰好悪い。
そしてしたすぎて誰も見ないし、スクロール量が増えて非常に鬱陶しい・・・。
ということであっさり非表示にさせていただきました。
できることならモーダルウィンドウの中に表示させたいのですが・・・。
冒頭で述べた、記事の執筆者によって内容を変える・・・というのをここで使用したいと思っています。
当ブログは今のところ、わたし「かなた」と嫁の「ひなた」で執筆していますので。
記事ランキングの非表示
これも下の方に最初からくっついてきますが、毎度毎度同じランキングを見て楽しいですか？
全てのページで・・・。
興味ない方もいらっしゃるはずですし、何より読み込みに時間がかかるしスクロール量増えるし記事の並びがめちゃくちゃだし・・・ということで非表示にさせていただきました。
その代わりにHOMEアイコンから人気記事のページ（はてブ）に飛べるように変更
これで少しはあっさりしたのかな？
はてなブログをはじめよう・はてなブログ開発ブログ等のリンク削除
これもデフォルトでついてきますね。
毎度毎度はてなブログをそんなに押さなくても・・・と思ったので削除
回遊率を高めたいのでその観点からも不要と判断しました。
これだけで記事のCTR率が上がってくれるといいなぁ・・・。
フッタの非表示
これもヘッダ同様にいらないのでは・・・？という考えから削除
はてなブログってどうしてこうも「はてなブログです！」って周りに伝えたがるんですかね？
わたしはあまり広げたくないタイプなので・・・以下略
Powerd byの非表示
これもまたはてなブログを強調してますね。
こんなのいらなくないですか？？
もっとさっぱりさせましょうよ！
ということで削除
コメントボックスの削除
はてなブログってコメントボックスの位置がおかしいと思うのは私だけでしょうか？？
下すぎません？
これじゃあ誰もコメントしてくれないよ！！
ということで削除！
コメントボックスを少し上に再配置
上で削除したので、少し上に配置しなおしました。
とはいってもこれでも見づらいかなぁ・・・？
もしかしたらモーダルウィンドウに設置しなおすかもしれません。
ヘッダイメージの削除
ヘッダに表示されている画像のことです。
今のところまだ画像が用意できていないので削除していますが、用意出来次第再度表示させる予定です。
なにせ読み込み時に一瞬画像が移って見栄えが極端に悪いですしね・・・。
記事ページの右下にボタン設置
記事ページ右下、今までページトップボタンがあった位置に新しくクルクル回るアイコンWEBフォントを設置しました！
なぜクルクルにしたかというと、「なんだこれ？」と思って一度タップしてもいたいから。
一度タップしてもらえればどういうものか理解していただけるかなと♪
画像で見るとこの位置です。
モーダルウィンドウ２の設置
ヘッダの固定メニューでもモーダルウィンドウを設置したといいましたが、それとは別のモーダルウィンドウを設置しているので「２」と書きました(笑)
これは、上に書いている記事ページ右下のクルクルアイコンをタップすると表示されます。
このモーダルウィンドウでは記事の目次とシェアボタンなどを表示しております。
この目次はこちらを参考にしました。
nohack-nolife.hatenablog.com
しかし、困ったことにCSSが反映されないのです・・・。
モーダルウィンドウの中はCSSが反映されないことがしばしば・・・。
どなたかお分かりになる方いらっしゃいますか？？
あとは「h3」だけの認識ではなく「h4」も認識させて階層表示できるようにならないかなぁ・・・。
一応ここにあとはカテゴリ判別でプロフィール表示（できたら）させたいと思っています。
コメント欄ももしかしたらここに移動させる・・・かも？
トラックバックの表示
デスクトップ版ではつけていましたが、モバイルでも表示させることに。
いつもお世話になります「id:bulldra」さんのプラグインをお借りしました。
bulldra.hatenablog.com
あわせて読みたいGの導入
こちらでもお世話になります！
「id:bulldra」さんの「あわせて読みたいG」を導入させていただきました。
bulldra.hatenablog.com
自力ではどうにもならない問題が！？
うさもふ (id:dougacc) さんの記事で取り上げられているこちらの問題
www.usamofu.com
私も早速調べてみました。
こちらがモバイル
49・・・
最初調べたときは43だったのでいろいろいじって修正を加えましたがそれでも49・・・
結構自力ではどうにもならないレベルですね・・・。
はてなブログさん早く対応してください・・・。
つぎにデスクトップはこちら
こちらも60・・・
え！？60！？
これは私がいじりすぎてしまったせいなのか最初からこんなものなのか・・・。
パフォーマンス的にはWordPressの方が圧倒的に上のようです。
WordPressを以前運用していた時は90を切らなかった気がするのですが。
これもはてなブログの仕様のせいでしょうか？
せっかくSEOに優れていると周りが薦め始めたところでこのパフォーマンスはちょっといかがなものでしょう・・・。
私も独自ドメインを使用している身ですのでいざとなればよそに引っ越すことも視野に入れなければなりませんね・・・。
さいごに
- はてなブログモバイルを改造しました！
- はてなブログのパフォーマンスが悪化しておりSEO的にまずいことに！？
- モーダルウィンドウ内へのCSSの適応ができない（誰か教えてください・・・）
- カテゴリ判別して「div」内の表示を切り替えれないものか（これも誰かご助言を・・・）
とりあえず真っ先に言えることは・・・
はてなブログさんはやくパフォーマンス向上を図ってください！
じゃないとはてなブログユーザーが散りかねませんよ！
いろんな意味で。
これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装〈Bootstrap・コンテンツファースト・コンポーネント設計〉
posted with カエレバ
松田直樹,後藤賢司,こもりまさあき エムディエヌコーポレーション 2015-03-23
