



Capricious/ Ranchuテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
名称 | Capricisou/ Rachu |
動作確認済みブラウザ |
![]() ![]() ![]() ![]() ![]() ![]() |
トップページ記事並び | 全文表示タイプ |
記事幅 | メイン --- 最大800px サイド --- 280px |
記事内で使える見出しレベル | h2からh6まで |
jQuery導入 | あり(v3.4.1) |
Font Awesome導入 | あり(v5.6.3 CSS) |
Lazyloading導入 | なし |
構造化マークアップ | 個別記事のみ 「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 右 (デバイス幅依存) | サイドメニュー --- 下 |
- FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
- jQueryを3.6.0にアップデート
- ブログタイトルの太字調整
カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。
【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。
【ブログタイトル太字調整】
/* 注)ブログタイトルフォント関連 */ を目印に検索し、このルールセットの animation: slideInDown 1.2s; の直下に font-weight: bold; を追加。インデントにタブや全角スペースを利用しないよう注意。
本ページの内容は2019年1月23日メンテナンス以降のバージョンが対象です。
Sakuraシリーズの背景違いです。
細かい部分の修正を入れておりますが 特に目新しいものはありません
サンプル
Samples
【Capricious】
【Ranchu】
カスタマイズのコツ
A few tips on customizing
1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。
2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります。
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。
3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです。
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。
お受けできないご質問・ご相談
I'm sorry I couldn't be of any help.
- サイドバーの形状変更
- トップページの表示タイプ変更(全文表示から要約表示へ変更、グリッド並び数変更 など)
- レスポンシブを固定幅化
- カラム数・配置変更
- 今回は左右カラム入れ替え非推奨です(ポイント画像がabsolute配置のため)
- デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
- テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
背景変更の仕方
How to change the background image
body:before
の background プロパティが該当ですのでurlを差し替えてください。
また、スマートフォンでは同画像のアスペクト比違いのものを指定しています(スマホのステータスバーによるスクロール時の背景拡大対策)
ratio 9:16 とコメントを付けてありますが、iPhone Xでは縦幅が足りません のでデフォルトでは足りない縦寸をbodyへの背景色指定で補っています。
みなさんが画像を変更されます際にはアスペクト比を 2.17:1 の縦長で作成してください。つっても難しいですよね。嫌な数字だし (´・ω・`)
スクロール時に背景が拡大(下向きスクロール時)と縮小(上向きスクロール時)を繰り返すのが苦にならないという方は
スマホ用背景画像
の項目を丸ごと削除してください。
背景を変更する方はスマホ用画像の設定 or 削除のいずれかを行わないと、スマートフォンでデフォルト画像が居残りますので注意してください。
個別記事ページ送りを複製する方へ
Cautions when copying pagination in permanent page
2020.3.26バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内を <!-- 個別記事ページナビ --> で検索し、すぐ上にある <!--permanent_area--> を含め、<!-- 個別記事ページナビここまで --> のすぐ下にある <!--/permanent_area--> までを含めた範囲をコピーし、希望の位置に貼り付けてください。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.