ブログのレイアウトを変えるために、CSSを少し変更してみました。 それぞれ下のように変えたので、ちょっとだけ見栄えが良くなったような気がします。

見出し

見出しがちょっと素っ気ない気がずっとしていたので次のように変更しました。

h3タグ

ブログでよく使う見出しタグです。基本的にh3-h5で見出しを作るので、実質このタグが一番目立つようにしました。 青を基調に明るい感じにしてみました。

h3

h3 {
  position: relative;
  padding-left: 45px;
  color: #333;
  font-size: 1.943em;
  line-height; 30px;
}
 
h3:before {
  position:  absolute;
  top: 6px;
  left: 8px;
  width: 12px;
  height: 12px;
  border: 4px solid #B2E0FF;
  content: "";
}
 
h3:after {
  position:  absolute;
  top: -4px;
  left: -2px;
  width: 16px;
  height: 16px;
  border: 4px solid #0099FF;
  content: "";
}

h4タグ

h3の次に目立つようにしました。 このタグの■が一番気に入っていたりします。

h4

h4 {
  position: relative;
  color: #111;
  font-size: 1.643em;
  font-weight: bold;
  margin: 0 0 1.5em;
  padding: 0.5em 0.5em 0.5em 1.7em;
  border-bottom: 3px solid #B92A2C;
}
 
h4:before {
  content: "";
  position: absolute;
  background: #ff00cc;
  top: 0.1em;
  left: 0.5em;
  height: 12px;
  width: 12px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
 
h4:after {
  content: "";
  position: absolute;
  background:#dd2266;
  top: 0.9em;
  left: 0.1em;
  height: 8px;
  width: 8px;
  transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
}

h5タグ

小さな□を少しずらした形で配置しました。 また、色合いも抑える形にしてあります。

h5

h5 {
  position: relative;
  font-size: 1.143em;
  font-weight: bold;
  margin: 0 0 1.5em;
  padding: 0.5em 0.5em 0.5em 2.0em;
  border-bottom: 2px solid #B92A2C;
}
 
h5:before {
  content: "□";
  font-size: 200%;
  position: absolute;
  color: #ff6b6e;
  top: -0.1em;
  left: 0.2em;
  height: 12px;
  width: 12px;
}
 
h5:after {
  content: "□";
  font-size: 200%;
  position: absolute;
  color: #B92A2C;
  top: +0.1em;
  left: 0;
  height: 12px;
  width: 12px;
}

コードプレビュー

preタグ

複数行にわたるソースコードはこのタグで囲むようにしています。 ソースコードの表示では行数を表示するサイトがありますが、コピーする際に数字が邪魔になってしまうので、ただ囲むだけにしています。

preタグはこんな感じです。

pre {
  font-family: "Courier New",Courier,monospace;
  font-size: 1em;
  color: #007000;
  background-color: #fafafa;
  border: solid 1px #bbbbbb;
  line-height: 120%;
  margin:10px;
  padding: 0.99em;
  overflow-x: auto;
  overflow-y: auto;
}

codeタグ

文章中のコードはこのタグで囲むようにしています。 実はあんまり目立たないので、あえて使わなくてもいいとは思います。

codeタグはこんな感じです。

code {
  font-family: monospace;
  font-weight: normal;
  line-height: 150%;
  text-align: left;
  margin-bottom: 10px;
}

Tableタグ

Table はなるべくシンプルなものにしようと思ったので、最低限のもので構成しました。 ポイントとしては、行列を線で分けるようにしたことくらいでしょうか。 角が丸くなった表やもっとカラフルなものも作れるみたいですが、意外とシンプルな方が見やすいかなと思いました。

table {
    border-collapse: collapse;
}
 
table, th, td {
    border: 1px solid black;
    padding: 5px;
}
th {
    background-color: #a9a9a9;
    color: white;
}

さいごに

他のサイトのCSSからすると見劣りするかもしれませんが、シンプルなので使い勝手が良ければぜひ使ってください。