Capricious/Ranchu - FC2ブログテンプレート

Capricious/Ranchu - FC2ブログテンプレート

テンプレート 配布中テンプレート
2015/04/09
42
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD
Capriciousテンプレート
Ranchuテンプレート

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 右
(デバイス幅依存)
サイドメニュー --- 下
最終更新 2022.1.6
  • 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; を追加。インデントにタブや全角スペースを利用しないよう注意。

更新履歴 2020.5.30
  • ページ送りのJSを修正
更新履歴 2020.4.6
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.26
  • 個別記事ページ送りの複製を可能にしました

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

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.11
  • コメント主のリンク表示用JS及びデザインの変更
更新履歴 2019.8.3
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)
【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点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箇所あります。この文字列を含め <div class="icon-position"> のすぐ上にある </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="fa fa-arrow-up" aria-hidden="true"></i></a>
  <li><a href="#comment_form"><i class="fa fa-arrow-down" aria-hidden="true"></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">Leave a comment</h3> までを 削除

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

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

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

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

<p class="visitor-name"><%comment_name>&nbsp;&nbsp;<script>a="<%comment_url>",""!=a&&document.write('<a href="'+a+'" target="_blank" rel="nofollow noopener noreferrer"><i class="fas fa-link"></i></a>');</script></p>
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

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

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

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

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

④について

.inner-contents { で検索するとスタイルシート内に1箇所ありますので padding: 20px 0;margin: 20px 0;変更

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

.inner-contents p {
  margin: 1.9em 0;
}

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

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

更新履歴 2019.1.23
  • Font AwesomeのCSSバージョンを5.6.3にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • UA判別のJSを削除しCSSに変更
  • Pinterest, はてなブックマークのシェアアイコンを追加
  • SNSホバー時の背景色を各社ブランドカラーに変更
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • パンくずリストを導入
  • 構造化マークアップを導入

不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、パンくずリスト・構造化マークアップの導入など比較的大きな追加変更が含まれます ので是非アップデートをご検討ください。

更新履歴 2018.1.16

大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。

定番テンプレート7作品メンテナンスのお知らせ

定番テンプレート7作品メンテナンスのお知らせ

以下のテンプレート7作に於いて大規模なメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。 Sakura_daylight Sakura_daylight2 Sakura_nightglow Capricious Ranchu OnTheGround Jingle...

更新履歴 2017.9.22
  • SSL化に伴うURL正規化
更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2016.10.11
  • Windows10 IE11及びMicrosoft Edgeのスクロールバグを再度hack
  • 全体レイアウトの再調整
  • カテゴリなど一部ページをリスト形式に変更
  • 全体レイアウトの再調整
  • 主要公式プラグインの整形
  • 関連記事サムネイルの整形
  • ベンダープレフィックスの整理
  • その他微調整

Windows10でスクロールした際に背景画像がガクガクと震えるバグをhackしました
根本的な修正はMicrosoftの対応待ちです
ご迷惑をおかけします よろしくお願いします

本メンテナンスに伴い 当該記事内容を大幅に書き換えましたことをご了承ください

更新履歴 2016.1.10
  • フッター構造を変更しました
  • タイトルタグを微調整しました(SEO対策)
更新履歴 2015.11.22
  • Windows10 Internet Explorer11及びMicrosoft Edgeで 固定した背景画像がブレるバグに対処
更新履歴 2015.9.22
  • iOS9 リリースに伴い スマホ・タブレットではColorbox起動させないよう修正しました
更新履歴 2015.9.9
  • 公式化に伴うOGP削除

テンプレ付随SNSボタンをご利用の方は ブログ環境でのメタタグ個人設定をお願いします

更新履歴 2015.8.30
  • ページtop/ bottomボタン変更
  • スマホからのテキスト入力時に画面が自動でズームしないよう調整
  • ビューポート再調整
  • カレンダー追加
  • サイト内検索追加
  • SNSアイコンを画像からwebアイコンに変更
  • スマホ画面からRSSボタン削除
  • スマホ画面にスマホ版への誘導ボタン追加
  • 一部フォント変更
  • FC2検索バーがタブレットでレイアウトを壊す問題に対処

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

Sakuraシリーズの背景違いです。
細かい部分の修正を入れておりますが 特に目新しいものはありません

サンプル

Samples

【Capricious】

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

【Ranchu】

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.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(全文表示から要約表示へ変更、グリッド並び数変更 など)
  • レスポンシブを固定幅化
  • カラム数・配置変更
  • 今回は左右カラム入れ替え非推奨です(ポイント画像が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'●)/

Related post

Comments  42

きろろ
2015/04/10 (Fri) 05:08

コメント欄について

おはようございます<(_ _)>

こちらのコメント欄の名前変更仕様を試してみたのですが……

Control+Fでtitle="To <%comment_name>を検索して見たのですが……0なんですがw

htmlの中に文字列が見つかりませんw
使うのに差し支えはないので、別段いいのですが。
一応ご報告までに<(_ _)>

きろろ
2015/04/10 (Fri) 05:27

連投で申し訳ございません

金魚の背景を試してみたのですが

background: urlを3ヶ所、差し替えました。
日付がですね……Akiraさんのところのように表示されません。

具体的にどんなかと申しますと……壁紙背景と同じ柄で
四角で囲っている感じとでも申しましょうか……
Sakuraのテンプレートで背景を差し替えているのですが……。

お暇なときにお返事を頂ければありがたいです<(_ _)>

Akira
2015/04/10 (Fri) 06:04

To きろろさん

きろろさん、おはおー ( ゚Д゚)ノ
ごめんね。ちょっと今から子供のイベントあって珍しく早起き(笑)
帰宅次第改めます!ごめんねー!

Akira
2015/04/10 (Fri) 16:16

To きろろさん

Colorbox適用済みソースの方かしら。
ここにあるよ ( ̄∀ ̄) ↓

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

vanillaice (Akira)
Akira
2015/04/10 (Fri) 16:22

To きろろさん

Sakuraの方のHTMLソースでやった、ってことで合ってますかね。

えと。今回はバリデーションの関係もあり、Sakuraのソースを踏襲してはいないんです。
先ほどのコメント欄の部分も書きなおしてますし、背景の記述にも変更を加えています。
なので、記事内にあるカスタマイズについてはこちらの
Capricious/ Ranchu の2テンプレート限定です。

上記二つのテンプレの全ソースをここで先出ししても良いのかもだけど、一応FC2の中の人に点検してもらって審査通過後にご利用頂いたほうが良いだろうと思いまして (´・ω・`)
何か不備があったら回収しないといけないもんね ( ̄∀ ̄;)

というわけなので、両テンプレに許可が降りるまでカスタマイズの方はしばらくお待ち下さいませ (*_ _)

背景の変更箇所は今回は1箇所だけです。
んで、三箇所変えたということは恐らく日付部分の背景を変えてしまったので新しく設定した画像のなってしまってるんだと思います。
ブログ背景と日付背景とが揃ってしまった、ってことです。

vanillaice (Akira)
Akira
2015/04/10 (Fri) 16:25

To きろろさん

なので注意点ですが、
SakuraのCSSソースと先出ししたColorbox適用済みHTMLソースとを組み合わせるとマズいことになります (´・ω・`)

Capricious/ Ranchu の申請通過をお待ちいただいて、そちらのHTMLソースと記事内ZIPファイルの中のHTMLソースとを差し替えて頂く形でお願いします :)

きろろ
2015/04/10 (Fri) 23:55

早速のお返事ありがとうございます<(_ _)>

大変細かい説明ありがとうございました<(_ _)>

なるほど……そういうことでしたか!

難しいことはわかりませんのでw
申請通過されるまで、期待してお待ちしております!(^^)!

御返事ありがとうございました<(_ _)>

Akira
2015/04/11 (Sat) 03:55

@きろろさんへ

ちょっと言葉足らずでした。
ごめんなさいね。

んでもってコメント返信読みづらいと思いますが、すみません(笑)
ちょっとづつ作る ^^;

Sakula
2015/04/11 (Sat) 09:38

Validatの件、ありがとうございます。公開されたらさっそく使わせて頂こうと思います!
金魚、かわいいですね♪

あと、ちょっとお願いなのですが...今現在のこのブログなのですが、プラグインのコメントタイトルをクリックしても、該当のコメントにジャンプしないんですよね。。。
コメントにIDが振られていないようです。記事が長文の場合、コメントまで移動するのがクリクリクリクリと大変なもので。。。
お時間のある時にでも修正していただけると助かります。

要望ばかりで申し訳ありません。

chiemi
2015/04/11 (Sat) 12:20

金魚だ^^

前回コメ、わたし鍵付きにしてしまったんですね。
気付かなかった^^

お読みいただいた名前でも
面白くて良いなぁって思いました。


いつか、お花写真専用のテンプレ欲しいです。
写真を並べて表示出来る....みたいな......
我儘者です。

vanillaice (Akira)
Akira
2015/04/11 (Sat) 14:38

To Sakulaさん

ホンマやぁー :)
ご指摘ありがとうございます。
直した!
これ全然気が付きませんでした。
申請に出した方も修正しておきます!

Akira
2015/04/11 (Sat) 14:55

Re ぱぴぷぺぽさん

えー。何から始めましょうかね…。
まず、ブログ村関連のバナーについて。
現在<table>タグを用いて各アイコンをひとまとめに表示されているかと思います。
このtableサイズが画面を超過していますので、ブラウザ幅を縮小すると画面から飛び出してしまいます。
飛び出してしまったものはサイドバーの内容と重なって、サイドバーよりも重なりが『下位』になりますので、結果的に『リンクが押せない』状態になってしまいます。
そしてこの<table>にクラス名を追加すると、Colorboxの起動を制御することもできます。
今こういったソース内容になってます ↓

<table width="600" cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td>
<img alt="" src="バナー1" style="border:0px;" /><br />
<a href="FC2ランキング" target="_blank">FC2 Blog Ranking</a>
</td>
<td>
<img width="88" border="0" height="31" alt="" src="バナー2" /><br />
<a href="人気ブログランキング" target="_blank" style="font-size:12px;">人気ブログランキング</a>
</td>
<td>
<img width="110" border="0" height="31" alt="" src="バナー3" /><br />
<a href="つぶやき" target="_blank" style="font-size:12px;">つぶやき</a>
</td>
<td>
<img width="88" border="0" height="31" src="バナー4" alt="ブログランキング・にほんブログ村へ" /><br />
<a href="ブログ村ランキング" target="_blank">にほんブログ村</a>
</td>
<td>
<img width="88" border="0" height="31" src="バナー5" alt="にほんブログ村 オヤジ日記ブログ 平凡オヤジへ" /><br />
<a href="平凡" target="_blank">平凡オヤジ</a>
</td>
</tr>
</tbody>
</table>


http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/woeiru%201_zpsaf5wwdkc.jpg~original

各アイコンとの空白やテキスト同士の位置の調整は『スペース』で作成されているかと思います。
これを以下の通り修正されると良いかなー と。
(コピペでそのまま使えるよう、URLなども入れておきますがコメント制限になりますので★を入れておきます ★は削除してください。 ドラッグ選択後 Ctrl+Cでコピー 記事作成時毎回使いますので要保存)

<div class="ranking-contents"><a href="h★ttp://blogranking.fc2.com/in.php?id=931429" target="_blank"><img alt="banner" src="http://blogranking.fc2.com/ranking_banner/a_01.gif"></a><a href="h★ttp://blog.with2.net/link.php?1744747" target="_blank"><img alt="banner2" src="http://blog.with2.net/img/banner/banner_22.gif"></a><a href="h★ttp://blog.with2.net/link.php?1744747:9111" target="_blank"><img alt="banner3" src="h★ttp://blog.with2.net/img/banner/c/banner_1/br_c_9111_1.gif"></a><a href="http://www.blogmura.com/ranking.html" target="_blank"><img alt="ブログランキング・にほんブログ村" src="http://www.blogmura.com/img/www88_31.gif"></a><a href="h★ttp://oyaji.blogmura.com/oyaji_heibon/ranking.html" target="_blank"><img alt="にほんブログ村 オヤジ日記ブログ 平凡オヤジ" src="h★ttp://oyaji.blogmura.com/oyaji_heibon/img/oyaji_heibon88_31.gif"></a></div>

tableタグというのは<td>を強引に横並びにさせる特徴がありますので、こういったバナー関係を並べるには適さないんですよね (´・ω・`)
上記ソース内容に変更して頂くことで、範囲の超過を防ぐことができます。
スマホからご覧になられる方にも親切。
上記が記事に貼り付ける内容です。
そしてテンプレのCSSソース(テンプレ管理画面『下段』)末尾に以下を記載

.ranking-contents {
max-width: 100%;
}

.ranking-contents a {
display: inline-block;
padding: .2em .5em;
}


CSS側にしっかり上記の記載をし、記事作成時には毎回同じものを貼り付ける、といった感じで使います。
この両ソースはテンプレートを変更されたときにも使えますので、どちらも保存です。

vanillaice (Akira)
Akira
2015/04/11 (Sat) 14:58

To chiemiさん

写真を並べるタイプ…。
ちょっと考えてみますね。
いつもありがとうです :)

-
2015/04/12 (Sun) 12:51

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2015/04/12 (Sun) 23:11

To 内緒「c」さん

そうでしたか (;ωq`)
お母様にお花、素敵ですね。
お気遣いまでありがとうございます。
これはよく練ってから…と思いました。
でも決してプレッシャーではないですよ。
いつもありがとうです :)

きろろ
2015/04/13 (Mon) 00:34

うわぁ~~かっこいい~~!!

今度のホーム……
めちゃくちゃかっこいいですね!
Romanticから、すごい変身!!
ステキ、というよりカッコイイ?
クールビューティー?

このテンプレートはどうなさるおつもりなんでしょうか?
非常に気になるところです……!(^^)!

いや、Akira さまのところへ日参するのが楽しみでしかたありません❤
木の芽時、お体には注意してお過ごしくださいませ<(_ _)>

きろろ
2015/04/13 (Mon) 00:51

プラグインのコメント欄w

全然、気づきませんでしたw
DLし直しましたので、ご心配いただきまして
ありがとうございます<(_ _)>

Akira
2015/04/13 (Mon) 01:51

@きろろさんへ

使う方いらっしゃるだろうか ^^;
黒背景自体があまり好まれないですよね (´・ω・`)
それでも良いぜ!というツワモノがいらっしゃれば申請しようかと(笑)

Akira
2015/04/13 (Mon) 01:53

@きろろさんへ

毎度お世話かけちゃってすみません ( ̄∀ ̄;)
よろしくお願いします (*_ _)

きろろ
2015/04/13 (Mon) 16:49

黒背景でも使う人はいます!

ここにおりますw
テキスト色をいっそ白抜きにしてみたらどうでしょうか?
私も目が悪い方なので、黒背景に白いテキスト文字だと
はっきりと読める方です。

基本、PC画面は明るいので白背景だと逆に見づらいと思うのですがw
白背景のほうが好まれるのは、イメージ的に明るいからではないですか?
私はこのホームが大好きですよ❤

余計なことだと思ったのですが……
RomanticをDLし直して気づいたのですが……
サイドメニューのコメント欄→コメントをクリックするとその記事にはリンクされているのですが、
コメントそのものに移動しないんですよね。

↑コメントでSakulaさんが仰っていたのは、
サイドメニューのコメント、もしくはコメントをクリックすると、
そのコメント欄に移動する……そういうことだと思います。

確かに記事が長いと最新のコメントを読むのに、スクロールをしなければいけませんね。

ほんとうに余計なことを言って申し訳ありません(>_<)

この素敵なホームが無事完成されるのを、心待ちにしております<(_ _)>

vanillaice (Akira)
Akira
2015/04/13 (Mon) 18:31

To きろろさん

それそれそれ!それなんですよー (´・ω・`)
完全に失念しておりまして。
また修正版出さないと ( ̄∀ ̄;)
カスタマイズされてる方にしてみればとんだ迷惑ですよね。
申し訳ないことでございます ( ノД`)シクシク…

修正が即反映されるように仕様が変更になっているようなので、申請通過は時間がかかるけれども修正は早いみたい。
それってどうなんだろう、とは思うけれど(笑)
だって後付で不正し放題になっちゃわないかしら (´・ω・`)
テンプレ製作者を信頼しています!
的なあれかしらね。
性善説を重んじるFC2の中の人(笑)

Akira
2015/04/13 (Mon) 21:02

@きろろさんへ

今修正版出しました。
何度もお手を煩わせることになり、ホントに申し訳ありません (*_ _)
ご確認頂ければと思います。

なんかこう…一発でビシっと決められないあたり未熟者丸出しですみません ( ̄∀ ̄;)

きろろ
2015/04/14 (Tue) 00:59

いえいえ、こちらこそ……

もっと早くに気づいていれば、お知らせできたんですが^^;

私もコメントを読むまで何も気づきませんでしたw
毎回、スクロールしていたんですが
違和感がなかったんですよねw

お仕事と家庭、そしてテンプレート作りと
忙しいんですから、何かが足りなくてもしかたありませんよ。

素敵なテンプレートを提供してくれているだけで、
感謝感謝です!(^^)!
変数のジレンマ……素人の私にはわかりませんが
頑張ってください<(_ _)>

吉岡
2015/04/15 (Wed) 11:17

Sakuraからの背景変更

Capricious/Ranchu公開されたようですね。ありがとうございます。
私のようにSakura(daylight_2)が気に入ってカスタマイズして使っている者が背景を差し替えたい場合にどうしたらいいか、よくわからなかったのですが、
1) 全体の背景Ajisai_1.jpgに差し替え
2) 日付の背景ajisaibubble_1.pngに差し替え
3) CSSの@mediaという記述のところを今回の記述に差し替え
...ということでいいでしょうか?こうするとPCでは問題なく表示できたようでしたが、iPhoneのSafariではアジサイとはちょっとわかりませんでしたが(?)表示はされました。
もし、意図された適用方法と違っていましたら教えてください。
...
もちろん今回のCapricious/Ranchuに、私がSakuraでやったのと同じカスタマイズをもう一度する、という手段がありますが、できればSakura+カスタマイズから背景の差し替えだけで楽をしたいので(^^;)
すみませんが、よろしくお願いします。

vanillaice (Akira)
Akira
2015/04/15 (Wed) 16:45

To きろろさん

あい ( ゚Д゚)ノ
頑張ります (o'д`o)ゝ

いつもお気遣いありがとうです :)

Akira
2015/04/15 (Wed) 16:51

To 吉岡さん

Sakura(修正前)を使用したままの変更

ということでお間違いないでしょうか。
えっと、ちょっとお待ちください(笑)
そのままだとね、スマホ側での表示に画像編集が要るんです。
確認しますので待ってね。

vanillaice (Akira)
Akira
2015/04/15 (Wed) 16:58

To 吉岡さん

まずHTMLの方に一行追加してください
比較的上の方に(80行あたり)

<body>

<div id="wrapper">



という箇所がありますので、その二行の間に
<div id="bg_hack"></div>
を追加して以下のようにします ↓


<body>
<div id="bg_hack"></div>
<div id="wrapper">



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

続いてCSSソースから赤字部分を削除

/***----- common
------------------------------------------***/

body {
font-size: 13px;
color: rgb(0, 0, 0);
line-height: 1.7;
font-family: Meiryo, 'Hiragino Kaku Gothic Pro W3', Georgia, 'Times New Roman', Serif;
background: url(http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/sakura2.jpg) fixed left top no-repeat;
background-size: cover;

}


上記を消去しましたら上記ソース内容の下に以下を追加

#bg_hack {
background: url(変更したい画像アドレス) center top no-repeat;
position: fixed;
background-size: cover;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}


さらに以下の赤字も削除


@media screen and (max-width: 420px) {
body {
font-size: 13px;
color: rgb(0, 0, 0);
line-height: 1.7;
font-family: Meiryo, 'Hiragino Kaku Gothic Pro W3', Georgia, 'Times New Roman', Serif;
background: url(http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/sakura2_sp.jpg) fixed left top no-repeat rgb(239, 227, 215);
}
}



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

スマホ側背景表示の不備(バグ)を別の形で処理する方法です。
こちらの方が簡単だと思います(画像編集不要なので)
あるいは、現在の修正版が既にこちらの形に変更になっていますので、吉岡さんが行われたカスタマイズの作業工程と、新たにDLした際の作業工程を天秤にかけて楽な方をお選びください :)

vanillaice (Akira)
Akira
2015/04/15 (Wed) 17:17

To 吉岡さん

上記が「全体背景」の差し替えです。
で、
2) 日付の背景ajisaibubble_1.pngに差し替え
の方の該当箇所はこちらです ↓

.ymd {
background: url(ここに変更したい画像アドレス) center center no-repeat;


わかりにくければまたお尋ねください :)

吉岡
2015/04/16 (Thu) 01:07

To Akiraさん

詳細に教えてくださりありがとうございました!教えて頂いた通りにやってみたらうまくいきました。
前のコメントのときには気づいていなかったのですが、Sakuraのソースもすでに修正されているんですね。修正前のSakuraをカスタマイズしていたこと、お察しの通りです。
もう少し確認をしたら季節に合わせて紫陽花をデビューさせようと思います。楽しみです(^^)。

sissy
2015/04/24 (Fri) 21:43

カレンダー表記のみ・・について

大変お世話様になっております。
こちら様のテンプレートはロマンチックで美しくてとても気に入って使わせて頂いてます♪

そこで、少し困っているところがひとつございます。。

カレンダー表記のみが、少し妙なのです;
一番上の、『 03 | 2015/04 | 05 』ですが、『05』だけが行送りになっています。
あと、日にちもぎゅうぎゅうに詰まっていて何だかちょっと妙なのです。。

わたくしがヘタにいじってデザインが崩れたら哀しいので、お伺いに参りました。
お忙しいところ大変恐縮ですが、お手すきのときにご指導頂けましたら幸いです。
何卒よろしくお願い申し上げます。

vanillaice (Akira)
Akira
2015/04/24 (Fri) 22:03

To sissyさん

カレンダーの件

こんばんは :)
ちょうど今設定しているテンプレのコメント欄をいじっていたところで、コメントし難かったかと思います。
ごめんなさいね。
一旦戻しました(笑)

Ranchuテンプレについてはデフォルトでカレンダーを入れておりませんので、
公式のカレンダーをお使いだと思います。
公式カレンダーの装飾を一部追加することで解決するかと思います。

管理画面にある二つのボックスの「下」CSSソースの末尾に

.calender {
width: 100%;
table-layout: fixed;
text-align: center;
margin: 0 auto;
}


を付け加えてください。
公式カレンダーへの追加記述という形です。
これで綺麗に表示されるはずですので、お試しくださいね :)

* カレンダーの横幅が大きすぎるな~、と思った時には
width を100%ではなく 90%や80%で調整してみてください。

sissy
2015/04/24 (Fri) 22:15

To Akiraさん

(*◎□◎*)早々に!有り難うございます♪
ちょうど調整中でしたか!すみませんお邪魔してしまい;

綺麗表示になりましたあああ!
完璧です~~+゚。*(*´∀`*)*。゚+

本当に有り難うございましたv
他のテンプレもことごとくダウロさせて頂きましたので、順繰り使わせて頂きます♪
これからも素敵テンプレなど楽しくご活躍下さいませ☆

vanillaice (Akira)
Akira
2015/04/24 (Fri) 22:18

To sissyさん

いえいえ。全然邪魔などではないですよ ( ̄∀ ̄☆)
上手くできたようで良かったです!
こちらこそお手数おかけしました。
ありがとうございます :)

吉岡
2015/09/01 (Tue) 00:53

背景違い

いつもお世話になっています。Sakura→Capricious→Ranchuとずっと使わせていただいています。
そろそろ夏も終わりかという季節になってきましたので、もしよかったら、同じシリーズの季節違いをまた用意してくださるとうれしいです。気に入っているので、なるべく年間を通して使い続けたいんですよね。
もちろんAkiraさんの優先順位の中でのご判断ですので、もしよかったら…でいいのですが。

vanillaice (Akira)
Akira
2015/09/01 (Tue) 02:32

To 吉岡さん

いつもありがとうございますー!

はい、今背景作成中でございます ( ゚Д゚)ノ
画像はもうできてるんだけども、ちょっとhtml修正なんかを入れたいもので。
1~2日ほどでなんとかなると思います(あくまでも見込み(笑))
お気に召すかどうかわかりませんが、長くお使いくださってとっても嬉しく思います。
ありがとうです :)

Akira
2017/07/18 (Tue) 22:06

To Ranchフォントの件 内緒さん(移動先)

http://vanillaice000.blog.fc2.com/blog-entry-440.html#comment3831
> PCフォントがスマホで反映されない件〜

その前に一点お伝えしたいので先にすみません。
左右カラムの入れ替えの仕方に若干問題ありで、パソコンでの閲覧時、横スクロールバーが出てしまっています。
横スクロールバーの出る状態ではレスポンシブとは言えませんし、非常に閲覧し辛いので是非修正をお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-298.html

----------

本題です。

パソコンのフォントとスマホのそれが異なる、ということですが、欧文のことでしょうか。
それとも日本語でしょうか。
Ranchuの欧文フォントはwebフォントと言って、リンクで呼び出していますのでどのデバイスでも変化はないはずです。
ただし欧文でも全角で記した場合にはその限りではありません。
欧文というのは全角が存在しませんので、例えアルファベットでも半角で記さない限り指定欧文フォントにはなりません

本件について「日本語書体のことである」と仮定して話しを進めます。
まず最初に、内緒さんがお使いのパソコンのOSは何でしょうか。
仮にWindows8.1以前であるならば、内緒さんが目にしているフォントは「メイリオ」です。
Windows8.1を含むそれ以降のバージョン、あるいはパソコンがMacであるならば、目にするフォントは「游ゴシック体」です。
まずここをご自身で確認してください。
OSのバージョンでフォントが異なる理由は「バンドル(搭載)されているかいないか」の問題で、それ故の優先順位指定を行っています。

同じように、スマートフォンのOSは何でしょうか。
恐らくiOSあるいはAndroidのいずれかだと思いますが、
フォントというのはパソコン・スマホ問わず、OS名がわからなければバンドル状況を調べようがありません。

スマホというのはパソコンのように多様なフォントが標準バンドルされているわけではありません。
iOSのデフォルトフォントは「ヒラギノ角ゴ ProN W3
Androidのデフォルトフォントは「モトヤ」です。

Ranchuの第一優先フォントはWindows, Mac共に「游ゴシック体」
第二優先フォントはWindowsが「メイリオ」Macが「ヒラギノ角ゴ ProN W3」
上記を踏まえ、iOS, Androidの2大OS共に「游ゴシック体」は存在しませんので、iOSでは「ヒラギノ角ゴ ProN W3」が(iOSにメイリオはありません)。
Andoroidは全指定フォントがありませんので自動的に「モトヤ」で表示されることになります。

各OS、各デバイスでフォントのバンドル状況が異なりますので、各メーカーが揃えてくれないことには全く同じにするというのは不可能です。
あるいは日本語にもwebフォントを利用するか。
日本語webフォントはおすすめしませんが、どうしてもということであればそれが最善策となります。

すすめない理由やフォント表示の性質などは以下のページをご参照ください。

http://vanillaice000.blog.fc2.com/blog-entry-484.html

-------

で、レスポンシブデザインというのはあくまでも「レイアウト」「段組み」に係るものであって、フォントなどはまた別の概念なんですね。
レスポンシブ = パソコンと全く同じ
なのではなく
レスポンシブ = 異なるデバイスでもレイアウトが問題なく表示される(各デバイスの縱橫幅などの考慮)
という意味です。

ご質問内容とズレがありましたらご指摘くださいね。
よろしくお願いします。

-
2017/07/18 (Tue) 22:58

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/07/19 (Wed) 00:03

To Ranchフォントの件 + バナーの件 内緒さん

わー。4時半ですか。早っ ( ̄∀ ̄;)
はい。ゆっくりお休みください。

> アドセンスの関連コンテンツのレスポンシブを貼ったところ、サイドバーの領域まで進出〜

こちらは実際の様子を見ないことにはなんとも言えませんが、恐らく記載位置が違えているのが原因かと思います。
設定してお見せ頂くか、あるいはソースの該当位置をなるべく広範でスクリーンショットをお取り頂くかしてお伝えください。
よろしくお願いします。

-
2017/07/19 (Wed) 19:35

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira
2017/07/20 (Thu) 13:42

To VeryMerryアドセンスの件 内緒さん

VeryMerryで、ということなので専用記事に移動をお願いします。
基本的にテンプレート専用記事には専用のコードやカスタマイズ方法などを記していますので、そのページをご参照頂くのが一番です。
とりあえずカラム変更の件については移動先の記事に記してありますので御覧ください。
今出先ですのでアドセンスの件は帰宅次第改めますね。
(コード内容をざっと拝見した限りでは、レスポンシブコード内容「ではない」ようです)
よろしくお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-550.html

ふーみん
2022/09/29 (Thu) 20:38

ブログタイトル文字について

すいません。
以前にも同じことを質問させて頂いたかもしれません。
タイトルの文字にアルファベットも入っている為、半角にするとわかりにくくなってしまいます。
このテンプレートがとても好きなので使いたいのですが、どんどん崩れていってしまい変な風になってしまいました。
アルファベット部分が流れるタイプでない感じにしたいのですが、どうしたらいいですか?

vanillaice (Akira)
vanillaice (Akira)
2022/09/29 (Thu) 21:07

To ふーみんさん

こんばんは ('0')/

#blog-title
で検索し、このルールセット内のフォント指定を以下の通り修正。

2.4rem/2.4 'Hiragino Mincho ProN', YuMincho, 'MS PMincho', 'MS Mincho', serif;

一度この変更状態で目視確認をお願いします :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)