Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (33,475Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (16,763Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,356Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,090Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (14,841Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (14,232Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (13,673Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,349Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,703Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,280Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,179Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,135Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,157Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,004Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,884Views)
  • 翻訳機能をWebサイトに埋め込む方法 (8,463Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,805Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,582Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (4,987Views)
  • 【番外編】フィッシングサイトからの偽メールが来た ~+120563143からのメールはフィッシングサイトへの誘導です~ (4,808Views)
  • tumblrテーマ作成で、本来はトップページのみ表示させたい要素がタグページにも表示されてしまう現象の回避方法

    2015年03月02日(月)
    2088Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    tumblrテーマ作成において、本来、トップページのみで表示させたい要素は{block:IndexPage}タグで囲えば実装できそうですが、tumblrの仕様で、このタグで囲まれた要素はトップページのみでなくタグページにも反映されてしまいます。その困った現象の回避方法を解説します。

    現象解説

    tumblrテーマ作成において、トップページにのみある要素を表示させたいとき、大抵の人は、{block:IndexPage}というtumblrの独自タグで囲うことを考えると思います。

    普通に考えると、これでオッケー、のはずなのですが、実は{block:IndexPage}このタグ、囲った要素をトップページだけでなく、タグページにも表示させてしまうのです。

    このため、トップページには表示させたいけど、タグページには表示させたくない要素があった時に困ります。

    解決方法

    解説は後回しにして、まずこれを解決できるコードの記述方法を下記します。

    {block:PermalinkPage}<!--{/block:PermalinkPage}
    {block:TagPage}<!--{/block:TagPage}
    
    <h1>トップページだけ表示させたい要素</h1>
    <p>ここにトップページにのみ表示させたい要素のコードを記述します。</p>
    
    {block:TagPage}-->{/block:TagPage}
    {block:PermalinkPage}-->{/block:PermalinkPage}
    

    コード解説

    htmlのコメントアウト機能を使って実現させています。

    まず、1行目と最終行に注目します。
    コメントアウトの開始タグと終了タグを、それぞれ{block:PermalinkPage}~{/block:PermalinkPage}で囲っています。
    {block:PermalinkPage}で囲まれたコードは、個別記事ページ表示時のみ、実行されます。
    ですので、上記のコードの場合、個別ページ表示時には、コメントアウトが機能している状態になります。
    よって、記事個別ページ表示時には、該当の要素はまるごとコメントアウトされます。

    ↓tumblr上ではこんな状態になります

    <!--
    
     
    <h1>トップページだけ表示させたい要素</h1>
    <p>ここにトップページにのみ表示させたい要素のコードを記述します。</p>
    <p>コメントアウトされているので何を書いても無視されます</p>
    
    -->
    

    続いて、2行目と最後から2行目に注目します。
    上記と同様に、コメントアウトの開始タグと終了タグが、今度は{block:TagPage}~{/block:TagPage}で囲まれています。
    {block:TagPage}で囲まれたコードは、タグページ表示時のみ実行されます。
    よって、タグページが表示されている時、コメントアウト機能が実行され、該当の要素はまるごとコメントアウトされます。

    ↓tumblr上ではこんな状態になります

    <!--
    
     
    <h1>トップページだけ表示させたい要素</h1>
    <p>ここにトップページにのみ表示させたい要素のコードを記述します。</p>
    <p>コメントアウトされているので何を書いても無視されます</p>
    
    -->
    

    最後に、トップページが表示されている状態の時は、{block:PermalinkPage}で囲まれたコードも、{block:TagPage}で囲まれたコードも実行されません。
    というこは、コメントアウトタグは表示されない=コメントアウトされない=中のコードが実行される
    ということになります。

    ↓tumblr上ではこんな状態になります

    <h1>トップページだけ表示させたい要素</h1>
    <p>ここにトップページにのみ表示させたい要素のコードを記述します。</p>
    <p>コメントアウトされていないので、表示されます。</p>
    

    まとめると

    このやり方を使えば、

    • トップページ表示時は、コメントアウトが実行されず、該当のコードはそのまま実行される
    • タグページ表示時は、{block:TagPage}内のコメントアウトが実行されるため、中の要素はコメントアウト=非表示になる
    • 個別記事ページ表示時は、{block:PermalinkPage}内のコメントアウトが実行されるため、中の要素はコメントアウト=非表示になる

    となり、トップページのみ要素を表示させる、ということが可能になります。

    まとめ

    この記事のまとめはありません。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.