位置固定型のナビゲーションリンクを設置しました

Hinemosu

当ブログHinemosuの個別記事ページに、位置固定型のナビゲーションリンクボタンを設置しました。

ブログ個別記事の右下を見ると、なんか見えるはずですよ。

現在の表示内容はこんな感じ。

2013-02-26_2220

意味的には「見たまんま」で、クリックすると前記事や次記事、ページトップに遷移します。

使ってるコード的にはこんな感じ。

以下のコードをsingle.phpの最後の方に追加。

<?php
    $older_post = get_previous_post(false, '') ;
    $newer_post = get_next_post(false, '') ; 
?>

<div class="float_navi">
    <ul>
        <?php if ( $older_post ) : ?>
            <li class="fl_navi_prev">
            <a href="<?php echo get_permalink($older_post->ID) ?>" title="<?php echo apply_filters('the_title', $older_post->post_title, $older_post); ?>" rel="nofollow">←<br>前記事</a>
            </li>
        <?php endif; ?>
        <?php if ($newer_post) { ?>
            <li class="fl_navi_next">
            <a href="<?php echo get_permalink($newer_post->ID) ?>" title="<?php echo apply_filters('the_title', $newer_post->post_title, $newer_post); ?>" rel="nofollow">→<br>次記事</a>
            </li>
        <?php } ?>
        <li class="fl_navi_top"><a href="#content">↑<br>トップ</a></li>
    </ul>
</div>

以下のコードをCSS定義ファイルに追加。

.float_navi {position:fixed;right:5px;bottom:20px;z-index:100;}
.float_navi ul{margin:0;padding:0;list-style:none;}
.float_navi ul li{margin:0;padding:0;text-align:center;}
.float_navi ul li a{margin:0;padding:0;display:block;width:45px;height:45px;font-size:11px;color:#ffffff;text-decoration:none;background:#000000;border:solid #f0f0f0;border-width:0 1px 1px 1px;}
.float_navi ul li:first-child a{border-radius:5px 5px 0 0;}
.float_navi ul li:last-child a{border-radius:0 0 5px 5px;}
.float_navi ul li.fl_navi_prev a,
.float_navi ul li.fl_navi_next a,
.float_navi ul li.fl_navi_top a{height:35px;padding-top:10px;}

上記のコードは「941::blog」に激しくインスパイアされています。

941さんのブログには、写真ブログとしてのコンセプトだけではなく、デザイン面でも大きく影響を受けてます。この場を借りて感謝！

そんな感じで！