参考程度に。
尚、カスタマイズはバックアップを取った上、自己責任で行うようにしてください。
目次
ブランドカラーの追加・カラーの指定方法
「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（ウインドウ上部）に戻るボタンの設置
ブログランキング参加中
