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

Genericテンプレート

Genericテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
Generic
じぇねりっく
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
全文
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.16 2024.2.28
  • リスト型ページネーションの複製を可能に
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.19
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.9
  • IE用対応終了
  • Font Awesomeの利用を停止
  • Twitter名称・ロゴ変更に対応
  • 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 に変更。

【セレクタ修正】
#prev-pager-image.prev-pager-image に、#next-pager-image.next-pager-image に変更。

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

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

最終更新 2020.1.5
  • 記事編集リンクURL記載ミスを修正
更新履歴 2019.12.16
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.10.29
  • コメント主のリンク表示用JS及びデザインの変更
  • 独自クラス.curlの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 5px 0 4px;
}
②について

#community" で検索するとhtml内に1箇所ありますので #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 {
  margin: 1.9em 0;
}

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

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

最終更新 2018.12.16
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事「記事編集リンク」をSNSアイコン並びからSNSアイコン上プロフィール画像に変更(閲覧者に気づかれにくいようカーソル非表示にしてあります)
  • サイドメニュー部プロフィール画像の幅制限解除(元画像依存, 最大値はサイドメニューの横幅と同等)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

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

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

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

更新履歴 2018.1.11

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

Genericメンテナンスのお知らせ

Genericメンテナンスのお知らせ

Genericテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

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

さぶい!!!
なんか急に寒くなりましたよね (´・ェ・`)

じぇねりっく
承認されました。ありがとうございます。
今回は超シンプルです。トリッキーなものは一切入れていません。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

ご質問の前に「テンプレあるある」

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

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

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

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

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

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

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

Common customization.

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

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

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

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

記事編集リンクについて

The position of edit link.

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

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

Cautions before asking for something.

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

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

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

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

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

-
2017/10/18 (Wed) 21:06

管理人のみ閲覧できます

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

Akira
2017/10/18 (Wed) 23:38

To Genericテンプレートの件 内緒さん

ほんまやぁーーー!
またしても意味ふめいなミスをしてしまいました(笑)
リンク先変更しました。ありがとうございます。
全然気づかなかったわ。いつものことだけど(笑)

今回固定ナビなんかも全部辞めました。
もうホントにシンプルなものにしてみました。
大きな声では言えませんが、レスポンシブ初心者の方のためというか、旧来のものと見た目が大きく変わらないものを、と思いまして。
ナビの折りたたみもやめようかなぁ、と思いまいしたが、「スマホはナビが折りたたまれて当たり前」を推していこうと思う(笑)

vanillaice (Akira)
Akira
2017/10/22 (Sun) 10:18

To OjinAgerさん(移動先)

https://vanillaice000.blog.fc2.com/blog-entry-600.html#comment4457

> 各記事に区切り(空白行)を入れたい〜

既にカスタマイズされていますのでその状態からのお話ですが、トップページの各記事を「分割する(間に全体背景が見える)」のではなく「仕切り線を入れる」という解釈でよろしいでしょうか。
.main-body
で検索して頂きますとCSSソース内に2箇所ヒットしますが最初のものが対象です。
その括りの
padding: 0 0 20px;
の直下に

border-bottom: 数値px solid 色コード;

を追加してください。
数値は線の太さです。直線で良ければsolidのままで。
ボーダースタイルについてもご自身の好みで変更してください。

例) 2px太さ、点線、黒
border-bottom: 2px dotted #000000;

-----------
> サイドメニューのプラグインごとにも区切りを入れたい〜

.side-menu
で検索。5箇所あるうち最初のものが対象です。
width: 100%;
の直下に先の内容(各記事間ボーダー)と同じ要領で同じ内容を追加してください。

よろしくお願いします。

------ 追記
今個別記事の方を拝見したら、個別記事の方は分割されているんですね。
.main-bodyはコメント投稿やトラックバックなども共通クラスですので、ここにボーダーを指定してしまうとトップページ以外・記事以外でも反映されてしまいます。
なので
<!-- トップページ・個別記事ここから -->
を目印に、直近にある
<!--permanent_area-->article<!--/permanent_area--> class="main-body"
の部分を

<!--permanent_area-->article<!--/permanent_area--> class="main-body<!--not_permanent_area--> toppage-border<!--/not_permanent_area-->"

に変更されまして、.main-bodyへのボーダーを指定を避け、

.toppage-border {
border-bottom: 数値px solid 色コード;
}


上記内容をCSSソース末尾に追加してください。
クラス名は変更して頂いて構いません。

OjinAger
2017/10/22 (Sun) 13:02

ご回答ありがとうございます。

早速、やってみました。背景の色の疑似色を使って枠線を入れてみました。

実は「分割する(間に全体背景が見える)」方式でやりたかったのですが、
その場合は、どのようにすればよいでしょうか。

Akira
2017/10/22 (Sun) 13:15

To OjinAgerさん

その場合には
.main-body
への
background-color: カラーコード;
追加で良いですよ。
デフォルトが
margin-bottom: 40px;
だったところをOjinAgerさんがカスタマイズとして
margi-bottom: 10px;
に変更されてますので数字を増やすことで後続記事との距離が取れます。
ここはご自身で見た目を確認しながら調整をお願いします。
「共通クラスである」というのを前提に行なってくださいね。
またはせっかくクラス名を追加しましたので、追加クラスの .toppage-border に
margin-bottom: 数値px;
でもOKです。その際にはボーダー指定は消してください。
後者を採用するとトップページの記事ならびのみ適用になります。
CSSはソースの中間に置くのではなく最終に。
よろしくお願いします。

OjinAger
2017/10/22 (Sun) 14:48

何度も申し訳ございません

「分割する(間に全体背景が見える)」方式で
背景に画像を使っているからか、うまくいきません。
「background-color: カラーコード;」に代替色を使えばうまくいくのですが。

Akira
2017/10/22 (Sun) 15:52

To OjinAgerさん

「代替色」が何を指すのかわかりませんが、原因はカスタマイズ時に
.fit-sidebar-fixed
にも背景色を指定しているからです。

.fit-sidebar-fixed {
margin-top: 0 !important;
margin-bottom: 0 !important;
position: fixed;
}

こちらがデフォルトですが、これはスクロールアンカー用のコンテナですので、デフォルト値を変更したり色をつけたりなどはしないようにしてください。
現在は

.fit-sidebar-fixed {
margin: auto;
position: fixed;
background-color: #FFF8DC;
padding: 0;
}

になってます。
ここは全てデフォルト値に戻してくださいね。
ソース内で !important の記述がある部位については基本的に「強制」を行なっていますので触らないようにしてください。
よろしくお願いします。

OjinAger
2017/10/24 (Tue) 02:12

ありがとうございました。

デフォルト値に戻したら出来ました。ありがとうございました。

コメントの書体を指定する「template_comment_js」部分が
スマホで確認すると、はみ出てしまうのですが、
なにか方策はありますでしょうか。

Akira
2017/10/24 (Tue) 08:59

To OjinAgerさん

背景の件は完了したということで、お疲れ様でした。

> 「template_comment_js」部分がスマホで確認すると、はみ出てしまう〜

これはカスタマイズでpaddingを設けたことが原因です。
コメントJSはjavascriptで出力されますので、サイズなど後付のCSS調整は無効です。
ですからコメントJS側の操作ではなくテンプレートで調整するしかありません。
コメントJSの横幅は267pxですが、現状では収まる範囲が230pxしかありません。そのため超過しています。
#main-containerへのpadding指定及び
.main-bodyへのpadding指定
の2箇所で267px確保できるよう調整をお願いします。

OjinAger
2017/10/29 (Sun) 13:00

色々ありがとうございました。

色々、試してみましたが、余白が調整できず、
320PX以下では、コメント書式は無くても良いかと、非表示にしてしまいました。

vanillaice (Akira)
Akira
2017/11/01 (Wed) 09:12

To OjinAgerさん(終了のご報告)

お返事大変遅くなりました (*_ _)

そうですね。スマホでコメントJSは使いづらい面もありますし、OjinAgerさんが納得できているのであればそれも一つの方法だと思います。
お疲れ様でした :)

OjinAger
2017/11/23 (Thu) 22:35

ページ送りの画像取得のスクリプトについて

個別記事のエリア(permanent_area)をIEのデバッガーで
チェックすると、途中で終了してしまいます。

</body>直前のページ送りの画像取得のスクリプトを削除すると
正常に動くので、その部分がどこかと干渉しているようなのですが
修正できますでしょうか。

Akira
2017/11/24 (Fri) 00:41

To OjinAgerさん

こんばんは。
OSとIEのバージョンを教えて頂けませんでしょうか。
よろしくお願いします。

OjinAger
2017/11/24 (Fri) 01:00

OSとIE

OSはwindows10 IEはバージョン11となります。
よろしくお願いいたします。

Akira
2017/11/24 (Fri) 03:00

To OjinAgerさん

ページ送りのスクリプト云々というよりもjQueryを外せば動きますよ。
IE11で開発者ツールがホワイトフリーズしたり落ちたり、というのはもう随分前から既知の問題としてMicrosoftもWindows7向けにパッチの提供もしていましたが、IEは既に開発の終了したブラウザですので直らないと思います。
周りの技術はどんどん進んでいき、IEはこれ以上の開発は無いわけですからどうしようもないですね。
デバッグについてはまともなブラウザで行うべきで、Windowsであれば最低でもEdgeを利用するのが良いと思います。

関連についてはweb上に対策などが出ていますのでお調べになっても良いのではないでしょうか。
ちなみに私の環境下のIE11もWindows10にアップグレードした時点で開発者ツールは死にました。
それ以来なんの対策も取っていません。

JS内容にエラーはありませんが(レガシーブラウザで解釈ができない場合は除く)、不信感がお有りならば該当ページ送りを削除されてはいかがでしょうか。
それもまた一つの方法です。
この件について私ができることはありません。
IE11の開発者ツールのために新しい技術を排除するのは理に適っていないと思うので。
ごめんなさいね。

あーたろう
2017/11/30 (Thu) 06:50

インデックスの番号について

はじめまして。
このデザインに一目惚れしてしまい、早速お借りしております。

まだブログ初心者なのですが、
【INDEX】のナンバリングをマニュアル修正することは可能でしょうか?

ブログを書く際に、
思いついたタイトルを書き溜めて保存しておき、都度最新情報をブログアップしているため、まれにインデックスのナンバリングが30/35/34/31のようにぐちゃぐちゃになってしまっています。

こちらのブログをいくつか拝見して勉強してみたのですが、やはり解決策が分からず、、ご教授頂けますと嬉しいです。

どうぞ宜しくお願い致します。

vanillaice (Akira)
Akira
2017/11/30 (Thu) 16:29

To あーたろうさん

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

全記事一覧の特徴は以下のリンク先記事でご確認くださいね。
よろしくお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-564.html

-------

既に振られた番号を変更するというのはエクスポート&インポートしない限りできませんので、出来ることはそれを除けば「今後の対策」だけです。
下書きはhtmlエディターやメモ帳などを用いてtxtファイルで保存しておくか、下書き用記事をひとつだけ残しておき、その一つを使いまわすか。
後者の場合下書きとして保存できるのは1件だけ、ということになりますが。
別に1件にこだわる必要もありませんが、下書き用が多ければその件数がそのまま欠番になりますので最小が良いですよね。
おすすめは前者です。
いきなりhtmlエディターで書くというのは難しいでしょうから、記事編集画面を利用して書き、編集し終わったら保存せずに全コピー → エディターへペースト → txtファイル保存 → 記事をUPする際にそこからコピペ
という段階を踏まれると良いと思います。
うっかり保存するとまた欠番になりますのでお気をつけください。

注意) 新投稿画面の内容をエディターにペーストするとhtml内容が全て取り除かれます。
新投稿画面で作成した場合には「HTML表示」に切り替え、その内容をコピー。UP時にも「HTML表示」の画面へペースト。

あーたろう
2017/12/01 (Fri) 00:14

To Akiraさん

とても迅速でご丁寧なご返信ありがとうございます!
リンク先のブログも読ませて頂き、連番の仕組みと意味がよく理解できました。勉強になります。

連番がいくつか狂っているのは、
気にせず諦めることにして、
今後綺麗な連番になるように教えて頂いた手順でやってみます。
ありがとうございました。

それにしても美しいテンプレートで、これから記事をアップするモチベーションまで上がりました。
これからも、こちらのブログにちょくちょくお邪魔して知識を増やしたいと思います。ありがとうございました。

vanillaice (Akira)
Akira
2017/12/01 (Fri) 14:29

To あーたろうさん

こんにちは。
ご期待に沿えずごめんなさいね。

はい。今後の作成の仕方、ということで多少の面倒はありますが頑張ってください :)

yoshi
2018/01/10 (Wed) 17:29

comment_nameについて

いつもありがとうございます。
従来、コメントの管理者ハンドルネームを区別するために管理画面「コメントの管理」→「名前の修飾」で太字にしていました。
するとハンドルネームがspan付きになってハンドル名yoshiの代わりに
<span class="fc2_owner_comment" style="font-weight:bold;">yoshi</span>
となり、コメントのハンドル名の表示が">yoshiとなるなど、表示が崩れてしまいます。
現在は、クラス名からcomment_nameを外し、REPLYの文字リンクのtitleを消して対応しています。

ハンドル名をクラス名に使うのは工夫だと思いますが、私のケースのようにハンドル名を装飾していた場合も影響が出ないよう考慮していただけたらな…というお願いです。

Akira
2018/01/10 (Wed) 18:22

To yoshiさん

こんばんは ( ゚Д゚)ノ

コメントの仕様はQ&Aに明記していますのでお読みください。

「ご質問の前に「テンプレあるある」」
https://vanillaice000.blog.fc2.com/blog-entry-220.html#object23

よろしくお願いします。

yoshi
2018/01/11 (Thu) 01:03

To Akiraさん

迅速な回答ありがとうございます。Q&Aはざっと目を通したつもりでしたが、該当することに気がつきませんでした。お手間をとらせてすみませんでした。記述に沿って対応しようと思います。ありがとうございました。

vanillaice (Akira)
Akira
2018/01/11 (Thu) 02:13

To yoshiさん

こちらこそご理解頂きありがとうございます :)
お手数おかけします。

素姓乱雑
2018/01/18 (Thu) 20:03

あらためてお願いします

Genericを使わせていただいています。
現在では本文と「続きを読む」の間にスポンサーサイトがあって
本文と「続き」が離れているので、「続き」があると認識されないので
困っています。できるだけ近づける方法はないでしょうか。
たとえば、本文の後に「続きを読む」が来て、その後に
スポンサーサイトが表示されるとか。よろしくご教示ください。
また、最新バージョンをアップしたところ、ドロップシャドウの右側が
反映されません。たとえば、http://usodamari.blog.fc2.com/blog-entry-158.html
ですが、右シャドウが出てこないのです。

vanillaice (Akira)
Akira
2018/01/18 (Thu) 20:14

To 素姓乱雑さん

ご協力ありがとうございます。

> 「続き」があると認識されないので困っています。できるだけ近づける方法はないでしょうか。〜

「続きを読む」の先行及び後続要素との距離設定は
.read-more {
で検索されますとCSS内に1箇所ありますので、その中の
margin: 20px 0;
赤字の部分で調整してください。

> たとえば、本文の後に「続きを読む」が来て、その後にスポンサーサイトが表示されるとか。〜

表示の順序はFC2ブログの規定内容・仕様ですので操作不可能です。
スポンサーサイトを非表示にされてはいかがでしょうか。
設定画面
https://admin.blog.fc2.com/control.php?mode=setting&process=2#ads
非表示設定をされますとCDNの利用ができなくなりますのでよくよくお考えの上でどうぞ。

> ドロップシャドウの右側が反映されません。〜

#primary {
で検索すると1箇所出てきます。この中の
overflow: hidden;
削除してください。
この場合には記事内で利用するhtml内容のwidth指定を正確におこなってください。
でないと記事の幅が拡がってしまいます。
(既存の内容を拝見したところちゃんと対策なさっているので問題はなさそうです。)

またはCSSソース末尾に以下の内容を追加

img {
max-width: calc(100% - シャドウの幅px);
}


このいずれかで対処可能です。後者をおすすめします。

よろしくお願いします。

---------- ごめんなさい追記です。

shadow-attachmentクラスをお使い頂いてるんですね。
でしたら
.shadow-attachment
で検索されまして、そちらに
max-width: calc(100% - 8px);
を追加、という形の方がベターですね。
最初から私がそう設定しておけば良かったのですが、考えたらずですみません(公式は上書きしておきます)
お手数おかけします。よろしくお願いします。

素姓乱雑
2018/01/18 (Thu) 20:30

ありがとうございました。

位置変更できない訳はFc2仕様ということで理解しました。
また、marginを変更してもそんなに変わりませんので、
いい方法がないかを模索して見ます。
overflow: hidden;削除ですが画面が乱れると
怖いので、画像を小さくして対処してみたいと思います。
お忙しい中ありがとうございました。

vanillaice (Akira)
Akira
2018/01/18 (Thu) 20:32

To 素姓乱雑さん

たぶんコメントが行き違いになっていると思いますので、追記の部分に気づいて頂けると良いのですが ^^;

あとは広告を非表示にされない場合は広告側に上下marginが付いていますので、CSS末尾に
#fc2_text_ad{
で検索されまして(横にズラーっと書いてあり見辛いですが)
その中の
margin:20px 0!important;
こちらも調整してください。これは「続きを読む」の上の距離になります。

素姓乱雑
2018/01/18 (Thu) 20:34

再びお礼です。

シャドーの件追加されていたのですね。
ありがとうございました。

Akira
2018/01/18 (Thu) 20:47

To 素姓乱雑さん

お手数おかけします。よろしくお願いします。

素姓乱雑
2018/01/21 (Sun) 07:38

その後の結果です

ご指導いただいたように、両marginを少なくし、本文が縦書きなものですから一行の文字数を少なくして、画面上に本文と「続きを読む」が収まるように調整、「続き」では文字数を戻すことにしました。
シャドーの件、素早い対応ありがとうございました。

vanillaice (Akira)
Akira
2018/01/21 (Sun) 15:42

To 素姓乱雑さん

こんにちは。
理想に近づけたのであれば良かったです :)

縦書きを画像ではなくちゃんとテキストで行っている点が素晴らしいと思います。
とても読みやすいです。
お疲れ様でした :)

-
2018/03/13 (Tue) 04:02

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/13 (Tue) 13:53

To Genericプロフアイコンの件 内緒さん

お疲れ様です (o'ω')ノ

.name管理人ハンドルネーム:before

太字を入れ替えます。
例えば私の場合は

.name管理人Akira:before
ではなく
.nameAkira:before
です。「管理人」の漢字3文字が不要という意味です。
よろしくお願いします。

-------- 別件
サイドメニューの「最新記事」がスクリプトエラーです。
日付のスクリプト構文に問題があるもよう。たぶんnewマークかな (´・ω・`)

-
2018/03/13 (Tue) 13:59

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/13 (Tue) 14:01

To Genericプロフアイコンの件 内緒さん②

入れ違いで追記しちゃった(笑)
気づいてもらえると良いのですが ^^;

-
2018/03/13 (Tue) 17:42

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/13 (Tue) 22:54

To Genericプロフアイコンの件 内緒さん(終了のご報告)

気づいて頂けて良かったです(笑)
お疲れ様でした :)

-
2018/03/15 (Thu) 00:13

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/15 (Thu) 00:20

To Generic画像リストの件 内緒さん

こんばんは (o'ω')ノ

不具合ではなく書き漏らしですね。
data-sizes="auto" を利用する時は必ずその対象となるimg要素にfont-family指定が要ります。

.box1 img,
.box2 img,
.box3 img,
.box4 img {
既存内容省略;
font-family: 'object-fit: cover; object-position: center center;';
}

これは以前にお伝えした通りです。
あとまたflexの指定が違っているようです。以前再DLして頂きましたよね。
古いファイルの方からコピペされてないでしょうか。
-ms-flex(ie用フォールバック)の値は
-ms-flex: 1 1 auto;
でないといけませんね。内緒さんの今の指定は
-ms-flex: 1 10;
になってます。
今一度ご確認ください。
よろしくお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-488.html#comment5175

-
2018/03/15 (Thu) 01:06

管理人のみ閲覧できます

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

-
2018/03/15 (Thu) 01:26

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/15 (Thu) 01:58

To Genericヘッダー遅延の件 内緒さん

ヘッダーはたぶんやってもあんまり意味ないですね。
ヘッダーですよね?フッターでなく(一応確認)
ヘッダーは大抵の場合ファーストビューに入ってます。遅延読み込みはファーストビュー「以外」に効果を発揮するものなので効能がないというかなんというか。

鍵コメントの件はお任せします。ご自分がやりやすいようにしてくださいね。
FC2の鍵コメントはホントに使いにくいですよね。
自分で書いたものが二度と見られないとか… どうなん ( ̄∀ ̄;)

* ヘッダー画像で対策をするならばブレイクポイントの設定で例えば

@media screen and (max-width: 414px) {
#header-banner {
background-image: url(横800程度の画像アドレス);
}

こうしてパソコン用よりも小さい画像に差し替える方法がありますよ。
htmlのimg要素と違いCSSのbackground-imageは画面サイズの指定に沿っていないものは読み込みませんので、パソコン用画像アドレスが記載されていても、スマホ画面414px以内では小さい方の通信リクエストだけになります。
これも一つの方法かと思います。
またこの件についても記事を書く予定にはしています。
っていっても次から次へと自分のチョンボやらOSのバグやら出てきてなかなか書けない (∵`)

-
2018/07/12 (Thu) 21:07

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/07/12 (Thu) 22:20

To SSL化の件 内緒さん

こんばんは (o'ω')ノ

> テンプレート内自体に”http”の記述が見られるからか、
または他に原因があるのか分かりません。
テンプレートの”http”を勝手に変更するわけにもいかないし
悩んでいます〜

テンプレートに混在コンテンツの原因はありません。
テンプレート内に見られる http: は
1. og: http://ogp.me/ns# --- OGPに関する記述。混在コンテンツ対象外(httpsに書き換え可ですが正式URLはhttpです)
2. <a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);" 〜省略
--- トラックバック先のリンクを開くためのJS。混在コンテンツ対象外(リンクなので対象外。httpsへの書き換え不可(SSLしていない相手先が開けなくなります))
3. http://schema.org --- 構造化マークアップ。混在コンテンツ対象外(OGPと同様httpが正規識別です)

-----
内緒さんのページ内で指摘されている混在コンテンツ対象はサイドメニュー部「訪問感謝」の2種・計5つの画像です。
アップロードし直すか、あるいは極小とはいえ画像ですから通信リクエストが発生する点などを踏まえFont Awesomeなどのwebアイコンに変更するか、dataURIに書き換えるなどされると良いと思います。
よろしくお願いします。

----- 余談
head内にある追加CSSファイルですが、内容量もさほど多くないですし最優先で読ませる必要のない内容です(が実際には優先順位がhighestになっています)
外部ファイル化せずデフォルトCSSに含めることをおすすめします。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-738.html

あと、クラス属性を追加する際には前の属性との間に半角スペースを入れることを忘れないようにしてくださいね。
例)
×
<img src="アドレス"class="shadow-attachment">

<img src="アドレス" class="shadow-attachment">

-
2018/07/13 (Fri) 18:55

管理人のみ閲覧できます

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

-
2018/07/13 (Fri) 19:15

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/07/13 (Fri) 22:01

To SSL化の件 内緒さん(完了のご報告)

こんばんは。
「保護された通信」の表示を確認できました。
お疲れ様でした :)

-
2018/08/09 (Thu) 17:36

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/10 (Fri) 01:37

To テンプレートの件 内緒さん

こんばんは (●'0'●)/

このテンプレートなんですが、自分の好き勝手に制作した専用という感じなんですね。
なので共有に出せるものではないなぁ、と思っています。
カスタマイズなどされます際は非常に苦労を強いられると思う ^^;

なので「カスタマイズ完全自己責任」という形で良いのであれば、共有には出さずにブログ内限定配布なら可能です。
いずれにしろ取り除かなければいけない独自性など修正しまして、8月内を目処ということでよろしければ。
今しばらくお待ち下さいね。よろしくお願いします。

-
2018/08/10 (Fri) 23:42

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/12 (Sun) 18:39

To テンプレートの件 内緒さん②

こんばんは。
今FC2ブログ変数に不具合があるようなのでちょっと遅くなるかもです。
運営のお仕事次第ということで。すみません (´・ω・`)

-
2018/08/13 (Mon) 04:56

管理人のみ閲覧できます

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

-
2020/01/05 (Sun) 10:46

管理人のみ閲覧できます

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

-
2020/01/05 (Sun) 10:51

管理人のみ閲覧できます

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

-
2020/01/05 (Sun) 11:36

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/01/05 (Sun) 21:57

To Generic不具合の件 内緒さん

こんばんは。

わー。ホントですね。すぐに修正しますね。お知らせありがとうございます。助かります :)

-
2020/02/26 (Wed) 23:16

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/02/29 (Sat) 03:52

To Generic広告の件 内緒さん

こんばんは。お返事遅くなりました (*_ _)

> 記事内に広告を入れるとブラウザ横幅の可変で広告が表示/非表示(デベロッパーツールで横幅980px辺りが境目?)になる〜

まず対象の広告は具体的にどれのことなんでしょうか。サイドメニュー部に任意掲載しているアフィリエイト(「忍者ADMAX」「スポンサーリンク」)のことではなく記事内に掲載しているもの(忍者ADMAX)のことで合ってますでしょうか。

> 横幅が狭いと広告が表示/横幅が広いと広告が非表示になります〜

以前ご質問頂いたかどうか忘れてしまったんですが、以前のGenericバージョンでは
<!-- 注)スクロールアンカー不要の方ここから削除 -->
から
<!-- 注)スクロールアンカー不要の方ここまで削除 -->
までのJS内容を自主的に削除して頂いていると思います。今回も同じように削除してもらうと表示されるようになります。
chromium系ブラウザだけ、というのはtransformに係るchromiumの独自グリッチです。

-----
> 「;」が抜けているのはミスでしょうか。〜

プロパティが単体のとき、最終プロパティの場合はセミコロン省略可能です。気になるようでしたら追加していただいて構いません(変化はありません)

×
.xxx {
display: block
color: white
}


.xxx {
color: white
}


.xxx {
display: block;
color: white
}

よろしくお願いします。

-----
Dark-Divineの件お知らせありがとうございます。修正しました :)

-
2020/03/11 (Wed) 23:18

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/03/12 (Thu) 16:34

To Generic広告の件 内緒さん

こんにちは。
はい。スクロールアンカーなんですが、特定条件下でこういったことが起こるんですね。そして特定条件というのは「アフィリエイト広告」が対象になることが多いんです(scriptでiframeを持ってくる系)
あと主要ASPだとスクロールアンカー部への広告掲載を禁止していることもありますので(Google Adsenseなどが該当します)、広告掲載を行っている方へはスクロールアンカーの削除をおすすめしています。

-----
> 現在最大810pxになっている記事幅を最大640pxに〜

1300px
で検索するとスタイルシート内に3箇所ありますので、3箇所全て
1130px
に変更します。

> 記事幅が480pxを下回るとサイドメニューを下に移動〜

(max-width: 960px)
で検索するとスタイルシート内に4箇所あります。4箇所全て赤字部位960を
969
に変更。

ただしこの変更を適用するとシングルカラムに変化した際の記事幅が810pxになります。ご希望の最大値は640pxだろうと思いますので、調整するならば
max-width: 930px;
で検索し、スタイルシート内に2箇所ある赤字部位を
760
に変更します。

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

-
2020/03/14 (Sat) 19:14

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/03/14 (Sat) 20:48

To Genericナビゲーション横幅の件 内緒さん

こんばんは。
ナビゲーションの横幅を失念していました。二度手間になり申し訳ないです。

スタイルシート末尾に

@media screen and (max-width: 969px) {
#navi-sizing {
max-width: 760px
}
}

を追加すると整うはずなのでお試しください。よろしくおねがいします。

-
2020/03/20 (Fri) 16:57

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/03/20 (Fri) 17:30

To Genericの件 内緒さん(完了のご報告)

こんにちは。
そうなんですよー!実は私の方こそ引用の旨のお礼を言いたかったんですが、内緒投稿なのでそれが難しくて、今回内緒さんの方から話題に出して頂いてよかったです(笑)
こちらこそ良い見本として勝手に利用させて頂き感謝です。

また何かありましたらお気軽にどうぞ。お疲れ様でした :)

-
2021/08/09 (Mon) 07:07

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/08/09 (Mon) 21:46

To Genericテンプレートの件 内緒さん

こんばんは。

本件については以下の記事を御覧ください。
参考記事: FC2カウンターが表示されなくなる、アクセス解析の画像が出ない、などの不具合が生じた方へ
https://vanillaice000.blog.fc2.com/blog-entry-1015.html

よろしくお願いします :)

-
2021/08/10 (Tue) 18:48

管理人のみ閲覧できます

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

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