なすみの暮らしログ

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

なすみの暮らしログ

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

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

f:id:nasumiblog:20210119224235j:plain

 

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

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

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

 

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

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

 

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

 

 

 

 

サイドバーのカスタマイズ 

 

プロフィール欄

 

f:id:nasumiblog:20210119124851j:plain

 

今のサイドバーのデザインになるようになるまで時間がかかりました。

よく頑張った、私・・・

分かるようになれば簡単なことでも、その知識が全くないとチンプンカンプンでした。

 

見出しを変える

 「見出し」のデザインを紹介しているサイトはたくさんありました。

 

そのままコピペしたらサイドバーのタイトルと本文の間に隙間があいてしまいました。 

f:id:nasumiblog:20210119124919j:plain



余白を調整をする

タイトル部分の下側の余白をなくそうと思います。

「margin-bottom」が枠の外側の下側の余白を指定しています。

なのでCSSの

「.hatena-module-title{  }」内の「margin-bottom: 15px;」の数字部分を

「 15→0」に変更して隙間を埋めました。

 

四つの角を丸くする

  • 上の角を丸くする

.hatena-module-title { }

かっこ内に以下を追加

border-radius: 5px 5px 0px 0px;/*上の角を丸く*/

 

  • 下の角を丸くする。

.hatena-module-body { }

かっこ内に以下を追加

border-radius: 0px 0px 5px 5px;/*下の角を丸く*/

 

 

背景の色を変える

検索の方法が悪かったからなのか、このやり方をなかなか見つけられなくて心折れかけました。

しかし、何度も検索の単語を変えて調べました。

そしてついに、はてなブログには「HTML構造」というものがあるということを知りました。

(HTML構造の参考サイトは「トップページNo.1」の記事にリンクを貼りました)

 

f:id:nasumiblog:20210119124923j:plain

このおかげでCSSの「{ 」の前に書かれている文字(セレクタ)がブログの場所を表していると知りました。

サイドバーのタイトルの下の本体部分は「.hatena-module-body」というそうです。

.hatena-module-body{
      background: #fff;/*背景の色*/

をCSSに記入して白くしました。

 

 

プロフィールのアイコンを大きくしてアイコンを貼る

今のアイコンはCanvaで見つけたイラストにしています。

参照サイトに書いてあるとおりにやったらできました。

 

 

プロフィールにSNSのフォローボタンを表示

少しでもブログを見てもらうにはSNSはあったほうがいいと思います。

 

「デザイン→サイドバー→プロフィール→自己紹介欄」にコードをコピペしたらなぜか形が崩れてしまいました。

f:id:nasumiblog:20210119124927j:plain

なので「デザイン→サイドバー→モジュールを追加→</>HTML」にコードをコピペしてタイトルに「プロフィール」と書きました。

はてなのidが表示されないだけであとは同じになりました。

 

 リンク(楽天ルーム等)

f:id:nasumiblog:20210119124859j:plain
 

楽天ルームのボタンを表示 

文字のみよりもボタンがあるほうがいいと思って。

  

はてなブックマークのボタンをつくる

楽天ルームのボタンみたいな感じにしてみたいと思って。

ボタン用の画像はCanvaでそれっぽく作ってみました。 

あとは楽天ルームのボタンをのせた方法と同じです。

 

 

 

カテゴリー等

 

f:id:nasumiblog:20210119124855j:plain

 

カテゴリを階層化(親-子カテゴリ)にする

カテゴリが整理されて、すごく見やすくなったと思います。

 

階層化するとき、親カテゴリと子カテゴリの間は「半角ハイフン」です。

しかし、全角ハイフンを半角ハイフンは見た目が同じ。

それに気がつかず、全角ハイフンにしてしまいこうなってしまいました。

f:id:nasumiblog:20210119124931j:plain

そして、カテゴリを何回か書き直したというのに、間違いに気が付かなくて階層化することを諦めかけました。

単純なミスに気が付いたのはだいぶ時間が経ってからでした・・・

 

 

カテゴリを階層化したとき、カテゴリの字にかかってしまう矢印を消す

f:id:nasumiblog:20210119124934j:plain

これだけは検索で見つけることができませんでした。

消したい矢印の上で右クリックして「開発者ツール調査する」でHTMLを確認しました。

他の部分で元々のデザインを無効にするときに「none」とつけてあったので同じようにつけてみたら見事に消えました。

やったー(^^♪

これは自分でなんとかひねり出したので、コードをのせてもいいだろうと思うのでのせます。

.hatena-module-category a::before {
      content: ">";
      display: none;
}

 

タイトルの色を変える

他のタイトルの色は変えられるのに、なぜか「最新記事」と「月間アーカイブ」だけは変えられませんでした。

 

f:id:nasumiblog:20210119124940j:plain

この2つはカーソルを合わせると文字の下に線が出て、リンク先に飛べるようになっているのでそれが原因?

あきらめてもう「字の色は黒」にしようと一度は「字の色は黒」でデザインを考えました。

しかし、見出しのデザインを参考にするためによく見ていたサイトにそれを無効にするコードがのっていました。

ちゃんと見ていなかっただけで、答えはすぐそこにあった・・・

  • 「見出しを変える」でも参照させてもらった同じページにのっています。「Minimal Green」さんサイトです。

 

 

最新記事のカスタマイズ(途中)

はじめは文章だけのままでいいかと思っていました。

でも他のブログを見ていたら私もアイキャッチをのせたくなりました。

Undershirtのデフォルトのデザインはアイキャッチが浮いていて、カーソルで押せるようになっていました。

逆にしたい。

  • 「トップページのカスタマイズNo.1」の「カードをふわっとさせる」で参照したサイトと同じページにのっています。フジブロ!さんのサイトです。

 

 

枠で囲って角を丸くしたい

最新記事の中のカードが何で表されているのか分からず、上記で参考にさせてもらったコードとにらめっこしました。

最新記事の中のカードは「.urllist-with-thumbnails li」と表記されるようです。

 

細くて薄い線で囲い、少し角を丸めました。

そのままだと上下の線がくっついてしまうので、上下だけ余白をとりました。

 .urllist-with-thumbnails li {
      border: solid 0.5px #cacacc;/*線で囲う*/
      border-radius: 5px;/*角を丸く*/
      margin:8px 0;/*上下だけ余白あり*/
}

 

カードの中のアイキャッチの角は

.urllist-with-thumbnails li .urllist-image{ }

かっこ内に以下を追加

border-radius: 5px;/*角を丸く*/

 

サイドバーの本体とカードの余白も調整したくていじってみたのですが、

なぜか一番下のカードだけCSSが効かない・・・

余力がないので棚上げです。

 

記事とサイドバーの枠とトップページのカードに影をつける

f:id:nasumiblog:20210119124944j:plain

なんとなくのっぺりした感じに見えるので影をつけました。

影を付ける方法はすぐに探せました。

 

しかし、自分が付けたいところにどうつけるかは基本的すぎるようで検索では見つけられず。

いろいろ検索するなかで見つけた知識を組み合わせてなんとかできました。

 

記事の角を丸くして、影をつける

HTML構造でどこが記事のまわりになるのか探しました。

何回か間違えたけれど、答えにたどりつけました。

ついでに角も少し丸くしました。 

 .entry{
      border-radius: 5px;/*角を丸く*/
      box-shadow: 0 0 8px silver;/*影をつける*/
}

 

サイドバーのモジュールに影をつける

「タイトルと本体に影を付ければいいから余裕」と思ったのですが、

こうなりました・・・

f:id:nasumiblog:20210119124949j:plain

今までの知識を絞り出せー!と頭をフル回転させました。

そして!!わかった!!

で、できました!

サイドバーのタイトル「.hatena-module-title」と

本体「.hatena-module-body」は

「.hatena-module」に乗っかっているというイメージです。

なので「.hatena-module」の内側の余白をなくし影をつければいいのではないか?

 

ということで今まで覚えたものを組み合わせてつくりました。

.hatena-module{
      border-radius: 5px;/*角を丸く*/
      box-shadow: 0 0 8px silver;/*影をつける*/
      padding: 0;/*内側の余白*/
}

やったー正解です!

 

トップページのカードに影をつける

 もともと角を丸めるために記入されていた

.archive-entry {  }

かっこ内に以下を追加する

box-shadow: 0 0 8px silver;/*影をつける*/

 

しばらくアーカイブページがどこなのかよくわかりませんでした。

どうやらカテゴリをクリックして飛んだ先。カードが並んでいるページがアーカイブページというようです。

 

 

カスタマイズはわからないばかりで大変だったけど、
できたときはすごく満足感が高かったな

 

 

\ check /
私のトップページのカスタマイズ(サイドバー以外)

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

私の記事ページ編のカスタマイズ
(これから)

 

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

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

 

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

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