はてなブログ無料版を使用中のブログ初心者の皆さま、こんなことを思ったことはありませんか？
- 有料ブログみたいに、ページ上部に固定されたお洒落なグローバルメニューが設置できたら良いのに
- ヘッダー下におすすめ記事をいくつか表示したいな
- ひたすらスクロールしなくても一瞬でページ上部まで戻れるボタンがあったら…
それ、全部叶います！
ちなみに、今回ご紹介する方法で3つのカスタマイズをした場合、PCやスマホの横置など、横幅が広い端末ではこんな風 ↓ に表示され、
スマホで普通に見る場合にはこんな風 ↓ に表示されます。
HOMEだけ色が違うのは、カーソルを置いたりタップした時に色が変わる仕様になっているためです。
どうでしょう、サイト自体がとても見やすくスッキリとしていませんか(*´꒳`*)？
この記事を読んで実践すれば、誰でも簡単にブログをカスタマイズ出来ます。
最後までお付き合い頂ければ幸いです♪
はてなブログ無料版でブログをもっと自由にカスタマイズしたい！
私は「はてなブログ無料版」を使い、約1ヶ月前から雑記ブログサイトを運営しています。
正直これまで他の人のブログをじっくり読んだことも無ければブログデザイン（WEBデザイン）にも然程興味を持たずに生きてきましたが、自分がブログを書くようになってからは様々なデザインや機能が目に入るようになり、「自分のブログにも取り入れたい！」という衝動が沸き起こるようになりました。
とは言え、超ド素人のブログ初心者である私がHTMLやCSSのコードなんて書けるはずもなく、どうしたものか… と考えあぐねていた時、Google検索からあるページに辿り着き、コードをコピペするだけで様々な機能を追加できる方法を知りました。
その方法とは、ページに記載されているコードをコピーし、自分のサイトの編集ページに貼り付けるだけというとても簡単なもの！
正直、英語だらけの訳の分からない文字列（コード）をコピペするだけで本当に新機能が追加されるのか、その仕組みや原理がさっぱり分からず半信半疑でした。
が、実際にコピペし、解説を読みながらコードに編集を加えていくと、本当に簡単に欲しかった機能が追加されていき感動…！！ まるで魔法のようでした！
新たな機能が追加されるだけでサイトデザインのクオリティーや利便性が大幅にブラッシュアップされた気がして、かなりモチベーションが上がります！
そこで今回は、WEBデザインの知識もない、コードも書けない超ブログ初心者の私が
- 上部固定＆スライド式のグローバルメニューを設置し
- ヘッダー下におすすめ記事を表示させ
- 画面右下に上に戻るボタンを追加する
という願望を全て叶えるに至った5つの記事を紹介させて頂きます。
さすがにコードをまるっとコピーして我が物顔で転載するのはどうなのかと思うので、実際に私が参考にさせて頂いた記事の紹介までに留めておきますね。
実はこの5つの記事に辿り着くまでに
- 色々と検索ワードを変えながらGoogleで有益な情報を探し、一つ一つページを開いてはコードをコピペして試してみたけど上手く機能しない…
- コードを貼ったは良いけれど、解説が少なすぎて編集が上手くできず断念…
なんてことがあったので、
- きちんと機能する正しいコードが記載されていて
- 解説がわかりやすく
- 画像付きで視覚的にも理解しやすい
記事を厳選して紹介できるのは私としても謎の達成感があり嬉しいです。
むしろ、このまとめ情報は色々と検索する前に私が知りたかった…！！
もうすでにこれらの機能を設置している方は別として、これからブログデザインを整えたり利便性をUPさせたいと考えている方には是非とも読んで頂きたい内容になっています。
私の書いた記事ではありませんが（おい！）、どの記事も素晴らしい指南書だと思っておりますので、一つの例として参考にしてみて下さいね。
はてなブログ無料版でも使えるカスタマイズ3選
それではさっそく、はてなブログ無料版の3つのカスタマイズ方法を紹介していきます。
各リンクから記事に飛べますので、好きなページを開いてみて下さいね(｡･ω･｡)
★上部固定＆スライド式の「グローバルメニュー」を設置する方法
グローバルメニューの作成に関しては、シンプルライフナビさんが公開している以下の3つの記事を参考にさせて頂きました。
説明がとても分かりやすく、実際にコードを貼って編集する上でも特に悩んだり迷ったりすることなくサクサク進められました。
まずはこちら ↓ のグローバルメニュー作成記事に書かれていることを実践し、
次にこちら ↓ の上部に固定する記事の内容を実践すると良いと思います。
また、グローバルメニューにアイコンを表示させたい場合には、こちら ↓ のページも併せて参照してみて下さい。
はてなブログで使えるアイコン一覧が見れて面白いですよ♪
★ヘッダー下に「おすすめ記事」を表示させる方法
ヘッダー下におすすめ記事を表示させる方法に関しては、こちら ↓ のバンビさんの記事を参考にしています。
文章解説だけでなくコード内にも分かりやすい説明が入っているため、カラーやサイズを編集する時にとても助かりました。
おすすめ記事に表示する画像のURLを取得する方法に関しては、はてなブログMediaヘルプセンターが公開しているこちら ↓ の記事が参考になると思います。
「はてなフォトライフ」にアップロードした画像のURLをコピーしたい – はてなブログMediaヘルプセンター (zendesk.com)
カラー編集の際にはこちら ↓ のページをご参照下さい。
WEB色見本 原色大辞典 - HTMLカラーコード (colordic.org)
また、デフォルトのおすすめ記事表示は4つですが、自分でコピペしてコードを増やすことで記事表示を増やすこともできます。
私は調子に乗って6個まで増やしました。笑
★画面右下に「上に戻るボタン」を追加する方法
上に戻るボタンの作成では、先ほど紹介した「グローバルメニュー」と同じくシンプルライフナビさんの記事を参考にしています。
ボタンのカラー・サイズ・表示位置などの編集方法も解説されており、とてもわかりやすく作業しやすかったです。
はてなブログ無料版のトップページは（デザインにもよりますが）記事がズラーっと縦に並び、途中で上部に戻りたくなってもひたすら上にスクロールするしかないと思っていました。
ですが、このボタンを追加してからはポチっと押すだけでスクロールの手間がなくなり、一瞬でページトップに戻れ地味に喜んでいます。笑
まとめ
ここまで、
- 上部固定＆スライド式の「グローバルメニュー」を設置する方法
- ヘッダー下に「おすすめ記事」を表示させる方法
- 画面右下に「上に戻るボタン」を追加する方法
の記事と関連ページを紹介して参りました。
何度も言いますが、私は約1ヶ月前にブログを始めたばかりの超ド素人で、HTMLやCSSのコードなんて全く触れたこともないただのブログ初心者です。
そんな私でも、英語と記号だらけの文字列の圧に耐え、見よう見まねで実際にやってみた結果、きちんと欲しかった結果が得られ、「コードって面白い！ 学んでみたい！」と思えるまでになりました。
岡崎体育さんの歌で「キミの冒険」というポケモンの主題歌があるのですが、「見たことない、やったことないを恐れないで」という歌詞はまさにその通りで、興味はあるけどやったことがない、分からないからやらない、というのは成長の機会を逃しておりとても勿体ないことだと思います。
失敗してもいいから、まずはやってみる。これに尽きます。
カスタマイズは一見難しく見えがちですが（実際難しいのですが）、その一番難しい「コードを書く」という作業を代わりにしてくれている方々がいて、私たち素人はそのコードをコピーするだけで使えてしまうというなんともありがたい現実がここにあります。
ありがたく感謝して使わせて頂きましょう٩(๑❛ᴗ❛๑)
最後になりますが、シンプルライフナビ様、バンビ様、有益で分かりやすい記事を執筆・公開して下さりありがとうございます。
ここまで読んで下さった皆さまにも、心から感謝申し上げます。
ブログを始めたばかりの初心者の皆さま、ブログカスタマイズを楽しみ、これからのブロガーライフをともに充実させていきましょう♪
ありがとうございました(๑˃̵ᴗ˂̵)b
※本ページには一部広告が含まれます。
