Enlighterを試してみました (WordPressプラグイン)

よく、WEBデザイナーさんやプログラマーの方のWebサイトで、コードを行番号つきで表示しているのをみかけていて、やってみたいとおもっていましたが、なんとなく試してみたくなり、プラグインを探しました。

今回は、「Enlighter」　というプラグインを試してみたいと思います。

<!doctype html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="UTF-8">
<title>グローバルナビトップ固定</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
  var nav = $('#globalNavi'),
  offset = nav.offset();
  $(window).scroll(function () {
    if($(window).scrollTop() > offset.top) {
      nav.addClass('fixed');
    } else {
      nav.removeClass('fixed');
    }
  });
});
</script>
</head>
<body>
  <div id="wrapper">
    <header id="header">
      <h1>グローバルナビトップ固定</h1>
    </header>
      <div id="globalNavi">
        <ul>
          <li><a href="#">Menu1</a></li>
          <li><a href="#">Menu2</a></li>
          <li><a href="#">Menu3</a></li>
          <li><a href="#">Menu4</a></li>
          <li><a href="#">Menu5</a></li>
        </ul>
      </div>
    <main id="maincontent">
      <p>下にスクロールしてください</p>
    </main>
    <footer id="footer">
      <p>フッターです</p>
    </footer>
  </div>
</body>
</html>

どうでしょうか。なんとなくそれっぽい感じです。他のプラグインもためしてみたのですが、これが一番ラクな気がしました。

さらにCSS。

@charset "UTF-8";
/* CSS Document */
#header{
  width: 100%;
  height: 100px;
  background: #1EBFC9;
}

#globalNavi{
  width: 100%;
  background:#000;
  opacity: 0.8;
}

#globalNavi ul li a{
  background: #000;
  
  width: 20%;
  float: left;
  padding:20px 0;
  text-align: center;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #777;
  box-sizing: border-box;
  opacity: 0.5;

}
#globalNavi ul li a:hover{
  background:#333;
  opacity: 0.5;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

#maincontent{
  width: 100%;
  height: 2000px;
  background: #fff;
}

#footer{
  width: 100%;
  height: 80px;
  background: #3EAC23;
}

まぁあまり使うこともないかと思いますけど、とりあえずやってみたかったのでお試しということで…

いつか、これを使って、役に立つコードを書いていければと思います。