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

Pinboardテンプレート

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

名称
Pinboard
ぴんぼぉど
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Alex Brush
Source Code Pro
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.7
  • 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 に変更。

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

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

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

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点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_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 .4em;
}
②について

#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行上にある </article> の上と下に一つづつ </div> がありますのでこの2つを 削除

</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 {
  margin: 20px 0;
}

#inner-contents p:not(.relate-title) {
  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アイコン上「Posted by ハンドルネーム」に変更(閲覧者に気づかれにくいようカーソル非表示にしてあります)
  • サイドメニュー部プロフィール画像の幅制限解除(元画像依存, 最大値はサイドメニューの横幅と同等)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

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

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

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

更新履歴 2018.1.16

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

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

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

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

長男がアメリカに帰る前に喧嘩してしまったあきらでございます (´・ェ・`)
あのやろう!!!
ごめんなさい。取り乱しました (*ノω・*)
や、でもうち基本仲良し親子なんで(笑)

ぴんぼーど
承認されました。ありがとうございます。

サンプル

Samples

TOP 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/09/14 (Thu) 00:33

お借りします

承認されたんですね(^^)
お借りします!

Akiraさん……
なんか、きろろの目がおかしいんです。
レンズをかえてから、目がかゆくてかゆくて(T_T)
○○シティ併設の眼下で見てもらったら、
「アレルギーじゃない?」って言われて、アルジオンを処方されたんですよ
先生は「1dayのほうがいいよ」と言ってくれたんですが、
ソフトはすぐに乾燥して、焦点が合わなくなるんです。

で、今日も一日ハードでお仕事をしていたんですが、
やはり目がかゆくてかゆくて。
以前使っていたハードに変えるとなると、また出費が(T_T)
Macが遠くなっていきますよ。

きろろ
2017/09/14 (Thu) 00:37

およ?

今回のテンプレートは画像を載せていない記事は
Noimageと表示されるんですね。
やばし、ここのところ画像を載せていないw
対処方法とかありましたら、ご教授お願いいたします。

べえ
2017/09/14 (Thu) 11:40

No title

こんにちは。いつもお世話になっています。

コピペして更新日をVelonica に組み込んでみたのですが、
この関数は2014年7月22日ごろより以前は対応していないようです。
それ以前については「-0001年11月30日」が取得されます。

参考URL
http://beebaku.blog88.fc2.com/blog-date-201407.html

Akira
2017/09/15 (Fri) 08:02

To べえさん

わー。そうなんですか ( ̄∀ ̄;)
私は過去記事が2年前しか無いので確認ができないのですが。
過去日時で投稿してみたところ、更新日付にしっかり今日の日付が出てました(笑)
当たり前っちゃ当たり前なんですけどね。
せめてFC2ブログのサービス開始日(2004年?)までサポートして欲しいですよねぇ (´・ω・`)
それはさておき、情報をありがとうございます。

Akira
2017/09/15 (Fri) 10:43

To きろろさん

アレルギー、大変ですね。
私もしょっちゅうアレルギー性結膜炎になりますです (´・ω・`)

--------

今回のトップページは画像が主体ですので、サムネイル必須のレイアウトと言って良いかと思います。
全文タイプをご利用の方はあまりサムネイルを気にかけないでしょうから、切り替えるとき悩みますよね(笑)

対策としては各ページに画像を添付するか、アイキャッチ画像指定を行うかしかないです (´・ω・`)

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-567.html

きろろ
2017/09/16 (Sat) 00:17

To Akiraさん

こんばんは、(^^)
お返事ありがとうございました。
アイキャッチ設定ですね。了解いたしました。

アレルギー性結膜炎……
それが酷い状態で、上の瞼を裏返すと……
なんとブツブツができているんですよ。
これが痒い、もうレンズが入っている状態で思わず目をこすりそうになるんですよ。
ぶつぶつが治まるまで、レンズは入れてはいけないと言われたので、
悲しいかな今は魚眼のような眼鏡をかけております(T_T)

きろろ
2017/09/16 (Sat) 00:58

画像がですね……

こんばんは、きろろです。

あのですね、Pinboard。
画像がですね、全面表示されてしまうんですよ。
colorboxで表示されないんです。
見ていただけますでしょうか?

よろしくお願いします<(_ _)>

vanillaice (Akira)
Akira
2017/09/16 (Sat) 12:33

To きろろさん

きろろさん、こんにちは ( ゚Д゚)ノ

ちょっと時間が無いので簡単な説明と、以降の返信遅くなるかと思います。
colorboxのトリガー(aタグに付けた起動用クラス名)はcpModalで合ってますでしょうか。
<!-- 注)ページ遷移時フェイドエフェクト不要の方ここから削除 2/3 -->
を目印に、以下の通り編集してください。

$('a:not([href^="#"]):not([target]):not(.cpModal)')

赤字が追加部分です。
あと、colorbox用CSSのURLが消失しているようです(404 not found)
こちらも併せてご確認お願いします。

きろろ
2017/09/16 (Sat) 17:08

To Akiraさん

こんにちは、きろろです。

>colorboxのトリガー(aタグに付けた起動用クラス名)はcpModalで合ってますでしょうか。
あってます。以前からずっと使い回してきたものですからw

:not(.cpModal)')を追加したら、表示されました。ありがとうございます<(_ _)>

ところで……
>あと、colorbox用CSSのURLが消失しているようです(404 not found)
>こちらも併せてご確認お願いします。

はい、確認いたしました。
確かに404になっていました!
でも、Akiraさんからお借りしているテンプレートすべてを調べてみたのですが、
すべて404になっているんですよぉe-350
だけど普通に動作しています?
なんででしょうか?

ファイルアップを確認したところ、ちゃんとファイルはありました。
謎です……

きろろ
2017/09/16 (Sat) 17:28

連投ですみません

静止画像は普通にどうさしているのですが、
YouTubeがだめですね。全画面表示になっています。
いつもは
<a class='youtube' href="http://www.youtube.com/embed/「YOUTUBEの動画ID」rel=0&wmode=transparent"><img src="「サムネイル画像」" width="「幅」" height="「高さ」" /></a>
で書いております。
いちおう、参考に張っておきますね
http://riokusunoki.jp/blog-entry-3.html

ほかのテンプレートで動作の確認をしたところ、Akiraさんのテンプレートはすべて普通にYouTubeは動作しているんですが、
Pinboardだけが動作していません。
あ、無理に動作しなくてもいいですから。
一応お知らせまでにw

きろろのスクリプト自体がおかしいんだと思いますので(^0^;)

Akira
2017/09/16 (Sat) 19:05

To きろろさん

記事に追記しておいたのでご覧くださいね。
CSSファイルについてはまた後程お返事します。
よろしくお願いします。

きろろ
2017/09/17 (Sun) 01:16

To Akiraさん

こんばんは。
早速、記事の追加ありがとうございます。
追記どおりに$('a:not([href^="#"]):not([target]):not(.expand)に書き直してから
記事を<a href="画像アドレス" class="expand"><img src="画像アドレス" alt=""></a>で表示しようとしたんですが、ポップアップされません。
Akiraさんの言わんとしていることはよくわかるのですが、
うーーん、どうにもきろろにはお手上げの状態です。
なんせずっと、テンプレートを変えるたびにコピペしてきただけなので。
お恥ずかしい限りです。
YouTubeも
$('a:not([href^="#"]):not([target]):not(.expand):not(.youtbe)も
同じ場所に書き直そうと思ったのですが、
スプリクトの終わり? 塊がわからなくて編集できませんでした。
うちの場合は$('a:not([href^="#"]):not([target]):not(.cpModal):not(.youtbe)?
うん、多分そうなんだろうと思いながら、ならどこにこれを入れればよいの?
もはや、頭の中は混乱するばかりw

わざわざ追記文まで書いていただいて、ほんとうにすみませんでした。

Akira
2017/09/17 (Sun) 09:04

To きろろさん

おはようございますー (o'ω')ノ

自分が利用しているクラス名を入れてください。
記事内のクラス名は説明のため便宜上付けただけです。
きろろさんのトリガークラスは画像については cpModal なわけですから、それを入れないと。
同じようにツベやiframe等も全てクラス名を確認し、それを除外指定してください。
追記内容を一部修正しましたので再度ご確認お願いします。
対象箇所の範囲も少し拡げましたので、元の状態をしっかり把握して修正を行ってください。

CSSファイルの方は今は読みこみができているようです。

きろろ
2017/09/18 (Mon) 00:57

To Akiraさん

うーーん、今回は無理みたいです;w;

ちょっとひらめいたのですが、やはり違っていたw
<!-- 注)ページ遷移時フェイドエフェクト不要の方ここから削除 2/3 -->
<script>$(function(){$('a:not([href^="#"]):not([target]):not(.cpModal):not(.youtbe)').on('click',function(e)~~
と、繋げてみたのですがAkiraさんのいう意味と違っていたようですね。

>同じようにツベやiframe等も全てクラス名を確認し、それを除外指定してください。
うん? これは記事に書くスクリプトのことでしょうか?
htmlの中をなめるように見たのですが……
なにか大きな勘違いをしているような気がして。

検索でiframeを入力すると、
きろろが組み込んだスクリプトと、
テンプレートのCSSにあるiframeが出てくるんですよねぇ。

なのでHTMLのスクリプトのほうをいじってみたんですが、お手上げですw
悔しいな、非常に悔しい。
なんか喉元で出てきそうで、言葉が出てこないようなそんなもどかしさですw
もう少し粘ってみますw

あ、それからブログ内限定のテンプレートをお借りしました<(_ _)>
これで今のところ、Akiraさんのテンプレートはお借りしているのかしらw
以上、ご報告でした<(_ _)>

Akira
2017/09/18 (Mon) 01:45

To きろろさん

これより2日ほどパソコンを開ける環境下に居りませんので、ColorboxのJS内容についてはきろろさんご自身で確認をお願いします。

で、きろろさんのコメントを拝見しますと、
.youtube
ではなく
.youtbe
になってます。
私が記事中で u を欠落させた誤字と同じなんですよね。
ということは、きろろさんは私の記事からコピペをしているということになります。
コピペでは動作しませんよ。
ご自分が使っているクラス名
を入れることが絶対条件なのですから。
私はきろろさんがyoutubeのポップアップに利用しているクラス名が何かは知りません。
ですから「自分で確認してください」とお願いしました。

ちょっと1から細かく説明しますね。

●Colorboxというのは画像だけでなく、動画やiframe要素などもポップアップできますよね。
そのポップアップのためのJSというのはきろろさんが書いているはずです。
どこかのサイトからのコピペだとしても、それはきろろさんが決めたコード内容なんです。
そのコードの中には画像用のクラス名や動画用のクラス名を何にするかが決めてあるはずです。
その内容は私を含む他の人間にはわかりません。
いや、わかるけども、今私はパソコンを開けませんので調べられません(笑)
で、自分の書いたコード内容というのは例えコピペだとしても自分で責任を持たないとダメですよ。
クラス名やアイディー名というのはもともと個人が好きに決めるものなので、きろろさん自身がちゃんとそれを把握しておかなければ。

●iframeの意味
アイフレーム(インラインフレーム)というのは、他のサイトの内容の一部をそっくりそのまま自分のページに表示させるためのhtmlタグです。
よく使われるのは動画の埋め込みや、商品のリストなど。
ツベを掲載するにはiframeだけでなくembedというタグを使う方法もあります。
Colorboxでは、多種多様なiframe要素とyoutubeとを分けています。
youtubeは利用頻度が高いので、わざと分けているわけです。
youtube以外のiframeはiframe用のクラス名を設けているはずです。
ツベ以外でiframeを使うことが有るのか無いのかはきろろさんにしかわかりません。
使っていないのならば定義する必要はありません。

● >記事に書くスクリプトのことでしょうか〜

Colorboxを使うときに記事内にスクリプトを書くことは無いと思いますよ。
スクリプトというのはJS(Javascript)のことです。
書き出しは必ず
<script>
です。
記事内に書かないですよね?

● トリガーの意味
画像をリンク付きで掲載するには

<a href="画像アドレス"><img src="画像アドレス"></a>

こうですよね。
でもこれだけではColorboxは絶対に起動しません。

<a href="画像アドレス" class="xxx"><img src="画像アドレス"></a>

こうしてクラス名を書いているはずです。
上記はスクリプトではありません。htmlです。
このクラス名が「トリガー」です。
ツベのポップアップでも必ず専用のクラス名を書いているはずですので、それを除外設定にしてください、という意味です。
そしてそのトリガーとなるクラス名はきろろさんがご自身でしっかり把握をしてください。

● > HTMLのスクリプトのほうをいじってみた〜

今回ColorboxのJSについては一切修正はしません。
修正するのはテンプレートに入っているページ遷移エフェクト用のJSのみです。

ともかくきろろさんがすべきことは、
「ポップアップのために記事内でaタグ内にくっつけているクラス名がなんなのか」をちゃんと調べることです。
普段からColorboxをお使いであれば、画像やツベのhtmlをどう書いているかは自分が一番よく知っているはず。
それを除外指定するという作業ですよ。
くれぐれも今回の作業はこのページの記事中にあるサンプルコードのコピペではできません

よろしくお願いします。
頑張って(笑)

きろろ
2017/09/19 (Tue) 00:57

To Akiraさん

二日間、お留守だそうで。
ご報告までに

できましたe-349

http://riokusunoki.jp/blog-entry-3.html

私、日本語の読解力にかけているのかしら、もしかしてe-350

うちのclass名は静止画像がcpModalで
YouTubeはそのまんま.youtube

動作しなかったのは……
はい、ごめんなさい。コピペしたせいです。
Akiraさんがuの字を欠落させているとは思いもせず……
だって、絶対にAkiraさんがまちがえるはずがないもの……、と思い込んでおりました<(_ _)>

これが正解
$('a:not([href^="#"]):not([target]):not(.cpModal):not(.youtube)')
アホだな、私は(T_T)
ちゃんとnotって書いてあるじゃないですか……
どこにYouTubeを入れ込むのか、必死に考えていましたよ(爆)

あー、これで落ち着いて眠れる。はぁ……
しかし、すごいな。
Akiraさんの頭の中を覗いてみたくなりましたよ(^^)

vanillaice (Akira)
Akira
2017/09/22 (Fri) 13:46

To きろろさん

お返事遅くなりましたー!

本来なら「これこれこうして書いてください。」とするところですが、なにせ忙しくー ( ̄∀ ̄;)
お手数おかけしました。
完了したということなので安心しました :)

あトん
2017/10/01 (Sun) 02:26

スマホでの関連記事横スクロールについて

Akira様

はじめまして、"あトん"と申します。

ステキなテンプレートの製作、いつもご苦労様です。

半年ぶりにFC2に里帰りし、Akira様のテンプレートで内装工事(カスタマイズ)を行ってます。

1つどうすれば良いのか悩んでいる表示部分があり、ご相談のご連絡です。

スマホ(iPhone)で表示すると関連記事が複数あると、横スクロールになります。

縦に関連記事を全表示したいのですが方法が分からなく、ヒントを頂けないでしょうか。

お暇な時で良いので、ご返事頂けると嬉しいです。

vanillaice (Akira)
Akira
2017/10/01 (Sun) 12:51

To あトんさん

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

> 縦に関連記事を全表示したい〜

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul li

で検索して頂くとCSSソース内に3箇所あります。
最初のものを目印にしてください。
文字で書くと却ってわかりにくいのでスクショでご確認頂き、該当箇所を削除してください。

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/capturedeleteo98re323th.jpg

よろしくお願いします。

あトん
2017/10/01 (Sun) 14:06

ありがとうございます!

Akira様、休日にも関わらずフォローありがとうございます。

お手間を取って頂きスミマセン。

教えて頂いた部分を削除すると、横スクロールを外すことができました。v-424

修正後、関連記事が二列でテキスト領域が狭かったので、
width:100%;に変更し、スッキリ読みやすくなりました。v-410

ところで、トップページがカテゴリ別の入り口に変わりましたね。
このような表示は見たことがなかったので、勉強になります。

これからも宜しくお願い致します。

vanillaice (Akira)
Akira
2017/10/01 (Sun) 16:44

To あトんさん

お手数おかけしました。
カテゴリ入り口のテンプレート、みなさんが戸惑わなければ良いのですが ^^;

こちらこそよろしくお願いします :)

あトん
2017/10/01 (Sun) 20:59

入口について

Akiraさん、新しいテンプレート斬新で素晴らしいです!

もし、要望を1つ言っていいなら、右上のBOLG更新順の表示をもっと目立つようにし、
パララックススライダー(新着記事)が左上に表示されると
Goodかなと思いました。

自分でテンプレを作るスキルがないのに、勝手なこと言ってしまいましたが、
Akiraさんのデザインセンスの良さには、毎回脱帽してます。

一ファンとして応援してます。

vanillaice (Akira)
Akira
2017/10/01 (Sun) 21:29

To あトんさん

こんばんは。
アドバイス感謝します。いつでも歓迎です :)

全体レイアウトを見たかったので先んじて変更しましたが、スライダー部位は新着記事を予定していました。
パララックスではありませんが。
今ちょうど修正し終わってあトんさんのコメントを拝見しました(笑)

あトん
2017/10/01 (Sun) 21:48

To:Akiraさん

Akiraさん、わざわざのご返事ありがとうございます。

新着記事のプレビュー表示、Goodです。v-360v-360v-360

1つ言い忘れたのでですが、AboutMeのプップアップも素晴らしいです。v-218

はてなブログでは、Proでないと固定ページが使えないのですが、
Akiraさんのテンプレの仕掛けの方がセンスがあって、こちらの方が良いです。

だいぶ酔いv-275がまわって来たので、この辺で失礼します。

それでは。

vanillaice (Akira)
Akira
2017/10/01 (Sun) 22:53

To あトんさん

はてなさんはproで固定ページが作れるようになったそうですね。
少し前にオフィシャル(開発ブログ)で拝見しました。
FC2ブログは今のところ無いんですよね。
ですからレイヤーを駆使して賄うしか ^^;

はい。ゆっくりおやすみください。
またアドバイス頂ければ幸いです :)

Akira
2017/10/08 (Sun) 15:21

To あやめさん(移動先)

https://vanillaice000.blog.fc2.com/blog-entry-443.html#comment4307

> トップページにサムネイル画像が表示されません〜

原因は「文字デパ」のスクリプト(JS)です。
* JS = Javascript(ジャバスクリプト)

トップページはローディングが遅くならないよう、画像にJSの「lazyload」という遅延読み込みを採用していますが、その動作を文字デパのJSが阻害しています。
ページのローディングが非常に遅いのも文字デパが原因です。
そして文字デパはSSL化対応になっていませんので、仮に今後あやめさんがブログをSSL化した際には利用できなくなります(混在コンテンツ)

対処
① レイジーロードを辞める
② 文字デパを辞める

このいずれかです。
SSL化の予定が無い、ということならば文字デパ採用でも良いと思います。
レイジーロードを辞める場合にはhtml内容の修正が必要です。
そしてローディングがさらに遅くなるという点を事前にご理解くださいね。
①と②どちらの方法を取られるかをお伝えください。
お返事の如何によって方法をお伝えします。
よろしくお願いします。

あやめ
2017/10/08 (Sun) 21:52

To Akiraさん

お返事ありがとうございます。

②の文字デパを辞めようと思います;

お忙しい中申し訳ありません、宜しくお願いします…!

あやめ
2017/10/08 (Sun) 22:07

To Akiraさん

連投ごめんなさい。
文字デパのホームページへ行って、文字デパを今のブログで使わないように設定したら
表示されるようになりました…!!;w; わぁい…!!

ご親切に沢山教えてくださって、ありがとうございました! 大事に使わせて頂きたいと思います。

vanillaice (Akira)
Akira
2017/10/08 (Sun) 23:32

To あやめさん(完了のご報告)

自己解決されたようでお手数おかけしました。

日本語フォントというのはとっても重たいんですね (´・ω・`)
JSで読み込む場合には欧文フォントの何倍もの負荷がかかります。
部分的に使用する程度なら良いと思いますが、全文適用だとたぶん閲覧者はとても読み辛い ^^;

好みのフォントを利用できないのは残念で、諦めて頂いた格好になることをお詫びしますね。
作業お疲れ様でした :)

成太郎
2017/10/21 (Sat) 10:28

INDEX要約文の文字数について

初めて、連絡させていただきます。
FCを通して本テンプレートを見つけ、「イケてるテンプレート」と直感し、利用させていただいています。
ありがとうございます。
ブログ初心者ですが、標記についてご教示ください。
本テンプレートにおける「INDEX」において、投稿記事の要約文が各記事に17文字分しか表示されません。
1記事に対し、100文字から200文字程度を表示させることは可能でしょうか。
FC2にて独自ドメインを取得し、gooブログから引っ越し中です。
ちなみに、1記事毎にカット&ペーストを繰り返して引っ越し作業しています。
*FC側
http://blog.nextplain.net/archives.html

宜しく、お願いいたします。

vanillaice (Akira)
Akira
2017/10/21 (Sat) 22:15

To 成太郎さん

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

> 「INDEX」において〜1記事に対し、100文字から200文字程度を表示させる〜

残念ですがFC2ブログの全記事リストに於いてはできないんです。
本文はFC2ブログ独自変数を用いて出力しますので、文字数の多いものを制御することはできてもその逆は不可なんですー (´・ω・`)
お力になれず申し訳ない (*_ _)

成太郎
2017/10/25 (Wed) 00:43

承知しました。

お手数おかけしました。
残念ですが、承知しました。
ありがとうございます。

liisaa
2018/01/16 (Tue) 19:40

トップページgrid-itemの表示について

こんばんは。はじめまして。
FC2にてテンプレート拝借しております。
とてもクールなテンプレートをありがとうございます。

使い始めてから、最近気づいたのですが、
トップに表示されるgrid-itemが6つではなく5つになってしまいました。
ソースを見たりしているのですが、テンプレート管理から修正できそうな箇所を発見できず、
どうやって直したらいいのかわからず、途方に暮れております。
ご多忙の中大変申し訳ございません。
何卒お力お貸しいただければ幸いです。
ご確認の程、よろしくお願いいたします。

liisaa

Akira
2018/01/16 (Tue) 20:46

To liisaaさん

ありがとうございます ( ゚Д゚)ノ

記事の表示件数はテンプレートソース内設定ではなくブログ個人設定です。
以下の記事をご参照ください。

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

-------
別件ですが、liisaaさんは以下の記事の該当者です。

ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】
https://vanillaice000.blog.fc2.com/blog-entry-569.html

要点をまとめます
① レスポンシブデザインなのでスマートフォン版の設定は不要
参考記事
(内部リンク)
https://vanillaice000.blog.fc2.com/blog-entry-491.html
https://vanillaice000.blog.fc2.com/blog-entry-628.html
(外部リンク)
FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか?/ ぼっちん様
https://oops0011.blog.fc2.com/blog-entry-167.html

② サイトアドレス(h1)のテキストリンクがクローキング対象(隠しリンクにあたります)

③ ヘッダーの背景とブログタイトルが融合しているのでデバイス画面幅によってはブログタイトルが完全に見切れる

そして背景指定CSSの
background: url(アドレス) center center / 1180px 266px no-repeat;
太字部分は画像のサイズを指定する役割ではありませんので使い方が違います。
(ちょっと説明が難しいですが、「サイズ」指定ではなく「比率」の指定に近いです)
ブラウザの横幅をマウスで狭めてみてください。タイトル。背景共に見切れていくのがわかると思います。
パソコン画面サイズ、閲覧ブラウザサイズは人によってまちまちですから、ブログタイトルや背景はどのポイントでも見きれないような処理が必要です。

対策する・しないはお任せしますが、現状良くはないですね (´・ω・`)
一応お知らせしておきます。

liisaa
2018/01/16 (Tue) 21:20

To Akiraさん

早々にご返信くださりありがとうございます!
いろいろと至らぬ点がありすみません・・。
質問の前のテンプレあるある、まずそこを読めずすみませんでした。

この後仕事のため、すぐに対応できませんが、
いただいたご指摘点、直していきます。
HTML・CSSまだまだ勉強中のため、もしかしたら読んでもわからない場合またご質問差し上げるかもしれませんが、
まず一人で頑張ってみます。

ありがとうございます!

vanillaice (Akira)
Akira
2018/01/17 (Wed) 20:59

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

はい。画像の修正は作り直しになりますので大変かと思いますが、頑張ってください。
お疲れ様です :)

huugetu
2018/06/28 (Thu) 12:56

全記事リストの序文の文字数について

いつもお世話になっております。
去年もいろいろご相談させていただきました者です。

全記事リストは、記事の題名と 序文が20文字表示されていますが、この文字を多くするためにはどこを直せばよいでしょうか。
すみません、よろしくお願いいたします。

vanillaice (Akira)
Akira
2018/06/29 (Fri) 10:29

To huugetuさん

こんにちは。こちらこそお世話になっております。

全記事リストの文字数についてはFC2の独自変数を利用しておりサーバーサイドの処理ですので、取得文字数を変更することはできません。
取得した文字をCSSで制限する(減らす)ことはできても増やすことは許可されていません(サーバーへのアクセス権限(php利用権限)が無いため)
よろしくお願いします。

huugetu
2018/06/30 (Sat) 06:50

ありがとうございます

そうなんですね。わかりました。ありがとうございます。

vanillaice (Akira)
Akira
2018/06/30 (Sat) 12:17

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

こんにちは。
ご期待に添えずごめんなさいね。
お疲れ様でした :)

-
2018/10/11 (Thu) 10:10

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/10/11 (Thu) 14:02

To Pinboardナビの件 内緒さん

ありがとうございます (●'0'●)/

> スマホ表示の『ナビゲーション』の黒い部分の『横三本線』の部分を〜日本語表記にしたい〜

<div class="mobile-toggle">
で検索するとhtml内に1箇所出てきます。その直下に
<span></span>
<span></span>
<span></span>
と3行並んでいますので3行とも削除し、日本語のテキストに置き換えてください。

続いて
/* navi breakpoint 2/2 */
で検索するとCSS内に1箇所出てきます。
以下のキャプチャを参照しながら作業なさってください。

https://file.blog.fc2.com/vanillaice000/capture/cappinedi.png

-----
> FC2以外で(例えばWordPressなどで)〜

個人的なお仕事は引き受けていないんです。お役に立てずごめんなさいね。

-
2018/10/12 (Fri) 01:11

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/10/16 (Tue) 00:51

To Pinboardナビの件 内緒さん(完了のご報告)

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

白文字の方が読みやすい気がしますがお任せします。
お疲れ様でした :)

-
2018/10/16 (Tue) 10:58

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/10/16 (Tue) 22:07

To Pinboardナビリンクカラーの件 内緒さん

こんばんは ('0')/

スクリーンショットがちょっとわかりづらかったでしょうかね。もう一度掲載しておきます。
https://file.blog.fc2.com/vanillaice000/capture/cappinedi.png

color: white;
を追加しないと文字色変わりませんので追加してくださいね。
よろしくお願いします。

-
2018/10/17 (Wed) 05:42

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/10/17 (Wed) 15:53

To Pinboardナビリンクカラーの件 内緒さん(完了のご報告)

こんにちは。
お出来になったということで良かったです。
お疲れ様でした :)

野付ウシ
2019/04/09 (Tue) 11:43

表示までの時間

こんにちわ、初めてメールします。3月末から2つのブログでテンプレート利用させてもらいました。
そのうちの一つで「Pinboard」を利用させていただいてますが、トップ画像のみ変更しましたが他は触ってません。
3月末に導入直後は普通に表示されましたが、1週間後の4/6にトップ画面までの表示時間が数秒遅れてきました。
そして翌日7日には白い画面に時計が表示された状態で25秒待たされました。その後も何度か試したのですが変わらず。
なお、訪問者の他のブログは問題なく表示されていますが、このブログのみずっと待たされました。
キャッシュは削除、ms Edgeでも確認、Chromeの再インストールまでやってみましたが、改善せず。
その状態が改善しないので、一時削除して再度ダウンロードし画像入れ替えもせず適用してみました。
その結果も同じで表示まで30秒近くを要しました。一旦は以前のテンプレにもどしましたが、本日再度試してみると・・・
ほぼ問題なく動きます。何が起きたのかわかりません。
今回の差し替え画像は 1500x423で136kbです。他の部分は手を加えていません。
急に表示が遅くなる原因について、思い当たることがありましたら、ぜひご教示ください。
今日入れ替えたテンプレがまた遅くなるのか不安もあってメールしました。
なお、環境はChrome利用、Win 10Pro、Core-i7、メモリ8GB、光回線使用です。
※もう一つのブログは「Message」を使わせて頂いてます。「http://hanamitatotta.blog.fc2.com/」
簡潔にまとめられずすみません。今日の再設定で様子を見ようと思ってます。

vanillaice (Akira)
Akira
2019/04/09 (Tue) 16:27

To 野付ウシさん

こんにちは。

ページの表示が著しく遅くなる原因のほとんどがJavaScriptです。
また、何も手を加えない状態である時期を堺に障害が出た場合に考えられる原因は
・FC2ブログの一時的不具合 --- 他ブログに影響が無いとのことなのでこれは違うと思います
・個人通信環境に起因
例) 帯域制限 --- スマホの4GではなくパソコンのWi-Fiでアクセスしたと思いますのでこれも除外
例) プロバイダ側の不具合 --- これも他ブログは通常通りだったことから除外
・外部ファイル(FC2ブログサーバー経由でない)へのアクセス不具合 --- 可能性あり

テンプレート内容を触っていない場合で突然状態がおかしくなったとのことですから、今回はテンプレート自体の不具合ではありません。可能性としては外部サーバーへアクセスして表示するなんらかに起因していたのではないかと思います。

・fontawesome.comサーバーのCSSファイル(webアイコン)
・cloudflare.comサーバーのJSファイル(lazyloadJS)
・googleapis.comサーバーのJSファイル (webフォント及びjQuery)
・blogmura.comサーバーのJSファイル(ブログ村のRSS)

このいずれかのサーバーで障害が生じた場合、ページの表示に影響が出ます。サーバーに原因が有る場合にはエンドユーザー側(ウシさんも含みます)からは対処のしようがありません。
外部サーバーの障害の可能性は高いですが、障害情報をチェックしないとなんとも… ^^;

また遅くなる可能性があるか、と問われれば「あります」
仮に
・Aサーバーを経由するテンプレート1
・Aサーバーを経由するテンプレート2
・Bサーバーを経由するテンプレート3
A,Bサーバーは共にFC2外部のサーバーだとします。
Aサーバーに障害が出た場合にはテンプレート1と2に影響が出ます。3は何も起こりません。
Bサーバーに障害が出た場合に影響が出るのはテンプレート3だけです。

外部サーバーの障害を懸念するのであれば、それぞれのファイルを複製してFC2画像サーバーにアップし、そのファイルを利用されると良いと思います。FC2サーバーに不具合が生じれば結局同じことになりますが、その場合はFC2ブログのほぼ全体で影響が出るでしょうから、少なくとも「どれが原因かわからない」といった事態には陥りません。
ちなみに今最もページに負荷をかけているのはFont Awesomeとブログ村RSSです。参考までに。

また、ローディングスピナーの性質上若干表示が「遅い」と感じることもあるかと思いますので、不要であれば削除してください。

ページ遷移時フェイドエフェクト不要の方ここから削除

で検索すると出てきますのでガイダンスに従って削除。
ただしページのローディングスピードが変わるわけではありません。表示されるものが早く目に入ればなんとなく速く感じるというだけのことです。

-----
ごめんなさい。肝心なこと聞き忘れましたが、これって「トップページ」のことですよね?これが「特定の記事」になると原因は記事内容ってことになりますのでまた話が違ってきます。

あと確認で、「メール」という表現をされているのですが、こちらは「コメント欄」であってメールではありません。もしメールだと勘違いしてらして、内容が第三者に「見えない」と思っておられる場合は困るでしょうからコメントを削除するなり私の方で対処しますのでその旨お伝えくださいね。

野付ウシ
2019/04/09 (Tue) 18:39

Re;表示タイムラグの件

Akiraさんへ..お忙しいのに、ご丁寧に詳細をお知らせいただき、ありがとうございます。
この件は「トップページ」表示までの状態です。それとコメント欄であるのは承知しています。(記載ミスです)
自宅Wifiありますが、自分のPCは無線使わず繋いで使用しています。
いづれにしても今日再度テンプレ戻してみた時には、ほぼ正常かなと思える状態ですので、
一時的に日曜日に何かが起きたかもしれません。
暫く状況を見ながら対処したいと思います。要因となりうることを並べていただきましたので考えてみます。
(まぁあまりシステムとかサーバーが絡むことはわかりませんけど)
お手数をお掛けしました。この件はこれにて終了として頂いてけっこうです。
ありがとうございました。

vanillaice (Akira)
Akira
2019/04/09 (Tue) 18:43

To 野付ウシさん

はい。了解です。
とりあえずローディングスピナーの件だけお考えください。
また、html5であることとSSLは無関係ですが、SSL化するとhttp2という通信方法が使えますので若干スピードは上がるかもしれません。

あとFC2検索バーは広告ですからこれも非表示にすると良いですね。これがあるとタブレットでレイアウトが崩れますし、広告である以上負荷は高いです。
それからOGP設定を行うと個別記事下ページ送りにサムネイルが出ます。本ページ内容を今一度よくお読みになって正しい設定を行ってください。

お疲れ様でした :)

vanillaice (Akira)
Akira
2019/04/09 (Tue) 19:09

To 野付ウシさん②(重要)

もう見てらっしゃらないかもしれませんが。

今拝見すると本来出てはいけない部位にFC2のジャンルJSが記載されてますね。これはFC2が強制的に入れてくるJSファイルです。
その記載位置がおかしい、ということです。文法的にもエラー。

うーんこれちょっと何故なのか検証しますが、もしかしたらFC2に問い合わせることになるかもしれません。表示が遅くなったことと関連があるかどうかわかりませんが少し調べてみます。

-----
検索バーに不具合があります(笑)
これはFC2運営に報告するとして、関連性はわかりませんが何かしらのシステム変更があったように思います。いや、あります。たぶんこれ絡みだと思います。たぶん(笑)

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