休日を生贄に捧げてCSSと戦った件

どうも、安定の私です。

休日の18時~24時の6時間を捧げてCSSをいじり倒しました。

いやー、疲れた疲れた…。


まずCSS知識が皆無だったので、自力で弄るには調べるしかない…

調べて出てこない場所は自力で弄れない…

という悩みを抱えつつだったのですが、途中で気づいたんですよね。

「あれ?これ、検証すればいいんじゃね?」

的中でした。

chromeのデベロッパーモード(F12)を使えば、タグを拾い出せるんですねこれ。

デベロッパーモードで左上にある矢印マークを押して、

カーソルをカウンタ領域に乗せると、
p#counter
と出てきます。

この#counterがタグなわけですね。

なのでここを編集するには、

#counter{
}
 となるわけです。

では、もっと細かい部分を見てみましょう。

例えば、うちの記事の気持ち玉領域の見出し部分を消す場合です。

ちなみに実際に消してあります。

気持ち玉領域はほかのブログサイトにはないものなので、

領域を探し当てるにはこの検証が必要だったわけです。

#kimochi{
}
で気持ち領域は編集できますが、見出しだけ、という編集ができません。

そこで検証のカーソルを、見出しだけに合わせてみましょう。

すると、
.h2-general
という文字列が出てきます。

まぁ、消しちゃってるんで訪問者は見れないんですけどね…w

ここを非表示にするには、CSSに

.h2-general{
display:none;
}


と入力すればいいわけです。ピリオドは忘れずに。

一度わかってしまえば簡単ですね。

でも、どうしてもウェブリブログTOPへのバナーと、上の方に出てるログインとかのリンクが

消せませんでした…。

後者はtbody{display:none;}で消せますが、これをしたら記事本体も消えました。

ぐぬぬ…。

まぁ今回は、今まで存在も知らなかったpaddingとmarginをうまく使いながら、

より見やすくなるよう頑張ってみました。

また、試験的にフォント指定をメイリオから游ゴシックにしたので、

見づらいとか見やすいとか、感想がほしいなぁ(チラッ

角丸の罫線も使って、若干可愛い感じに仕上げたり、

外部のジェネレーターを使って画像を使わずにCSSでグラデーション背景を作ったり。

まぁそんな感じです。

色々頑張ったんですが、なぜかスマホでPC版表示にすると

端っこの文字がはみ出る現象が直しきれませんでした。

word-break:keep-all;使ってもダメだなんて…。部分的には改善するんですが。


<追記>
単純に私の記事幅設定のミスでした…。
なぜか記事+コメントの幅よりも記事本文幅の方が広くなってました…。
疲れてたんでしょうか。いや実際疲れましたけど。


…ではでは。
posted by てとろ#TM at 04:43Comment(0)TrackBack(0)

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント


この記事へのトラックバック