メリヤス極めます【編み物成長ブログ】

編み物好きのブログです。編んだ作品や勉強など、なにか役に立つ情報をお届けできたら……!

メリヤス極めます

ブログの改善を図る①【ヘッダーデザインとグローバルメニュー設置】

こんにちは、いとまきです。

 

 

今年は例年より早い梅雨入りになりましたね。

 

天気が悪いと頭痛やだるさなど、

体調不良に悩む人もいると思います。

 

わたしも頭痛もちです。

 

編み物などなど、

目を酷使することが多いと特につらいと思います。

 

じぶんに甘めに、

のらりくらりと乗り越えていきたいですね!

 

 

f:id:mackenly:20210522145212j:plain

パソコン音痴なりにがんばっています。

 

こんな頭の痛い時期ですが、

わたしは最近ブログの改良に励んでいます。

 

目の奥が痛いです(´;ω;`)ウッ…

 

今回は、

 

ブログの改善したところ

その中で学んだことを書いてみたいと思います。

 

すでにブログ運営を軌道に乗せている人には

参考にならないでしょう……(笑)

 

この記事は、

 

わたしの勉強ノート的なものと考えて

まとめていきますね!

 

※注意※

この先出てくるHTMLコードやその使い方については、

コードを紹介されている方のブログにいけば紹介されています!

検索でいっぱいでてきますので、

ぜひ、そちらを参照してみてください!(/・ω・)/

 

 

ブログ改善点①ヘッダーのブログタイトル作成

 

 

ここは、ブログにアクセスして

一番最初に目に入る場所ですね。

 

ヘッダーはとりあえず画像を設定して

後でやろう……と放置していました。

 

記事を毎日更新してみて

「楽しくやっていけそう!」と確信したので

 

やっと重い腰を上げてヘッダー改良に

とりかかりました( ˘ω˘ )

 

 

そこで使ったのが「canva」というサイトです。

 

みなさんはすでに使っているかと思いますが

わたしは全く知りませんでした。

 

canvaは無料でグラフィックデザインを作成できるサイトです!

 

ポスターやチラシ、ホームページなどの

ビジネスの用途だけでなく、

 

SNSや動画、Zoomの背景などの用途にも対応しています。

 

canvaさえあれば、

さまざまなグラフィックデザインができますね。

 

 

このサイトでヘッダーの画像を作りました。

 

まず、

 

はてなブログで推奨されている

ヘッダーのサイズが「1000×200px」

 

そんなふうに聞いたので

そのサイズで画像を作成しました。

 

こんな感じです。↓

 

f:id:mackenly:20210612141532j:plain

「やったー!できた!」と喜んだのも束の間……

 

canvaでは、

 

デフォルトで画像や背景、文字フォントなどが

もりだくさんに入っています。

 

わたしは、自分で撮った写真を背景に

テキストを入れて作成しました。

 

そこまで凝っていません(笑)

 

 

そして、

 

はてなブログの編集画面である

ダッシュボード」→「デザイン」→「カスタマイズ」、

 

さらにその中の「ヘッダ」に入ります。

 

下の方にあるHTMLを記述できる欄で

コードを他の方のサイトからコピペして貼りました。

 

コードは検索すると

いろんな方がコピペOKで紹介してくれています。

 

 

……これでヘッダーが完成!と思ったのですが、

画像を無理に引き延ばしたみたいにボケています……

 

正直ここまでで結構疲労感があったのですが、

めちゃくちゃボケが気になるので修正することに。

 

調べてみると、

 

作成する画像のサイズを

もともと大きめにしておくことが大事とのこと。

 

そこでまたcanvaに戻り、

 

「1500×400px」にカスタマイズして

同じデザインの画像を作り直しました。

 

それをさきほどと同じ工程で

ヘッダーに設定したところ、

 

完成しました(*'ω'*)

 

 

ちなみに、背景に使っているアラン模様のニット

わたしが以前編んだニットベストです。

 

アラン模様のウェアは初めてだったので、

結構気に入って着ています( ˘ω˘ )

 

 

ブログ改善点②グローバルメニューの設置

 

 

 

グローバルメニューとは

 

わたしのブログで言えば、ヘッダーの下の

「ホーム」とか「編み物イロイロ」とか書いてあるところです。

 

f:id:mackenly:20210612140901j:plain

赤丸のところ。

 

グローバルメニューがあると

ブログ内の特に興味のある記事を探しやすくなります

 

いままでこれがなかったので、

 

最新の記事をちらっと見て終わり……

という人も多かったのではないでしょうか(笑)

 

 

グローバルメニューを設置するにあたって、

 

まずは記事のカテゴリーを整理する

ところから始めました。

 

本当はサイトマップなるものを作りたかったのですが、

無料のはてなブログでは難しいようだったので諦めました。

 

サイトマップがあれば

そこからいろんな記事に飛ぶことができるので

 

訪問者の方も便利になってよいかなと

思ったのですが……(´;ω;`)ウッ…

 

 

そこで「ダッシュボード」の中の「カテゴリー」で

改めて内容ごとに記事を分けました。

 

そのカテゴリー名と

グローバルメニューを統一させています。

 

そして、またまたHTMLコードを探してきて

さきほどの「ヘッダ」のところにコピペ。

 

それで完成です。

 

わたしのブログのグローバルメニューは、

 

クリックすると

カテゴリーのページに飛ぶようになっています。

 

 

f:id:mackenly:20210522145540j:plain

なにかを調べているとき、この顔になります。

 

 ところで、

 

無料のはてなブログを運営している方は

どのようにグローバルメニューを作成しているのでしょうか?

 

もっと簡単に作成する方法があるのかもしれませんが、

 

わたしはカテゴリーを利用することしか

思いつきませんでした。

 

検索で調べると、ワードプレスなど

有料のブログを運営している人向けの解説が多かったです。

 

ブログの機能を充実させるには、

 

有料のはてなブログProにしたり

ワードプレスに移行したりするのがいいのかもしれませんね( ˘ω˘ )

 

 

ちなみにサイトマップ

無料のはてなブログで作成するには、

 

記事を書く」で

記事内にひたすら記事のタイトルとURLを入れていったり、

 

記事を書く」の右側にあるサイドバーで

「過去記事貼り付け」機能を使ったり。

 

一つの記事として作成することになりそうです。

 

この先ももっと調べていきたいところ。

 

 

まとめ

 

 

今日もここまでお読みいただき

ありがとうございました!

 

編み物とは関係ない話となってしまいました。

 

編み物の成長だけでなく、

ブログ運営での成長もしていきたいと考えています。

 

結果的に、わたし用の勉強ノートとなってしまいましたが、

何か新しいことを知るのはとても楽しいです。

 

このブログの改善に関しては

続きもまた書いていきたいと思っています。

 

また覗いていただけたらうれしいです。

 

 

おわり。