Cabbie - FC2ブログテンプレート

Cabbie - FC2ブログテンプレート

テンプレート
2017/01/27 4
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD Dark
Cabbieテンプレート

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

最終更新 2020.5.29
  • ページ送りのJSを修正
名称 Cabbie
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大894px
サイド --- 260px
記事内で使える見出しレベル h3からh6まで
jQuery導入 あり(v3.4.1)
Font Awesome導入 あり(v5.6.1 CSS)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
デバイス幅依存
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下
デバイス幅依存
サイドメニュー --- 下
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.4
  • コメント主のリンク表示用JS及びデザインの変更
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)

カスタマイズ済みなど、再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-->

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

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

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">Post a comment</h3> までを 削除

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

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

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

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

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

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

#comment_form {
  padding-top: 40px;
}
③について

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

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

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

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

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

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

更新履歴 2018.12.24
  • Lazyloading導入
  • 構造化マークアップ導入
  • Font AwesomeのCSSバージョンを5.6.3にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 要約記事のスクロールエフェクトをjQueryからネイティブJSに書き換え

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。
トップページ記事概要文の文字数が多すぎるように感じましたので制限を入れています。再DLの際はその点も併せてお考えください(制限解除は可能です)

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

更新履歴 2017.4.17

・ iPhoneでfixedされたinputが固定されないバグのApple修正に伴いhackを削除
参考記事
【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

リロイ・ジェスロ・ギブスにオヤジ萌え (*´Д`)ハァハァ

きゃびぃ
1月27日 申請致しました。

サンプル

Samples

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

カスタマイズのコツ

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

左右いずれかのカラムの縦(高さ)が一方よりも短いときにスクロールで画面外へ流れていかないようストップがかかります(スクロールアンカー)
現時点で以下のような注意点があります。

  • 「特定のプラグインやウィジェットのJS内容 + Google Chromeのグリッチ」でChromeブラウザ上でプラグイン・ウィジェットが表示されなくなる
  • アフィリエイトによってはスクロールアンカーへの掲載禁止

特定のプラグインに該当する具体的なものは「FC2動画」「FC2カウンター」「アフィリエイト」など、JSで内容を取り込むタイプのものです。表示されない、という症状が出ている場合には スクロールアンカーの解除を行ってください。

注)スクロールアンカー不要の方 で検索すると該当部位が出てきますのでガイダンスに従って削除をお願いします。

背景画像変更について(重要)

How to change the background image

本テンプレでは同一画像を2サイズ準備して頂く必要があります。

  • 横長、長辺1500px程度 --- PC用
  • 縦長、長辺1000px程度 --- スマホ・タブレット用

iPhoneのSafariでは画面上部のステータスバーが、上下にスクロールする度に出たり引っ込んだりします。
ステータスバーが引っ込む = 画面が広くなる = 縦ビューポートのサイズが変更される
それが原因で、全画面に配置した画像がスクロールする都度ガクガクと拡大・縮小を繰り返します。
なかなかどうしてこれが鬱陶しい (´・ω・`)
デザイン上対策できる時とできない時とありますが、今回はできるタイプです。

デフォルト画像を掲載しておきますので、横長画像を基準に縦に切り出すにはどこをどうするか、お考え併せの上作成をお願いします。

横長 (1800 × 1237) 104KB --- PC用
縦長 (616 × 1073) 115KB --- スマホ・タブレット用

縦長の方は 横 : 縦 = 1 : 2.5 程度が妥当かと思います。
処理がめんどう、ガクガクも気にならない、という方は以下の処理を行って画像を共通化してください。

注)スマホ・タブレット用背景画像設定

を目印に対象箇所を 削除 します。
・ 2種画像を準備する
・ 1種共通にして該当箇所を削除する
必ずいずれかでお願いします(でないとデフォルト画像が表示残りしてしまいます)

ドミナントカラー

Dominant colors

以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51

rgb(22,25,30) 記事背景色
rgb(227,199,64) リンク色 など

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

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

Cautions when copying pagination in permanent page

html内の <!-- 個別記事用ページナビ --> から <!-- 個別記事用ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。

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

Cautions before asking for something.

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

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

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

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

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

 4

There are no comments yet.
ユキ
カルーセル前後のスペースについて

こんにちは。
いつも素敵なテンプレートを配信いただき、ありがとうございます。
Cabbieのテンプレートにカルーセルを付けたいと思い、Juvenileのカルーセルから同じものを設置しました。
そこで、ブログタイトル(説明文)とカルーセルの間が少し開きすぎてしまっているので短くしたいです。
加えて最新記事(トップの記事)とカルーセルの間が無いので、こちらは間を空けたいです。
ですがどこをカスタマイズすればそうなるのかわかりません。
お手数おかけしますが、御回答よろしくお願いします。

2018/08/25 (Sat) 10:04
vanillaice (Akira)
Akira
To ユキさん

ありがとうございます :)

.owl-carousel

margin: 60px auto 0;

margin: 0 auto 60px;
に変更すればそれなりになるのではないでしょうか。

デフォルトテンプレートに何かを追加するカスタマイズについては原則としてサポートしていませんので、カルーセルについては自己責任でお願いします。

-----
ひとつ気になりましたのでお伝えします。
リニューアルのお知らせの文章内に「スマートフォンの方は、PC表示に変更をお願いします」とありますが、それは無茶ぶりというものです。
何故ならユキさんのスマホ版テンプレートにはPC版切り替えのボタンが存在しません。
閲覧者がPC版に切り替えるにはURLのパラメータを操作するか、ブラウザの個人設定を変更するしかありません。
それは閲覧者にとってとても煩わしく、また困難な作業です。そしてパラメータ切り替え・PCモード設定のいずれも他サイト閲覧に影響が出ます。
レスポンシブテンプレートであり、管理人ご自身がPC版で見てほしいという希望をお持ちなのですから、自主的にレスポンシブ設定を行われてはいかがでしょうか。
当記事内にある
「スマートフォン版を非表示にしてご利用ください」
の下に設定ページへのリンクがあります。
こちらを行えば閲覧者に願い出る必要はなくなります。
強制ではありませんのでご一考ください。

関連記事
今更だけど「レスポンシブ」ってなんぞ?
https://vanillaice000.blog.fc2.com/blog-entry-491.html

FC2ブログでレスポンシブテンプレートを正しく使う方法
https://vanillaice000.blog.fc2.com/blog-entry-711.html

2018/08/25 (Sat) 14:33
ユキ
To Akiraさん

ありがとうございます!!
了解です。やってみます!ご丁寧にありがとうございました。

2018/08/25 (Sat) 15:54
vanillaice (Akira)
Akira
To ユキさん

はい。頑張ってください (●'0'●)/

2018/08/25 (Sat) 20:13

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

テンプレート