読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

前後の記事へのリンクを追加

前後の記事へのリンクを追加

  • リンクを示すアイコンは、「アイコンフォント(Font Awesome)」を使って表示する

前後の記事の個別ページへのリンクを出力する

<?php the_content(); ?>

<div class="navlink">
<span class="navlink-prev">
<?php previous_post_link(); ?>
</span>
<span class="navlink-next">
<?php next_post_link(); ?>
</span>
</div>
前後を示すアイコンを削除
<?php the_content(); ?>

<div class="navlink">
<span class="navlink-prev">
<?php previous_post_link( '%link', '%title' ); ?>
</span>
<span class="navlink-next">
<?php next_post_link( '%link', '%title' ); ?>
</span>
</div>

アイコンフォントを利用する


<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
アイコンフォントで矢印アイコンを挿入
  • 左向き矢印「icon-chevron-sign-left」
  • 右向き矢印「icon-chevron-sign-right」


<?php the_content(); ?>

<div class="navlink">
<span class="navlink-prev">
<?php previous_post_link( '%link', '<i class="icon-chevron-sign-left"></i> %title' ); ?>
</span>
<span class="navlink-next">
<?php next_post_link( '%link', '%title <i class="icon-chevron-sign-right"></i>' ); ?>
</span>
</div>
リンクのデザインを指定
/* pagenation
---------------------------------------*/
.navlink {
  font-size: 14px;
  border-top: solid 1px #ccc;
  margin: 30px 0 40px 0;
  overflow: hidden;
}
.navlink i {
  font-size: 40px;
  color: #bdbc8f;
  vertical-align: middle;
}
.navlink a {
  width: 50%;
  padding: 10px 0;
}
.navlink-prev a {
  float: left;
  text-align: left;
}
.navlink-next a {
  float: right;
  text-align: right;
}
.navlink a:hover { color: #000; }
.navlink a:hover i { color: #f80; }