新はてなブログテーマ「SimpleFresh」を公開しました！
新テーマ「SimpleFresh」を公開しました！
デモ：simplefresh
本当にシンプルな「はてなブログテーマ」となっておりまして、新着記事一覧は「リスト型」となっています。
人気記事ガジェット
ちょっとだけこだわったのは「人気記事ガジェット」でRANKINGの下に【-人気の記事】を表示してちょっとおしゃれにしました。
「カテゴリ一覧」でも表示します。
カスタマイズ
ヘッダー
fontawesomeとjqueryを読み込ませます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
メニュー
タイトル下
<div class="horiznbsdd"> <ul class="horizonst-list"> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> </ul> </div> <div class="searchbt"> <i class="fas fa-ellipsis-v"></i> </div> <div class="searchmenus"> <div class="menuyheadrs"> <i class="fas fa-arrow-left"></i> <p>詳細検索</p> </div> <div class="menusearch"> <div class="menuseaxrchbar"> <div id="original-search-box" class="enuk"> <form class="formsshd" role="search" action="/search" method="get"> <input type="text" name="q" class="sfdvgb" value="" placeholder="キーワードを入れて記事を検索" required> <input type="submit" value="検索" class="dfdsakeka" /> </form> </div> </div> <p>人気のキーワードから探す</p> <div class="wakumaru clearfix"> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> </div> <p>人気のキーワードから探す</p> <div class="waku clearfix"> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> </div> <p>カテゴリーから探す</p> <div class="waku clearfix"> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> </div> </div> </div> <script> $(function () { $('.searchbt i').click(function () { $('.searchmenus').fadeIn(500); }); }); $(function () { $('.searchmenus i').click(function () { $('.searchmenus').fadeOut(500); }); }); </script>
詳しくは「スマホのみで表示されるハンバーガーメニュー」、「【コピペ】「タブ型ナビゲーションメニュー」をはてなブログに実装してみる！」をご覧ください。
cssはテーマに組み込んでいますので自動でデザインされます。
snsボタン
こちらもcssをテーマに組み込んでいます。
記事上
<ul class="circle_group clearfix"> <p>SHARE</p> <li class="sns_circle hatebu"><span><i class="fab fa-hatena"></i></span><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple"></a></li> <li class="sns_circle twitter"><span><i class="fab fa-twitter"></i></span><a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}"></a></li> <li class="sns_circle facebook"><span><i class="fab fa-facebook"></i></span><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}"></a></li> <li class="sns_circle googleplus"><span><i class="fab fa-google-plus"></i></span><a href="https://plus.google.com/share?url={URLEncodedPermalink}"></a></li> <li class="sns_circle pocket"><span><i class="fab fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}"></a></li> <li class="sns_circle line"><span><i class="fab fa-line"></i></span><a href="http://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}"></a></li> </ul>
記事下
<div class="sns-footer"> <p>SHARE</p> <ul class="sns-area "> <li> <a class="sns-twitter sns-link" href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=webgaku" target="_blank"> <i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a> </li> <li> <a class="sns-facebook sns-link" href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"> <i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a> </li> <li> <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button sns-bookmark sns-link" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"> <i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a> </li> <li> <a class="sns-pocket sns-link" href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" > <i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a> </li> </ul> </div> <style> .koldfg{ display:none; } /* 固定 */ .fixed { position: fixed; top: 0; padding: 0; width: 100%; z-index: 1000; background: #fff; } @media (max-width: 991px) { .fixed { position: initial; } .searchbt i { position: fixed; } } </style> <script> $(function() { var offset = $('.horiznbsdd').offset(); $(window).scroll(function () { if ($(window).scrollTop() > offset.top) { $('.horiznbsdd').addClass('fixed'); } else { $('.horiznbsdd').removeClass('fixed'); } }); }); </script>
最後のスクリプトでは「メニュー」を追従させるプログラムをしています。
