ブログのカスタマイズ用便利帳的なメモ（随時追記の予定）&スガシカオ / 午後のパレード
広告
新しくブログを立ち上げる時など、デザインのカスタマイズに役立ちそうなメモを残しておくことにした。
次にどこかでブログを立ち上げる時に、このページを見直せばカスタマイズの段取りやフォントなどの細かい設定が分かるようにしておくのが目的。
フォントの指定もろもろ（大きさ、余白など）
見やすいと感じる数値をちゃんとメモしておこう。
自分的にはメイリオで16px、行間は1.7くらいだな。
CSSでフォントに関するもろもろを指定する。
body{
color: #333; /* フォントの色 */
font-size: 16px; /* フォントサイズ */
line-height: 1.7; /* フォントの行間 */
font-family:"メイリオ", "Meiryo","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif; /* フォントの種類 */
background-color: #fff; /* 背景色（初期設定は白） */
}
アクセントに使いたいフォント
時々単発で使いたいときには部分的に指定する。
font-family:'Courier New';
font-family:'Bookman Old Style';
font-family:'Times New Roman';
CSSで指定するのがめんどくさい時は
<span style="font-family:○○○○○;"></span>
<span style="font-size:150%;"></span>
みたいな書き方でしのぐ。
せまいサイドバーは、幅を広めに修正する
サイドバーの横幅はレクタングル広告が収まるように300pxに変更する。
その際、サイドとメインの余白の修正も忘れずに。
レクタングル大（336x280）だと、スマホによっては画面に収まらないようなので、とりあえずは300あればOKかな。
リンク文字の色はブルー系で。
とりあえずグーグルアドセンス広告内のテキストと同じ#0053F9にした。
グーグルが何の理由もなくこの色をチョイスしたわけではないはずだからだ。
a{
text-decoration: none; /* リンクされた文字（下線は付かない） */
-webkit-transition: all 0.5s ease; /* リンク色がフェードするトランジション */
transition: all 0.5s ease;
}
a:link{
color: #0053F9; /* 未訪問のリンク色 */
}
a:visited{
color: #0053F9; /* 訪問済みのリンク色 */
}
a:hover, a:focus{
color: #0053F9; /* マウスカーソルを乗せたときのリンク色 */
text-decoration: underline; /* アンダーライン */
}
a:active{
color: #0053F9; /* 選択中のリンク色 */
ちなみに、今のところ、はてなブログはあんまりカスタマイズする予定は無し。
はてなProに移行するかどうかまだ分からないので。
文中に勝手に入るキーワードリンクをどうするかなど方針が未定なうちは、あんまりいじらない事にする。
ファビコンの設定
画像さえ用意すれば、このサイトで簡単にファビコンが作れる。
ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます
綺麗に仕上げたいのであれば、画像のサイズもスリーサイズ用意した方が良いだろう。
面倒であれば、最初からシンプルな絵柄を選べば、ぼやけも目立たない。
完成したファビコン画像は一度PCに取り込み、その後ブログ内の画像フォルダへアップロード。
完成したファビコンは「ICO形式」で作成されているので以下のように記述。
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
favicon.icoに作ったファビコン画像のアドレスが入る。
これをHTMLの<head></head>内に記入。
スガシカオの午後のパレードでも貼っておくか。
超いいぜ♪
今後も、メモっておいたほうがよさそうなことは、どんどん追記していこうと思う。
