品川で子育てしているSEのゆるゆる芋づる式日記

5歳3歳ボーイズを育てながら、中古マンションを新築そっくりさんでリノベーションしました!一応東大卒なフルタイムワーキングマザーの日常ブログです。

ブログを地味に大幅にカスタマイズしました - スマホの見出し・プロフィール・カテゴリプルダウンメニュー、ほしいものリスト、独自ドメイン

スポンサーリンク

こんにちは。ここ数日の間、実はかなり色々ブログのカスタマイズをしておりました。

やりたかった事

最初に、やりたかった事の概要と状況です。☆はやりたい度合。

1) ブログをもっと、見易く・分かり易くしたい ☆☆☆☆☆
2) ブログのメンテナンスに時間がかからないようにしたい ☆☆☆☆
3) 「ほしいものリスト」作ってみたい ☆☆☆
4) 収益化可能な状態にしておこうかな ☆

1) は前々から気になっていた点が色々あって、今回やろうとしてた事はだいたいできたかな、と思います。

2) は1) とトレードオフになりがちなのですが、、今回気になっていた点は一応クリア。

3) は、このタイミングでかい!って感じですが、先日初めて逆の立場(贈る側)で利用してみて、いいなと思い。。( ̄▽ ̄;)

4) は先々の為自家発電できたらいいかなぁ~と思ったのと半ば好奇心からですが、今かなり心が折れていてます。。

詳細な作業の話の前に、どういう考えで進めたかをまとめてみたいと思います。

ブログの見易さ・分かり易さについての思い・考え

なかなか難しいのですが、、自分が他の方のブログを拝見するときの事を考えてみました。

・「いつも読んでいるブログ」にあると嬉しいもの
  ・時間が無くて記事を読めないうちに次の記事がアップされている事もあるので、前後の記事をたどりやすい、一覧を出しやすい
  ・ブコメしやすい

  → はてなのデフォルトのレイアウトで対応されているので大丈夫かな・・・と判断。

・「初めてのブログ」にあると嬉しいもの
  ・書いている人のプロフィール。個人的にはどんな人なのかなぁ、が気になるので最初に探しています。
  ・検索して行き着いた場合には関連記事。

  → このあたりいろいろどうにかしたいなぁと思っていたところで、今回試行錯誤。

・共通してあると嬉しいもの
  ・読みやすさ
   って簡単じゃないんですが。よく、箇条書きとか段落分けとか言いますが、エッセイ的な文章だと文章だけでグイグイ引きこまれて装飾はむしろいらない、という時もあるし。。そんな文章書いてないけど。
  ・できるだけスッキリ

  → このあたりもどうにかしたいところがあって、こちらも試行錯誤。

カスタマイズについての考え

職業柄言いにくいですが、私はコーディングスキルや知識があまりないので、できるだけ「作りこみ」はし過ぎず、「製品の機能」を活用したいと思っています。

横道ですが、仕事でも、「作りこみ」が多いと継承が難しかったりメンテが大変だったり、バージョンアップのたびにややこしいテスト作業が発生したり、等あるので製品の機能を用いるのを優先するようにしています。

以上、「考え」編でした。
以下、実際にやったことです。

スマホ版の見出しと目次の修正

ちょこっと見易くしました。
(Before画像)

(After画像)

実は、PC版では去年の5月位に見出しのレイアウトは↑のような形で変えていたのですがスマホ版は変えそびれてズルズル現在に至ってしまいました・・・。やってる人から見るとまだやったんかい!という感じですね。。

ブログはスマホから閲覧される方の方が多いので早くやりたい~と思ってたのですが。

やった事は、既にPC版に貼っていたコードをスマホ版に添付したのみです。

PC版の時はこちらを参考にさせていただきました。ありがとうございます。
www.notitle-weblog.com

スマホ版のプロフィール欄から詳細プロフィールに飛べるようにした。

1) まずは、プロフィール用の記事を見直しました。
www.tonarinotororodesu.tokyo
その他にも、ブログの冒頭に添えられる一文とかプロフィール周り全体を見直し、PC版のプロフィール欄も修正。

2) そしてスマホ版プロフィール欄修正
(画像) Before(下)/After(上) です。文面はこの後また変えていますが。。

ブログの閲覧はPCからよりスマホからの方が多いので、スマホからも詳細プロフィール飛べたらいいかなぁと思ったのですが、デフォルトだといじれず。。

そこで、デフォルトのプロフィールは表示されないようにした上で、ゴリゴリとコードを追加しました。

といっても、例によって他の方のブログを参考にさせていただきました。ありがとうございます。
https://www.d-3.site/entry/2017/06/25/180000www.d-3.site

実はこの過程で"PRO"の表示がうまくできなくなったりなのですが、まいっかとあまり頑張りませんでした。。

スマホ版にカテゴリー表示用のプルダウンメニューをつけた/グローバルメニューをやめた。。

カテゴリーについてはずっと悩んでおりまして。

昨年5月に一念発起してカテゴリを整理し、その際は以下のような「階層構造」にしました。
(イメージ)
A >a1, a2, ,
B >b1,b2, ,

そして「グローバルメニュー」をPC上部・スマホ下部に設置。見た目もいいし、ブログ内をたどりやすいかなと。

ただその後、ブログの内容がどんどん散らかって参りまして。。

カテゴリもどこにどうしたらみたいな感じで、グローバルメニューにも反映できず「うーん」となっていました。。

で、悩んだ末に「階層構造」というより「タグ」っぽい感じの方が今後のカテゴリの増殖に対応しやすいしピンポイントな話題も辿りやすいかな?と考えまして、そんな感じにカテゴリを大きく修正しました。

そして、それに合わせてグローバルメニューに未練を抱きつつやめる事にし、PC版はサイドバーに「カテゴリ」を追加し、スマホ版はカテゴリ用のプルダウンメニューをつける事にしました。初見の方が類似の話題に行きやすいかなと。
(画像)

プルダウンメニューについてはこちらのブログを参考にさせていただきました。1個1個手入力ではなく、動的に自動生成されるところが素晴らしい!と思います。
www.ituore.com

「関連記事」を外してみた

初めてブログを読む方が参考にするところかな、という事で悩んだのですが。

はてなの「関連記事」モジュールだと微妙に関連していない気もし。。

自分でブログの末尾に追記したもんかな、と考え中です。やっぱり厳しかったら復活するかもです。

ほしいものリスト・お問い合わせフォーム

ほしいものリスト

作っちゃいました。ただ、意外と思いつかず・・・すぐに思い浮かんだのは台所用スポンジとかしょうゆとか。もうちょい華やかなものを考えよう。

お問い合わせフォーム
先々の為あった方がいいのかなと。

独自ドメイン取得・変更

これも先々の為・・・でしたが結構やる事多かった。
こちらの記事を参考にさせていただきました。(類似の記事は多々あったのですが、特に御親切だったと思います。)
www.mutant-tetsu.com

ポイントはDNS設定後反映まで結構時間がかかるというところ。1時間位では変わらず、6時間後に見たら反映されていました。
(画像:はてな側の設定変更前に新URLにアクセスすると、こんな画面になりました。)
f:id:tonarino_tororo_desu:20180303110941p:plain

※ 旧URL→新URLにはリダイレクトされるので、引用いただいた方が書き換えいただく必要はありません。

システム的な観点ではこの変更が一番大きい気もするのですが、ユーザーさん的には特に・・・な感じですかね( ̄▽ ̄;)

https対応もした方がよさそうなのですが、はてなさんが対応予定という事でお待ちしております。

今回変えたものも、先々ブログの行く末とともにまた変えたりやめたりかもしれませんが、、いったん、これで心残りは無い・・・かな?