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

Crescentテンプレート

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

名称
Crescent
くれせんと
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Karla
Playfair Display
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.15 2023.12.22
  • グローバルナビゲーションを固定できるようJSを分離

自身で修正される場合は

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/crescent.js" async></script>

上記赤字部位のURLを下記の通り変更

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/crescent_ver15.js" async></script>

続いて </body> の直前に以下のscript要素を追加。

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/peekaboo_navigation.js" async></script>
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.5
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.9.5
  • スクロール時のナビゲーションに関連するCSSの記述ミスを訂正
最終更新 2023.8.11
  • IE用対応終了
  • Font Awesomeの利用を停止
  • Twitter名称・ロゴ変更に対応
  • blog lovin' シェアリンク削除
  • jQueryの利用を停止
  • スクロールアンカーJSの利用を停止
  • カスタムプロパティ導入
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

カラム入れ替えや記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("prev-pager-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("next-pager-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("circle-left");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("circle-right");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>var start_pos=0;$(window).scroll(function(e){var a=$(this).scrollTop();if(a>start_pos){$('.side-pager-left,.side-pager-right').removeClass('appear')}else{$('.side-pager-left,.side-pager-right').addClass('appear')}start_pos=a});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

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

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

更新履歴 2019.12.16
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
最終更新 2019.10.29
  • コメント主のリンク表示用JS及びデザインの変更
  • 独自クラス.curlのIE向け修正
  • ヘッダー部位のIE向け修正
更新履歴 2019.7.29
  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箇所あります。この文字列を含め 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 .5em;
}
②について

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

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

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

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

④について

#inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

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

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

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

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

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

最終更新 2018.12.15
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年夏でサービス終了のため)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

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

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

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

更新履歴 2018.1.23

メンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みを導入しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップのシンタックスをJSON-LDに変更しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

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

去年購入したバーバリーのコートを電気ストーブで焦がしてしまったあきらでございます (;_;)

くれせんと
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

必須個人設定

Necessary personal settings

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

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

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

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

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

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

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

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

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

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事ヘッダー下の管理人アイコン をクリックすると別タブで開きます。

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

Cautions before asking for something.

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

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

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

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

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

がんちゃん
2019/10/04 (Fri) 21:50

サムネイルの表示不具合

こんばんは。
Akiraさんのこちらのテンプレートを少しだけカスタマイズして使わせて頂いています。ずっと問題なく使えていたのですが、ここ数日、トップページのサムネイルが、スマホだと表示されない、PCだと表示に時間がすごくかかる現象が起きています。スマホではGoogle Chrome、Safariで試してみましたが同じでした。
Akiraさんの他のテンプレート、Room38に変えてみましたが同じでした。Crescentの最新版にして試してみましたがやはり表示が遅いかされないです。公式の爆速系テンプレートだとサムネイルが表示されます。
他に試してみたほうがいいことなどあれば教えていただけないでしょうか。よろしくお願いします。

vanillaice (Akira)
Akira
2019/10/05 (Sat) 01:41

To がんちゃんさん

こんばんは。

【PC】
Mac 最新OS(Mojave 10.14.6)
通信 光回線
【SP】
iPhone XS
iOS最新 (13.1.2)
通信 光回線, 4G

上記が私の環境ですが、ローディングページ自体はキャッシュ無しで概ね約0.8秒台、4G回線でも同じく概ね1秒以内に完了しますのでこれはかなり速い方です。そしてサムネイルについても問題なく表示されます。というわけで私の環境下ではがんちゃんさんのおっしゃる状況を確認することができませんでした。

https://file.blog.fc2.com/vanillaice000/miscellaneous/capuser-dd----1000.png

これまで問題なかったものが突然おかしくなるという場合には、テンプレートの内容を外部操作することは一般的に不可能ですから、
・FC2のシステム上の問題
・カスタマイズのミス(直近に何もしていないのであれば今回は該当しないと思います)
・自身の環境の変化(OSアップデート, 回線の状況 など)
が原因かもしれません。この場合にはテンプレートを変更しても状況が改善されることはありません。

爆速テンプレートは事前にキャッシュを強制的に作成し、そのキャッシュデータでもって表示させていますので、通常のテンプレートとの通信比較対象にはできません。
また、一部のブラウザ、特にiOS SafariはテンプレートのCSS内容を変更した直後、既存のキャッシュ内容を変更するための時間を要します。Safariは特に顕著です。

以下の内容にお心当たりが無いかお確かめください。

・4G回線の場合は帯域制限を確認
・スマホのOSのアップデートを確認
・スマホの再起動を行う(事前にマルチタスクの終了も行う)
・スマホの省電力モードがONになっていないか確認(このモードに入ると一部のJSを実行しなくなったり複雑なCSSを無視したり、といったことが起こるのと全体的に低速になります)
・PCのキャッシュ・クッキーをクリーニングする
・ブラウザのアップデート確認
・Wi-Fiルータの動作確認

今のところFC2のシステム不具合は少なくとも私は確認していません。とはいえここ数日はろくにログインもできていなかったという状況ですのであてにならない ^^;

恐れ入りますが今一度ご自身の環境確認の方をお願いします。

がんちゃん
2019/10/06 (Sun) 00:32

ウィジェットのせいでした

Akiraさん
ありがとうございました。教えて頂いたようにスマホやPCの環境チェック等してみましたが変わらず。友人に頼んで違う環境のPCやスマホで試してもらいましたがやはり同じでした。Akiraさんの別テンプレートを使用している友人のブログは表示に問題がないのでやはり私のページの設定に問題がありそう。
と言うことで、いろいろなテンプレートを試してみて、プラグインが表示されないテンプレートだと正常に表示されることが分かりました。表示にしていたプラグインを1つずつ試してみたところ、私が追加したウィジェットの表示をONにするとトップページの表示が遅くなりました。現在はこのウィジェットを削除したので正常に表示されています。プラグインのせいという考えが及びませんでした。大変お騒がせしました。色々教えていただき助かりました。ありがとうございました。

vanillaice (Akira)
Akira
2019/10/06 (Sun) 00:39

To がんちゃんさん(終了のご報告)

こんばんは。

そうだったんですね。私の環境ではさほど悪影響は無かったんですが、ウィジェットOFFは残念とはいえ解決できたのならば安心しました。
お疲れ様でした :)

みーちゃん
2023/08/12 (Sat) 15:39

ユーザータグの件

今回、修正が入ったので、新しいものをダウンロードし、必要なところを修正し、ユーザータグの箇所を外向け用に修正し、確認してみたところ、記事下のユーザータグの表記が崩れているというか、おかしくなってしまいました(-_-;)

https://blog-imgs-170.fc2.com/p/o/e/poemphrase/20230812151002d20.png

htmlコードは下になります。

https://blog-imgs-170.fc2.com/p/o/e/poemphrase/20230812153748ac4.png

お手隙のときに、アドバイスいただけると助かります。

vanillaice (Akira)
vanillaice (Akira)
2023/08/13 (Sun) 17:05

To みーちゃんさん

こんにちは ('0')/

ポータルタグの変数はクラス属性を追加することができません(FC2の仕様です)ので、

.entry-tag-anchor
で検索、スタイルシート内に2箇所ありますのでそれぞれこのセレクタを

.entry-tag a

に変更してください。

みーちゃん
2023/08/14 (Mon) 11:19

To vanillaice (Akira)さん

ユーザタグの件、アドバイスどおりに修正したら、正常の形になりました。
ありがとうございました。

vanillaice (Akira)
vanillaice (Akira)
2023/08/15 (Tue) 02:55

To みーちゃんさん(完了のご報告)

こんばんは ('0')/

上手く行ったとのことで良かったです。お疲れ様でした :)

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