つーさんの雑記帳

意識低い系備忘録ブログ。自分だけでなく皆さんにも役立てば幸い。


はてなブログのCSS修正しました。

 つたない文章が少しでもいい感じに見えるように、スタイルシートを変更したいと思ったのでちょっといじってみます。以下の記載は私が今はてなブログで使っているテーマに対しての設定なのかもなので、参考とする際は気を付けてください。

 なんとなくH1~H2タグは直接変えない方がいいのかなーと思ったのでH3以降をいじって確認してみたいと思います。

 これ、分かってはいたのですが、ブログ始めた最初にやればよかったです笑。型がしっかりしていればその後もやりやすいと言うことですね。今までの投稿も修正していかないとです。昔勉強したのに全然覚えていない…。

デザインCSSに設定したらスマートフォン向けには反映されなかった…。

 まずはヘルプをなんとなく読み漁って、一番最初に出てきたものについて設定してみます。その名はデザインCSS

デザインCSS設定箇所メモ:デザイン→スパナアイコン→デザインCSS

パソコン版は反映されました。

機能説明にもあるように、スマートフォン向けのページには反映されないとのことです。

最終的にデザインCSSを解除し、headタグに直接CSS記載にしました。

 スマートフォン向けには反映されないのなら、と言うことで別のやり方にしました。headタグ内にstayleタグを設置し記載しました。この方法でしたらスマートフォン向けにも反映されるようです。H2タグとかも部分的に変えたいので、クラスセレクタで指定できるようにしました。


CSS設定箇所メモ:設定→詳細設定→

 

▼ 以下CSS反映後の確認用エリア ▼

 h系タグの右側は実際のページで使われているっぽいところをメモしてみました。こうして見ると、h2はタグを手で書いてあげないと空気になっている感がありますね…。


大見出し = h3

中見出し = h4

小見出し = h5

H1…ブログ名、記事のタイトル名

H2…ブログの説明文

H3…大見出し、フッターの一部

H4…中見出し

H5…小見出し
H6…特に見当たらず

H1…ブログ名、記事のタイトル名

H2…ブログの説明文

H3…大見出し、フッターの一部

H4…中見出し

H5…小見出し
H6…特に見当たらず

H1…ブログ名、記事のタイトル名

H2…ブログの説明文

H3…大見出し、フッターの一部

H4…中見出し

H5…小見出し
H6…特に見当たらず

Strong

アンダーライン


折り返しなしのテキストボックスのテスト。折り返しなしのテキストボックスのテスト。折り返しなしのテキストボックスのテスト。折り返しなしのテキストボックスのテスト。折り返しなしのテキストボックスのテスト。

これは、headのCSSに「white-space: nowrap;」と「overflow-x: scroll;」書いてもダメだったので、以下の記載で実現しました。
<p class="srccdbx" style="white-space: nowrap; overflow-x: scroll;"> </p>


▼ 適用したCSSソースはこちら ▼

<style>
.midashi-L {
  padding: 0.5em;
  background: #ECECF1;
  border-left: solid 7px #7070F1;
  border-bottom: solid 1px #C3C3F1;
}

.midashi-S {
  padding: 0.4em;
  background: #F2F2FF;
  border-right: solid 1px #C3C3F1;
  border-bottom: solid 1px #C3C3F1;
}

.srccdbx {
  padding: 0.5em;
  background: #F0F0FF;
}

strong {
  background: linear-gradient(transparent 70%, #FFAA44 90%);
}

</style>

 

 はい、と言うことでこれで行ってみたいと思います。今回急に変えたことで、他のページが色々崩壊してそうですが、頑張って直していきたいと思います。そういえば最初の方、pタグ使ってなかったような…。