attention admin about comments trackbacks you may also like

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

2017年12月01日
テンプレート
4
HTML5 CSS3 RWD
Crescentテンプレート

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

最終更新 2019.10.29
  • コメント主のリンク表示用JS及びデザインの変更
  • 独自クラス.curlのIE向け修正
  • ヘッダー部位のIE向け修正
名称 Crescent
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大820px
サイド --- 320px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.2.1)
Font Awesome導入 あり(v5.6.1 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 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE若干難あり
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 左 サイドメニュー --- 左 or 下(デバイスサイズ依存) サイドメニュー --- 下
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

【重要】テンプレートの変更点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について

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

更新履歴 2018.1.23

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

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

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

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

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

サンプル

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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

IE若干難あり

This theme is incompatible with Internet Explorer.

----- 追記 2019.10.29

「IE非対応」から「IE若干難あり」に変更しました。以下のヘッダーに関する内容の調整を行いましたが、完璧なものではありません。ただ以前ほど見苦しくはないと思います。以下は本文です。

----- 追記 ここまで

現時点でメインストリームサポートが残っているIEはバージョン「11」のみですので、それ以下は全て非対応です。
加えて今回はIE11も非対応。

ブログタイトル + welcome の文字が天地中央に寄りません。同じMicrosoftブラウザのEdgeではなりません。
原因(flexレイアウトで親要素のmin-heightを解釈できない)と対策(htmlの入れ子を増やす, display: tableを利用する など)はわかっているのですが、対処しませーん (´・ω・`)
IEに構ってると無駄なhtml要素とCSSがどんどん増えていきます。もうね、気が萎えるんですよ((((笑)
今後はIEは極力無視して行こうと思います(すみません)

全体レイアウトが壊れているといったことはありませんが、今回一番目立つのはヘッダーです。その目立つヘッダーがおかしいわけだね。IEでは。ご利用は「IEなんか使ってるボンクラは無視」ぐらいの気概がある方でお願いします ←

とはいえIEを無視できない、という方は下策ではありますが以下の手順で回避してください。

/* 注)ブログタイトルフォント関連 */

で検索されますと、CSSソース内に1箇所あります。
その括りの中に

min-height: 240px;

というのがありますので、緑部分を削除して min-height から height へ変更してください。
ただし下策です。ブログタイトルが長い方はタブレットやスマホで テキストが折り返します ので、折り返した結果縦幅が240pxを超えると overflow という状態になります(範囲超過)
本来折り返す可能性のある要素に height は設けるべきではありませんが、どうしてもという方だけどうぞ。
240pxというのは三日月の上辺から下辺までのサイズです。最初の行と最終の行が月画像よりも大きくなる場合には240の数字を大きくするのも一つの方法です。

全体幅調整の仕方

How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1300px に設定しています。1300 で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。

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

How to reverse the direction of rows

#main-container { で検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの中に flex-direction: row-reverse; という一行がありますのでこれを削除。

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

ナビゲーションについて

Important thing to be careful when adding links to navigation

ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に各1箇所、計2箇所ヒットします。
それぞれの

(max-width: 767px)

緑の部分 767 を 大きな数字に変更 してください。
この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。

Aboutは予備リンクです。
誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください。不要であれば削除。

該当部位検索

注)予備リンク

カスタマイズ

<li><a href="ここにリンクアドレス">テキスト</a>

デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。

ページ送りサムネイルについて

About thumbnails in pager

個別記事ページ送りのサムネイル画像を表示するにはブログ個人設定で OGP設定を有効化 してください。
メタタグの設定

ドミナントカラー

Dominant colors

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

rgb(245,245,245) 全体背景色
rgb(241,211,194) ページ送り, コメント送信ボタン など

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

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

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(4)

There are no comments yet.

がんちゃん

2019/10/04 (Fri) 21:50

サムネイルの表示不具合

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

Akira

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

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にするとトップページの表示が遅くなりました。現在はこのウィジェットを削除したので正常に表示されています。プラグインのせいという考えが及びませんでした。大変お騒がせしました。色々教えていただき助かりました。ありがとうございました。

Akira

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

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

こんばんは。

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

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

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