CSSだけで新着記事を流れるテキストのヘッドライン表示にする

流れるテキストで目立たせて、新着記事等をJavaScript等を使わずCSSだけで表示させる方法を、紹介します。

流れるテキストヘッドライン概要

この表示をヘッドラインと言っていいのかわかりませんが、欄外表示という意味も持つ「ヘッドライン」表示と勝手に言っております。

無料ワードプレステーマのライオンブログにもあるヘッドライン表示。
やっぱり、動きのある表示は目立ちますよね。

今回は新着記事3件を表示させて、右から左へ流れる動きを付けて表示させます。

PC表示は左から流れてキュっと止まる感じ。

またスマホ表示（横幅768px以下）で流れる表示を変え、ゆっくり流れるようにしてます。

HTML

<div class="head_line">
  <div class="hl_title">New Article</div> 
  <ul>
    <li>
      <span class="day">2019/01/01</span>
      <a href="#">タイトル</a>
    </li>
  </ul>
</div>

ワードプレスの場合（get_posts）

Cocoonでヘッダーに表示させる場合だと、子テーマのtmp-userフォルダ内のfooter-insert.php内に追記すればOKです。

件数を変更する場合は、posts_per_page’ => 3, の数字を変更してください。
変更した場合はCSSの変更も必要です。

<div class="head_line">
  <div class="inner">
    <div class="hl_title">New Article</div>
    <ul>
      <?php
        $args = array(
          'posts_per_page' => 3,
          'post_type' => 'post',
        );
        $my_posts = get_posts( $args );
        foreach ( $my_posts as $post ) :
        setup_postdata( $post );
      ?>
      <li>
        <span class="day"><?php the_time('Y/m/d'); ?></span>
        <a href="<?php the_permalink(); ?>">
          <?php the_title(); ?>
        </a>
      </li>
      <?php endforeach; wp_reset_postdata(); ?>
    </ul>
  </div>
</div>

CSS

.head_line{
     background: #333;
     font-size: 80%; /* お好みで変更してください */  
 }
 .head_line .inner{
     max-width: 1276px; /* お好みで変更してください */   
     margin: 0 auto;
     position: relative;
 }
 .head_line .hl_title{
     padding: 10px 5px 10px 15px;
     position: absolute;
     top: 0;
     left: 0;
     background: #444;
     color: #FFF;
     line-height: 1;
     z-index: 5;
 }
 .head_line ul{
     width: 100%;
     margin: 0;
     height: calc(1em + 20px);
     overflow: hidden;
     white-space: nowrap;
     position: relative;
 }
 .head_line ul li{
     width: 100%;
     padding-left: 100px;
     animation : headLine 24s linear infinite;  /* 1項目、8秒の設定で×3件 */ 
     position: absolute;  /* 表示項目を全部重ねる */ 
     top: 0;
     left: 90px;
     background: #333;
     z-index: 3;
     opacity: 0;
     visibility: hidden;  /* visibilityで要素を非表示に */ 
     line-height: 1;
     list-style: none;
 }
 .head_line ul li::before{
     content: '';
     width: 100px;
     height: 50px;
     position: absolute;
     top: 0;
     left: 0;
     background: #444;
 }
 /* visibilityで要素の表示・非表示を切り替え */ 
 @keyframes headLine{
     from {
         opacity: 1;
         visibility: visible;
     }
     33% {
         opacity: 1;
         visibility: visible;
     }
     34% {
         opacity: 0;
         visibility: hidden;
     }
     99% { opacity: 0;}
     100% { opacity: 1;}
 }
 .head_line ul li:nth-of-type(2){
     animation-delay: 8s;
     z-index: 2;
 }
 .head_line ul li:nth-of-type(3){
     animation-delay: 16s;
     z-index: 1;
 }
 .head_line ul li .day{
     padding: 5px 10px;
     border-radius: 5px;
     position: absolute;
     top: 6px;
     left: 6px;
     z-index: 1;
     color: orange;
     background: #333;
     font-size: 80%;
 }
 .head_line ul li a{
     padding: 10px 15px;
     color: #FFF;
     display: block;
     transform: translateX(100%);
     animation : listScroll 24s linear infinite;
     text-decoration: none;
     transition: .5s;
 }
 .head_line ul li:nth-of-type(2) a{
     animation-delay: 8s;
 }
 .head_line ul li:nth-of-type(3) a{
     animation-delay: 16s;
 }
 @keyframes listScroll{
     from { transform: translateX(100%);}
     4% { transform: translateX(0);}
     35% { transform: translateX(0);}
     100% { transform: translateX(100%);}
 }

固定させる場合は、.head_lineにwidth: 100%; position: fixed; z-index: 3; を追加してください。
z-indexはサイトに合わせて調整してください。

レスポンシブ対応

@media screen and (max-width: 768px){
     .head_line .hl_title{
         padding: 10px 15px;
     }
     .head_line ul li{
         padding-left: 0;
         animation : headLineSP 45s linear infinite;
     }
     @keyframes headLineSP{
         from {
             opacity: 1;
             transform: translateX(100%);
             visibility: visible;
         }
         33% {
             opacity: 1;
             transform: translateX(-120%);
             visibility: visible;
         }
         34% {
             opacity: 0;
             visibility: hidden;
         }
         99% { opacity: 0;}
         100% {
             opacity: 1;
             transform: translateX(100%);
         }
     }
     .head_line ul li:nth-of-type(2){
         animation-delay: 15s;
     }
     .head_line ul li:nth-of-type(3){
         animation-delay: 30s;
     }
     .head_line ul li::before{
         content: none;
     }
     .head_line ul li .day{
         position: static;
         background: none;
         display: inline-block;
     }
     .head_line ul li a{
         padding: 10px 0;
         display: inline-block;
         animation : none;
         transform: none;
     }
 }

流れるテキストヘッドラインまとめ

JavaScriptを使わずにCSSだけなので、少し回りくどいやり方な部分も感じておりますし、長くなりましたが、CSSだけなので多少早くなるんじゃないでしょうか。。？

表示する件数を増やす場合はCSSのアニメーションの時間の変更と、増やした分だけ.head_line ul li:nth-of-type()を追加して、animation-delayで遅れてアニメーションさせるようにしてください。

ページ内の回遊の増加や、ページ内の移動の導線に流れるテキストのヘッドライン表示いかがでしょうか。