~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年4月18日金曜日

Bloggerカスタマイズ:トップページで投稿とAtomボタンが表示されないようにする


スポンサーリンク

通常 Blogger のトップページには、投稿した記事の一覧が表示されます。
しかしながら、私はBlogger のトップページをカスタマイズして、トップページでは記事一覧を表示しないようにしたかったのですが、下記のようにレイアウトのブログの投稿の設定からは表示しないようにはできないようです
blogger_top_page_num
メインページの投稿数を 0 にしたかったが、1 より大きい値をしてしてくださいとエラーが出てしまう。

そこで、下記文献を参考に HTML をカスタマイズして、私が作成しているブログ「Dr.ウーパ情報局」にてトップページで投稿とAtomボタンを表示しないようなデザインを作りました。
Bloggerでメインバーナ等をトップページだけに表示させる魔法のコード - ふりむけばコウホウ Bloggerでメインバーナ等をトップページだけに表示させる魔法のコード - ふりむけばコウホウ
コンピュータ系サラリーマンブログ: GoogleブログBlogger: 特定ページのみにhtmlソースコードを記述する方法コンピュータ系サラリーマンブログ: GoogleブログBlogger: 特定ページのみにhtmlソースコードを記述する方法


修正

BloggerのテンプレートからHTMLの変更をクリックして、テンプレートのHTMLを修正します。
以下のように、トップページ以外で囲まれた部分を表示するコマンドタグ<b:if cond="data:blog.url != data:blog.homepageUrl"></b:if>を用いて、投稿とAtomボタンを表示する部分である<div class="main-outer">...</div>を囲みます。
<b:if cond="data:blog.url != data:blog.homepageUrl">
<div class="main-outer">...</div>
</b:if>

drupa_info_control_hidden_html

修正後の HTML


これで修正を保存します。
※HTMLを変更する場合には、修正前の HTML を保存しておいた方が良いです。(HTMLの構造を破壊して、元に戻せなくなるのを防ぐため。)


結果

以上の修正を行った結果、以下のようにトップページでは投稿とAtomボタンを表示せず、トップページ以外ではAtomボタンを表示するようになりました。

drupa_info_top

トップページでは記事を表示しない。

drupa_info_page

トップページ以外では記事を表示する。


このように Blogger では HTML をカスタマイズすることによって、ページごとに異なる動作をさせることが可能になります。
今後もこの機能を使いこなして、Blogger を使いこなしていきたいと思います。

スポンサーリンク

コメントを投稿

コメント投稿機能について