SampleEntry1 - NavyDarkCode

NavyDarkCodeはレスポンシブ対応のシンプルな紺色のテーマです。

以下のような特徴があります。

コードの閲覧

スマートフォンのようなモバイル端末でのコード閲覧時、デフォルトでははみ出た部分が改行されますが、NavyDarkCodeではスクロールになります。また、デスクトップPCでの閲覧時にウィンドウサイズを1200~や1500~のように大きくした場合、横幅を広くとるのでスクロールさせられることが減って読みやすくなります。

コードのファイル名やパスを表示

NavyDarkCodeではコードブロック(pre)の直前にpre-filenameクラスのdivを置くことでコードにファイル名やパスを含めて表示できます。はてな記法の場合は>||の直前の行です。

はてな記法の場合の例

 <div class="pre-filename">filename.js</div>
 >|javascript|
   //code
   var x = 3;
 ||<

タイトル下のグローバルメニュー

タイトル下にカテゴリごとのグローバルメニューを設置したい場合は「デザイン＞カスタマイズ＞タイトル下＞ヘッダ」に以下のようなコードを追加します。

「デザイン＞カスタマイズ＞タイトル下＞ヘッダ」

<div class="category">
  <a href="examole.com">Example</a>
  <a href="examole.com">Example</a>
  <a href="examole.com">Example</a>
  <a href="examole.com">Example</a>
</div>

SNSシェアボタン

このテーマのSNSシェアボタンを設置したい場合はデフォルトのボタンをOFFにしてから「デザイン＞カスタマイズ＞記事＞記事下」に以下のコードを追加します。

「デザイン＞カスタマイズ＞記事＞記事下」

<ul class="share-buttons">
  <li><a href="http://b.hatena.ne.jp/entry/{Permalink}"><i class="blogicon-bookmark"></i></a></li>
  <li><a href="https://twitter.com/share?url={Permalink}&amp;text={Title}"><i class="blogicon-twitter"></i></a></li>
  <li><a href="http://www.facebook.com/share.php?u={Permalink}"><i class="blogicon-facebook"></i></a></li>
  <li><a href="http://getpocket.com/edit?url={Permalink}&amp;title={Title}"><i class="blogicon-chevron-down"></i></a></li>
  <li><a href="http://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}"><i class="blogicon-comment"></i></a></li>
</ul>

レスポンシブにする

レスポンシブ対応のテーマをスマホにも適用するには「デザイン＞スマートフォン＞詳細設定」でレスポンシブデザインにチェックを入れてください。