Bloggerを使用するにあたり、比較的使いやすくデザインも良いテンプレートの
Vaster2を自分用にカスタマイズするためのメモ帳です。
私自身がHTMLやCSSの素人なので難しいことは全くわかりません\(^o^)/
ただ、素人ながらに試行錯誤して完全な趣味レベルでブログのデザインを漁っています。
カスタマイズ方法等の質問に応えられる知識を持ち合わせておりませんので
どうかご了承の上、ご閲覧ください。
Vaster2のテンプレートはトーマスイッチさんのサイトからダウンロードして下さい。
テンプレートデザイナーあり版となし版がありますが、個人的には色々と弄れる
なし版がオススメです。
*サイトのデザインの確認にはGoogle Chromeを使用しています。試しにIEで見てみたところ、デザインが結構崩れていました。全てのブラウザに対応させるのは面倒くさい(私には無理)ので、ブラウザはGoogle Chromeを使用することを前提に話を進めていくことをご了承下さい。なお、MacやiPhoneのことはわかりません。AndroidのGoogle Chromeにはそのうち対応させたいなぁ。。。
CSSに下記のコードを追加。
<head>部分に下記のコードを追加。
CSSに下記のコードを追加。
</body>の手前あたりに下記のコードを追加する。
*jQueryの最新版はここで確認して下さい。ダウンロードはしなくてもいいです。
CSSのヘッダーナビゲーションの箇所を変更。オリジナルのテンプレートだと293行目から319行目のあたり。
CSSの記事のフォントの箇所を変更。オリジナルのテンプレートだと230行目から236行目のあたり。
Vaster2を自分用にカスタマイズするためのメモ帳です。
私自身がHTMLやCSSの素人なので難しいことは全くわかりません\(^o^)/
ただ、素人ながらに試行錯誤して完全な趣味レベルでブログのデザインを漁っています。
カスタマイズ方法等の質問に応えられる知識を持ち合わせておりませんので
どうかご了承の上、ご閲覧ください。
Vaster2のテンプレートはトーマスイッチさんのサイトからダウンロードして下さい。
テンプレートデザイナーあり版となし版がありますが、個人的には色々と弄れる
なし版がオススメです。
*サイトのデザインの確認にはGoogle Chromeを使用しています。試しにIEで見てみたところ、デザインが結構崩れていました。全てのブラウザに対応させるのは面倒くさい(私には無理)ので、ブラウザはGoogle Chromeを使用することを前提に話を進めていくことをご了承下さい。なお、MacやiPhoneのことはわかりません。AndroidのGoogle Chromeにはそのうち対応させたいなぁ。。。
Bloggerの編集用マーク quickedit を非表示にする
CSSに下記のコードを追加。
ページトップに戻るボタンを付ける
<head>部分に下記のコードを追加。
CSSに下記のコードを追加。
</body>の手前あたりに下記のコードを追加する。
*jQueryの最新版はここで確認して下さい。ダウンロードはしなくてもいいです。
ヘッダーナビゲーションのデザイン変更
CSSのヘッダーナビゲーションの箇所を変更。オリジナルのテンプレートだと293行目から319行目のあたり。
見出しタグ<h3>のデザイン変更
CSSの記事のフォントの箇所を変更。オリジナルのテンプレートだと230行目から236行目のあたり。
サンプル |