Between(配布終了致しました)

Between(配布終了致しました)

配布終了・旧作
2015/07/01
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD Dark
between.jpg



名称 Between
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右/ ブラウザ縮小・スマホ 左からスライド
記事幅 可変 最大830px(内寸 770px)
サイドバー幅 320px(内寸 260px)
Windows/ Mac
Chrome Firefox Safari Opera IE10以上 IE9以下
×
推奨カスタム スライド背景変更 個別記事文字色等変更


sample


-----------------------追記 2015.7.15

iOS8 (スマホ iPhone) のバグに引っかかって修正困難なため 限定配布に切り替え致しました
バグ内容・本テンプレの仕様等ご確認の上 ご納得頂ける方のみ以下のページからDLお願いします
申し訳ございません (*_ _)

Between配信停止のお知らせ
以下本文




2015.7.1 申請致しました 2015.7.15 取り下げ致しました
エンターページをご入用の方向けです ( ゚Д゚)ノ


Sample インデックス
Sample トップ
Sample 個別


FAQ



仕様
・ エンターページを設けました
・ エンターからのジャンプ先の編集は各々設定をお願いします
・ カテゴリ等の記事一覧はグリッドタイプです
・ 個別記事はオーソドックスな作りなのでカスタマイズどうぞ(笑)
・ 一部ツリー系プラグインとの干渉があります ごめんなさい
(特定プラグインに配慮した制作は今後もしない予定です 重ねて申し訳ございません)
・ W3Cバリデートクリア


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・エンターページ削除
・サイドバーの形状変更
・トップページの表示タイプ変更(グリッドからメイソンリー or 要約・全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更


エンターページからのジャンプ先設定について


デフォルトでは
★ Top category (テキストのみ リンク設定なし)
★ Latest post (テキスト リンク設定済)
★ Information (テキストのみ リンク設定なし)

の表示になっています
特にこれを守る必要はありませんので ご自由に設定なさってください
真ん中の Latest post は最新記事の個別ページへのリンクが既に設定されています
このリンク設定はちょっと難しいので お使いになる方はそのままどうぞ

特定カテゴリなどに誘導したい場合には ソース内の # を該当カテゴリのトップページURLをダイレクトに記入してください

例) https://ブログアドレス/blog-category-5.html

複数のジャンプ先を設定されます方
エンターページはブラウザ縦幅100%を守る設定になってます
(縦スクロールバーが表示されない状態)
あまり多くのリンクを設定されますと それに応じてブログタイトルが『上』方向へ移動していきますので
そのあたりの見た目の兼ね合いを取りながらお願いします
特にスマホの画面の縦は狭いですので
あまり欲張ると良いことないです ^^;
5つぐらいまでが望ましいかな と
横並びに変更できる方はそういった処置をされても良いかと思います

上下に並んだリンクの文字数が多くて マウスオーバーした際の文字背景(黒)横幅が揃わない という方は
初期設定の数値を変更してください
該当箇所は以下の通り(CSSソース内です)

.agenda {
  width: 170px;
  margin: 25px auto 0;
  font-size: 15px;
  font-family: 'Lora', serif;
}


グリッド表示について


縦横のサイズを一定にしていますので
メイソンリーというよりもグリッドですかね (´・ω・`)
(メイソンリー = サイズ違いのものをタイル状に並べる グリッド = 同一サイズのものを方眼状に並べる)
特に今回「縦幅」を強引に揃えてあります
エンターページを導入される方は小説サイトさんなんかが多いのかな と
ということは 記事冒頭があまり露出しすぎても興ざめな気が…
という至らぬ気を回しまして(笑)
文字数はかなり抑えてあります

で ですね
文字を大きくしたい方がおみえになるかもしれません
その場合 今の規定文字数のままですと ブロックから文字がはみ出してしまいます
(下にある「READ MORE」の「下位」に潜り込みつつ さらに超過した分は下にはみ出ます)
なので フォントを拡大されます方は 以下の箇所の数値を変更して上手いことやってください

var cutFigure = '70'; // 注)グリッド記事の文字の大きさを変更したらここを修正(文字を大きくしたら数字を小さくする)

この数字を小さくすると 文字数がさらに削られます
文字数に変更をかけたくない場合はこちらを修正 ↓

.element-contents-text:before {
  padding-top: 90%;

こちらの数字を増やすと 写真下の記事要約のスペースが大きくなります
上限100%ですのであまり過信せずにお願いします ( ゚Д゚)ノ
両方を上手く調節できると良いですね(丸投げっぽくて申し訳ない)


モバイル版について


モバイル版への誘導を上部ナビゲーションに設けてありますが
モバイル版ではエンターページの意味が失われることを事前にお伝えしておきます
レスポンシブですのでスマホモバイル版への移行を防ぎたい方もおられるかもしれませんが
その節には自己責任の上でお願いします(やり方はカスタマイズ書庫にあります)
モバイル版からPC版エンターページへの移動につきましては
PCテンプレではなく スマホテンプレに修正を加えて頂く形になりますので
こちらについてはその都度ご相談ということにしておきますね (´・ω・`)
そしてよく考えましたら Admin(あるいは Log in とか) を設けておかないと訪問者さんが自分の場所へ帰還できませんね ( ̄∀ ̄;)
親切な貴方はエンターページにAdminリンク設定をお願い致します ←


あとはみなさんからの不具合報告等を待とうと思います(笑)
みなさんいつもありがとうですー!
(Colorbox用ソースとコメント分けについては後程追記します)


-------------- 追記 2015.7.6

随分と遅くなってしまいました (o'д`o)ゝ
雨の日に滑って転んでお尻と腰を強打
ヨボヨボですわ((((笑) 長く座って居られない ( ̄∀ ̄;)
ギックリでなくて良かった 単なる打撲でゲス ●`з´●
って そんなことはどうでも良いですね


訪問者コメントと管理人コメントを分ける


今回はこの部分です ↓

sample

CSSソース末尾に以下を追加

.管理人ハンドルネーム > .lora {
  background-color: rgb(196,168,195);
}

ハンドルネーム前のドットをお忘れなく
色コードはいつもと同じで rgbの10進法 #の16進法どちらでもオッケーです

TITLE の文字を変更されても良いかと思います
その場合には htmlソース側に該当箇所がありますので

<span class="lora">TITLE</span>&nbsp;<span class="bold-text"><%comment_title></span>

上記文字列をCtrl+Fキー検索し 赤字部分をお好きな文言に変更をどうぞ


------------- 追記 2015.11.28

コメントマーク背景を分けるにあたり
裏ワザ的なCSSで実装しています
ご利用頂けない場合もあります
使えないハンドルネームのパターンは以下の通り

・文字列最初の文字が「記号」
・最初の文字が「数字」
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)

------------ 以下本文


トップページでちょこっとだけスクロールバー(縦)が出てしまう方


FC2検索バーをご利用かと思います
これが結構レイアウトの邪魔をするんです (´・ω・`)
スクロールバーが苦になるようでしたら 検索バーを非表示にされると出なくなります
こちらは個人の使い勝手に係る部分ですので ご自分の環境と相談してお決めください
(ブログ内検索はカレンダー下にデフォルトで用意してあります)
参考記事 テンプレ設定でちょっと気になること

----------------


ページ内画像拡大スクリプト Colorbox適用済ファイル ↓
(公式からテンプレDL後 htmlソース差し替え)
配布終了致しました
配布終了・旧作