むぎろぐ

仕事に行きたくないアラサー会社員の雑記ブログ

はてなブログのスマホのカスタマイズを参考にした記事とともに紹介する

f:id:nmugi:20170715194213j:plain

 どうも、むぎです!

今回はブログについての記事を書いていこうと思います。

 

スマホのデザインをカスタマイズをしたい

先日、はてなブログのテーマを「Naked」に変えました。

関連記事:はてなブログのテーマを「Naked」にしたからカスタマイズを参考にした記事とともに紹介する 

 PC用のカスタマイズは上の記事で僕のブログとほぼ同じようにできると思います。

 

アドセンス広告の掲載位置に関しては以下の記事を参照してください

関連記事:レスポンシブデザインのテーマは難しい!アドセンスの掲載位置を紹介します 

 

「Naked」はレスポンシブデザインのテーマなので、レスポンシブ設定にしていれば問題なのですが...

 

スマホのデザインをカスタマイズをしたいっ!

と思うようになりました。

 

今回はスマホのカスタマイズを参考にした記事とともに紹介しようと思います!

「これからスマホのカスタマイズをしよう」

と考えている方の参考になればうれしいです

 

カスタマイズの紹介

f:id:nmugi:20170715194323j:plain

では、具体的なスマホのデザインのカスタマイズの方法を紹介します。

調べるために参考になった記事はこちら。

shiromatakumi.hatenablog.com

 

僕が以前使っていたテーマ「Brooklyn」を作ってくださったシロマティさんの記事です。

関連記事:はてなブログ初心者に本当におすすめのテーマだった!「Brooklyn」ありがとう! 

いつも参考になる記事をありがとうございます。

 

最初にするカスタマイズ

まず最初にしておいた方がいいカスタマイズです。

「TOPページ」「記事ページ」「フッター」「見出し」などスマホのデザイン全体をおしゃれにすることができます。

 

www.ituore.com

 

こんな素晴らしい記事を書いていただいて本当に感謝です。

マジでおしゃれになります。

これは絶対しておいた方がよいでしょう!

 

SNSシェア・フォローボタンの設置

これも必須でしょう。

好みがあるかもしれませんが僕が参考にした記事はこちらです。

 

SNSシェアボタンの設置

www.ituore.com

 

SNSフォローボタンの設置

www.ituore.com

 

統一感のあるフォローボタンになって、すごくおすすめです!

 

トグルメニュー設置

これも設置しておいて損はないはず!

メニューの設置です

参考にした記事はこちら!

 

www.yukihy.com

 

こちらも有名なゆきひーさんの記事ですね。

現在使っているテーマ「Naked」を作ってくれた方です。

いつもお世話になっております。

 

これも使っている方が多いのですが複合メニューバーの設置という方法もあります。

www.yukihy.com

 

自分でカテゴリーの名前を打ち込んで、URLを入れるのが面倒だ!

という方にはこんな方法もあります。

 

www.ituore.com

 

shunさん、良い仕事し過ぎです(笑)

 

ちなみに僕はなんとなくトグルメニューの方にしました。

 

目次

目次のカスタマイズです。

目次の表示と非表示ができるやつです。

PCのカスタマイズの際はゆきひーさんのものを使用しましたが、スマホのカスタマイズでは以下の記事を参考にしました。

www.yone-himajin.com

 

<追記>やっぱりゆきひーさんの目次のカスタマイズにしました

参考にした記事はこちらです

www.yukihy.com

 

こんなものもあります。

使っている方多いですよね。

www.tsubasa-note.blog

 

パンくずリストの設置

これも忘れずにやっておいた方がよいでしょう。

参考になる記事はこちらです。

bulldra.hatenablog.com

 

以前書いた記事でも紹介していますが、パンくずリストはSEO対策にも効果ありです

関連記事:はてなブログSEO対策!記事のリライト方法を参考にした記事ととともに紹介する 

 

画像のセンタリング

画像をセンタリングする方法です。

PCだと左寄りでもそんなにおかしいことはないかもしれませんがスマホだと中央じゃないとちょっと気になるんですよね。

 

アドセンスも中央寄せにしているので余計に気になるんです。

ということで参考にした記事はこちら!

PCを前提に記事が書いてあるので、スマホの場合はタイトル下にコピペしないといけません。

uriuridayo.hatenablog.com

 

太字を蛍光ペン風にする

太字を蛍光ペン風にするカスタマイズです。

参考にした記事はこちら。

mu2in.hatenablog.com

 

人気記事セレクションの設置

これもけっこう設置している方が多いですよね。

サイト内の回遊率アップのためには欠かせないです!

参考にした記事はこちら!

www.tontonpig.com

 

僕はタイトルと枠の色を変えて使用しています。

おすすめです!

 

カエレバ・ヨメレバのデザインをカスタマイズ

最後に忘れてはいけないのがカエレバ・ヨメレバのデザインのカスタマイズです。

こちらもゆきひーさんの記事を参考にしました。

www.yukihy.com

 

まとめ

今回ははてなブログのスマホのカスタマイズ方法を紹介しました。

ほぼ記事を載せただけですね(笑)

すみません。

でも、本当におすすめの記事ばかりですよ。

 

これからスマホのデザインのカスタマイズをしたいという方の参考になれば嬉しいです。

 

おすすめの記事紹介

他にもブログについてのおすすめの記事を書いています

もしよければ読んで下さい

 

最後まで読んでいただいてありがとうございました。

ではまた!