BetweenNeo - FC2ブログテンプレート(配布終了 2020年4月31日)

配布終了・旧作

2016/02/01 2020/05/04

vanillaice (Akira)

HTML5 CSS3 RWD Dark

2020年4月31日配布終了致しました。ご利用頂きありがとうございました。

BetweenNeoテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

最終更新 2020.4.6

コメント返信のJS変更

名称	BetweenNeo
動作確認済みブラウザ
トップページ記事並び	要約表示タイプ
記事幅	メイン --- 最大970px サイド --- 250px
記事内で使える見出しレベル	h2からh6まで
jQuery導入	あり(v3.3.1)
Font Awesome導入	あり(v5.6.3 CSS)
Lazyloading導入	あり
構造化マークアップ	2.19.8.3バージョン以降個別記事のみ「BreadcrumbList(パン屑リスト)」「BlogPostiong」
Page Speed Insigtsスコア
固有機能	・画像にドロップシャドウ・動画縦横比固定使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ	左右カラム入れ替え, 背景スライド変更
ライセンス	Required 必須事項・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項・Modification 改変・Personal Use 個人利用・Commercial Use 商用利用 Forbidden 禁止事項・Distribution 再配布・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考	スマートフォンでは右サイドメニューのアコーディオンを解除してあります。

パソコン	タブレット	スマートフォン

2カラム	1 or 2カラム(デバイス幅依存)	1カラム
サイドメニュー --- 右アコーディオン	サイドメニュー --- 下アコーディオン or 右アコーディオン	サイドメニュー --- 下

過去の更新一覧

更新履歴 2020.3.26

個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.12.17

パーマリンク設定導入に伴う個別記事URL正規化
パーマリンク設定導入に伴うページ送り変更

更新履歴 2019.11.10

コメント主のリンク表示用JS及びデザインの変更

更新履歴 2019.8.3

管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
受信コメント一覧とコメント投稿フォームのセクションを統合
コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)
構造化マークアップ追加

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。管理画面経由で管理人名に装飾をしてコメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を追加。

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <footer class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </footer> まで(この文字列も含む)を以下の内容に変更。

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を追加。

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}

②について

#leave-a-comment" で検索するとhtml内に2箇所あります。2つとも #comment_form" に変更。

続きまして  で検索し、そのすぐ下にある </article> から <div class="contents-wrap"> までを削除。

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて  で検索するとhtml内に1箇所あります。この直近、2行上にある </div> を削除。

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を追加。

#comment_form {
  padding-top: 40px;
}

③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名のフォント色が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

スタイルシート末尾に以下を追加。

#inner-contents {
  margin: 20px 0;
}

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

更新履歴 ~~2019.1.13~~ 2019.7.2

*2019.1.13にアップデート版を申請したと思いこんでおりましたが、実際にはしていませんでした。。改めて本日2019.7.2にアップデート申請を行いました。申し訳ございません。

Font AwesomeのCSSバージョンを5.6.3にアップグレード
レイアウト関連CSSの追加及び一部削除
Pinterest, はてなブックマークのシェアアイコンを追加
別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
fontサイズの指定にremを導入
floatレイアウトからflexレイアウトに変更
グリッド記事概要の文字数制限をJSからCSSに変更
管理人コメントにプロフィールアイコン表示

~~不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、~~floatレイアウトを廃すなど比較的大きな変更が入っていますので是非アップデートをご検討ください。

更新履歴 2017.9.22

SSL化に伴うURL正規化

更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2016.10.10

メンテナンス
・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
・トップページで文字の大きさを変更してもレイアウトが崩れないようにしました
・トップページ記事並びを最大4件から3件に調整しました
・関連記事サムネイルの整形
・ベンダープレフィックスの整理
・その他微調整

更新履歴 2016.9.9

リストマーカーの位置を調整しました
参考記事
list-item横の隙間について

本ページの内容は2019年1月13日メンテナンス以降のバージョンが対象です。

太陽光発電が不発電　(´・ω・｀)
またお金がっっ！！！

びとぅいーんねお ( ﾟДﾟ)ﾉ
過去作品 Between の焼き直しです
デザインなどは前作をほぼ踏襲していますが SEO的な部分やあそこやここがいろいろ違う。

サンプル

Samples

ENTER PAGE DEMO
画像クリックでデモ画面へ

TOP PAGE DEMO
画像クリックでデモ画面へ

ARTICLE DEMO
画像クリックでデモ画面へ

DOWNLOAD

FAQ

目次へ戻る↑

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については予めガイダンスを付けてあります。
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために全角スペースを利用してしまう方が大変多いです。
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

目次へ戻る↑

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

サイドバーの形状変更
トップページの表示タイプ変更(要約表示から全文表示へ変更、グリッド並び数変更など)
レスポンシブを固定幅化
カラム数変更
ナビゲーション形状変更
デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

目次へ戻る↑

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

目次へ戻る↑

エンターページについて

About entrance page

エンターページのリンク設置は特殊なので

注)エンターページからのリンク誘導

を目印にガイダンスを良く読み、従ってください。

目次へ戻る↑

全画面スライドのマスクについて

About overlay on background images

マスク付けておかないと文字見難いですよね。画像を変更されます方は文字色とのバランスを見ながらどうぞ。
マスクを取り除きたい方は注)背景画像上黒マスクが対象箇所です。画像の増減などもガイダンスに従いながら行ってください。

目次へ戻る↑

サイドバーの展開について

How to disable accordiong in side menu

ページ遷移時は開閉の状態を保持したまま行われます。開閉について、折りたたみたくない方は以下を目印にガイドに従って対象箇所を削除してください。

注)サイドバープラグイン展開解除

特定のプラグインだけを解除というのは今回はナシで　(´・ω・｀)
プラグインはまとめて出力されますので基本的には「できない」と思ってください。いやできるけどclassやidが必要になってきますし私の方でそれを把握するのは不可能。ということでどうしてもという方は自力で。
てっとり早いのはプラグイン登録せずにhtmlに直接書くことですね。

スマホでは展開を解除してあります
なんでかというと個人的に煩わしいと思ったから。折りたたんでおきたい方は以下の手順でお願いします。

if(navigator.userAgent.toLowerCase().match(/(iphone|android)/))return;

上記文字列を削除してください。他の文字列を巻き込み削除しないよう注意です。

目次へ戻る↑

左右カラム入れ替えの仕方

How to reverse the direction of rows

#float-container { を検索されますとCSSソース内に5箇所ヒット、最初のものが対象です。この括りの padding: 0 60px 100px; の直下に flex-direction: row-reverse; を追加。

続きまして #primary-column { で検索。2箇所ヒットし、やはり最初のものが対象です。この括りの margin-right: 40px; 緑部分 right を left に変更。
以上2手順です。

目次へ戻る↑

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

目次へ戻る↑

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.25バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の  から  までをコピーし、掲載希望場所へペーストしてください。

目次へ戻る↑

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問不備・不具合のご報告はお気軽にどうぞ。
その際には

・ご自身のブログアドレスの明記 (鍵付きで構いません)
・該当テンプレートを設定状態に
・右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

HTML5 CSS3 RWD Dark

サンプル

カスタマイズのコツ

お受けできないご質問・ご相談

必須個人設定

スマートフォン版の表示設定「利用しない」

検索バーの設定「利用しない」

コメント設定 > コメンテーターの情報「記憶する」

エンターページについて

全画面スライドのマスクについて

サイドバーの展開について

左右カラム入れ替えの仕方

削除可能なJSについて

個別記事ページ送りを複製する方へ

ご質問・ご相談時のお願い

トラックバック 0 この記事へのトラックバック

0 この記事へのトラックバック