りつのひとりごと

読者です 読者をやめる 読者になる 読者になる

りつのひとりごと

ひとりでゆるくやってます

MENU

見出しを横幅いっぱいにしてみた

<今回の変更点>

  1. 見出しの横幅
  2. サイドバーのタイトルに画像表示
  3. 公式パンくずリストとか
  4. 記事タイトル下の線

ざっとこんな感じ。

スマホだとだいたい崩れていると思う……。
スマホ持っていなくて確認できないので直しようが……(汗)



ずっと考えていたんだ。

「Nakedって、見出しが記事の横幅いっぱいなんだよね……」

theme-naked.hatenablog.jp


りつ、考えました。

「マージンをマイナスにすればできるんじゃね……?」


とりあえずやってみよう。

そして結果。できた(^ω^)

調べてみたら、これネガティブマージンっていう技なんですね! あれ? 違う……?

まあいいや! とりあえず覚えたぞ。(本当かよ……)

こんな感じになったよ

.entry-content h2 {
    margin: 20px -30px;
}
.entry-content h3 {
    margin: 20px -30px;
}
.entry-content h4 {
    margin: 20px -30px;
}
.entry-content h5 {
    margin: 20px -30px;
}


数値は適当(∵)


そういえばこないだグローバルメニューの話をしたんですが
グローバルメニューへの挑戦はつづく…… - りつのひとりごと

グローバルメニュー必要なくなっちゃったんですよ。のせるものなくて(笑)
だから外しちゃって。

でもそのままにするのさみしくて、公式パンくずリストをいじってみました。


出来はどうでしょうか……。(震え声)

実はこれもNakedに寄せてみたりして……。(超震え声)

さらに実は最新記事もNakedに寄せてみたりして……。(声にならない)


もうテーマもNakedにしちゃえって一瞬でも思ったけどさ、

元が細かく指定されてるから、今のものをいじるほうが早かったんですよ。

あと今のテーマすっごい気に入ってるし!!

Spirea - テーマ ストア



今更だけどサイドバーにいつの間にかついた画像の話もしておきます。

特に意味なく、つけたらどんな感じなのかなー?くらいでやってみたら思いのほか気に入ってしまい。

参考 CSS backgroundプロパティについてのまとめ | CSS Lecture

.hatena-module-title{
    background-image:url(http://○○.png);/* 画像のURL */
    background-repeat:no-repeat;/* 繰り返さない */
    background-position:left center;/* 配置位置 */
    line-height:40px;/* 高さ */
    padding-left:40px;/* 左余白 */
}

画像はblue-green(http://bluegreen.jp/)さんからお借りしてます。


久しぶりにデザインで遊んだ。

好きなことができるって幸せです。

昨日も好きなこと満喫しました。

diaace.hatenadiary.jp


ごめんなさいアイキャッチを見たくなっちゃっただけで貼ってしまいました。