おすすめ記事ピックアップ
Bloggerだと、全ページ共通のデザインになってしまい、メインバナー等をトップページだけに表示することができません。でも下記コードを使えば、トップページだけに表示と、トップページ以外に表示を実現することができます。しかも簡単に。
例えば、トップページだけにバーナを表示させたい。トップページだけに案内メニューを表示させてい。もしくはトップページ以外のページにバーナやメニューを表示させたい時に使えます。
コードの説明をします。①はブログのURLと、トップページのURLが一緒だったとき、有効にしますというコードです。②はその反対で、ブログのURLと、トップページのURLが異なるとき、有効にするコードです。
b:ifコードで挟まれた部分が機能します。挟む部分はテキストでも、画像でも、プログラムでもなんでもOKです。使うには、HTMLコードに直接書き込む必要があります。
実際にやってみましょう。body直下に上記のコードを書きます。テンプレートを保存します。
トップページには、「トップページだけに表示」が表示されます。
トップページ以外には、「トップページ以外で表示」が表示されます。実に簡単です。こちらのテストサイト(http://testdodorigesu.blogspot.jp/)で実際に動作を確認できます。
さっそく、このやり方を応用してみましょう。トップページのみに表示されるバーナと、トップページ以外に表示されるバーナの設置を、ウィジェットを使って設置してみます。これを応用すれば、より多くの機能を実現できますよ。
まずウィジェット(ガジェット)で、イメージを2つ追加します。
こんな感じで2つ表示されます。今回の事例ではレイアウトを調整していないので汚く見えます。レイアウトはきちんと調整すれば整います。ご了承ください。
テンプレートからHTML編集へ入ります。ウィジェットへ移動で、先ほどの追加した画像部分を見つけます。
場所が見つかったら、分かりやすいように、コメントを作ります。コードが折り畳まれているので、開くと、わからなくなるからです。
コードを開きます。追加したイメージのウィジェットはこんな感じのコードになっています。
ここが最大の難関なのですがb:ifを挟める部分と、挟めない部分があります。b:widgetを挟むとエラーが出てしまいます。そのため、b:includable以下を挟みます。
先ほどの下記コードを挟み込みます。
こんな感じに。
そうすると 、トップページには片方のバーナが表示されます。
トップページ以外には、別のバーナが表示されます。
こちらのテストサイト(http://testdodorigesu.blogspot.jp/)で実際に動作を確認できます。テストサイトは雑に作っていますので、見づらいのですが、きちんと作ったサイトで表示されば、まったく自然に動作しますよ。
さらに深めるなら下記の記事をじっくり読めば、大抵のことはできるはず!
例えば、トップページだけにバーナを表示させたい。トップページだけに案内メニューを表示させてい。もしくはトップページ以外のページにバーナやメニューを表示させたい時に使えます。
① <b:if cond='data:blog.url == data:blog.homepageUrl'> トップページだけに表示 </b:if> ② <b:if cond='data:blog.url != data:blog.homepageUrl'> トップページ以外で表示 </b:if>
コードの説明をします。①はブログのURLと、トップページのURLが一緒だったとき、有効にしますというコードです。②はその反対で、ブログのURLと、トップページのURLが異なるとき、有効にするコードです。
b:ifコードで挟まれた部分が機能します。挟む部分はテキストでも、画像でも、プログラムでもなんでもOKです。使うには、HTMLコードに直接書き込む必要があります。
実際にやってみましょう。body直下に上記のコードを書きます。テンプレートを保存します。
トップページには、「トップページだけに表示」が表示されます。
トップページ以外には、「トップページ以外で表示」が表示されます。実に簡単です。こちらのテストサイト(http://testdodorigesu.blogspot.jp/)で実際に動作を確認できます。
さっそく、このやり方を応用してみましょう。トップページのみに表示されるバーナと、トップページ以外に表示されるバーナの設置を、ウィジェットを使って設置してみます。これを応用すれば、より多くの機能を実現できますよ。
まずウィジェット(ガジェット)で、イメージを2つ追加します。
こんな感じで2つ表示されます。今回の事例ではレイアウトを調整していないので汚く見えます。レイアウトはきちんと調整すれば整います。ご了承ください。
テンプレートからHTML編集へ入ります。ウィジェットへ移動で、先ほどの追加した画像部分を見つけます。
場所が見つかったら、分かりやすいように、コメントを作ります。コードが折り畳まれているので、開くと、わからなくなるからです。
コードを開きます。追加したイメージのウィジェットはこんな感じのコードになっています。
ここが最大の難関なのですがb:ifを挟める部分と、挟めない部分があります。b:widgetを挟むとエラーが出てしまいます。そのため、b:includable以下を挟みます。
先ほどの下記コードを挟み込みます。
① <b:if cond='data:blog.url == data:blog.homepageUrl'> トップページだけに表示 </b:if> ② <b:if cond='data:blog.url != data:blog.homepageUrl'> トップページ以外で表示 </b:if>
こんな感じに。
そうすると 、トップページには片方のバーナが表示されます。
トップページ以外には、別のバーナが表示されます。
こちらのテストサイト(http://testdodorigesu.blogspot.jp/)で実際に動作を確認できます。テストサイトは雑に作っていますので、見づらいのですが、きちんと作ったサイトで表示されば、まったく自然に動作しますよ。
さらに深めるなら下記の記事をじっくり読めば、大抵のことはできるはず!
オススメ記事
・GoogleブログBlogger: 特定ページのみにhtmlソースコードを記述する方法
http://salaryman-life.blogspot.jp/2010/05/googleblogger-html.html
・レイアウト用ウィジット タグ
http://support.google.com/blogger/bin/answer.py?hl=ja&answer=46995
・Targeting specific pages/URLs with conditional tags
http://www.bloggersentral.com/2010/08/targeting-specific-pages-with.html
・Selective Display of Blogger Widgets on homepage, archive,post page, or particular pages
http://www.bloggerplugins.org/2009/06/selective-display-of-blogger-widgets-on.html