from :: Asahikawa Hokkaido

passer-by198

primetime pencil

2010/01/19


Posted

「Blogger」のテンプレート・カスタマイズを行う前の基礎情報

当サイトのレイアウトは…

こんな感じになっていますが…

「Blogger」を始めた当初は…

「レイアウトテンプレート」が最新で…

導入したテンプレートは「Minima Black」の…

2カラム右サイドバーでしたが…

2010年6月にデフォルト機能として…

「テンプレートデザイナー」に移行してダッシュボードからは導入出来ません…

「テンプレートデザイナー」は…お便利ですが…

あくまでも決まった機能内でのアレンジですし…

自身のアイデアを具現化しようとすると…かえって煩雑になります…

なので…目的で使い分けるのが良いでしょう…

解説対象は…勿論…「レイアウトテンプレート」のみです…

「レイアウトテンプレート」は…各種テンプレート配布サイトで…




カラムレイアウトやタブナビゲーション付き…

などなど…それこそ…

売るほどありますから…

ご自身のイメージに近いものを選ぶと…

カスタマイズが容易になるでしょう…


blogcrowds 「Minima Black」 


20165月の時点で暗号化接続に未対応なのでリンクを削除

「レイアウトテンプレート」は配布サイトからダウンロードして…

主に…「テンプレートデザイナー」の「CSS」「HTML」と入れ替えて導入します…

各配布サイトの説明をお読みください…

以下…各記事と被りますが…

個別の部分ではなく大枠的な考え方の部分だけ載せておきます…

「CSS」や「JavaScript」を外部化して読み込みたい方や…

圧縮したい方は……こちらの過去記事をどうぞ…

 BloggerのCSSを外部ファイル化する方法とJavaScript/CSS圧縮ツール



ページ読み込み遅延の主因「Http リクエスト」を減らしたい方は…

「CSS Sprites」なら…こちらの過去記事をどうぞ…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ


 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】



「data URI scheme」なら…こちらなどのオンラインツールが…お便利です…

画像をbase64エンコードするツール / Syncer  



Blogger レイアウト用の基本的な…

「ページ要素タグ」「ウィジット タグ」については…

以下のヘルプを読んでおきましょう…

レイアウト用ページ要素タグについて / 「Blogger」ヘルプ  


レイアウト用ウィジット タグ / 「Blogger」ヘルプ  



様々なテンプレートが混在し…

尚且つ作者により記述もマチマチな部分もありますから…

構造を正しく理解した上でカスタマイズに取り組んだほうが…

結果的に…ご自身の理想のレイアウトを実現する近道かと思われます…


0 Comments :

「jQuery」と「jQuery UI」で HTML に彩りを添えよう…


「導入」「Button」「Accordion」「Tabs」「Effects/Slide」
「Progressbar」「Dialog」「Tooltip」「Menu」
「Extra」 / 公式「Widgets」以外の「jQuery UI」スクリプト
Blogger Template Customize Universal / INDEX

Blogger テンプレート・カスタマイズ / 全般を解説
高速化・最適化対策の結果と備忘録