なすみの暮らしログ

私の一人暮らしの記録です

なすみの暮らしログ

卵巣嚢腫‐概要‐
卵巣嚢腫のはじまり
卵巣嚢腫手術入院の持ち物
卵巣嚢腫の入院費

【はてなブログ】初心者がUndershirtにかえてみた(トップページのカスタマイズ No.1)

f:id:nasumiblog:20210119224231j:plain

 

私は【はてなブログpro】を利用しています。

ここで紹介するブログのデザインは2021年1月時点のものです。

それ以降、デザインは変更する場合があります。

 

ド素人がちょっとかじったことをドヤ顔で披露する内容なので海より広い心で見てください。

そしてCSSにコピペする単語や数字をなんと呼ぶのかちょっとかじったくらいではよくわからず・・・その辺もお許しください。

 

デザインCSSをいじるときはバックアップをとってから!

 

 

 

 

トップページのカスタマイズ

 

f:id:nasumiblog:20210119124830j:plain

 

はてなのヘッダーの色を変える

【はてなブログpro】を利用していると表示させないこともできます。

しかし、私はあった方が便利なので表示させています。

他の人のブログを読みにいっても、このバーがあるとすぐに自分のブログに戻れるのでよいです。

元々は黒地に白い文字なのですが全体の色あいを見ると合わないと思ったので変更しました。

#globalheader-container {
     background: #faf2c8;/*背景の色*/
     color: #333;/*文字の色*/
}

これは「はてなのHTML構造」をのせているサイトを見ながら作りました。

いろいろ変更してやっと少しわかるようになった・・・きになっています。 

このサイトと色見本のサイトはよく利用したので一番下に貼りました。

 

 

タイトル画像を作成してのせる

はてなブログのヘッダーの画像のサイズは1000×200pxが推奨されているそうです。

私はCanvaで画像作成しました。

f:id:nasumiblog:20210116004616j:plain 

ヘッダーは白い背景に文字を書きました。

(ページの背景と同化してしまい境界線がわからない・・・)

タイトル部分は全て白くしたかったので余白はなしにしました。

#blog-title { }
かっこの中に以下を追加
padding: 0px;/*内側の余白*/
margin: 0px;/*外側の余白*/

 

スマホで見切れないようにするCSSも必要のようです。

 

しかし、ヘッダーに作った画像を反映させると少し余白がある。 

f:id:nasumiblog:20210119124907j:plain

 

余白をなくすようにしたのになぜ・・・

そこでまた検索、検索、検索して見つけました

 

余白はなくなりましたが、こうなってしまった。 

f:id:nasumiblog:20210119124911j:plain

 

んー諦めるか

しかし、参照サイトのコメントにヒントがありました。

どうやら「タイトル下」にコードをコピペした順に表示されるようです。 

f:id:nasumiblog:20210119124915j:plain

やったー、できました(^^♪

 

グローバルナビゲーションの設置

Haruniのときも同じサイトを参考にしました。

メニューにカーソルを合わせるとドロップダウンして子カテゴリを表示させることもできますが、私はドロップダウンは「なし」にしました。

私がしたのは色の変更とメニューの縦幅の変更、アイコンを追加しただけです。

それでも大変だった。

 

パソコンでは問題なかったのですが、なぜかスマホでは動かず・・・

こちらのサイトの通りにして解決できました。

 

 

ヘッダ下におすすめ記事をのせる

これは設置してみたかったのでやってみました。

カーソルを合わせると画像がふわっと動くのがいいです。

解説がわかりやすく、書かれている通りにやって思うようにできました。

 

トップページだけに表示されますが、なんとなく記事ページの上にも表示させたくなりました。

どうすればいいのかさっぱりわかりません。

なにかヒントはないかとコードとにらめっこしました。

そして一番下にある

.page-entry .article-area{display:none;}

を消してみたら表示されるようになりました。やった!

 

背景の色

「設定→デザイン→スパナマーク→背景色」で背景の色は変更できます。

しかし、原因はわからないのですが上記の方法で背景色を何度も変えて試していたらブログデザインが変になるようになってしまいました。

なのでCSSに記入して色を変えました。

body {
       background:#fff;/*背景の色*/

 

 

カードのカスタマイズ

カードの外観

f:id:nasumiblog:20210119124843j:plain

 

  • 角を丸くする ※1
    (カードは4つの角すべて、アイキャッチは上の角のみ)
  • 本文を消す ※2
  • タグを消す ※3
  • 日づけの位置を右下にする ※2 
  • 日づけの前に時計マークをいれる ※4 
  • カードの左上にカテゴリをのせる ※5
  • カードの左上にのせるカテゴリは一つだけ ※1
    (親-子カテゴリにしている場合は子カテゴリがのる) 
  • カードの左上にのせたカテゴリの角を丸くする ※2

 

いくつかのサイトをちょっとずつ参照しました。

 

角があると私にはとげとげしく見えるので丸くしました。

囲み枠など、ほとんどの角を丸くしています。

 

f:id:nasumiblog:20210119124847j:plain

 

  • カードに影を付ける
    (この方法は「トップページNo.2」の記事に書きました)
  • カテゴリの背景の色を少し透けさせる
    (これは「記事ページ」のカスタマイズに書きました)
  • ブログタイトルが長くなると日づけと文字が近くなるので、文字の間を調整する

 

ブログタイトルの下側に余白を確保し、日付けとの距離が近くなりすぎないようにしました。

.entry-title {
      margin-bottom: 30px;/*下側の余白*/
}

自分の好みの余白に変更することは他の場面でもよくあったので知っておくといろいろ応用できて便利です。

一番下に貼っています。

  

カードをふわっとさせる(ホバーアクション)

スマホだとよくわからないけど、パソコンだとカーソルをあわせたときにふわふわして楽しい。

 

 

 

 「前へ」ボタンの設置

 

f:id:nasumiblog:20210119124835j:plain

 

「前へ」「次へ」ボタンの角を丸くして背景の色を変えました。

  • 「タイトル画像を作成してのせる」で参照させてもらったページにのっています。「くうかんシンプルライフ」さんのサイトです

 

フッターに「お問い合わせ」「プライバシーポリシー」をのせて、「コピーライト」の文字を書く

 

f:id:nasumiblog:20210122155251j:plain

「お問い合わせ」「コピーライト」は固定ページで作成しています。

もともとはサイドバーにリンクを貼っていました。

フッターに貼っているサイトをよくみるので私もそうしてみたくなって変更しました。

コピーライトの記述はなくてもいいそうですがあったほうが見栄えがいいかなと思っていれました。

 

 

トップへ戻るボタンの設置

長い記事もあるのでボタンがあったほうが便利だと思いました。

特にスマホで読むと一番下から一番上に戻るのは何回もスクールしないといけなくて大変。

 

ブログの色

 

ブログカスタマイズをしようと思った時、一番初めに色をどうしようか悩みました。

答えを出せず、とりあえずモノトーンで作り始め、もうモノトーンのままにしようかとも思いました。

うーん、やっぱり色が欲しい!

どうしようかしばらく考えた挙句、最終的には他のブログの真似しようという答えに・・・ 

いくつかのサイトの配色をまとめている記事をみつけ、この中から選びました。

f:id:nasumiblog:20210123113233j:plain

黄色だけ少し色味をおさえました。 

 


 

よく参照したサイト

 

 

今ならわかることも、カスタマイズを始めたときは
なぜうまくいかないのかが全然わからなくて困ってしまったな・・・

 

 

\ check /

 

デザインの参考にさせてもらったサイトをまとめてはてなブックマークにブックマークしています。

\ Click! /
私のはてなブックマークです

 

参照させてもらったサイトの皆さま、感謝でいっぱいです。

ありがとうございました _(._.)_