どうも。
前回のアイコンフォントの続きでございます。
このテキストリンクですが、外部サイトへのリンクである事を色やアンダーバーの装飾で表示はするものの、今ひとつ積極的にリンクである事を明示してはいないですよね。
そこで、テキストリンクの箇所に外部サイトへのリンクである事をわかりやすくする為、テキストリンクに をcssを使い付けてみようかと。
良く見かけるアイコンです。
ちなみに…
クラスやタグ、idの後に続けて:before、:afterと記述します。
css3の場合、::before、::afterとコロンを2つ付ける様に指示されていますが、css3に対応していないブラウザだとコロン2つで記述すると表示されません。
今の所はcss2のコロン1つで記述して問題無いと思います。
軽く説明を
cssの対象箇所を探します。
テーマ>>HTML編集画面でCtrl＋fで検索。入力フィールドにリンクと入力して検索します。
検索結果が記事ページの<a>について、スタイルが記述されている箇所（.post a）になります。
（まぁ当然です。）
そこでcssにClassを1つ追加してテキストリンクの場合のみアイコンが追加される様に妥協しました。
この方法だと記事作成時にリンクをclassとして手間が増えますが…。
cssに以下の青字を追加します。
*クラスは分かり易い物でOK。
または、以下のようにまとめてしまっても可能。
.post.postlink {
以上でcssの変更は終わりです。
以下の記事で簡単にアイコンフォント付きリンクを貼り付ける方法を投稿しています。
Chrome拡張機能 Create Linkで簡単にリンク作成 | プゥ二郎さんの日記
Bloggerで記事作成時にアイコンを表示させたいテキストリンクの場合は、HTMLモードでaタグを<span class="postlink"><a>〜</a></span>とspanで囲みclass="postlink"（cssで指定したクラス）と指定します。
この記事でもFontAwesomeサイトへのリンクにアイコンを付けています。
HTMLモードで以下の感じに記述。
ちょっと手間ですが、見栄えは良いと思います。
前回のアイコンフォントの続きでございます。
テキストリンクにアイコンフォント
記事を作成していると、文章の流れの中でテキストリンクを使う場合があると思います。このテキストリンクですが、外部サイトへのリンクである事を色やアンダーバーの装飾で表示はするものの、今ひとつ積極的にリンクである事を明示してはいないですよね。
そこで、テキストリンクの箇所に外部サイトへのリンクである事をわかりやすくする為、テキストリンクに をcssを使い付けてみようかと。
良く見かけるアイコンです。
擬似要素とcontent プロパティ
記事内のテキストリンクにアイコンを表示させるには、cssで擬似要素を使えば良いかと。ちなみに…
擬似要素とは
対象のクラスやタグ、id等にHTMLで記述されない文字等の固定値を対象の前または後ろに挿入する事が可能な要素です。クラスやタグ、idの後に続けて:before、:afterと記述します。
css3の場合、::before、::afterとコロンを2つ付ける様に指示されていますが、css3に対応していないブラウザだとコロン2つで記述すると表示されません。
今の所はcss2のコロン1つで記述して問題無いと思います。
content プロパティとは
擬似要素で挿入する文字はcontentプロパティで指定します。アイコンフォントの挿入例
以下の感じで、cssに追加します。
.クラス:after{
font-family: FontAwesome;
content: '\f08e';
}
font-family: FontAwesome;
content: '\f08e';
}
軽く説明を
- クラスに対して、擬似要素:afterを使用。
- font-family:でFontAwesomeを宣言します。
- contentで使用するアイコンフォントのコードを指定。この指定するコードは、FontAwesomeのサイトにあるアイコンフォントリストより、使いたいアイコンフォントをクリックして表示されたページの「Unicode」と書かれたコードです。今回はアイコンexternal-link「Unicode:f08e」を使います。
Vaster2のcssを変更
*テンプレートを変更します。必ずバックアップを取りましょう。cssの対象箇所を探します。
テーマ>>HTML編集画面でCtrl＋fで検索。入力フィールドにリンクと入力して検索します。
検索結果が記事ページの<a>について、スタイルが記述されている箇所（.post a）になります。
.post a{
text-decoration:none;
color:#3366cc;
}
.post a:hover {
text-decoration:underline;
color:#3366cc;
}
.post a:visited{
color:#3366cc;
}
.post:after{
font-family: FontAwesome;
content: '\f08e';
color:#3366cc;
}
上記の青字の通り追加したのですが、記事内の<a>タグに対する処理の為、画像にもアイコンが付いてしまいました。text-decoration:none;
color:#3366cc;
}
.post a:hover {
text-decoration:underline;
color:#3366cc;
}
.post a:visited{
color:#3366cc;
}
.post:after{
font-family: FontAwesome;
content: '\f08e';
color:#3366cc;
}
（まぁ当然です。）
そこでcssにClassを1つ追加してテキストリンクの場合のみアイコンが追加される様に妥協しました。
この方法だと記事作成時にリンクをclassとして手間が増えますが…。
cssに以下の青字を追加します。
*クラスは分かり易い物でOK。
.post{
text-decoration:none;
color:#3366cc;
}
.post:hover {
text-decoration:underline;
color:#3366cc;
}
.post:visited{
color:#3366cc;
}
.postlink {
text-decoration:none;
color:#3366cc;
}
.postlink:hover {
text-decoration:underline;
color:#3366cc;
}
.postlink:visited{
color:#3366cc;
}
.postlink:after{
font-family: FontAwesome;
content: '\f08e';
color:#3366cc;
}
.post.postlink {
text-decoration:none;
color:#3366cc;
}
.post.postlink:hover {
text-decoration:underline;
color:#3366cc;
}
.post.postlink:visited{
color:#3366cc;
}
.postlink:after{
font-family: FontAwesome;
content: '\f08e';
color:#3366cc;
}
外部サイトリンクを付ける記事の作成
更新2017-09-27以下の記事で簡単にアイコンフォント付きリンクを貼り付ける方法を投稿しています。
Chrome拡張機能 Create Linkで簡単にリンク作成 | プゥ二郎さんの日記
Bloggerで記事作成時にアイコンを表示させたいテキストリンクの場合は、HTMLモードでaタグを<span class="postlink"><a>〜</a></span>とspanで囲みclass="postlink"（cssで指定したクラス）と指定します。
この記事でもFontAwesomeサイトへのリンクにアイコンを付けています。
HTMLモードで以下の感じに記述。
<span class="postlink"><a href="http://fontawesome.io/icons/" target="_blank">アイコンフォントリスト</a></span>
*青字の部分がリンクの部分です。ちょっと手間ですが、見栄えは良いと思います。
0 件のコメント:
コメントを投稿