baserCMS blog/nextLink /prevLink のデザインを変えてみる

例えば、「bc_sample」テーマのブログで次の記事、前の記事リンクのデザインを以下のように変えてみます。

デザインの変更は、次のようなポイント。
①デフォルトのarrowをFontawesomeアイコンに変更。
　きちっと両端にレイアウトさせたい。
　折り返しのときは、縦中央に表示させたい。
②日本語らしく、折り返した記事タイトルは、左寄せにしたい。

まずは、①デフォルトの「≪」「≫」のarrowを消すために、blog/nextLinkおよびblog/prevLink関数にパラメータを指定して記述します。
ver4/関数リファレンス によれば、次のようなパラメータの構成。

$this->Blog->nextLink( [$post] , [$title] , [$htmlAttributes] )

今回のデザインは、記事タイトルを表示させたいので、[$title]は、空指定。[$htmlAttributes]の配列でarrowオプションを空指定することでデフォルトの「≪」「≫」を消します。

ということで、サンプルのコードはこんな感じです。

<div class="blog-contents-navi">
  <div class="contentsNavi">
    <div class="contentsNavi-inner-left">
      <?php $this->Blog->prevLink($post,'',['arrow' => '']) ?>
    </div>
    <div class="contentsNavi-inner-right">
      <?php $this->Blog->nextLink($post,'',['arrow' => '']) ?>
    </div>
  </div>
</div>

これをBlogフォルダ内のsingle.phpに既にある以下の記述と差し替えます。

<div class="bs-blog-contents-navi clearfix">
    <?php $this->Blog->prevLink($post) ?><?php $this->Blog->nextLink($post) ?>
</div>

その上で、以下のCSSを追加します。

/* bc_sampleテーマのレイアウトにアジャストするため */
  .blog-contents-navi {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 160px 0 0 0;
    font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    font-size: 14px;
  }
  .blog-contents-navi a {
    transition: all 300ms;
    text-decoration: none;
  }
  .blog-contents-navi .prev-link,
  .blog-contents-navi .next-link {
    padding: 20px 0;
  }
  .blog-contents-navi a:link, .blog-contents-navi a:visited {
    color: #000 !important;
  }
  .blog-contents-navi a:hover {
    color: #555 !important;
  }
  /* そもそも「関連記事」エリアのレイアウトがされていなかったので追加 */
  #RelatedPosts {
    margin-top: 80px;
  }

/* prevlink nextlink デザイン変更用 */
  .contentsNavi a {
    overflow: hidden;
    text-overflow: ellipsis; /* 3点リーダー省略表示するため */
    white-space: nowrap;
  }
  .contentsNavi {
    display: flex;
    position: relative;
    max-width: 860px; /* bc_sampleテーマの場合 */
  }
  .contentsNavi-inner-left, .contentsNavi-inner-right {
    max-width: calc(50% - 10px);
    width: auto;
  }
  .contentsNavi-inner-right {
    display: flex;
    box-sizing: border-box;
    padding-right: 1.5em;
    margin-left: auto; 
  }
  .contentsNavi-inner-right a:after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute; /* 矢印アイコンを右端レイアウトにするため */
    right: 0;
    top: calc(50% - 0.5em); /* 矢印アイコンを縦中央レイアウトにするため */
    line-height: 100%;
  }
  .contentsNavi-inner-left {
    display: flex;
    box-sizing: border-box;
    padding-left: 1.5em;
  }
  .contentsNavi-inner-left a:before {
    content: "\f060";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute; /* 矢印アイコンを左端レイアウトにするため */
    left: 0;
    bottom: calc(50% - 0.5em); /* 矢印アイコンを縦中央レイアウトにするため */
    line-height: 100%;
  }

「折り返しで縦中央表示」にしたい場合は、以下の .contentsNavi a{} をコメントアウトするだけです。

/*.contentsNavi a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }*/

おっと、Fontawesomeの読み込みを忘れてました。CDN経由の読み込みが簡単なので、レイアウトファイルのhead内に次の1行追加。（すでにFontawesomeを利用している場合はもちろん不要です。）
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.6.0/css/all.css">

これで、今回のデザイン変更は完了です。
ちょっとしたことですが、上手にFontawesomeとかでアイコンを加えるだけで、すこし気の利いた感じのデザインになったりしますので、是非チャレンジしてみてください。