PR PR

トップページのみに表示させる方法&逆の方法(魔法コード)

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年5月13日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

これまで、
記事直下に『zenback』のコードや、
『LinkWithin』のコード、
その他『関連記事表示』など、
個別ページのみに表示させるようにする<b:if>タグを使って
記事ページが表示された時のみ該当するコード内容を表示させてきました。

スポンサーリンク

スポンサーリンク

『これまでの個別ページにのみ表示させるタグ』

<b:if cond='data:blog.pageType == &quot;item&quot;'>
(ここに取得したコードを記入)
</b:if>

や、

『携帯では表示しないかつ個別ページのみに表示させるタグ』

<b:if cond='data:blog.isMobile'>
(モバイルで表示させたい場合はここにもコードを記入)
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
(ここにコードを記入)
</b:if>
</b:if>

ばかりでした。

今回は、
タイトル通りトップページにのみ表示させて、
個別ページには表示させない。
という逆の方法を記録しておきたいと思います。
そのコードは以下。

<b:if cond='data:blog.url == data:blog.homepageUrl'>
(トップページのみに表示させたいコード)
</b:if>

これで、
<b:if cond=~</b:if>のコードで囲まれた部分が機能します。
囲むものはテキストでも、画像でも、プログラムでもなんでもOKです。

*ただし注意点があります。
サイドバーなどにHTML/Javaなどのガジェットを追加した場合、
使うにはHTMLコードに直接書き込む必要があります。

ガジェットを追加した場合は、
HTMLの編集から該当のガジェット部分を確認します。

その該当部分のガジェットのコード内に直接書き込みます。

ただし、
<b:widjet~を囲むとエラーが出てしまうので、

<b:inculudable~の直下に書き込み、
</b:incluable>の直上に終了タグを書き込みます。

<私の場合の例>(:分からなくならないようにコメントしてあります:)

<!--トップページのみに表示させるガジェット-->
<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>←<!--トップページのみに表示させるタグ-->
<b:if cond='data:title != &quot;&quot;'>
<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>
<!--トップページのみに表示させるガジェット-->

この様に、
5行目と13行目に魔法のタグを挿入します。

そうしますと、
該当ガジェットはトップページにのみ表示されるようになります。

私の場合は、
『zenback』を個別記事の場合は記事下に、
トップページの場合はサイドバーに表示させてみています。

個別ページをご覧の方は、
トップページにて確認してみてください。
サイドバーにzenbackが表示されていると思います。

また、
トップページをご覧の方は個別記事を確認してみてください。
記事下にzenbackが表示されていると思います。

もちろん逆の、
トップページ以外に表示させるコードもあります。

そのコードは以下です。

<b:if cond='data:blog.url != data:blog.homepageUrl'>
(トップページ以外のみで表示させたいコード)
</b:if>

このコードを、
『トップページのみに表示させるコード』の場合と同様に、
HTML編集から該当ガジェットを確認して、
HTMLに直接挿入すれば逆のことが機能します。

<参考サイト>
Blogger: 特定ページのみにhtmlソースコードを記述する方法
GoogleブログBloggerで特定ページのみにhtmlソースコードを記述する方法 ...

もっと深く知りたい方は、
参考サイトを確認してみて下さい。

スポンサーリンク
タイトルとURLをコピーしました