読者です 読者をやめる 読者になる 読者になる

悠々自適な日々を目指す

波音に抱かれながら眠りにつくような生活を夢見るブログ

【スマホ版】Proにしたので早速ブログカスタマイズしました

本編に入る前に……。

いつの間にか読者さまが増えていてびっくりしています。いろんな話題でとっちらかっているブログですが、改めてありがとうございます!

ブクマやスターもありがとうございます! そして最近ブコメの確認の仕方を覚えました←
まとめてのお返事で恐縮ですが、お役に立てて嬉しいです!^^*

今後もとっちらかり具合は相変わらずとなりそうですが、お時間のある時にふらりとお立ち寄りいただければ幸いです♪

先日、はてなブログPro契約をえいやっとしてみた記事を書きました。 

そして、念願かなったスマホ版カスタマイズを一通り終えましたのでまとめたいと思います。

といっても、ほとんど先人様のお知恵を拝借したものばかりですw

PC版と同様のカスタマイズを行う

以下の記事にてまとめたカスタマイズと、ほぼ同様のことを行っています。
(CSS等をスマホにも反映した)
参考にさせていただいたサイトも同じです。

ブログ全体の見た目をカスタマイズ

  • ヘッダー(ブログタイトル部分)
  • ヘッダーの下のトグルメニュー
  • 投稿日
  • 本文中のリンクにアンダーラインを引く

以上のカスタマイズを行いました。

*ヘッダーと投稿日

以下の記事を参考にさせていただきました。

tsukuruiroiro.hatenablog.com

*トグルメニュー

以下の記事を参考にさせていただきました。

www.yukihy.com

www.warorince.com

*リンクにアンダーラインを引く

デフォルトでは、本文中にテキストリンクを貼っても見慣れたアンダーラインがありません。
普通のテキストとの見分けがしにくいので、以下のCSSを設定しました。

/*リンクにアンダーラインを引く*/
.entry-content a {
	text-decoration: underline;
}

読者・RSS・Feedly登録ボタンをカスタマイズ

PC版と同様の設定だと見づらさ&押しづらさマックスだったので、スマホに最適化されたデザインにしました。
以下の記事を参考にさせていただきました。

www.yukihy.com

PC版のみ表示されているサイドバーウィジェット「ABOUT」「LINK」をフッターに表示

PC版で設定しているコードをコピーして、「フッター」に貼り付けます。

ただし「ABOUT」については、もともと表示されている「プロフィール」と若干内容がカブっているため、CSSで非表示にします。

※非表示の処理は、Pro版のみOKとのことです。

以下の記事を参考にさせていただきました。

cild.hatenablog.com

※以下のCSSのみ、修正を行っています。

.hatena-module-title{
display:none;
}

   ↓

.profile .hatena-module-title{
display:none;
}

こうすることで、「プロフィール」の見出しのみ非表示するようにしています。

まとめ

ほとんどどころかすべてお知恵の拝借だと、改めて気付かされた記事でした(ノ∀`)
本当にありがとうございます!