はてなブログ本が届いたので早速ブログデザインをＣＳＳで変更しています。
と言っても、ほぼ参考書の通りにやって練習しているだけですけどね(^_^;)
基本となるデザインは公式テーマの「Ｒｅｐｏｒｔ」が推奨されていたのでそれにしました。
ヘッダに写真を使っていましたが、書籍では写真を使っていると面倒そうなことが書いてあったので文字だけに変更しました。なお、書籍ではGoogleChromeをインストールし「検証」でHTML&CSSを調査すると書いてありますが、MicrosoftEdgeでも「開発者ツールで調査する」を使えば同様のことが出来るのでわざわざGoogleChromeをインストールする必要はありません。
ＣＳＳを使うことで何でもデザイン変更が出来て面白いなぁとは思いますが、ブログのタイトルの色とか基本的な部分に関してはもっと簡単に出来るようにしてあってもいいんじゃないでしょうかね。
現段階で変更したのは以下の通りです。「Ｒｅｐｏｒｔ」以外のテーマでの動作は保証できませんが(^_^;)
#title a {
text-decoration: none;
color: #ff0000;
}
#title {
display: inline-block;
font-size: 35px;
}
#blog-description {
display: block;
font-size: 18px;
margin-left: 0;
padding: 10px 0;
}
#blog-title {
padding: 70px 0;
background: #ffc0cb;
padding-left: 10px;
}
.date {
font-size: 13px;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 0 solid #ccc;
margin-bottom: 15px 0;
}
.date a {
color: #fff;
text-decoration: none;
padding: 5px;
background: #e84d5b;
}
.entry-title {
margin-bottom: 15px;
line-height: 1.3;
border-top: 2px dashed #3b3b3b;
border-bottom: 2px dashed #3b3b3b;
padding: 15px 0;
}
.entry-title a {
font-size: 24px;
color: #222;
text-decoration: none;
}
.categories {
font-size: 12px;
display: inline;
line-height: 3em;
}
.categories a {
padding: 5px;
text-decoration: none;
background: #8ab292;
color: #fff;
}
.categories a:hover {
background: #ccc;
}
