SampleEntry1 - Sunlight

Sunlightはレスポンシブ対応のシンプルなベージュのテーマです。

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

コードの閲覧

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

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

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

はてな記法の場合

 <div class="pre-filename">filename.js</div>
 >|javascript|
   //code
 ||<

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

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

<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>

レスポンシブにする

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