Bloggerの海外の無料テンプレート『Vozga』を導入したので、カスタマイズを行う。
目次
1.テンプレートの保存と初期化
2.ファビコン、ショートカットアイコンの変更
3.プロフィール、HTMLサイトマップの設置
4.XMLサイトマップの設定
5.配色の変更
6.フォントの変更
7.ローディングでふわっと表示
8.スクロールでふわっと表示
9.目次の設置
10.見出しの装飾
11.会話風吹き出し
12.画像サイズの調整
13.リアクションボタン、人気プログランキングのボタンの設置
14.SNSシェアボタンの設置
15.コメント欄に吹き出し
16.ページネーションの変更
17.Feedlyボタンの設置
18.ラベルの設置
5.配色の変更
レトロっぽい配色とか色々試してみたが……最終的には『Lopan.jp』さんを参考に。
『Vozga』はデザイナーテンプレートで、ほとんどの配色のカスタマイズ可能○。
背景とポストタグのみ、HTMLでカスタマイズ。
6.フォントの変更
フォントは、以前は『メイリオ』を使用。
『Lopan.jp』さんの『筑紫A丸ゴシック』を真似したいが……webフォントは有料かー。
『Google Fonts』さん『Leafscape』さんの無料Webフォントでカスタマイズ。
h1『Poppins』『Homemade Apple』
その他 『やさしさゴシック』
（『Homemade Apple』は、英筆記体。『Lopan.jp』さん、映画『クローズド・ノート』の題字みたいなローディングアニメを作る予定）
（『やさしさゴシック』は、手書きっぽい柔らかい雰囲気が○）
Google Fonts
Leafscape
Bloggerのフォントをメイリオに変更する方法 記事タイトル対応 ※追記あり
7.ローディングでふわっと表示
ローディングアニメを完成させるまでは、とりあえずこちらを装備。
ブログにフェードインをつけよう【CSSのパターンまとめ】（Bloggerなび）
8.スクロールでふわっと表示
スクロールするとふわっと現れる文字や画像をはてなブログで実装してみよう（Brian'z Imagination）
0 コメント