このテーマをご利用頂く際に設定する箇所をまとめます。
インストールはこちらから。
必ず行って頂く設定
レスポンシブデザインにチェック
このテーマはレスポンシブデザインです。
ダッシュボードから「デザイン設定→スマートフォン→詳細設定」の箇所
「レスポンシブデザイン」にチェックを入れて保存してください。
「レスポンシブ」と書いてあるテーマでこれを行わないとスマホでテーマが適用されず、色々と残念なことになります。
タイトル画像をPCと同じに
同じくダッシュボードから「デザイン設定→スマートフォン→ヘッダ→タイトル画像」の箇所 「PCと同じ画像を表示する」にチェックを入れて保存してください。
はてなブログアプリの表示がここで適用されます。
アイキャッチ画像の設定
ダッシュボードから「設定→詳細設定」を選んでデフォルトのアイキャッチ画像を指定します。
エントリー毎のアイキャッチ画像を指定しないとき、カード型レイアウトにこの画像が表示されます。400×280pxのjpg画像を推奨します。
以下のカスタマイズは適宜ご自由にどうぞ。
バリエーションのカスタマイズ設定
ヘッダー画像の設定
Twitterと共用できる1500×500pxサイズの画像を設定します。（他のサイズだと表示が崩れることがあります）
※はてなフォトライフにアップロードした時点で1000×333pxに自動リサイズされます。
画像のアップロード後「位置を調整する」は行わないでください。
この画面でドラッグして動かさずに「適用」を押します。
下記ページに、このテーマで自由にご利用頂けるヘッダー画像を用意しました。ダウンロードしてお使いください。
カテゴリをタブとして利用
このテーマではカテゴリをタブとして利用します。
カラーバリエーションを設定
ブログに合わせてお好みのカラーに、バリエーションを用意しておきましたのでコピペだけで超簡単です。
ナビゲーションを設置
記事が増えてきて見せたいタグがはっきりしてきたらナビゲーションを設置すると良いです。
SHAREボタンの設置
シェアボタン用のcssを埋め込み済みなので、下記の記事通りにコピペで設定することでシェアボタンを設置できます（Google+はサービス停止なのでオミットしてあります）。
フォローボタンの設置
フォローボタン用のcssを埋め込み済なので、下記の記事通りにJavaScriptを設定することでフォローボタンを設置できます。
普段記事を書くときは
はてな記法やhtmlモードで記事を編集できる人向けです。
リード文
記事の冒頭には内容を要約したリード文を設置すると読みやすいです。
リード文全体を
<div class="lead"> </div>
で囲います
画像に枠を設置
白っぽい画像を貼る時はあえて枠を付けたい時もあると思います。
imgタグのclass に border1 を追加します。
はてな記法の場合は画像タグを<div class="border1"> </div>で囲ってください。
CHECK！な囲い
他の記事を紹介したい時、テキストリンクを囲ったりします。
囲いたいところ全体を
<div class="check"> </div>
で囲います。
サンプルコード
はてな記法じゃなくてもサンプルコードを載せたい！という時のために、コード例を
<div class="code"> </div>
で囲うと黒バックの等幅フォントで表示するようにしておきました。
文章の区切り線
区切り線のタグ<hr>を入れると下記のデザインの区切り線が入ります。
はてなPro契約をしたら
はてなProを契約するとカスタマイズがさらに自由にできます。
トップページをカード型レイアウトに
トップページの表示形式を「一覧形式」にすることでカード型レイアウトになります。
スター営業の防止
カード型レイアウトにすると、トップページで全エントリーにスターを押しまくる営業をする方もいます。スター営業が鬱陶しいと思ったら下記コードをcssに追加してください。
/* スター営業防止用 */
.page-index .hatena-star-star-container, .page-archive .hatena-star-star-container {
display: none;
}
広告など
はてなPro契約するとAdSense広告が貼れるようになります。
