crossline

▼wordpress~次のページ、前のページ~

font-size:12px;line-height: 150%;

リンクのデザイン

記事を新しいものから順に時系列に従ってリンクを作る場合、

webページでは「古い記事のリンクを左向き」「新しい記事のリンクを右向き」に設定するのが一般的。

 

古い記事へのページリンクを追加

<?php endwhile: endif; ?>

 

<p class="pagelink">

<?php next_posts_link('&laquo; 前の記事' ); ?>

</p>

 

※新しい記事から表示されているので、「next_posts」は、現在の表示からみてそれより前の新しい記事ということになります。

 

 

 

新しい記事へのページリンクを追加

<?php endwhile; endif; ?>

 

<p class="pagelink">

<?php previous_posts_link( '次の記事 &raquo'); ?>

</p>

 

 

リンクを区別できるようにする

<p class="pagelink"><span class="oldpage">

<?php next_posts_link( '&laquo; 前の記事' ); ?>

</span></p>

<p class="pagelink"><span class="newpage">

<?php previous_posts_link( '次の記事 &laquo;' ); ?>

</span></p>

 

 

 

リンクをトップページだけに出力する

<?php if( is_home( ) ) : ?>

 

<p class="pagelink"><span class="oldpage">

<?php next_posts_link( '&laquo; 前の記事' ); ?>

</span></p>

<p class="pagelink"><span class="newpage">

<?php previous_posts_link( '次の記事 &laquo;' ); ?>

</span></p>

 

<?php endif; ?>

 

 

 

 

 

(CSS)

 

/* pagelink */

span.oldpage {

float: left;

margin: 0 0 15px 0;

display: inline;/* IE対策 */

}

span.newpage {

floast: right;

margin: 0 0 16px 0;

display: inline;/* IE対策 */

}

 

p.pagelink a {

color: #0c8bcd;

font-size: 0.75em;

}