白黒地帯

ゲームとか色々、Twitterに書ききれないことなど。

ブログテーマ変更しました&はてなブログでスマホ閲覧時にトップからカテゴリ一覧に飛べるようにするあれこれ

タイトルの通り…というか見ての通りブログテーマ変更しました。
Ingressiveっていうテーマですめちゃかっこいい。
blog.hatena.ne.jp
このブログは永遠にダークテーマから離れられない運命なので(※文字色)ダークテーマありがたいです。

知らんがなって話かもしれないですが
今回テーマ変更したのは、スマホからの見た目がイマイチだったからです。
というか多分レスポンシブ対応してないテーマだったのに無理やりスマホでも使用する設定にしてましたね。
個人的には別にwebサイトがスマホに合わせんでええやん?派なので気に入ってたんですが
なんだかサイドバー上の広告がタイトルと記事上部に思いっきりかぶさるようになっていて流石に気になったので変更しました。

で、変更したところ…
今レスポンシブデザインだとサイドバーのコンテンツをページの一番下に持ってくるんですね。
「サイド」バーじゃないじゃん!あとページの記事ズラーッて並んでるの全部見てくれる人いないよ!
個人的に、サイドバーにあるもので「カテゴリ一覧」は重視しています。
まず最新順で読もうって人あんまりいないんじゃないかと。
カテゴリからなんか自分の知ってるコンテンツ見つけて見てみようかな~ってのが大事だと思います。

なんとかスマホからの閲覧者がすぐカテゴリ一一覧を見れるようにならないかな…
ということで、このブログではタイトル下のところに「▼カテゴリ一覧はこちら」のリンクを貼っております。
見えない?では多分PCから見ていますね!ちょこっとブラウザの幅を縮めてください。
多分出てきます。
一応これをクリックするとぴょーんと一番下に飛んで、だいたいカテゴリ一覧のところにいけます。だいたい。

以下これのやり方を一応解説しますが、筆者がwebクソ雑魚な上わりと投げやり気味対応なのでちゃんと分かる人にはあまりに稚拙かもしれません。

これどうしたのって言うと、ものすごく原始的にアンカー貼ってるだけです。
ただし、アンカーを貼るのはサイドバーの「プロフィール」のところです。
いやこれフッタに貼ればいいのかとか地味に苦労しましたよ(?)
あとリンクの方も、そういえばブログ説明のところにhtmlタグ貼れないわとか思い出したり…

一応手順としては
はてなブログ管理画面>デザイン>詳細設定(スパナアイコン)>サイドバー>プロフィール>編集>ブログの説明
のところに

<a name="profile"></a>

っとaタグ貼って
同じデザインの詳細設定のところの
ヘッダ>タイトル下

<a href="#profile">▼カテゴリー一覧はこちら</a>

にリンクをペタッと貼るだけです。
カテゴリーに飛んでないじゃん!という。
でもプロフィールもカテゴリーも同じサイドバーコンテンツなので、少なくともページをズルーッと送るよりは楽でしょう。

まとめ

なんか巷で一般的らしいカテゴリを選べるプルダウンを生成javascript、なぜかプルダウンは表示されるけどカテゴリ(内容)が空になってダメだったんですよね。
多分javascriptでカテゴリ一覧をクロールするのに失敗しているようですが、そこを調査して直せる気概はないのでした。
あとリンクとアンカーをどこに貼るか問題。Proじゃないと自分で書き込めるところとそうじゃないところが複雑で、なぜかレスポンシブにしてるのにスマホのフッタに書き込もうとしてたり…

カテゴリ一覧リンクも地味にレスポンシブ対応したり、ブログトップに記事ズラーじゃなくて一覧表示したり、他もいろいろカスタマイズしてなかなか楽しい感じでした。
でもブログトップに来る人いるかな…だいたい検索で引っかかってるんじゃないかな、うん…