概要
「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'> </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'> </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'/>
デフォルトの記述は…ローカルに保存しておく事をお薦めします…
以上
です…最後までお読みいただきましてありがとうございます…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿