Blogger:テキストリンクにアイコンをつける-p--q

テキストリンクは現在テンプレートの設定で青字に設定されています。でもテンプレートによっては違う設定になります。テキストリンクがはっきりわかるようにアイコンをつけました。

<a>タグのbackgroundにテキストリンクアイコンを設置

テクストリンクは<a>タグなのでこれに設定すれば自動的にアイコンをつけることができます。

まずはShowing Hyperlink Cues with CSS | Ask the CSS Guyからアイコンをダウンロードさせて頂きます。

zipファイルを解凍したら使用するアイコンをまずは自分のブログに貼り付けます。

私は

を使用することにしました。

投稿編集画面でHTMLモードにすると貼り付けたアイコンの自分のブログの中でのURLがわかります。

        
              <img border="0" src="http://3.bp.blogspot.com/-a3uCwhz3Qv0/icon_external.gif" />

これのsrc="～"の～の部分です。

        
              a{ 
   padding-right: 18px;
   background: transparent url(上の～のアドレスを入れる) no-repeat right center;
}

次に管理画面→テンプレート→HTMLの編集、で上記を

        
              ]]></b:skin>

の直前にペーストしてテンプレートを保存します。

ところがこの方法ですとブログが

だらけになります。

タイトルやアーカイブ、画像の後ろにも

がくっついてしまいます。

アイコンをくっつける<a>タグを絞る方法

アイコンをくっつける<a>タグを限定する方法は以下の様なものがあります。

リンク先の最終語句で限定する。.pdfで終わるファイルへのリンクのみアイコンをつける例。

        
              a[href $='.pdf'] {
 
}

リンク先の先頭語句で限定する。mailto:で始まるリンクのみアイコンをつける例。

        
              a[href ^="mailto:"] {
 
}

リンク先に含まれる語句で限定する。genteigokuを含むリンクのみアイコンをつける例。

        
              a[href ~='genteigoku'] {
 
}

タグにクラスを設定して限定する。この場合いちいちリンク先にclassを設定しないといけません。

        
              <a class="kurasumei" href="aikontuketairinku.html">アイコンをつけたいリンク先</a>

このクラスkurasumeiをつけた<a>タグのみにアイコンをつける方法。

        
              a[class ="kurasumei"] {
 
}

リンクの形式で限定する。ポップアップリンクのみアイコンをつける例。

        
              a[rel="popup"] {
 
}

以上Showing Hyperlink Cues with CSS | Ask the CSS Guyに書いてあった例です。
classでの限定はうまく動かないとかなんとか書いてあります。

外部リンクにのみアイコンを表示する方法

除外する語句が設定できればBloggerの自分のブログのアドレスと画像へのリンクを除外できそうですが除外する語句を設定する方法はないようです。

そこでCSSで外部サイトへのリンクの後ろにアイコン画像を表示する｜Webparkで紹介されている方法を使います。

まずはhttpで始まるリンクにのみアイコンをつけます。

        
              a[href ^="http"] {
   padding-right: 18px;
   background: transparent url(アイコンのアドレスを入れる) no-repeat right center;
}

これに続けて自分のブログ名を含むリンクをアイコン無しの設定に上書きします。

        
              a[href ^="http://p--q.blogspot."] {
   padding-right: 0px;
   background: none;
}

[href　 ^="p--q.blogspot.jp"]とはせずp--q.blogspot.jp.comなどにも対応できるようにしています。

さらにjpgファイルへのリンクの設定も同様に上書きします。

        
              a[href $=".jpg"] {
   padding-right: 0px;
   background: none;
}

これで外部リンクのみにアイコンがつくようになりそうです。

まとめると以下のようになります。

        
              a[href ^="http"] {
   padding-right: 18px;
   background: transparent url(アイコンのアドレスを入れる) no-repeat right center;
}
a[href ^="http://p--q.blogspot."] {
   padding-right: 0px;
   background: none;
}
a[href $=".jpg"] {
   padding-right: 0px;
   background: none;
}

投稿本文のリンクのみに限定してアイコンをつける方法

さらにクラスを限定した<a>タグのみにCSSを適応することで、投稿部分のみに限定してアイコンをつけることにしました。

まずは投稿部分のクラス名を探します。

テンプレートのHTMLで投稿本文部分は<data:post.body/>です。

このサイトではモバイルサイトは使っていませんので<b:includable id='mobile-post' var='post'>の部分はいじらず<b:includable id='post' var='post'>の中のみ見てみます。

<b:includable id='post' var='post'>のなかに<data:post.body/>が2箇所にでてきました。

        
          
          
              
              <b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description,
      for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

            

        
      

この<b:if cond='data:blog.metaDescription == ""'>というif文は何を場合分けしているのかわかりませんが、いずれもクラスは'post-body entry-content'です。

これはpost-bodyとentry-contentという2つのクラスが指定されていることを示します。

        
              .post-body .entry-content a[href ^="http"] {
    
}

という指定ができるかと思いましたがこれでは何も反映されませんでした。

entry-contentは<data:post.body/>の部分にしかでてきませんので、このクラスで限定することにしました。

        
              .entry-content a[href ^="http"] {
   padding-right: 18px;
   background: transparent url(アイコンのアドレスを入れる) no-repeat right center;
}
.entry-content a[href ^="http://p--q.blogspot."] {
   padding-right: 0px;
   background: none;
}
.entry-content a[href $=".jpg"] {
   padding-right: 0px;
   background: none;
}

これを管理画面→テンプレート→HTMLの編集、で

        
              ]]></b:skin>

の直前にペーストしてテンプレートを保存しました。

これでうまくいきました。

.entry-content a[href ^="http"]の条件を一番下に持ってくると画像などにもアイコンがついてしまいましたので順番も大事です。

自分のブログ内のリンクにもアイコンをつける

投稿本文のリンクにのみアイコンをつける方法がわかったのでブログ内リンクにもアイコンをつけることにしました。

アイコンは

を使うことにしました。

a[href ^="http://p--q.blogspot."]に内部リンクのアイコン設定部分を変更するだけです。

        
          
          
              
              .entry-content a[href ^="http"] {
   padding-right: 18px;
   background: transparent url(外部リンクアイコンアドレス) no-repeat right center;
}
.entry-content a[href ^="http://p--q.blogspot."] {
   padding-right: 18px;
   background: transparent url(内部リンクアイコンアドレス) no-repeat right center;
}
.entry-content a[href $=".jpg"] {
   padding-right: 0px;
   background: none;
}
.entry-content a[href $=".JPG"] {
   padding-right: 0px;
   background: none;
}

            

        
      

大文字と小文字が区別されましたので.jpgと.JPGと両方設定しています。

backgroundプロパティの解説

仕組みがよくわからないまま記事を書きましたがbackgroundプロパティについて学習したので追記します。

スタイルシート講座 - 超初心者のためのホームページ作成講座に詳しいです。

backgroundプロパティは背景に関する設定ができます。

        
              タグ{
background:color値 image値 repeat値 attachment値 position値;
}

と設定します。

colorは背景色、imageは背景に設置する画像、repeatは背景に設定した画像を繰り返し設定、attachmentはスクロールと一緒に背景画像を動かすかどうか、positionはタグ内での背景画像の相対位置の設定、になります。

        
              タグ{ 
transparent image値 repeat scroll position値; 
}

値を省略するとこのようなデフォルト値になっています。

背景色は透明、背景画像は繰り返す、スクロールと一緒に動かす、ということです。

image値にはurl("ファイル名")で画像を指定します。

position値は2個あり1個目はタグ内の左からの位置、2個目は上からの距離、になります。

        
              background: transparent url(外部リンクアイコンアドレス) no-repeat right center;

これは背景は透明、url(外部リンクアイコンアドレス)の画像を背景に設定、繰り返しはしない、タグ内の右端、上下位置は中央に配置、ということになります。

        
              padding-right: 18px;

ここでは最初にpadding-rightで右端に18px空間をあけてそこにアイコンを配置しています。

今回はテキストリンクの右側にアイコンを表示しましたが、左側に表示するにはrightをleftに書き換えて以下のようにすればよいですね。

        
              a{
   padding-left: 18px;
   background: url(外部リンクアイコンアドレス) no-repeat left center;
}

trasparentはデフォルト値なので省略しています。

こんな感じになります。

参考にしたサイト

リンク先の拡張子に併せてアイコンを自動挿入する方法「Showing Hyperlink Cues with CSS」 | DesignDevelop
英語ページの日本語解説です。

Showing Hyperlink Cues with CSS | Ask the CSS Guy
英語での詳説です。アイコンのダウロードもできます。

CSSで外部サイトへのリンクの後ろにアイコン画像を表示する｜Webpark
アイコンをつけるリンクを限定する方法がいくつか紹介されています。

スタイルシート［CSS］/CSSの基本/クラス名を使った指定 - TAG index Webサイト
CSSでのクラス名の扱い方の解説。

スタイルシート講座 - 超初心者のためのホームページ作成講座
backgroundプロパティの解説

次の関連記事:Blogger:CSSスプライトでテキストリンクアイコンを読み込む

3 件のコメント:

p--q2013年7月21日日曜日 10:14:00 JST
ただいまうまく動いていないことに気づきました。ないかとバッティングしているのでしょうか。
返信削除
返信
p--q2013年7月21日日曜日 10:25:00 JST
原因がわかりました。テキストリンクのCSSを書いた上に相手のいない｝があることが原因でした。
返信削除
返信
p--q2013年7月24日水曜日 22:18:00 JST
background: transparent url(外部リンクアイコンアドレス) no-repeat center right;
となっていたのをrightとcenterを入れ換えて訂正しました。
なぜかこれでもうまく表示されていたのですが、本来「左からの位置」「上からの位置」の意味なので訂正しました。
返信削除
返信

Blogger:テキストリンクにアイコンをつける