末っ子の気ままにDiary

日常生活で考えたことなどを日記にしていくブログです

MENU

初心者がブログのデザインをカスタマイズしてみました

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20181009/20181009232535.jpg

皆さんは、ブログのカスタマイズに興味を持ったことはありますか?興味はもったものの、パソコンが苦手だからあきらめたなんて人もおおいのではないでしょうか?私もその一人でした。

1.はじめに

このページは、ブログのデザインのカスタマイズの方法を細かく説明するページではありません。

カスタマイズのやり方が知りたい!という方は、私が参考にさせていただいたページをのせていますので、そちらを参考にしてください!

2.なぜカスタマイズしたのか

最近は、ブログをみるためにパソコンを使う人が少なく、スマートフォンが主になっているようですね。確かに、自分のブログのGoogleアナリティクスを見てみるとアクセスしているほとんどがスマートフォンです。

ということは、せっかく見てもらえるならスマートフォンでの操作を快適にしないといけないと気づきました!また、有料のはてなブログProに変更したことも、ブログのカスタマイズをしようとしたきっかけになりました。

3.どうやってパソコン素人がブログをカスタマイズしたのか

カスタマイズするとはいったものの、私のパソコンのスキルはド素人(笑)

HTML?CSS?なにそれ?衛星放送の種類か何か??ていうくらいのド素人ぶりです。

そこで、私は決めました。

パソコンに詳しい人のブログに頼ろうと!(頼るんかい!(笑))

色々調べてみた結果、こちらのブログがとても分かりやすかったです。ありがとうございました!

hitsuzi.hatenablog.com

 こちらのブログを参考に、スマートフォン版のブログのデザインをカスタマイズしました。

素人なりにHTMLとCSSを解釈してみた

カスタマイズする前にまず私は、HTMLとCSSからわからなかったので、少し調べてみました。しかし、正直、調べてもよくわかりませんでした。

それなら、とりあえず実際にやりながら考えようと思い、やってみることに。

間違っていたらいけないので、参考程度にしてもらいたいのですが「HTMLとCSSを料理に例えるなら、HTMLは食材をどうやってカットして煮るのか焼くのかを指示、CSSはどういう味付けをするのか」といった感じだと私は理解しました。(間違っていたらごめんなさい)

ハンバーガーメニューが作れなかった!

ブロガーさんのカスタマイズ方法を参考にやってみて、素人の私にはどうしてもできないことがありました。それは、ハンバーガーメニューを作ることです。ブログの話してるのに何言ってるのって思うかもしれませんね(笑)ハンバーガーショップのメニューではありません。

ハンバーガーメニューとは、アプリを開くとよくこういうマークが画面の右か左上にあるのをご存知でしょうか?このマークを作りたかったのですが、今の私にはできませんでした。頭が沸騰しそうなくらいがんばったのですが、なぜかできず。

そのため、タイトルの下に、横にスライドできるものを設置することができたので、ここにカテゴリーなどをのせました(これは結構お気に入り)。それがこちら。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20181009/20181009232916.jpg

気づいてくださっている方がいるかもしれませんが、ページを開いた瞬間に項目がちょっと横に動いて、「ここ動きますよー」って動くことに本当に感動しました!これがみたくて、自分のブログを見に行くほど(笑)アクセス数の大半は自分かもしれない。

これを作った後にその下に調子に乗って、おすすめ記事なんかも入れちゃいました。

お問い合わせとプライバシーポリシーがない!

カスタマイズしている中で気づいたのが、スマートフォン版のページにはお問い合わせとプライバシーポリシーがない!ということでした。パソコン版には、作っていたのですがうっかりしていました。実際、スマートフォン版に必要なのかは私にはわかりませんが、あるにこしたことはないのかなと思い、作成してみました!

読者登録ボタンが消えた!

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20181009/20181009232914.jpg

画面左上のハンバーガーメニューが出来なかった際に、HTMLとCSSを削除したのですが、右上の読者登録ボタンもマークがどうしても表示できず、こちらも消してしまいました。すると、記事中にしか読者登録ボタンがないことに気づきました。そしてTOP画面にはどこにも読者登録ボタンがなく焦りました。友達がいないなんて耐えられないと思いました(笑)

そのため、読者登録ボタンを新たに作ることにしました。こちらのブログを参考にさせていただきました。ありがとうございます!

www.notitle-weblog.com

というわけで、何とか読者登録ボタンを召喚することに成功しました!本当に助かりました。

目次の開閉ができるようにしたい!

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20181009/20181009232912.jpg

何度か私のブログに来ていただいた方はご存知かもしれませんが、目次の開閉の仕方を教えてくださいという記事を書いたことがありました。色々とやっている中で、1番最初にご紹介したブログでカスタマイズしてできるようになりました。しかし、ハンバーガーメニューや読者登録ボタンのあたりをいじっているうちになぜかできなくなり、試行錯誤した結果こちらの目次を参考にさせていただくことにしました。

とてもかわいくてたくさん種類もあるので、選ぶのが楽しかったです!ありがとうございました。

kimix.hatenablog.com

4.まとめ

いろいろな方のブログの記事を参考にさせていただいて、やっとの思いでスマートフォン版のカスタマイズができました。この経験で、ブログは人のためになるのだなと思い、自分も人のためになる記事を書かないといけないなと感じました(この記事が人の役に立つかは別として(笑))。

本当に皆さんありがとうございました。