はてなブログの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タグ使ってなかったような…。