前へ、次へのナビゲーションリンクをアイコンフォントへ変更する。

スポンサー

アイコンフォント化が止まらなくなっています((┌(｡△｡)┐))

やり出すと、あれもこれもと。

気付くと、やらずにおれない性分なんで

結果、寝不足。

今回は、シングルページ下の「前へ」「次へ」のリンク。

今まで、アローアイコンに画像使ってたので、これをアイコンフォントにしようってことです。

アイコンフォント導入方法

まずは、アイコンフォントを導入しなくちゃ始まらないので。
導入方法は、以下をご参照くださいませ。

HTML

大抵single.phpですね。

これは、お使いのテーマで違いますけど、必ず必要なのは「class=”lsf”」

<div class="p-navi clearfix">
   <div class="p-navi-before">
    <p>
	<span class="lsf">back 前の記事</span>
    </p>
    <p>
    <?php previous_post_link('%link', '%title', TRUE) ?>
    </p>
   </div>
   <div class="p-navi-after">
    <p>
	<span class="lsf">次の記事 next</span>
    </p>
    <p>
    <?php next_post_link('%link', '%title', TRUE) ?></p>
    </p>
   </div>
</div>

ねこもりやは、HTML構造から書き換えました。
手っ取り早いので。

CSS

.p-navi {
	width:100%;
	margin:0 0 10px 0;
}
.p-navi-before,.p-navi-after  { 
	display:block; 
	width:45%; 
	padding:20px 0 10px ;
}
.p-navi-before{ 
	float:left; 
}
.p-navi-after{ 
	float:right; 
}
.p-navi p { 
	display:block; 
	width:100%;
	overflow:hidden;
}
.p-navi-after p{
	text-align:right;
}
.p-navi span.lsf{
	font-size:150%;
	color:#a8a2a2;
}
.p-navi a{
	display:block;
	padding:0 0 1em;
}

「次へ」は、右寄せにしています。

画像ではないので、色もサイズも簡単に変えられるので、アイコンフォント最高ですね♪

完成

一昨日から、ずーとアイコンフォント化にかかりきりでございますヽ(*^^*)ノ
のめり込みやすい性格は、幼稚園の頃からちっとも変りませんね。

もっと、視野を広くもたなくちゃいけないんだけど。

でも、このアイコンフォント、ほんとに使えますね。

あとはもう、ボチボチやっていこうかな。

他にもアイコンフォント化に関する投稿ありますので、良かったらどうぞ♪
検索結果 アイコンフォント

参考

HTML構造は、Oh-Blogさんのソースを参考にさせて頂きました。

アイコンフォントでページトップへ戻るリンクを作成した記事はこちら↓

アイコンフォントでのパンくずリストの作成はこちら↓

スポンサー

ニュースレターを購読する

このフィールドは空白のままにしてください

更新情報をメールで受け取ることができます。

メールアドレス *

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。