前回は、作成した見出しデザインをブログに反映させました。
（前回：『見出しを修飾してみた ～Blogger テンプレートを作るよ！ (13)～』）
テンプレートデザイナーで css を直接追加する方法をとったので、テンプレートの設定を上書きしてしまっていたり、色の変更がやりにくいことになっています。
今回は試しにそれをテンプレートの中に組み込んでみようと思います。
デザインを組み込む
とりあえず、前回作成した css を同じセレクタを持つ場所に追加してみます。次の例は投稿日付のデザイン箇所です。
h2.date-header {
font: $(date.header.font);
}
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
color: black;
padding: 0.5em 1em 0.5em 0.5em;
background: #e0e0e0;
border-left: 2px solid #c0c0c0;
border-radius: 0 1em 1em 0;
font-weight: bold;
}
新しく追加したところと重複しているところがありますね。 background で色だけ設定している箇所は background-color と重複します。font-weight で太字にしている箇所は、date-header に対して設定されている font と重複します。それと color、 padding ですね。
それぞれ、 $() で変数を使用しています。既に変数が定義されているわけですから、その変数定義の中身を書き換えるようにすれば、後から追加した方は削除してもよさそうですね。
ただ、この設定で気になるのは date-header についてだけ h2 要素であることが指定されています。何でこうなっているのかというと、 モバイル表示のインデックスページの時だけ、投稿の日付には h2 ではなく div が使用されている ので、おそらくはモバイル表示のインデックスページの投稿日付に font の設定が適用されないように、そうしているのだと思います。
だとしても、こんな応急処置的な方法で切り替えるのはどうなんでしょうか。後々、こういうところにも気を配っていこうと思います。
というわけで、 font-weight については、モバイル表示のインデックスページの時のために残しておきます。
変数の書き換え
投稿日付の背景色の変数を例に、変数の書き換え方法を見ていきましょう。
変数の検索
[Ctrl] + [F] で検索ウィンドウが出てきますので、そこに date.header.backgdound.color をコピーして [Enter] を押してみます。
 |
| [Ctrl] + [F] で画面右上に検索ウィンドウが表示される |
 |
| 検索ウィンドウで [Enter] を押すと、一致する箇所へジャンプしてくれる |
見つけました。変数定義です。
<Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="rgba(39, 39, 39, 0)"/>変数の中身を書き換える
これの value の値を今の色に書き換えましょう。
<Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="#e0e0e0"/>ただ、この値のデフォルト値は transparent （透明）になっています。投稿日付のデザインについては形が独特のものになっていますので、設定をリセットした時に透明になられると形が分からなくなってしまいます。ですので、設定をリセットしても今の色のままになるように、今の色をデフォルトにしておきたいと思います。
<Variable name="date.header.background.color" description="Background Color" type="color"
default="#e0e0e0"/>これで変数の書き換えの手順は完了です。 css の方で background の指定を削除してしまいましょう。
他のも変更していこう
同様にして color と padding も修正します。
変更前
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="inherit"/>
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#2e2e2e"/>
変更後
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="0.5em 1em 0.5em 0.5em" value="0.5em 1em 0.5em 0.5em"/>
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#000000"/>これで background と color と padding の重複を消すことができます。さて、ここで css の方を見直してみると、以下のようになっています。
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
border-left: 2px solid #c0c0c0;
border-radius: 0 1em 1em 0;
font-weight: bold;
}
この設定をじっと見ていたら、１か所変数にしておきたいところを見つけました。
背景色に合わせて border-left の色も変更できるようにしてあげたほうが、テンプレートを使う側にとってはありがたいかもしれません。
テンプレートデザイナーで border-left の色を変更できるように、変数を追加してみましょう！
変数を追加する
変数の追加と言っても、難しいことはする必要はありません。今あるものを真似て新しいものを作るだけです。
<Variable name="date.header.accent.color" description="Accent Color" type="color"
default="#c0c0c0"/>注意する点は、１つのグループの中に同じ description を持つことはできません。これがテンプレートデザイナーでの名前になりますので、きちんと識別できる名前にしたほうが分かりやすいですよね。
で、これを他の変数と同じグループに入れます。
<Group description="Date Header" selector=".date-header span">
<Variable name="date.header.background.color" description="Background Color" type="color"
default="#e0e0e0"/>
<Variable name="date.header.accent.color" description="Accent Color" type="color"
default="#c0c0c0"/>
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#000000"/>
<Variable name="date.header.font" description="Text Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="0.5em 1em 0.5em 0.5em"/>
<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="inherit"/>
<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
</Group>すると、テンプレートデザイナーでも Accent Color の項目が現れました！
あとは、その値を css の方でも使うだけです。
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
border-left: 2px solid $(date.header.accent.color);
border-radius: 0 1em 1em 0;
font-weight: bold;
}
こんな感じで、全ての見出しや投稿のタイトル、ガジェット名も追加していきます。
テンプレートデザイナー使って、より好みの色を設定しやすくなった
そんなこんなで見出しデザインの組み込みが完了しました。変更前後のコードを載せるには長いので、今回は最終結果は掲載しません。もしご入用ならコメント等下されば追加しようと思います。
 |
| 見出しの色を変更できるようになった |
少し悩んだのは、全ての見出しにそれぞれ色を設定できるようにするか否か、ということですが、結局メインカラー、サブカラー、テキストカラー、そして h2 テキストカラーの４項目を追加しました。
また、フォントの設定は今のところ保留にしてます。
それでテンプレートデザイナーを使って見出しの色を調整していたら、少し前より好みの色があったので変更してみました。
css の追加で手作業で変更していた項目が、こうやって変数にすると使い勝手が格段に上がった気がします。
まとめ
今回は、テンプレートデザイナーで css を追加して作った見出しデザインを、テンプレートの中に組み込むように変更してみました。
手間がかかる上、ベースにしているテンプレートがどういう設定をしているかによって臨機応変に対応しないといけないので、コードを書ける人じゃないと難しいと思います。
ですが、やはり テンプレートデザイナーの機能を使って色やフォントを変更できるようになるメリットは大きい とひしひしと感じました。なんたって css もテンプレートのコードも書き換えなくていいので簡単に試せますからね。
ただデメリットもあり、テンプレートの方で装飾してしまうと、 テンプレートのユーザーが装飾を変えたいと思ったときに難易度が上がってしまう ことでしょうか。
[css を追加] で上書きする方法は依然として可能ですが、シンプルだった見出しデザインを変更する場合と違い、テンプレートの方で色々と設定してしまっているので、それを一つ一つ無効化していくにはそれなりのスキルが必要になると思います。
かといってテンプレートを直接書き換えるならテンプレート製作者と同程度の技術を持っていないと難しいので、どちらにしろ難易度は高くなってしまいます。
[css を追加] にコピペできるコードを公開するのと、装飾済みで色やフォントを変更しやすいテンプレートを公開するのでは一長一短で、どちらが良いか断言することは難しいです。
以上で、今回は終了です！ 次は何をしようかな？
0 件のコメント :
コメントを投稿