新しいブログテンプレート完成しました。
2013.06.10.Mon.01:00
テーマカラー変更のJavaScriptに不備があり、
デフォルトカラー変更を行ってもブログタイトルの色が変わらないバグがありましたので
読み込んでいるjsファイルを修正しました。(colorChange.js)
こちらの修正は、既にテンプレートをダウンロード済みでも自動的に反映されます。
初期カラーは変更が可能です。
HTMLソースの中から
<!-- カラーパレット -->
<div class ="frame">
<div class ="colors" id="pink"></div><!-- 右から1番目 -->
</div>
<div class ="frame">
<div class ="colors" id="purple"></div><!-- 右から2番目 -->
</div>
<div class ="frame">
<div class ="colors" id="silver"></div><!-- 右から3番目 -->
</div>
<div class ="frame">
<div class ="colors" id="white"></div><!-- 右から4番目 -->
</div>
<div class ="frame" id ="default"><div id="ocher"></div><!-- 右から5番目(デフォルトカラー) -->
</div>
<!-- /カラーパレット -->
こちらの記述を見つけてください。
右から1~4番目までは class ="colors"の後のid、
右から5番目(デフォルトカラー)は2番目<div class ="frame" id ="default">
の後のdivタグのidがそれぞれ色指定です。
初期カラーにしたい色のidを、デフォルトカラーのidと入れ替えてください。
色の並び順を変えたい時は、<div class ="frame">の括りごと入れ替えます。
(例)初期カラーをpinkにしたい時は以下のようになります。
<!-- カラーパレット -->
<div class ="frame">
<div class ="colors" id="ocher"></div><!-- 右から1番目 -->
</div>
<div class ="frame">
<div class ="colors" id="purple"></div><!-- 右から2番目 -->
</div>
<div class ="frame">
<div class ="colors" id="silver"></div><!-- 右から3番目 -->
</div>
<div class ="frame">
<div class ="colors" id="white"></div><!-- 右から4番目 -->
</div>
<div class ="frame" id ="default"><div id="pink"></div><!-- 右から5番目(デフォルトカラー) -->
</div>
<!-- /カラーパレット -->
注意点
<div class ="frame" id ="default"><div id="ocher"></div><!-- 右から5番目(デフォルトカラー) -->
この行の改行を変更しないで下さい。
HTMLでは影響を及ぼさないのですが、javascriptの動作に影響があります。
デフォルトカラー変更を行ってもブログタイトルの色が変わらないバグがありましたので
読み込んでいるjsファイルを修正しました。(colorChange.js)
こちらの修正は、既にテンプレートをダウンロード済みでも自動的に反映されます。
初期カラーは変更が可能です。
HTMLソースの中から
<!-- カラーパレット -->
<div class ="frame">
<div class ="colors" id="pink"></div><!-- 右から1番目 -->
</div>
<div class ="frame">
<div class ="colors" id="purple"></div><!-- 右から2番目 -->
</div>
<div class ="frame">
<div class ="colors" id="silver"></div><!-- 右から3番目 -->
</div>
<div class ="frame">
<div class ="colors" id="white"></div><!-- 右から4番目 -->
</div>
<div class ="frame" id ="default"><div id="ocher"></div><!-- 右から5番目(デフォルトカラー) -->
</div>
<!-- /カラーパレット -->
こちらの記述を見つけてください。
右から1~4番目までは class ="colors"の後のid、
右から5番目(デフォルトカラー)は2番目<div class ="frame" id ="default">
の後のdivタグのidがそれぞれ色指定です。
初期カラーにしたい色のidを、デフォルトカラーのidと入れ替えてください。
色の並び順を変えたい時は、<div class ="frame">の括りごと入れ替えます。
(例)初期カラーをpinkにしたい時は以下のようになります。
<!-- カラーパレット -->
<div class ="frame">
<div class ="colors" id="ocher"></div><!-- 右から1番目 -->
</div>
<div class ="frame">
<div class ="colors" id="purple"></div><!-- 右から2番目 -->
</div>
<div class ="frame">
<div class ="colors" id="silver"></div><!-- 右から3番目 -->
</div>
<div class ="frame">
<div class ="colors" id="white"></div><!-- 右から4番目 -->
</div>
<div class ="frame" id ="default"><div id="pink"></div><!-- 右から5番目(デフォルトカラー) -->
</div>
<!-- /カラーパレット -->
注意点
<div class ="frame" id ="default"><div id="ocher"></div><!-- 右から5番目(デフォルトカラー) -->
この行の改行を変更しないで下さい。
HTMLでは影響を及ぼさないのですが、javascriptの動作に影響があります。
コメント
ごく簡単な変更のみで可能です。
初心者の方ということでしたので、操作手順から書きました。
もしかすると行う操作の意味が分からないかもしれませんが
下記のとおり行っていただければ出来ると思います。
操作手順
まずブログ管理ページの左にあるメニューにテンプレートの設定という項目がありますので
それをてクリックして下さい。テンプレート管理のページに遷移します。
テンプレートの一覧の中にFFparoがありますので
HTML CSS欄の『編集』をクリック。
ページ下部にテンプレートのソースが2画面で表示されます。
下側の方(スタイルシート)をどこでもいいのでクリックし
カーソルがスタイルシートソースの中にある状態にします。
Ctrl + F で「h1 a」という文字列(カギ括弧内のみ)を検索すると
h1 a {
font-size: 40px;
font-weight: 900;
・
・
・
という部分が見つかりますので
font-size: 40px;
の40pxの部分を変えれば、タイトル文字の大きさが変わります。
一回り小さくでしたら36pxくらいにするといいと思います
書き換えれたら『更新』ボタンをクリックして下さい。
これで完了です。
センスとアイデアがGoodです!
勉強しながら、ちょっとづつですが、私なりに手を加えて行きたいと思ってます。
よろしくお願いいたします。