2011年2月22日火曜日

Bloggerで全ての場所にガジェットを追加できるようにする

Blogger は…

ガジェットの集合体です…

しかし default では…

サイド・バーにしかガジェットを追加できません…

何故かは知りませんが…

これも…気持ち悪い…

変えましょッ

各場所には名前が付いていて…

header-wrapper：タイトル部分
crosscol-wrapper：タイトルの下部分
main-wrapper：記事部分
sidebar-wrapper：記事の両側
footer-wrapper：一番下部分

…のようになっています…

いつも通り…HTML の編集画面を開いて…

メモ帳にテンプレートを全文コピペして…

メモ帳の「編集」「検索」で showaddelement を検索…

ハイライト表示されたら…

追加したい部分の…

showaddelement='no'

の記述を…

showaddelement='yes'

に変えるだけです…

ただし…

header-wrapper だけは…左側に…オマケで…

maxwidgets='1' 　つまり…

表示できるガジェット数が決められているので…

すでに…ブログ・タイトルで1個…

なので…数字を増やすか…

記述そのものを削除しましょ…

終わったら…

メモ帳を全文コピーして…

「テンプレートをすべてダウンロード」してから…

削除して貼り付け…

テンプレートを保存すれば…

全ての場所にガジェットが追加できます…
投稿者 DHcoodinator 時刻: 15:40 1 コメント
ラベル:

2011年2月21日月曜日

【Tips】 トップページにのみガジェットを表示する方法


Blogger でトップページにのみガジェットを表示する方法

Bloggerでトップページにのみガジェットを表示した画像
Blogger ヘルプ フォーラムで「トップページにだけ(ガジェットを)表示したい。」(2009/11/01)という質問を見かけたので、その方法をまとめてみました。Bloggerでトップページにのみガジェットを表示したい場合は、次の [方法1] または [方法2] を利用します。

[方法1] <b:widget>タグ内のコンテンツを条件式を含むコードで囲む

例)
<b:widget id='～' locked='～' title='～' type='～'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>･･･上の2つのラインの直後に追加
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>･･･下の 2 つのラインの直前に追加
</b:includable>
</b:widget>

導入手順

1．Blogger にログイン後、[デザイン] → [HTMLの編集] → [ウィジェットのテンプレートを展開] をクリック。
ここで、テンプレートのバックアップを取っておくことをお勧めします。
「テンプレートのバックアップの取り方」を見る »
2．[テンプレートを編集] 画面で、トップページにのみ表示したいガジェットを見つける。
ガジェットに付けたタイトルで検索すれば早く見つけられると思います。
title='ガジェットに付けたタイトル'
3．見つけたら、条件式を含むコードを追加して [テンプレートを保存] する。
緑色のコードを基準に赤色のコードを追加してください。
例) [HTML/JavaScript] ガジェットの場合
<b:widget id='HTML1' locked='false' title='ガジェットに付けたタイトル' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if> 
</b:includable>
</b:widget>
※ [方法1] の問題点 : [方法1] ではトップページ以外のページではガジェットの上下に余白ができます。それを回避するために [方法2] を利用します。

[方法2] <b:section>タグを条件式を含むコードで囲む

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
        <b:section class='*****' id='*****' .....>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
</b:section>
</b:if>

導入手順

1．Blogger にログイン後、 [デザイン] → [HTMLの編集] をクリック。
[ウィジェットのテンプレートを展開] まではしなくてよいです。
2．[テンプレートを編集] 画面で、トップページにのみ表示したいガジェットを見つける。
ガジェットに付けたタイトルで検索すれば早く見つけられると思います。
title='ガジェットに付けたタイトル'
3．見つけたら、そのガジェットの下にある</b:section>の直後に<b:section class='*****' id='*****2'/>を追加する。
例えば、サイドバーの場合は、<b:section class='sidebar' id='sidebar' preferred='yes'>.....</b:section> の直後に <b:section class='sidebar'id='sidebar2' preferred='yes'/> などにして追加します。ポイントはid名を*****2にすることです。
例)
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
</b:section>
        <b:section class='sidebar' id='sidebar2' preferred='yes'/>
サイドバーにsectionタグ([ガジェットを追加] リンク)を追加した画像
※ <b:section class='*****' id='*****2' ...../>は [ガジェットを追加] リンクです。
4．次に<b:section>タグを条件式を含むコードで囲み、[テンプレートを保存] する。
例) 下にある [ガジェットを追加] リンク(<b:section>タグ)をトップページにのみ表示したい場合
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
</b:section>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
        <b:section class='sidebar' id='sidebar2' preferred='yes'/>
</b:if>
例) 上にある [ガジェットを追加] リンク(<b:section>タグ)をトップページにのみ表示したい場合
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
</b:section>
</b:if>
        <b:section class='sidebar' id='sidebar2' preferred='yes'/>
5．最後に [レイアウト] → [ページ要素] をクリックし、ガジェットを追加・移動してページ要素を [保存] する。
[ページ要素]でガジェットを追加・移動した画像

最後に

トップページ以外のページに、例えばメインページ、投稿ページ、ラベルページ、アーカイブページ、指定したURIページにのみガジェットを表示したい場合は、赤色の部分のコードを「Bloggerで指定したページにのみコンテンツを表示するコード」に書き換えてください。
投稿者 DHcoodinator 時刻: 23:27 0 コメント

2011年2月15日火曜日

【Tips】 ブロガーの使えそうななガジェット



●　「テキスト」ガジェット








「ブログリスト」ガジェット　　　　　※ダッシュボードでブログの読者になっておく必要があります。


 


「リンクリスト」ガジェット



「Twitter　Update」ガジェット






 

※　ツイッターの公式ガジェットは「HTML/Java」ガジェットを使います。
投稿者 DHcoodinator 時刻: 13:59 0 コメント

【Tips】 テキストガジェットの文字装飾を剃る方法

投稿者 DHcoodinator 時刻: 10:41 0 コメント
ラベル:

2011年2月9日水曜日

標準テンプレートの応用④　　その他の部分を調整する

ヘッダーを差し替えて背景を変えた後は、それに合わせて細かい部分を調整してブログデザインの出来上がりです。
細かい部分はテンプレートデザイナーの「アドバンス」のサブメニューで色や文字の大きさを変えていきます。「リンク」や「アクセント」などを好きなように変えてください。
また「レイアウト」や「ブログの幅」なども変更できますが、変更した後ヘッダーの画像がはみ出したりする場合がありますので画像を一旦削除して、アップロードしなおしてください。

デザインが決まりましたら、これまでテストで投稿したものをすべて削除してブログを始めてください。
デザインの変更やガジェットの追加などはブログを書き始めた後でも可能です。




投稿者 DHcoodinator 時刻: 11:55 0 コメント
ラベル:

アドバンス　　テンプレートデザイナーの背景画像を使う

背景にテンプレートデザイナーに用意されている画像を使う。

①　背景に画像がすでに入っている場合は、テンプレートデザイナーの「背景」で画像を削除します。

②　「背景画像」の小さな三角形をクリックする。

 

③　一覧の中から好きな背景画像を選んでクリックして「完了」ボタンを押す。



④　「ブログに適用」をクリックして完了。
背景画像を変えた場合、タイトルやタブの色が自動的に変更されるので、色の仕手をやり直す必要があります。

 

投稿者 DHcoodinator 時刻: 11:17 0 コメント

2011年2月8日火曜日

標準テンプレートの応用③　　ブログの背景を入れ替える

ヘッダーの画像に合わせてブログの背景を変えていきます。背景によってブログの印象も大きく変わります。
標準テンプレートの背景を変える方法としてひとつの色を指定する方法と、画像を使う方法があります。


背景を単色で指定する

①　背景に画像がすでに入っている場合は、テンプレートデザイナーの「背景」で画像を削除します。

 

②　「アドバンス」の「背景」サブメニュー」で、「外側の背景」で色を指定します。




③　「ブログに適用」をクリックして完了です。





パターン背景のコレクションを使う

①　このブログにコレクションされているパターン背景（並べて使うと切れ目なくつながる背景）の名から好きなものを選び、パソコンにダウンロードしておく。

②　すでに入っている画像を削除する。




③　「背景画像」の小さな三角ボタンをクリックして、「背景画像を選択」画面で「画像をアップロード」を選択。


④　「参照」ボタンで保存しておいたパターン背景のファイルを指定する。

⑤　アップロードが終わったら、「完了」 ボタン押し、「並べて表示」にする。



⑥　「ブログに適用」をクリックして完了。

 


※　この二つの方法の他、テンプレートデザイナーに用意されている背景画像を使う方法がありますが、この標準テンプレートに合うものがあまりないようです。一応その手順はのちほど説明します。
投稿者 DHcoodinator 時刻: 23:21 0 コメント
ラベル:

標準テンプレートの応用②　　ヘッダーの画像を入れ替える

ブログデザインの一番のポイントとなるヘッダー用の画像を入れ替えます。ヘッ ダー用の画像として使える画像をいくつかすでに用意しています。このブログの左のサイドバーにある「素材コレクション」の中の「タイトル背景」で一覧することが出来ます。
このコレクションは標準テンプレートに合わせて、すでに横幅を１０００ピクセル以上に調整してありますので、ダウンロー ドしてそのまま使えます。

ヘッダーを替える

①　使いたい画像をクリックして拡大し、拡大した画像の上を右クリックして「名前を付けて保存」でパソコンに保存します。


②　「デザイン」タブの「ページの要素」のHeader　の編集ボタンをクリック。


③　「ヘッダーの設定」画面で「画像を削除」をクリックして、すでにあるヘッダー画像を削除する。


③　「タイトルと説明の背後」と「ページに合わせてサイズを調整」にチェックを入れ、「参照」ボタンでパソコンに保存しておいた新しい画像ファイルを指定する。

 

④　「保存」ボタンを押して「ブログの表示」で確認。


⑤　テンプレートデザイナーの「アドバンス」タブの「ブログのタイトル」で新しい画像に合わせて、タイトルのフォントや大きさ、文字色を調整する。

⑥　「ブログに適応」をクリック。

⑦　「アドバンス」の「タブの背景」と「タブのテキスト」を同じようにして調整する。


⑧　「ブログに適用」をクリック完了。


※　表示してある「標準テンプレートのカスタマイズ」は一例です。それぞれのブログのデザインは違うものになります。

※　コレクションの中に使いたい画像がない場合は自分で探したり、また作ったりしすることも出来ます。その方法は後ほど説明します。
投稿者 DHcoodinator 時刻: 20:09 0 コメント
ラベル:

アドバンス　　お気に入りのヘッダー画像を探す

ブログデザインの一番のポイントとなるヘッダー用の画像を探し、体裁を整えます。このテンプレートでのヘッダーに使う画像は横幅１０００ｐｘ（ピクセル＝画素）以上必要になります。それ以下の画像はヘッダーのエリアに空白の部分が出来てしまいます。

ヘッダー用の画像を見つけるには次のような方法があります。

カタールが用意したコレクションの中から選ぶ
ヘッダー用の画像として集めた画像をいくつかこのブログにすでに投稿してあります。この画像はすでに１０００ピクセル以上に調整してありますので、ダウンロードしてそのまま使えます。画像をクリックして拡大し、拡大した画像の上を右クリックして「名前を付けて保存」でパソコンに保存して使います。

インターネット上に数多くあるフリーで使えるヘッダー画像の中から見つける
インターネットの検索で「ヘッダー画像」「フリー　ヘッダー」「header free」「free blog header」の言葉で探すといろいろと見つかります。グーグルの画像検索が便利です。利用規定などを見て自由に使えることを確認して使います。
無料配布していヘッダー画像はほとんどが横幅が１０００ピクセル未満であるため、Picnik　など画像編集ソフトを使って横幅を１０００ピクセルにリサイズする必要があります。

写真やイラストを加工してオリジナルのヘッダー画像を作る
自分で撮影した写真やネットで見つけたフリーフォトなどをPicnik　を使って形を整えてヘッダー画像にすることも出来ます。その方法については別項で説明します。

Picnikなど画像編集ソフトが必要な２番目と３番目は面倒な場合は、とりあえず最初のコレクションの中の画像を選んでください。コレクションはラベルの「タイトル背景」で見ることが出来ます。
投稿者 DHcoodinator 時刻: 19:39 0 コメント
ラベル:

標準テンプレートの応用①　　自分のデザインを作る

標準テンプレートのBeachが作ることが出来れば、後は簡単に自分のセンスと創造力を使って、自分の意図にあったブログデザインにカスタマイズすることが出来ます。
カスタマイズはヘッダーの画像をまず変えて、それ合わせて背景や各部分の色を変えていくとうまくいきます。

１．ヘッダーを変える

ブログの印象はヘッダーのデザインで８０パーセント決まります。またヘッダーのデザインはそこに使われる画像によってほとんど決定づけられます。これまでに作った標準テンプレートがあれば、簡単にヘッダーの画像を入れ替えることが出来ます。

２．ブログの背景を変える

３．ブログの各部分の色とフォントを調整する。

この３ステップでマイブログをカスタマイズすることができます。


Before
 

↓
After








投稿者 DHcoodinator 時刻: 11:42 0 コメント
ラベル:

2011年2月7日月曜日

アドバンス　　Picnik でヘッダー用の画像を作る

※　この項は必要のない場合はスルーしてください。


①　ヘッダー用に加工したい画像をパソコンに保存して、Picasaの編集画面に表示させる。Picasaがインストールされていれば、画像をダブルクリックしてビュワーで表示させその下にある「Picasaで編集」をクリックすると自動的に編集画面になります。



②　Picasaの編集画面で「Picnik」をクリックして移動する。




③　「編集」タブの「トリミング」をクリック。


④　枠をドラッグして切り抜きたい形にして、「OK」ボタンをクリック。


⑤　「リサイズ」のボタンをクリック。



⑥　「比率を固定」にチェックを入れて、「新しい解像度」左のマス（横幅の指定）に１０００と記入。「OK}をクリック



⑦　「Picasaに保存」をクリック。




⑧　写真の置換えの確認画面が現れますので、「新しいファイルとして保存」を選択。

 


⑨　写真の上で右クリックして「保存フォルダを開く」で新しくできた画像のファイルを確認できます。


 


※　標準テンプレート用のヘッダー画像は横幅１０００ピクセル以上必要です。縦は自由です。
投稿者 DHcoodinator 時刻: 20:52 0 コメント
ラベル:

2011年2月4日金曜日

NAVBARを消す方法

まず、Blogger ダッシュボードから「テンプレート ＞ HTML の編集」へ進み、失敗したときにすぐ回復できるように、テンプレートのバックアップを取ります。Google Blogger のダッシュボード（管理画面）からHTMLの編集画面を開きます。

HTMLコードを検索して、"/* Variable definitions" という文字列を探します。
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================



この /* Variable definitions のすぐ上、ここに上の青い文字の部分をコピー＆ペーストで貼り付け、保存します。

以上で、Google BloggerのNavバーは表示されなくなります。



※　 「/* Variable definitions」は上から25行目あたりにあります。

 


投稿者 DHcoodinator 時刻: 12:55 0 コメント
ラベル:

2011年2月3日木曜日

ブログタイトルを中央に寄せる方法

アドバンスをクリックし、「CSSを追加」を選択します。
そこに、

.Header h1{ 
text-align: center; 
}
.Header p{ 
text-align: center; 
}

と記入します。すぐにタイトルと説明文が中央に寄せられてプレビューすると思います。
確認して、問題が無かったら、右上オレンジ色の「ブログに適応」をクリックします。
投稿者 DHcoodinator 時刻: 22:45 0 コメント
ラベル:

標準テンプレート「Beach」⑪　　「ブログの投稿」の設定

各投稿の下に表示される項目を設定します。

①　「デザイン」タブの「ページの要素」を開く。

②　「ブログの投稿」ガジェットの「編集」ボタンをクリックして、「ブログの投稿の設定」画面を開く。

③　日付、コメント、ラベル、クイック編集にチェックを入れ、その他の項目のチェックを外す。「アイテムの並べ替え」で各項目をドラッグして並べ替える。


④　「保存」ボタンをクリックして「ブログの表示」で確認する。

投稿者 DHcoodinator 時刻: 8:53 0 コメント
ラベル:

2011年2月2日水曜日

標準テンプレート「Beach」⑩　　「アドバンス」のその他の設定

「アドバンス」の他のサブメニューはこのテンプレートの場合はデフォルト（すでに設定されているもの）のままで変更の必要はありません。

確認のためにデフォルトの内容を記載しておきます。

●　ページのテキスト
「フォント」　　Arial、太字とイタリックなし、１２ｐｘ
「テキストの色」　　#222222

●　背景
「外側の背景」　　#66bbdd
「メインの背景」　　#ffffff
「ヘッダーの背景」　　transparent

●　ブログの説明
「説明の色」　　#777777

●　日付ヘッダー
「テキストの色」　　#222222
「背景色」　　transparent

●　投稿のフッター
「テキストの色」　　#666666　
「背景色」　　#f9f9f9　
「影の色」　　#eeeeee

●　ガジェット
「タイトルのフォント」　　Arial、太字、イタリックなし、１１ｐｘ
「タイトルの色」　#000000
「代替色」　　#999999

●　画像
「背景色」　　#ffffff
「枠線の色」　　#eeeeee
「キャプションのテキストの色」　　#222222

●　アクセント
「区切り線の色」　　#eeeeee
「タブの枠線の色」　　#eeeeee

●　CSSを追加
空白。　　※　この項はスタイルシートと呼ばれるプログラムを書き込むスペースで、このテンプレートでは使うことはありません。

 ※　これらの項目は自由に変更ができます。どのように変化するか試してみてください。
「～の詳細な変更をクリア」 でもとに戻すことが出来ます。
投稿者 DHcoodinator 時刻: 22:21 0 コメント
ラベル:

標準テンプレート「Beach」⑨　　リンクの色と投稿タイトル

各投稿のタイトルはリンクになっていますのでリンクの色を変えることによって、投稿タイトルの文字の色も変わります。

①　テンプレートデザイナーの「アドバンス」のサブメニュー「リンク」を開く。

②　「リンクの色」をカラーコード　#335d6e　、「表示済みの色」を#335d6e、「ホバーの色」を#33aaff　に指定する。（ホバーの色とはマウスのポインターを乗せたときに変わる色。プレビューでは確認できませんので「ブログの表示」で確認して下さい）



③　「ブログに適用」ボタンをクリック。

④　サブメニューの「投稿タイトル」をクリック

⑤　「フォント」の「B」（太字）をクリック。



⑥　「ブログに適用」ボタンを押して、「Bloggerに戻る」、「ブログの表示」で確認する。

投稿者 DHcoodinator 時刻: 21:50 0 コメント
ラベル:

標準テンプレート「Beach」⑧　　タブバーの色を変える

①　「テンプレートデザイナー」のメニューから「アドバンス」をクリック。
②　サブメニューの「タブの背景」をクリック。
③　「背景色」で「このテンプレートの色」の上段左から４番目の青いマス目をクリック。（カラーコード　#66bbdd）
④　「選択済みの色」で同じく「このテンプレートの色」の上段左から４番目の青いマス目をクリック。（カラーコード　#66bbdd）


⑤　下のプレビュー画面で確認して、「ブログに適用」ボタンをクリック。

⑥　サブメニューの「タブのテキスト」をクリック。

⑦　「フォント」で「Arial」、「B」（太字）、「１４ｐｘ」を選択する。

⑧　「テキストの色」で「このテンプレートの色」の上段左から３番目のグレーのマス目をクリック。（カラーコード　#999999）

⑨　「選択済みの色」で同じく「このテンプレートの色」の上段左から１番目の白のマス目をクリック。（カラーコード　#ffffff）



⑩　「ブログに適用」で「ブログを表示」に戻る。

投稿者 DHcoodinator 時刻: 15:10 0 コメント
ラベル:
登録: 投稿 (Atom)