Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

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をダイレクトに記入してください

例) http://ブログアドレス/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ソース差し替え)
配布終了致しました
関連記事

Comments 14

There are no comments yet.
グレース  
あれ、一番乗り?

早速使わせて頂いております
いつもながら、こちらのテンプレは素晴らしい
これからも良い作品を作り続けて下さい

2015/07/04 (Sat) 07:31 | EDIT | REPLY |   
Akira  
To グレースさん

グレースさん一番乗りありがとうございます(笑)
こちらこそいつもありがとうです!e-446

2015/07/05 (Sun) 14:12 | EDIT | REPLY |   
cosmos  
不具合報告&amimtitionについて

最近Betweenに浮気しているcosmosです。
以前も書きましたがNostalgiaのさらにかっこいい版という感じなので、またいろいろいじらせていただいています。

そんな中で不具合発見してしまいました。すみません(笑)。
検索結果ページで表示される記事のカテゴリ名のリンクが機能していないようです。BetweenとNostalgiaで確認しました。ご確認いただければと思います。

もひとつ。
Betweenのアニメーション、上からすっと降りてきて、リンクをクリックすると下にすっと去っていくアニメーションですが、すごくかっこよくて気に入っていますが、ページナビでページを移動するときには残念ながらアニメーションされません。理由はなんとなく分かりますが、これを、アニメーションが機能するようにはできるのでしょうか。たぶんAkiraさんが実装していないということは、とてつもなく困難か不可能なのだとは思いますが、もし簡易に?できるのであれば実装したいなぁと思いお聞きしました。

2015/07/09 (Thu) 19:23 | EDIT | REPLY |   
Akira  
To cosmosさん

うっぎゃーe-447
ほ ほんまや…。なんやこれ(笑)

もー、ごめんなさいねe-260
ちょっと用事済ませてちゃんと確認します!
ご指摘助かりますー!
取り急ぎお礼まで!

2015/07/10 (Fri) 08:49 | EDIT | REPLY |   
Akira  
To cosmosさん

公式の方、修正版出しました(笑)

----------- 検索結果一覧の「カテゴリ」ページで404エラーになる件

これはですね、ワタクシが
<%topentry_category_url>
なる変数を勝手に造ってしまいましたe-452
そんな変数ねーから。
みたいな ( ̄∀ ̄;)
すみません(笑)

<%topentry_category_url>

という箇所がいっこだけありますので、それを

<%topentry_category_link>

に修正お願いしますー!ごめんね (*_ _)

----------- ページ送りにもエフェクト の件

これは簡単にできます。
えっとね、まずページ送りのスクリプトを移動させますので、

<script>
$(function() {
$('.pagenation').pagination ({


から始まってるひとまとまりのスクリプト
<script>~</script>をコピー&カットして…

<script>
$(function(){
$('#wrapper a').addClass("animsition-link");


このまとまりの「上」ペーストしてください。
そして、

上記まとまりのスクリプトに以下を追加

$('.pagenation a').addClass("animsition-link");

これでできます。
ちょっとわかりにくいと思いますので、スクショでご確認くださいませ。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0003_zpssv0c2hzz.gif~original

ご迷惑をおかけしますー (´・ω・`)(毎度)

2015/07/10 (Fri) 09:21 | EDIT | REPLY |   
Akira  
To cosmosさん

ついでにサイドバーのリンクに対するエフェクトについて。

cosmosさんお尋ねにならないのでおわかりなんだと思うけれど、一応。
サイドバーには「最新コメント」がありますよね。
これを押すと、該当ページで かつ 該当コメントの位置まで移動しますよね。
この「該当コメント位置まで移動」させるのに、

url#comment数字

というアドレスになってるんです。
この #comment数字 というのが「別のurlである」という判断をされてしまいます。
でも実際は#以前のurlページと同じで、ウィンドウの位置が違うだけなので、スクリプトとしては「ページが見つからない」ということでいつまでも表示されないんです。

最新コメントだけを抜粋して某かの処理ができれば良いしそれは可能なんだけども。
ここは個人設定って感じになります。
なんでかと言うと、みなさんが同じコメント表示を使っているとは限らないんですよね (´・ω・`)
ある方は公式のものを、またある方は共有プラグインのものを…。
といったように、統一されてないわけです。

こういった処理は大抵の場合、要素に付加されている class名を利用するんだけども、そのクラス名がユーザーさんによってバラバラ、もしくは元からclassが付いていない、ということなんですね。

ですから、お使いの最新コメント表示にclass名を与えて、それに対して上のコメントでやったように

$('.該当要素へのクラス名 a').removeClass("animsition-link");

そして、元から書いてある

$('.side_bar a').removeClass("animsition-link");

これを削除。
そうすることで、最新コメントのリンクだけエフェクトを避け、他のリンクにはエフェクト適用というのが可能です。

2015/07/10 (Fri) 09:32 | EDIT | REPLY |   
Akira  

最悪だ…。
停電で保存前のファイルがーーー!!!キーーー! 。゚(´。pωq`。)゚。

2015/07/10 (Fri) 10:43 | EDIT | REPLY |   
cosmos  
ありがとうございます

こんにちは。
ただいまスマホから見ていますが、何か広告欄が前よりさらに広がっている気がします。何なんでしょうFC2...

停電とは今時珍しいですね。昔はOSがよくフリーズするので、こまめに保存したものですが、今は安定してますからね。

毎度素早い対応ありがとうございます。またのすたるじあ、はたぶん私のせいです 笑) 不具合は必ずあるものだと思います。毎回あまり謝らないでください。

まだ出先なのでソースはいじってませんがページ送りでエフェクトできるようですね、後で楽しみに動かしてみたいと思います。スクショまでつけて頂いて...ありがとうございます。

2015/07/10 (Fri) 17:04 | EDIT | REPLY |   
Akira  
To cosmosさん

ホントだー (´・ω・`)
スポンサードリンク
だって。
まあそうでしょうね。
見ればわかります(笑)
なんの意味があるのか… ( ̄∀ ̄;)

ページトップのボタン位置がますます厳しいじゃないかー ●`з´●
今より下げたら完全に広告の下位になっておせなくなっちゃう。
でも上げると邪魔。
どうしろっていうの(笑)

2015/07/10 (Fri) 20:44 | EDIT | REPLY |   
Akira  
To cosmosさん

す すまほ版の広告がひどいe-447
上にも下にも、真ん中にも広告。
えーe-447
普段スマホ版見ることまず無いから知りませんでしたよ(笑)
PC版でも広告ブロックしてるから知らんかったー (´・ω・`)
いつから?e-351

2015/07/10 (Fri) 20:55 | EDIT | REPLY |   
cosmos  
無事できました

ページ送りのエフェクトですが手順通りにソースを変更して無事できました。
動かしてみて、おーっという感じです。できないと思っていたのでちょっと感動。
重ねてありがとうございます。

さっきはスマホからPC版を見て書き込みしていましたが、
いまスマホ版の方を見てみたら...、確かにひどい。
1ヶ月前スマホ版からこのサイトに書き込みした覚えがありますが、PC版のような上下のバナー広告はなかったと思います。いつの間にという感じです。一時的な現象と思いたいです。

2015/07/10 (Fri) 21:56 | EDIT | REPLY |   
Akira  
To cosmosさん

良かったですーe-257
今回もご迷惑おかけしました。
またご指摘お願いします(笑)
「こんななってるよ (´・ω・`)」ってお知らせ頂けるとホントに助かります。
なにせ自分で気づいてないが故に申請しちゃってるわけなので(笑)
被害を最小限に防ぐためにも、すぐ!もう見つけたらすぐ!
教えてくださいe-452
いつもありがとうございます!

これからはスマホ版の広告重視なんでしょうね。
しかし無節操なやり方はやめて欲しい ( ̄∀ ̄;)
あっちゃこっちゃの他サービスに連携してないだけマシかなー。
Amebaなんてひどいもんね (´・ω・`)

2015/07/11 (Sat) 09:44 | EDIT | REPLY |   
kawakita  
はじめまして

こんばんわ。
凄く、お洒落なテンプレートですね♪

私は過去ブログでFC2やってましたけど、こんなにレベルの高いのは
あまりなかったです。
画像もセンスよくて素敵です。

2015/08/03 (Mon) 00:08 | EDIT | REPLY |   
Akira  
To kawakitaさん

こんばんは ( ゚Д゚)ノ

私には過ぎたお言葉をありがとうございます。
画像センスについてはもう、お撮りになられた方が素晴らしいわけです(笑)

2015/08/03 (Mon) 01:23 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い