参謀ママのヒミツ基地

子育てが苦手なママ・パパのためのブログ。よければゆっくりしていってね。

初心者のブログカスタマイズ#1 はてなブログでオシャレなブログを作る

f:id:me3bo:20220220003319p:plain

こんにちは!

参謀ママ “みー” です!

 

今まで私は、はてなブログ無料版を使って人生初のブログを運営しておりました。

 

ネットの事もブログの事もてんで素人な私。

それでも何だかブログは楽しい。

 

そしてだんだん、デザインやユーザビリティに凝ってみたくなり、はてなブログproをはじめてみました。それも新アカウントでイチからスタートしています。

 

…が、しかーし!

 

早速ブログのトップページのヘッダー画像設定で手こずっていま~す!(ぴえん)

 

そう、何を隠そう、私は…

\ ITリテラシーゼロ人間! /

 

もしこの経験が、私と同じ様にブログやネットデザイン初心者の方がブログを始められる際の参考になればいいな、とこの手こずりログを記録しておこうと思います。

 

 

1.まずはデザインテーマをインストール

このブログはこちらのデザインテーマを使っています

今回、ブログのデザインテーマとして、utataneclubさんが作成下さった「JOURNAL.」というテーマをインストールさせて頂きました。(utataneclubさん、ありがとうございます♡)

 

mooi.hatenablog.jp

 

デザインテーマ?

インストール??

なにそれ?どうやんの…?

 

…と思われたそこのあなた!

 

大丈夫ですっっ!!

私も最初そうでした(笑)

 

デザインテーマのインストールは死ぬほど簡単(安心)。

かつ、何度でも違うデザインテーマに変更が可能です(少なくとも私が見たものは全て無料でした)。

 

デザインテーマとは?

はてなブログでは、初心者の方でも超簡単に好きなブログデザインに出来る様に、色んなテンプレート(=「デザインテーマ」と呼びます)が用意されています。

 

もしこのテンプレートが無かったら、HTMLやCSSなどの知識・技術を駆使して自分のブログをカスタマイズしないといけないんです…(遠い目)

 

私は前回のブログで初心者のくせにネットの情報を頼りにHTMLやCSSのコードをコピペしまくって使っていたら、最終的に管理できなくなってしまった、という経験があります…(苦笑)

 

そうならない為にも、ITにお詳しい方々が素敵なテンプレートをたっくさん用意して下さっているんです…めっちゃありがたい…(号泣)

 

f:id:me3bo:20220129233611p:plain

引用:はてなブログ ヘルプページより

 

イメージとしてはスマホアプリLINEの「着せかえ」機能と一緒です。

 

「デザインストア」で好みのテーマを探して、インストールボタンをポチッとするだけ。これだけで簡単にオシャレなブログが出来上がります♪

 

 

2.レスポンシブデザイン設定も順調に出来ました

レスポンシブデザインとは、PCで設定したデザインが、表示画面の小さなスマホで見た時にもきちんと自動で反映される様になる設定です。

 

デザインテーマをインストールする時は「レスポンシブデザイン」に対応しているテーマを選択しておくと、とっても簡単です!

 

こちらも簡単に、自分のブログの管理画面から出来ました♪

 

デザイン設定 ▷ スマートフォン ▷ 詳細設定 ▷ 「レスポンシブデザイン」にチェックを入れる!

 

これで、スマホでこのブログを見た時も「JOURNAL.」デザインに…♪

 

おっけーぃ♡順調~♡

 

 

3.ヘッダー画像の設定に苦戦中…!

お絵描きアプリ「ibisPaint」はやや使えるようになってきました

そして、今はヘッダー画像の設定に大苦戦中です…(げっそり)

 

なんやったんや!さっきの

「おっけーぃ♡順調~♡」は…(涙)

 

まずはこの日の為に、スマホの「ibisPaint(アイビスペイント)」(無料で使えます♪)というお絵描きアプリでちまちま必死こいて描いておいたアイコンたちの登場。

 

  \ じゃじゃ~~ん /

f:id:me3bo:20220129211031j:plain

アイビスペイントで自作しました。必死のパッチよ。

 

私、イラストを描くのは好きなんですが、なんせITリテラシーゼロ人間。

デジタル画面上でイラストなんて勿論描いたことない、ドシロートです。

 

アイビスペイントも使い慣れるまでに時間がかかりましたが、これくらいのイラストであれば何とか描けるまでに成長しました…(ぜぇ…はぁ…)

 

何とかこれをブログデザインに使いたいなぁ~、なんて。

 

グラフィックデザインツール「CANVA」で加工

はてな推奨のヘッダーサイズは、幅1000×高さ200px とのこと。

(ピクセルって何よ…ってレベルなんですけどね…私)

 

この推奨サイズの大きさにさっきのイラストを配置する為、「CANVA(キャンバ)」というデザインツールを使ってみました(こちらも無料で使えます♪)。

 

1000×200pxで設定した枠の中に、ええ感じに作った画像たちを配置していきます。

 

f:id:me3bo:20220129191738p:plain

画像背景が白色なので分かりにくいですが、実際はかなり横長(幅1000×高200)の画像です。タイトル左側に表示されるのを狙ってこの配置。


た、たのすぃ・・・♡

自分が一生懸命描いたイラストがこんな風にヘッダー画像にするのが夢やったんよな…。

 

と、調子こいていたのも束の間…!!

 

実際にこのCANVAで作ったヘッダー画像をはてなブログに埋め込んでみても、

思っている通りの場所にイラストが配置されない…。

ブログタイトルとイラストが干渉して、イラストが見えねぇんだが…(号泣)。

(※呆然としており、失敗例をスクショ撮り忘れました…すみません…)

 

気合いで調整の巻

ってことで、めちゃめちゃ微調整を重ねます。

 

f:id:me3bo:20220129200321p:plain

テイク2:タイトル上に表示されるのを狙ってみる

➡ 何故か画面まん中に表示されない…。絶妙に中心からズレてる…。なんで…?さらにはレスポンシブデザインを有効にしているのに、スマホでは何にも見えない…。なして…??

 

f:id:me3bo:20220129201626p:plain

テイク3:それをさらに寄せてみる

➡同じくNG…。なぜに…?

 

f:id:me3bo:20220129194124p:plain

テイク4:初心に帰り、タイトル左に表示されるようにちっちゃくしてみる

➡何とかPC版では表示されていそう…?しかしスマホ版では全く見えない…。ほわっと、れすぽんしぶ…??

 

f:id:me3bo:20220130014907p:plain

テイク5:ボウリングの残り方で一番嫌な配置で、ブログタイトルを挟む作戦

➡・・・。

 

はい、もうここで力尽きました・・・(げっそり)

 

たぶん2時間くらいはヘッダー画像でわちゃわちゃしていました…。

 

まん中に表示されてないけど、テイク2で作成したヘッダー画像を一旦設定しておきます。。。(くやしぃぃ…)

一旦、ヘッダー画像の設定は保留にしました…。解決策が分かれば、また追記することにします…!

 

4.まとめ:いきなり完璧を目指さない

はい、ということで。

 

ITリテラシーゼロのワーママがブログをおしゃれにデザインしてみようとした結果、奇しくも「ヘッダー画像の設定で鬼つまづいた」というデータが取れました(笑)


めっちゃ序盤でこのつまづき様…ちょっと心配になってきました(苦笑)

でも、よくよくブログを見てみたら、デザインテーマの設定だけでもすっごくオシャレで洗練されてるやん!これで十分やん!と冷静になってきました。(改めて感謝です♡)

 

いきなり完璧を目指さなくてもいいじゃない♪

できることからでいいじゃない♪

また明日があるじゃない♪

 

ブログのデザインはぼちぼちやっていけたらいいな、と思います♪

 

 

参謀ママ、みーでした!

それではまた!