Bloggerのバックリンク「backlinks」の非表示・削除とデザイン構築

概要

「MinimaBlack」のバックリンクです…

投稿へのリンクが設定されている…

ウェブ上の他のページをコメントと共に表示して確認出来る機能ですが…

コメントなら先生から通知が来ますが…バックリンクは…

いつの間にやら……ってな感じで通知はされません…

デフォルト表示は…先生お得意のトホホ感が満載です…

サンプル画像のように表示されている場合の要素は…こんな感じになっています…

サンプル画像の「HTML」

<div id="backlinks-container">
  <div id="Blog1_backlinks-container"><a name="links"></a><h4>この投稿へのリンク</h4>
    <p class="comment-footer">
      <a class="comment-link" href="//www.blogger.com/blog-this.g" id="Blog1_backlinks-create-link" target="_blank">リンクを作成</a>
    </p>
  </div>
</div>

「DOM構築」の流れ

では…バックリンクは…どのようにして生成されているか

「DOM構築」の流れも見てみましょう…

バックリンク生成での「DOM構築」の流れ

<div id='backlinks-container'>
  <b:if cond='data:post.showBacklinks'>
    <b:include data='post' name='backlinks'/>
  </b:if>
</div>

<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='"item-control " + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' title='Delete Backlink'>
      <span class='delete-comment-icon'>&#160;</span>
    </a>
  </span>
</b:includable>

<b:includable id='backlinks' var='post'>
  <a name='links'/><h4><data:post.backlinksLabel/></h4>
  <b:if cond='data:post.numBacklinks != 0'>
    <dl id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'>
            <span class='backlink-toggle-zippy'>&#160;</span>
            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'>
              <data:post.authorLabel/><data:backlink.author/>
            </span>
            <span class='comment-timestamp'>
              <data:post.timestampLabel/><data:backlink.timestamp/>
            </span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' id='b-backlink' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>

<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.showBacklinks'>
      <a class='comment-link' expr:href='data:post.url +   "#links"'><data:top.backlinkLabel/></a>
    </b:if>
  </b:if>
</span>

そもそも… 当サイトでは…コメントもソーシャルブックマークも…殆ど無い

…のは…長年検証してきましたし…結果…デザイン重視で…

コメントフォームですら折り畳んでいるのに…

「rel='nofollow'」属性は付与されるようですが…なんとも…迷惑な感じです…

なので…当然ながら…削除してしまっています…

しかしながら…削除だけでは記事にし辛いので

チョコちょこっと…デザインもしてみましょう…(￣ー￣) 邪笑®

バックリンクを「デザイン」する

相も変わらず…先生の日本語は解り辛いですが…

「この投稿へのリンク」はバックリンクのタイトル「h4」で…

「リンクを作成」はクリックすると「#links」を付与された…

「….html#links」ってな URL のリンクが生成されます…

どちらも…「CSS」は設定されていません…設定する場合は…

#Blog1_backlinks-container h4{「この投稿へのリンク」の「CSS」}
a.comment-link{「リンクを作成」の「CSS」}

…ってな感じで記述します…

非表示にする場合は「display:none」を記述して下さい…

非表示で納得出来たなら…単なる無駄な記述が残るだけですから

下記…バックリンクを「削除」する…で削除する事をお薦めします…

「データタグ」は…概要と…「DOM構築」の流れ…を比較すると…

「この投稿へのリンク」は…16行目で…

「<data:post.backlinksLabel/>」で生成されていて…

「リンクを作成」が…42行目で…

「<data:post.createLinkLabel/>」で生成されています…

「データタグ」を…お好きな文字列や画像に置換出来ますし…

「Font Awesome」のアイコンなども使えます…

 「Font Awesome」のCDNでアイコンをWebフォント機能を使ってBloggerに表示【CSS3】


お好きな文字列や画像 …ってな感じにするには…

<i class='fa fa-link fa-lg fa-fw'/>お好きな文字列や画像<i class='fa fa-link fa-lg fa-fw'/>

「jQuery」などを導入していればボタン化しても良いでしょう…

 「jQuery」「jQuery UI」第２回「Button」リンクとフォームをボタン化


「jQuery」と「Font Awesome」を組み合わせるとこんな感じになります…

「jQuery」+「Font Awesome」

<span class="buttons"><a><i class='fa fa-link fa-lg fa-fw'/>「jQuery」+「Font Awesome」<i class='fa fa-link fa-lg fa-fw'/></a></span>

「リンクを作成」で使用する場合は…

リンク要素を…42行目と同じになるように書き換えて下さい…

バックリンクを「削除」する

「削除」する箇所

該当箇所…上記…「DOM構築」の流れでの…

「7」行目から「44」行目を削除すると…

先生が…せっせと…デフォルト記述を復活させてしまいますので…

このように…最小限の記述にして「保存」すれば OKです…

<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>

デフォルトの記述は…ローカルに保存しておく事をお薦めします…

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

Tips Universal Header Sidebar Footer Current-Label : Main