南アジアで子育て

夫の赴任に伴い、バングラデシュで1歳児を連れて生活。一人暮らし妊婦生活、東京での娘との二人暮らしを経て渡航。気づいたこと調べたこと色々。

“南アジアで子育て”

CSS超初心者・はてなブログ「Undershirts」のカスタマイズしたことまとめ

f:id:chinamk:20190908163401p:plain

カスタマイズ超初心者が、はてなブログデザインをリニューアルしてみました

カスタマイズとは・・?CSSとは・・?というきちんと勉強したことのない私でも、なんとか「こんなもんかな」というあたりまでできたので、参考になる方がいるのか全くわかりませんが、記録しておきたいと思います。

 

はてなブログ・デザインテーマ:UnderShirt - テーマ ストア

レスポンシブ対応なので、スマホ表示も自動で調整してくれます。トップページを記事一覧表示(カードみたいに)にするには、はてなPro(有料版)への加入が必要とのこと・・今回はPro版でのカスタマイズのため、一部無料版では非対応のものがあるかもしれません。

スポンサーリンク

 

 

試作用ブログを作成する

はてなブログProでは、1アカウントにつき10個のブログを作成することができます。無料版でも複数作成可能。CSSを試すために、試作用ブログを作成しました。

 

テーマカラーを決める

以前はテーマカラーを「明るい緑」にしていましたが、今回は「落ち着いた、ちょっとくすんだ北欧ぽい緑」に変更しました。

世界の伝統色 洋色大辞典 - Traditional Colors of World

こちらのサイトは、色に名前がつけられていて、イメージがしやすいです。

 

サイトには一色だけではなく、合計4色くらいの構成になるように・・と書かれているサイトもたくさんありました。おしゃれな色構成にしたい・・というのは、こちらで探せました

www.canva.com

カフェをイメージした4色」とか、「トロピカルな感じの4色」とか色々あるので、サイトのテーマに合わせた配色が選べます。カラーコードも記載されているので、この中から好きな配色パターンを選び、そのまま適用できる。

 

グローバルメニューを作る

サイトの上部にある、カテゴリ一覧表示。

f:id:chinamk:20190908150032p:plain

これまでは、PCでは横一列・スマホでは2つ×3列で表示されるようにしていました。が、今回はスマホ画面では横スクロールでメニューが見られるように変更。

CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ - Yukihy Life

レスポンシブ」という部分のCSSを参考にしました。

自分で変更した点は、

  • 背景色→このブログのテーマカラーに変更
  • メニューの横幅→1000pxから800pxに変更。1000のままだと、メニューが左に寄ってしまったため。750に変更すると、全てのカテゴリが表示されなかったので、ちょうどいい800pxに。

デメリットは、サイトでも書かれている通り、「スマホだとスクロールに気づかれない可能性がある」ということ・・気づいてもらえますように・・!

 

グローバルメニューのマウスオーバー時に下線がスーッと伸びる効果を追加

【CSSコピペ】カーソルを合わせると下線がスーッて伸びるアニメーションカスタマイズ - オークニズム

こんなことも簡単にできるとは・・・コードの内容はよくわからないままでも、コピペしたものがきちんと動作するとすごく嬉しい。 

スポンサーリンク

 

ブログタイトルを作成

おしゃれなバナーやヘッダー画像が作成できる、Canvaで作成。

Amazingly Simple Graphic Design Software – Canva

 

私がいつも、素敵だなーと思っている、

Canvaで作成!ブログとTwitterのヘッダー画像【はてなブログ】【初心者向け】 - サクラサク〜Simple Lifeに憧れて〜

こちらのサイトに書かれている内容を参考にさせて頂きました。

 

サイズは、特に設定なくスマホ表示できるという400x200pxにしました。

背景色も、カラーコードで指定できるので、楽。

f:id:chinamk:20190902162537p:plain

日本語フォントも色々と用意されています。文字だけのシンプルタイトル画像になりましたが、文字が可愛くて今の所満足しています。

 

ブログタイトル部分の背景を変える

f:id:chinamk:20190908151047p:plain

一番頑張ったかもしれない・・!こちら。

サイトのスクロールメニューから上のみをテーマカラーに変えたかった。(記事部分は白のままがよかった)

いろんなサイトを見て、画面全体背景がグリーンになったり、タイトル画像の周りに余白ができたり、なかなかうまくいかなかったのですが、こちらのサイトを参考にさせていただき、無事「タイトル画像、背景、グローバルメニューの背景が全て同じに」することができました。

【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 - つきなしことのは日記

ここに書かれているソースをそのまま「デザイン」→「ヘッダー」部分にコピペさせて頂きました。自分で変更した点は、

背景色

・ヘッダー画像のサイズ「max-width:1120px;」→400pxにしたこと。

 

はてなブログのヘッダメニューバーの色を変更

デフォルトだと濃いグレーでちょっと浮いてしまうはてなブログヘッダ上メニューバー。はてなProだと非表示にできるのですが、個人的によく使うので、表示したままに。

デザインに溶け込むよう、背景色を変えました。

f:id:chinamk:20190908153414p:plain

<はてなブログ>ヘッダ上部にあるヘッダーメニュー(グローバルヘッダ)の色の変え方 - イロイロひとりごと。

 

記事一覧表示部分に枠線をつける

見えづらいですが、記事一つ一つにテーマカラーの枠線をつけました。

f:id:chinamk:20190908153543p:plain

参考にさせて頂いたのは、こちら。

【はてなブログ】記事一覧の一つ一つを枠で囲う美しいデザイン - belle chose

枠線の色を変更しただけで、その他はそのままで使用できました。超初心者に、コピペだけでカスタマイズできるサイト様たち、ありがたい・・

タイトルが長かったり、カテゴリが2行になったりした時に、横2列の表示が少しずれてしまうのだけが私の課題です。。

 

記事一覧へのマウスオーバー時にふわっと白く

トップページにて、一覧型記事にマウスオーバーした時に、白く反応するように変更しました。

CSS:一覧記事表示の『カード型レイアウト』カスタマイズについて - iiie.nagoya

こちらの下の方にコードが記載されています。こちらも、そのまま使わせて頂き、順調に作動しています。感謝。

スポンサーリンク

 

 

サイドバーのタイトルをシンプルに

タイトルに下線のみ、というシンプルなものに変更。

f:id:chinamk:20190908154949p:plain

【はてなブログ無料版】3回目のブログカスタマイズのまとめ | Migaru-Days

ほぼそのまま使わせて頂きました・・ありがとうございます。

 

うまくいかなかったのが、下線と、その下の「お問い合わせフォーム」など中身の距離がめちゃくちゃ近くなってしまうところ・・

CSSの途中に、

margin-bottom: 15px;」を入れることで、いい感じのスペースができました。

 

こちらのサイトにも、たくさんのサイドバーデザインが公開されています。

はてなブログで使えるサイドバーカスタマイズまとめ - Minimal Green

 

サイドバーの「よく読まれている記事」などの日付表示をシンプルに

こちらも同じくMigaru-Days様のコードを参考にさせて頂きました。シンプルになって、満足。

 

見出しのデザイン変更

超有名サイトであるこちらを参考にさせて頂きました。

saruwakakun.com

はてなブログの場合は、大見出しが<h3>、中見出しが<h4>などと他のブログサービスと異なるので、そこのみ注意。

 

囲み枠のデザイン作成

こちらも同じくサルワカさんを参照

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

 

「この記事を書いた人」作成

必要かわからないけど、、作ってみました。

Wordpressなら簡単に作れるようです。今回はてなで色々と作ってみて、ワードプレスならすぐに作れる・・みたいなのも色々と目にし、気になり始めています。ただ、はてなのいいところは、はてなユーザー同士で簡単に読者登録できたり、読んだ記事にスターをつけたりできるところが楽しい。

はてなブログで「この記事を書いた人」/AUTOHRを記事下に実装するカスタマイズ - 宇宙時代より(旧)

 

Aboutページの更新

ついでにAboutページも更新。

【コピペ歓迎】はてなブログのダサいaboutページを見やすくオシャレにカスタマイズ! - オークニズム

参考にさせて頂きました。読者一覧の部分、アイコン画像が表示されるようになってとってもいい感じです。

スポンサーリンク

 

 

トラブル:スマホで見た時に横に余白が生じる

ここまでやってきたところで、スマホで確認した時に、なぜか右側に余白出現・・これは気になる。検索してみると、こちらのサイトを発見。

【はてなブログ】スマホで見た時に余白によって横ブレする現象の対処法【レスポンシブ】【横揺れ】 - キリンノックスの日記

ありがたい・・これでばっちり収まりました。

 

トラブル2:記事ページがなぜかスマホ並みの横幅に

 カスタマイズを終えてある時PC表示を確認したところ、なぜか記事一覧のページがとっても細く・・左の余白なに。。(なぜかプロフィールアイコン画像がPC画面に小さく貼り付いたままでしたが、これはPCのエラーです。)

f:id:chinamk:20190908160606p:plain

 

はてなブログの記事領域が幅が狭いのでPCで見るときは広くして、iPadで見たときは基本のサイズになるようにした。 - さとうさんのキロク

こちらのサイトを拝見し、記事ページとサイドバーがあるページのサイズをそれぞれ指定することで、解決!

 

カスタマイズしたいテーマの探し方

カスタマイズしたいけど、何ができるのかわからない!何をしよう!と思った最初。

参考にしたのは、「こんなカスタマイズをしました・まとめ」のようなサイトだったり、デザインが素敵だなーと思うサイトだったり。

デザインが素敵なサイトは、メニューのデザインや動作などを見て、「これははてなブログでもできるやり方があるか」検索しました。(「はてな サイドバー タイトル デザイン」みたいに検索)

また、CSSの解説をたくさんされているサイトでは、自分が探しているデザイン・機能の他にも色々なものを紹介されているので、そこから「これもやってみたい」というものを見つけたりしました。

 

取っ付きにくそうだけど、意外と楽しい

コードもプログラミングも全く触れてくることなくブログを始めましたが、詳しく解説してくださったり、一生懸命作成されたコードを公開してくださっているサイト様のおかげで、デザインをここまで変えることができました。

日頃達成感のない主婦業・子育て業ですが、合間時間にコツコツ調べて作っていると、うまくできると達成感があるし、楽しかった。また、「これいいな」というサイトや機能を見つけたら追加していきたいと思います。

 

 日本に戻ったら、きちんと勉強してみようかな。大阪の蔦屋書店で子どもが昼寝している間に初心者向けの本を読んだりしていました。 

本当によくわかるHTML&CSSの教科書 シンプルで、デザインの良いサイトが必ず作れる

本当によくわかるHTML&CSSの教科書 シンプルで、デザインの良いサイトが必ず作れる

 

 今回参考にさせていただいたCSSでも、少しだけ、「HTMLとCSSはこう繋がってるんだなー」とかわかって、嬉しかった。

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

 

 

 

 

 にほんブログ村 海外生活ブログ バングラデシュ情報へ
にほんブログ村 海外生活ブログ 海外駐在妻へ
にほんブログ村

スポンサーリンク

 

 ABOUT- この記事を書いた人-

f:id:chinamk:20190904155915p:plain

KIKO

バングラデシュ駐妻2年生。1歳児の母。普段はぐだぐだ引きこもり生活。反動で海外・日本では子連れお出かけ多め。旅は、計画を立てるところから好き。詳しいプロフィールはこちらから。