Chocolatのカスタマイズ

このサイト「月夜の晩に貴方の元へ…」では
テンプレートをカスタマイズしています。

そこまでごちゃごちゃと変更はしていないつもりですが
忘れないためにメモを残そうかと…
(ファイルだとなくすやつ

基本的に使えると思ったら
使っていただいてもかまいません!

h1{
font-family: ‘cinecaption2’;
}
h3{
font-family: ‘TanukiMagic’;
}

見出しの一部のフォントを変更しています。

@font-face {
font-family: ‘cinecaption2’;
src: url(‘cinecaption2.28.ttf’) format(“opentype”);
}
@font-face {
font-family: ‘TanukiMagic’;
src: url(‘TanukiMagic.ttf’) format(“opentype”);

フォントを読み込んでいます。
オープンフォントではないので、
サーバーにアップしています。

dd {
margin:0 0 5px 0;
display: block;
float:left;
}
dl:after{
content:””;
margin:0 0 10px 0;
clear:both;
height:0;
display:block;
visibility:hidden
}

お仕事情報とかプロフとかリンクとかで使用している
定義リストの共通部分です。
afterでclear:both;を入れないとレイアウトが大変なことになった。

dt.prof {
clear:both;
background:#e5ceb1;
color:#41250c;
border-radius:5px;
float:left;
margin:0 0 5px;
padding:0 5px;
width:6em
}
dd.prof {
margin:0 0 5px;
padding:0 5px;
display: block;
float:left;
}

プロフで使っている定義リスト。横並び。
横幅を文字数で決めているので、場合によってはpx指定のほうがいいかも。

dd.link {
width:210px;
float:left;
margin:0;
padding-left:5px;
}
dd.link2 {
margin:0 0 20px 0;
display: block;
float:left;
width:260px;
}

リンクで使っている定義リスト。
バナーの幅を確保して横並びにしています。

div.globalnav > ul > li {
background-color: #fff;
}

グローバルナビ(ヘッダーナビ)の背景。
デフォルトのままだと背景がすけたから付けたような気が…。
(覚えてない

#header-bottom .breadcrumb {
background-color: #fff;
padding: 0 5px;
border-radius: 5px;
}

パンくずリストの背景。
そのままだと背景が透けて文字が読めなくなっていたので変更。
余白を調整して、気分的に角を丸めています。
(しかしまるまっるかはわかりずらい

table.type01 {
width: 100%;
}
table.type01 tr th,
table.type01.type01 tr td {
border: 1px solid #41250c;
}
table.type01 tr th {
font-weight: bold;
}
table.type01 th {
background:#e5ceb1;
color:#41250c;
}
table.type01 tr:nth-child(even) td {
background: #fffaf0;
}

早見表などのテーブル。
見出しは濃い色、偶数段で淡く色が入ります。

.square_btn {
position: relative;
display: inline-block;
margin:0 1px;
padding: 0.25em 0.5em;
text-decoration: none;
background:#e5ceb1;
border-radius:5px;
border-radius: 4px;
border: solid 1px #fff;
}
.square_btn:hover {
border: solid 1px #e5ceb1;
background: #fffaf0;
}

サイドバーのプロフボタン。
ボタンのほうがかわいいと思っただけ!

他はもともとテンプレート自体が優秀なので
ちょこっと設定を変えるだけで何とかなっています!

今回はプラグインのカスタムはうまくできていないので
こんな感じで短めの追加CSSになっています。

それにしても
カスタムで追加CSSを簡単に入れられるようになってよかった!!

新着記事

PAGE TOP