2011年3月1日火曜日

【Tips】 ブログ末尾の Attributionを消す方法


1  Go to Design > Edit HTML.
2  Take a backup:
Download a copy of your template:  this is a backup – save it somewhere safe, in case things go wrong.
3  Click Expand Widgets, so you can see all the code
 Find this section in the template:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

これを下のように書き加える

<!-- <b:widget id='Attribution1' locked='true' title='' type='Attribution'/> -->





 Preview the template change, to check that everything is ok.  If not, fix the problem

6  Click Save Template
7  As the template tries to save, you will get a warning message:

Warning: Your new template does not include the following widgets:

  • Attribution3
Would you like to keep these widgets on your blog or delete them?
Deleting widgets cannot be undone.
Click ウィジェットを削除する:  This will leave an attribution Gadget in the set of Widgets that your blog has data about, even though it’s not actually showing it on the screen.

【Tips】 ブログ末尾のホームやAtomを消す方法


A. 「ホーム」を非表示にする
 
HTML編集ウィンドウをクリックした後、Ctrl+F キーを押し検索
ウィンドウを表示させます。
 
下記の行をコピー&ペーストして、検索をかけます。
 
'home-link'
 
見つかった箇所 <a class='home-link' … </a> という箇所を丸ごと
削除します。
 
削除がイヤな人は、前後に
 
  前:<!--
  後:-->
 
というコードを入れることでも非表示にできます。以降も同じです。
 
 
 
 
B. 「前の投稿」を非表示にする
 
下記をコピー&ペーストして、検索をかけます。
 
'blog-pager-older-link'
見つかった箇所、以下の範囲をまるごと削除します。
<span id='blog-pager-older-link'> 
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> 
      </span>

このコードを無効化することにより、完了です。
 
 
 
C. 「投稿(Atom)」を非表示にする
 
下記をコピー&ペーストして、検索をかけます。
 
'feed-link'
 
見つかった箇所から、ちょい上の範囲から下記箇所をまるごと削除します。
<data:feedLinksMsg/> 
  <b:loop values='data:links' var='f'> 
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> 
  </b:loop>

これで、Blogger の下に表示されてる項目は消去完了です。お疲れ様でした。

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個…

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

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

終わったら…

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

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

削除して貼り付け…

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

全ての場所にガジェットが追加できます…

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で指定したページにのみコンテンツを表示するコード」に書き換えてください。

2011年2月15日火曜日

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



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








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




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



「Twitter Update」ガジェット







※ ツイッターの公式ガジェットは「HTML/Java」ガジェットを使います。

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

2011年2月9日水曜日

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

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

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