参考程度に。
尚、カスタマイズはバックアップを取った上、自己責任で行うようにしてください。
目次
ブランドカラーの追加・カラーの指定方法
「brand.pointcolor」と「brand.pointfont」を追加しました。使うときはcolorやbackground-colorなどで「$(brand.pointcolor)」を指定すれば使えます。
<Group description="ブランドカラー"> <Variable name="brand.color" description="ブランドカラー" type="color" default="#aeddcd" value="#333333"/> <Variable name="brand.font" description="ブランドカラー部分の文字色" type="color" default="#fff" value="#e9e9e9"/> <Variable name="brand.subcolor" description="ブランドサブカラー" type="color" default="#ff9d76" value="#9da5a0"/> <Variable name="brand.subfont" description="ブランドサブカラー部分の文字色" type="color" default="#ffffff" value="#ffffff"/> <Variable name="brand.pointcolor" description="ポイントカラー" type="color" default="#ff9d76" value="#60caad"/> <Variable name="brand.pointfont" description="ポイントカラー部分の文字色" type="color" default="#ffffff" value="#ffffff"/> </Group>
トップページ記事一覧
タイトルを固定高さに
.list-item-title {
margin-top : .5em;
font-weight : bold;
height : 20px;
overflow : hidden;
}
人気の投稿ガジェット
要約の削除
->ガジェットの設定から変更可。タイトルの字体の変更
すでにクラス「item-title」が設定されているので、cssを追加するだけ。
.popular-posts a {
color : $(font.color) !important;
}
.popular-posts .item-title { /* ここから追加 */
font-weight : normal;
}
注目の投稿ガジェット（最新記事）
リンクをガジェット全体に変更
ナビゲーション
カラーの変更
#navigation {
padding : .2em 0 .2em 0;
font-size : 1.5rem;
background : $(brand.color); /* 背景色をブランドカラーに */
color : $(brand.font); /* フォント色 */
}
タイトルヘッダ
カラーの変更
#header {
background : $(other.topback); /* 背景色をブログの背景色に */
color : $(font.color);
}
カテゴリラベル
カラーの変更
.label-size{
padding : .5em;
border-radius : 3px;
margin : .25em 0;
background : $(brand.pointcolor); /* 追加したカラーに変更 */
color : $(brand.pointfont);
}
検索ボタン
カラーの変更
input.gsc-search-button {
background : $(brand.pointcolor); /* 追加したカラーに変更 */
color : $(brand.pointfont);
}
top（ウインドウ上部）に戻るボタンの設置
ブログランキング参加中
