【はてなブログカスタマイズ*スマホ版】参考にさせていただいた記事

f:id:oomirinaoo:20151227183331j:plain

はてなブログpro にしてから 試行錯誤しつつ、カスタマイズしてきました。

なるべく読みやすく、スッキリしたデザイン、眼に優しく、をモットーに。

はてなブログは突き詰めていくとオリジナル感が出てくるのでカスタマイズし甲斐があります?

 

ブログを始めて半年が経過し、まとめをしていこうと思います。 

私自身は あまり詳しくないので、コードの入手は先輩方のブログを参考にさせていただきました。

ありがとうございます。

 

 ◆◆まずはトップ画をカスタマイズ

qusuriya.hatenablog.com

こちらの記事が わかりやすいです。

 

◆◆画像はこちらから入手

?有名な Fotolia

Fotolia

 特徴は

  • 他の写真サイトと比較しても値段が安め
  • 写真やイラストが豊富
  • クリエイターとして販売もできるので主婦のお小遣い稼ぎにはいいかも?

 

?無料の ぱくたそ

 

◆◆カテゴリカスタマイズ第一弾

【プルダウンメニュー設置】

はてなブログPC版はカテゴリ一覧が表示されますがスマホ版ではありません。

ということで、訪問してくださった方の利便性を考え、カテゴリ一覧が表示されるプルダウンメニューを設置しました。(ブログ開始3ヶ月程は利用していましたが、現在は変更しています)

jp.kumi-log.com

こちらはシンプルで気軽に設置しやすいと思います❕

 

◆◆カテゴリカスタマイズ第二弾

【トグルメニューを設置】

現在はこちらのトグルメニューに変更しています。

www.warorince.co

ヘッダのMENUを押すと 下にビロンて出てくるやつ。

こちら(2分割)にしたところ、1画面でカテゴリーが表示されるのでスッキリしました。

当ブログではカテゴリー名の前にWebフォントを表示させています。

          ? 

◆◆はてなブログで使えるWebフォント

shirokai.hatenablog.com

こちらのアイコンだと読み込みが早いです◎

 

◆◆シェアボタン設置 

daipanman.hatenablog.com

こちらも動作が軽いのでストレスなく表示されます。

シンプルなデザインでお気に入りです?

コードもとても細かく記載されていてわかりやすいです。

 

 ◆◆スマホ版ページ下部を非表示に

chipspd.hatenadiary.jp

矛盾しているかもしれませんが、恥ずかしいので私はプロフィール欄も非表示にしています。ブログの説明をプロローグとトップ画に記載しているので、それだけで満足しちゃってます。

 

◆◆多くの方が参考にされているブログです

www.yukihy.com

カスタマイズされた方なら、どなたでもご存じではないでしょうか。

ゆきひーさんのブログは とてもわかりやすいです!

 

 

?今の時代、スマホからの閲覧が ほとんどなので、スマホ版を中心にカスタマイズしてきました。

PC版も そろそろ手をつけなければ...?

 

Sponsored Link

Sponsored Link