ライターアテナミの頭の中

ライターのお役立ち情報、転職活動、英語学習お役立ちコラムを掲載中 海外在住生活について書いています

はてなProのカスタマイズまとめ(PC表示、スマホ表示)

はてなProのカスタマイズを行なったので備忘録も兼ねてまとめました!

まさかのPC表示とスマホ表示を別々のデザインにカスタマイズしてしまいました。

PC表示

WordPressカスタマイズの影響でどうしてもグローバルナビをつけたかったため、

いい感じのグローバルナビを搭載しているテンプレートを探しました。

どうせならスッキリシンプルなやつがいいなー

とか

SNSボタンがオシャレなのがいいなー

とか

どうせならスマホにもグローバルナビつけたいー

とか

わがままを言いながら探してたどり着いたのが

シロマティ (id:shiromatakumi)さんのBrooklyn

 

shiromatakumi.hatenablog.com

しかもカスタマイズまでとっても丁寧に記載して頂いております。感謝!

シロマティさん、プロなのかな。

はてなブログのカスマイズ記事がかなり充実していたので、

またゆっくりと読んでみようと思います。

とはいえ、私の育児カテゴリーの読者さんは8割以上がスマホ閲覧のため、

自己満足なのですが・・・・。

一回、WordPressを扱ってしまうとwebデザインや使い勝手のハードルが上がります。

追加で入れたのが関連記事表示

ページビュー数をアップさせるための必須アイテムをどうしても入れたかった!

ので、探しました。

shisuhさんの関連ページをはてなブログで設定する方法

corp.shisuh.com

テキストでしか表示が出来ないですが、これでバッチリ関連記事が投稿記事下にでます!

WordPressだったら簡単に画像表示してくれるプラグインがあるのに・・・

(追記:ちゃんとアイキャッチ画像が表示されていました!すみません!)

はてなブログだとHTMLやJAVAスクリプトの設定をせねばならず、

結構カスタマイズのハードルが高いです。

スマホ表示

Brooklynはスマホ表示も対応しているので、当初はそのまま使用する予定だったのですが、

はてなブックマークのアイコンやスター欄が結構大きくて、

記事と記事の間に空間ができてしまいます。

私は記事を詰め詰めにして、スマホワンスクロール中の記事数を増やしたかったので、

泣く泣く違うデザインにすることに。

とはいえ、色々なテンプレートを見たのですが、

正直、スマホ表示でデフォルトのものを超えるものってなかなか無いのです。

そこでようやく見つけたのが、

shun (id:shun_prog0929)さんのスマホ表示カスタマイズ

はてなブログスマホデザインを一瞬でおしゃれにカスタマイズする方法

www.ituore.com

ありがとうございますーーーー!!!

シンプルーーーー見えやすいーーーー

色々な余計な表示を消しまくれるーーーー

しかも更に複雑なカスタマイズ方法も教示している。助かります!

色や文字の大きさはもちろんのこと、段落の装飾など。

ロゴも新たに作りました

前回はSTORE.jpで作ったのですが、育児用の良いロゴが見つからなかったので、

再検索をしました。

そこでたどり着いたのが

寒クマ (id:hatarakitakunaingo)さんのこちらの記事

一瞬でロゴが作れる『squarespace』ってサイトが面白い

www.lazypolarbear.com

 

logo.squarespace.com

バラエティ豊かでした。かなりジャンルも幅広い印象!

ここでまさかのBabyロゴを発見し、使わせていただきました。

ようやくはてなブログ開設

結局、はてなブログも結構カスタマイズすることになりました。

新しく開設したブログはこちらです↓どうぞ一回見に来てください♩

切迫早産~育児~妊活記録

atenami.hatenablog.com

他の方のweb作成方法も載っています

ぜひ参考にしてみてください⇩

とってもいろいろな情報があります♪