Bloggerでメインバーナ等をトップページだけに表示させる魔法のコード

おすすめ記事ピックアップ

Bloggerだと、全ページ共通のデザインになってしまい、メインバナー等をトップページだけに表示することができません。でも下記コードを使えば、トップページだけに表示と、トップページ以外に表示を実現することができます。しかも簡単に。

例えば、トップページだけにバーナを表示させたい。トップページだけに案内メニューを表示させてい。もしくはトップページ以外のページにバーナやメニューを表示させたい時に使えます。

①
<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



いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Bloggerでメインバーナ等をトップページだけに表示させる魔法のコード
Bloggerでメインバーナ等をトップページだけに表示させる魔法のコード
http://4.bp.blogspot.com/-VxLo9oBwNrQ/UXJ_Vd-t2oI/AAAAAAAAJCU/Unm0YsLDFOw/s640/Blogger++%E3%83%86%E3%82%B9%E3%83%88%E3%83%89%E3%83%89%E3%83%AA%E3%82%B2%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88+-.jpg
http://4.bp.blogspot.com/-VxLo9oBwNrQ/UXJ_Vd-t2oI/AAAAAAAAJCU/Unm0YsLDFOw/s72-c/Blogger++%E3%83%86%E3%82%B9%E3%83%88%E3%83%89%E3%83%89%E3%83%AA%E3%82%B2%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88+-.jpg
ふりむけばコウホウ
http://www.furimuke.com/2013/04/blogger_21.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/04/blogger_21.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy