おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

ナビゲーションメニューとSNSシェア&フォローボタンを設置する【Sentence】

www.okigaru-migaru.net

はてなブログテーマ Sentenceに、デザインを最適化したナビゲーションメニューSNSシェアボタンSNSフォローボタンを設置しましょう。

ただ、今回紹介するコードは僕のオリジナルのものではなく、先人の方たちが作ったものをSentenceに合うようにアレンジしたものになります。使わせていただきありがとうございます。

ナビゲーションメニュー

ヘッダーのブログタイトル下に、レスポンシブなナビゲーションメニューを設置します。

どのように表示されるかは、実際にこのページのブログタイトル下のメニューを見てください。

参考にした記事

www.yukihy.com

id:ftmacchoさんのCSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Lifeで紹介されているコードを使用します。

いろいろ調べて使ってみましたが、このコードがもっとも不具合なく動作しましたので使わせていただきました。

Sentenceで使うにあたって、変更した主な箇所は以下の通りです。

  • スクリプトの変数pの値
  • デザインCSSの記述の順番(スマホ→タブレット→PC)
  • メニューの全体的なデザイン
  • スクリプト、CSSにおけるID名

タイトル下

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> メニュー</span>
    </div>
    <ul id="menu-content">
            <li><a href="URL">リスト1</a></li>
            <li><a href="URL">リスト2</a></li>
            <li><a href="URL">リスト3</a></li>
            <li><a href="URL">リスト4</a></li>
            <li><a href="URL">リスト5</a></li>
            <li><a href="URL">リスト6</a></li>
    </ul>
    </div>
</div>
<div style="clear:both"></div>

まずはこのコードをデザイン→ヘッダ→タイトル下に貼り付けます。

aタグのURLとリスト名を任意のものに変更してください。ホームへのリンクやカテゴリー、問い合わせフォームへのリンクを貼るのがおすすめです。

例ではリストを6つ設置しています。リスト数の増減も可能ですが、その数に応じてデザインCSSで横幅の割合を調整する必要があります。

またリスト数を増やしすぎると1リストあたりの横幅が短くなってしまうので注意です。

フッタ

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 1023;
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

スクリプトのコードをデザイン→フッタに挿入します。

1行目はscript要素は、他のスクリプト用で既に記述されている場合は省略可能です。ちなみに下記のSNSシェアボタンでも使用します。

Sentenceでは1024pxからPC用の表示に切り替わるので、変数pには1023という数字を入れています。

デザインCSS

/* ナビゲーションメニュー */
#menu-content {
  display: none;
}
#menu {
  margin: 0 auto 10px auto;
  padding: 0 3.125%;
}
#menu ul {
  list-style-type: none;
  padding: 0;
}
#menu-content li {
  border-bottom: solid 0.5px #aaa;
  display: block;
  font-size: 85%;
  text-align: center;
}
#menu-content li:first-child {
  border-top: solid 0.5px #aaa;
}
#menu-content li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
}
#menu-content li a:hover {
  background: #f5f5f5; /* ※1 カーソル時の背景色の変更 */
}

/* Media Queries - Tablet */
@media (min-width: 768px) {
  #menu {
    padding: 0 1.25%;
    max-width: 800px;
  }
}

/* Media Queries - PC */
@media (min-width: 1024px) {
  #menu {
    padding: 0;
    max-width: 1130px;
  }
  #menu ul {
    display: block;
  }
  #btn-content {
    display: none;
  }
  #menu-content {
    display: block;
  }
  #menu-content li {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 16.667%; /* ※2 リストの数に応じて横幅の割合を変更 */
    margin-bottom: 15px;
    border-right: solid 1px #aaa;
    border-bottom: 0;
  }
  #menu-content li:first-child {
    border-top: 0;
    border-left: solid 1px #aaa;
  }
}

デザイン→デザインCSSに貼り付けます。これでナビゲーションメニューの完成です。

SentenceのCSSは上から、

  1. スマホ用
  2. タブレット用(min-width: 768px)
  3. PC用(min-width: 1024px)

の順番で記述されています。

設定している背景色や、メニューのリスト数に応じて変更すべき箇所が2点あります。

コード内に※1 ※2とコメントを入れていますので説明します。

※1 カーソル時の背景色の変更

今回のメニューは背景色を指定していませんので、デザイン画面で設定した背景色がそのままメニューの背景色になります。

そのためカーソル時の背景色と相性が悪い可能性があります。お好みの色に変更してください。

ちなみにデフォルトの#f5f5f5は薄いねずみ色です。

※2 リストの数に応じて横幅の割合を変更

リスト数に応じて横幅の割合を変更します。100をリスト数で割った数字(%)を入れてください。

例のリスト数は6なので、100 / 6 = 16.6666…→16.667%と記述しています。Sentenceでは割り切れない場合は小数点第4位を切り上げるという形で統一しています。

SNSシェアボタン

記事下にレスポンシブなSNSシェアボタンを設置します。

  1. はてなブックマーク
  2. Twitter
  3. Facebook
  4. Google+
  5. Pocket

の5種類のボタンを設置します。

どのように表示されるかは、実際にこのページの記事下(はてなスターの下)を見てください。

参考にした記事

www.daipanman.com

id:donchan922さんのおしゃれなシェアボタンをCSS&Webフォントで作ってみた【はてなブログのPC&スマホ用】 - 技術を磨くだいぱんまんを参考にしました。

スクリプトを使わずにCSSだけで作られているので表示が早そうです。それに元々スマホ向けに作られているのでモバイルファースト的にデザインを整えやすいですね。

Sentenceで使うにあたって、変更した主な箇所は以下の通りです。

  • はてブ、Twitter、Facebookのアイコンをはてな独自のWebアイコンに
  • アイコンを中央表示にするためのpadding値
  • タブレット、PC表示の際のボタンサイズ
  • HTML、CSSにおけるクラス名

chipspd.hatenadiary.jp

あと記事下にそのままHTMLを記述した場合、記事下の関連記事一覧よりもさらに下に表示されてしまいます。

記事直下に表示するためにid:chipforestさんの【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常で紹介されている方法でシェアボタンを記事直下に配置します。

詳細設定→headに要素を追加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

まずはWebフォント「Font Awesome」を読み込むために、設定→詳細設定→headに要素を追加にこのコードを挿入します。

他の用途で既に入力済みの場合は省略してOKです。

はてなブログのアイコン用Webフォント

shirokai.hatenablog.com

実ははてなブログには元からアイコン用Webフォントが読み込まれているようです。

id:shun9167さんのはてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい!がとても参考になります。使う時はいつも参照させていただいております。

せっかく読み込まれているのだからこのWebフォントを使いたいところなのですが、Google+とPocketのアイコンは無いんですよね。この2つに関してはFont Awesomeを使わざるを得ません。

逆にFont Awesomeにははてなブックマークのアイコンがありません。それぞれを組み合わせてシェアボタンのアイコンを完成させましょう。

記事下

<div id="my-footer">
  <!-- シェアボタン -->
  <ul class="share-group clearfix">
      <li class="sns-share hatebu"><span><i class="blogicon-bookmark lg"></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-share twitter"><span><i class="blogicon-twitter lg"></i></span><a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}"></a></li>
      <li class="sns-share facebook"><span><i class="blogicon-facebook lg"></i></span><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" target="_blank"></a></li>
      <li class="sns-share googleplus"><span><i class="fa fa-google-plus"></i></span><a href="https://plus.google.com/share?url={URLEncodedPermalink}" target="_blank"></a></li>
      <li class="sns-share pocket"><span><i class="fa fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank"></a></li>
  </ul>
</div>

このHTMLをデザイン→記事→記事下に貼り付けます。

はてなブックマークとTwitterはシェア画面がポップアップしてくれるのですが、Facebook、Google+、Pocketは同一ウィンドウでシェア画面が表示されてページ離脱に繋がるので別窓で表示されるように設定してます。

フッタ

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

デザイン→フッタにこのスクリプトを挿入します。

1行目のscript要素は上のナビゲーションメニューなど、他の用途で記述している場合は省略してもOKです。

my-fotterのdivタグで囲まれた範囲を記事直下に表示するためのスクリプトになります。

www.okigaru-migaru.net

ちなみに記事直下にダブルレクタングル広告を設置する時にも使います。

デザインCSS

/* シェアボタン */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: "";
}
.sns-share {
  list-style: none;
  position: relative;
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 3px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: #999;
}
.sns-share span {
  position: absolute;
  color: #fff;
  font-size: 30px;
}
.sns-share.hatebu.sns-share span {
  position: absolute;
  padding: 0 10px;
  color: #fff;
}
.sns-share.twitter.sns-share span {
  position: absolute;
  padding: 3px 9px;
  color: #fff;
}
.sns-share.facebook.sns-share span {
  position: absolute;
  padding: 2px 10px;
  color: #fff;
}
.sns-share.googleplus.sns-share span {
  position: absolute;
  padding: 1px 11px;
  color: #fff;
}
.sns-share.pocket.sns-share span {
  position: absolute;
  padding: 1px 11px;
  color: #fff;
}
.sns-share a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #fff;
}
.sns-share a:hover {
  background-color: #fff;
  opacity: 0.5;
}
ul.share-group {
  list-style: none;
  width: 280px;
  margin: auto;
  padding: 0;
}
.sns-share.hatebu {
  background-color: #006fbb;
}
.sns-share.twitter {
  background-color: #00acec;
}
.sns-share.facebook {
  background-color: #265a96;
}
.sns-share.googleplus {
  background-color: #dd4b39;
}
.sns-share.pocket {
  background-color: #EE4256;
}

@media (min-width: 768px) {
  .sns-share {
    width: 20%;
    margin: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  .sns-share.hatebu.sns-share span,
  .sns-share.twitter.sns-share span,
  .sns-share.facebook.sns-share span,
  .sns-share.googleplus.sns-share span, 
  .sns-share.pocket.sns-share span {
    padding-left: 38.462%;
  }
  .sns-share a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #fff;
    text-indent: -999px;
  }  
  ul.share-group{
    list-style: none;
    width: 100%;
    margin: auto;
    padding: 0;
  }
}

最後にシェアボタンのデザインに関するCSSです。デザイン→デザインCSSに挿入します。

スマホ表示では角丸にしてiPhoneのホームボタンのアイコンみたいにしております。ボタンの横幅は50px、左右の空白を3pxに固定しているのでリスト全体は280pxで指定しております。

タブレットより大きい画面サイズでは長方形でボタン間の空白を無くし、メインカラムの横幅に応じてボタンの横幅も変化します。ボタン自体を大きくすることでクリックしやすくなります。

アイコンの中央表示について

アイコンの文字サイズを30pxで指定し、アイコンが中央に来るように各ボタンごとに余白を指定します。各フォントのサイズが微妙に違うのか、目で見て確認しながら調整しました。

この余白についてですが、上記の記事直下に表示するか否かでアイコンの位置が大きくズレるようです。おそらく記事内に関するCSSが影響しているのかもしれません。

もし記事直下に表示するスクリプトを使わず、そのまま記事下に表示する場合は各paddingを以下のように書き換えてください。だいたい中央に表示されると思います。

また、すぐ下のコンテンツとの間隔を取るためにmarginも指定し直しましょう。

.sns-share {
  margin: 0 3px 30px 3px;
}
.sns-share.hatebu.sns-share span {
  padding: 6px 10px;
}
.sns-share.twitter.sns-share span {
  padding: 9px 9px;
}
.sns-share.facebook.sns-share span {
  padding: 8px 10px;
}
.sns-share.googleplus.sns-share span {
  padding: 9px 11px;
}
.sns-share.pocket.sns-share span {
  padding: 8px 11px;
}

@media (min-width: 768px) {
  .sns-share {
    margin: 0 0 30px 0;
  }
}

記事下の関連記事一覧

記事下の関連記事一覧について言及しましたのでついでにデザインを変更しておきましょう。

何も記述しないままだとスマホ表示の際に記事タイトルがやや大きく、記事の説明がたした文量でもないのにすごく邪魔な表示になります。

/* 記事下の関連記事一覧 */
.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
  font-size: 95%;
}
.urllist-entry-body.related-entries-entry-body {
  display: none;
}

@media (min-width: 768px) {
  .urllist-entry-body.related-entries-entry-body {
    display: block;
  }
}

そこで記事タイトルを少し小さく、記事の説明を非表示にします。これでスッキリしたデザインになります。

SNSフォローボタン

記事下とサイドバーにレスポンシブなSNSフォローボタンを設置します。

  1. はてな読者登録
  2. Twitter
  3. Feedly

の3種類のボタンを設置します。

どのように表示されるかは、実際にこの記事の最下部(おすすめ記事と広告の間)と、ブログトップのサイドバーを見てください。

参考にした記事

www.yukihy.com

id:ftmacchoさんのコピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Lifeを参考にさせていただきました。

おしゃれなデザインなのに、シンプルでとても使いやすいコードですよね。

Sentenceで使うにあたって、変更した主な箇所は以下の通りです。

  • ボタンの縱橫幅
  • アイコンとSNS名の表示
  • カーソル時の背景色の反転を即時に
  • ボタンを角丸に
  • HTML、CSSのクラス名を変更

記事下

<div class="hatena-module-title">フォローする</div>
<div class="sns-follow">
  <a class="hatena" href="http://blog.hatena.ne.jp/【はてなID】/【ブログURL(http://を除く)】/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i> はてな</a><a class="twitter" href="https://twitter.com/intent/follow?screen_name=【Twitterアカウント名】" target="_blank"><i class="blogicon-twitter lg"></i> Twitter</a><a class="feedly" href="http://feedly.com/i/subscription/feed/【ブログURL】/feed" target="_blank"><i class="blogicon-rss lg"></i> Feedly</a>
</div>

デザイン→記事→記事下に上のHTMLを挿入します。

【】で囲った範囲が各ブログごとに変更する箇所です。各サービスのアカウント名やブログURLを入力します(【】は不要です)

地味な注意点として、各SNSごとに改行すると空白ができてしまってデザインが崩れます。少し見にくいですが続けて記述することをおすすめします。

サイドバー→HTMLモジュール

<div class="sns-follow">
  <a class="hatena" href="http://blog.hatena.ne.jp/【はてなID】/【ブログURL(http://を除く)】/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i> はてな</a><a class="twitter" href="https://twitter.com/intent/follow?screen_name=【Twitterアカウント名】" target="_blank"><i class="blogicon-twitter lg"></i> Twitter</a><a class="feedly" href="http://feedly.com/i/subscription/feed/【ブログURL】/feed" target="_blank"><i class="blogicon-rss lg"></i> Feedly</a>
</div>

記事下だけだとトップページに表示されませんので、お好みでサイドバーにも表示させます。

デザイン→サイドバー→HTMLモジュールにも同じコードを記述します。

「フォローする」の見出しはモジュールの使用で

デザインCSS

/* SNSフォローボタン */
.sns-follow {
    width: 100%;
    margin-bottom: 10px;
}
.sns-follow a {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 32.667%;
  height: 60px;
  margin: 0 0.334%;
  border-radius: 5px;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
}
.sns-follow .hatena {
  border: 2px solid #454545;
  background: #fff; 
  color: #454545;
}
.sns-follow .twitter {
  border: 2px solid #00acec;
  background: #fff; 
  color: #00acec;
}
.sns-follow .feedly { 
  border: 2px solid #70ca3b;
  background: #fff;
  color: #70ca3b;
}
.sns-follow .hatena:hover {
  background: #454545;
  color: #fff;
}
.sns-follow .twitter:hover {
  background: #00acec;
  color: #fff;
}
.sns-follow .feedly:hover {
  background: #70ca3b;
  color: #fff;
}

最後にデザイン→デザインCSSにコードを貼り付けます。

記事ページではサイドバーのフォローボタンを非表示にする

トップページ用にサイドバーにフォローボタンを設置しましたが、記事ページでは記事下に表示されるので2ヶ所もいらないという人もいるかと思います。

そこで記事ページではサイドバーのフォローボタンを非表示にします。

/* サイドバーのHTMLモジュールを記事ページでは非表示 */
.page-entry .hatena-module.hatena-module-html {
  display: none;
}

デザインCSSにこのコードを追記します。

ただ、厳密にはサイドバーに設置されているすべてのHTMLモジュールを非表示にするCSSになります。跡形もなく非表示にするにはこれが手っ取り早いのです。

他にHTMLモジュールを使っている場合はそれごと消してしまうので注意してください。支障がないという人だけお使いください。

文字装飾に関するCSS

「脱」初心者の為のブログのSEO - STINGERおすすめ!格安レンタルサーバー比較

こちらはWordPressテーマ「Stinger」シリーズで有名なEnjilogさんが書いた記事です。

記事の本文で文字を太くする時についつい強調(strong)タグを使ってしまいがちです。

SEO的に強調タグの使い過ぎは禁物で、キーワードにほどよく使うべきだとされています。

つまり、ただ単に見栄えを気にして太字にするのであれば、強調タグではなくCSSを使うべきです。

デザイン→デザインCSS

/* 文字装飾 */
.b {
  font-weight: bold;
}
.rb {
  color: #f00;
  font-weight: bold;
}

bセレクタは太字、rbセレクタは赤い太字を表現できます。

太字赤太字ってな具合です。

記事の編集画面ではこんな感じで書いてます。

<span class="b">太字</span>と<span class="rb">赤太字</span>ってな具合です。

僕ははてな記法やMarkdownモードでもHTMLタグが適宜使えます。見たままモードではHTML画面に切り替える必要がありますね。

文字サイズを変えたりするのにも使えます。お好みでCSSを編集して使ってみましょう。

以上でデザインに関するカスタマイズは終了です。お疲れ様でした!