from :: Asahikawa Hokkaido

passer-by198

primetime pencil

2014/06/18


Posted

Bloggerの「登録: 投稿 (Atom)」という「feed-links」の非表示・削除とデザイン構築

概要


feed-links
Blogger の「feed-links」です…

テンプレートにより様々ですが…日本語環境では…

「投稿 (Atom)」…ってな感じの…

先生お得意の…違和感満載な文字リンクが漏れ無く付いて来ます…

なので…「非表示・削除」するか…「デザイン構築」するかの…

「二者択一」を否応無く迫られる訳です…

それぞれ個別のケースで見て行きましょう…

「非表示」にする場合


「CSS」で対処する場合は…1行記述するだけです…
  1. .feed-links{display:none}
…が…使いもしない無駄な「CSS」と「HTML」が残る訳ですから…

あまりお薦め出来ません…「HTML」で該当する「読み込みタグ」を…
  1. <b:include data='feedLinks' name='feedLinksBody'/>
コメントアウトするという手法を推奨する向きもあるでしょうが…
  1. <!-- 「HTML」のコメントアウト -->
ソースコードでのコメントアウト全般に言える事ですが…

無駄にファイルサイズを増やして…積もり積もれば…

読み込み遅延の元凶になりますし…そもそもが…

「あくまで一時的な利用に抑えるべき」という考え方ですので…非推奨です

「CSS」にしろ「HTML」にしろ…「非表示」にして納得出来たなら…

デフォルトのソースコードをローカルに保存しておいて…

該当箇所を「削除」するのが…適正な対処だと思われます…

「削除」する場合


この部分を「削除」します…

「削除」する場合はテンプレートを…

必ずバックアップをしてから行って下さい…

「テンプレート」「HTMLの編集」から…該当部分は…

デフォルトでは…こんな感じになっていると思われます…

該当部分のデフォルトの「HTML」



これを…全て削除しようとすると先生が…

デフォルトの記述を復活させてしまいますので…
  1. <b:includable id='feedLinks'/>
  2. <b:includable id='feedLinksBody' var='links'/>
…のように…最低限の記述にして「テンプレートを保存」します…

「デザイン構築」する場合


デフォルトの「Feed」で構築する


「登録: 投稿 (Atom)」が…どのような「データタグ」で出力されているか…

上記…該当部分のデフォルトの「HTML」…を見てみると…

「<data:feedLinksMsg/>」が「登録: 」の部分…

「<data:f.name/>」が「投稿」の部分…

「(<data:f.feedType/>)」が「 (Atom)」の部分…ってな感じですね…

…なので…全体の色やサイズなどを変更するには「CSS」で…
  1. .feed-links{ここに全体の「CSS」}
リンクの部分を変更したい場合は…
  1. a.feed-link{ここにリンクの部分の「CSS」}
個別に変更したい場合は…各「データタグ」を…

お好みの文字列などに置換して下さい…

その他の「Feed」で構築する


要するに…「RSS Feed」ですから…

「FeedBurner」など…お好みの「Feed」でも問題無いでしょう…

当サイトでは…このような…マウスホバーでロールオーバーするリンク画像を…


  1. <a href="「Feed」の URL"><span class="id73" title="RSS Feed(Atom)で購読する"></span></a>
「CSS Sprites」で記事下に表示させています…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】



「RSS Feed」を含めた右寄せの…3個のリンクは…

カテゴリーによって…微妙に違いますので…

カテゴリー毎に…定型文管理ソフトで管理して…記事に直書きしています…

 Clibor / クリップボード履歴と定型文管理ソフト



おわりに…


繰り返しになりますが「削除」する場合はローカルに保存するのをお忘れなく…

これを機に…使っていない「CSS」「HTML」などを…

皆さんも見直してみては如何でしょう

以上です…最後までお読みいただきましてありがとうございます…


0 Comments :

「jQuery」と「jQuery UI」で HTML に彩りを添えよう…


「導入」「Button」「Accordion」「Tabs」「Effects/Slide」
「Progressbar」「Dialog」「Tooltip」「Menu」
「Extra」 / 公式「Widgets」以外の「jQuery UI」スクリプト
Blogger Template Customize Universal / INDEX

Blogger テンプレート・カスタマイズ / 全般を解説
高速化・最適化対策の結果と備忘録