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

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

テンプレート 配布中テンプレート
2020/01/15
22
vanillaice (Akira)
vanillaice (Akira)
LivingStandardRWD

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

名称 BigGirlNoCry びっぐ がーる のー くらい
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 要約表示タイプ
記事幅(PC 最大) メイン --- 最大 制限なし
サイド --- 最大 制限なし
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし
Google fonts導入 Mountains Of Christmas
Font Awesome導入 なし
Lazyloading導入 あり
OSダークモード対応 なし
パン屑リスト表示 あり
固有セクション
  • 最新記事リスト(サムネイル付き)
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Lighthouseスコア
(トップページ平均)
固有機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン
変則2カラム
サイドメニュー --- 下
タブレット
変則2カラム or 1カラム
サイドメニュー --- 下
スマートフォン
1カラム
サイドメニュー --- 下
最終更新 2023.9.22
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
  • アイテムホバーtransitionの数値を調整(遅くしました)
更新履歴 2023.9.2
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • RSSリンク削除
  • グリッド画像のスクロールアニメーションを繰り返さない設定に変更
  • webフォントの表示方法を変更
  • グローバルナビゲーションからカテゴリリストを削除
  • パン屑リストからSVGアイコンを削除
  • ユーザビリティの最適化
  • コメント削除アラート追加
  • その他UI調整

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

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

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

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

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

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

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

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

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

vanillaice000.blog.fc2.com
更新履歴 2022.7.9
  • prefetchの数を調整
更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再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("pager_entry-image-prev");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("pager_entry-image-next");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("pager_entry-image-cat-prev");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("pager_entry-image-cat-next");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>function changeTextValue(e){document.getElementById("subject").value=e};</script>

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

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
更新履歴 2020.5.28
  • ページ送りのJSを修正
更新履歴 2020.4.13
  • 個別記事ページナビのhtml誤記を修正
最終更新 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

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

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

びっぐ がーる のー くらい
承認されました。ありがとうございます。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE DEMO
画像クリックでデモ画面へ
目次へ戻る↑

カスタマイズのコツ

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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南
目次へ戻る↑

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

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

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

目次へ戻る↑

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

Cautions before asking for something.

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

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

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

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

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

Related post

Comments  22

きろろ
2020/01/15 (Wed) 09:00

お洒落〜♥︎︎∗︎*ﾟ

これ！すごいですね！
お洒落です！
病院のベッドでAkiraさんの活躍を見るのが楽しいです。
私もこんなふうにテンプレートが作れたらなあって、まじで思います。
これは絶対に圧倒的にセンスの問題！
天賦の才なんでしょうね！

オタネ
2020/01/15 (Wed) 10:13

はじめまして

いつも素敵なテンプレートで感動しております。
私は3カラムが好きで3カラムのテンプレートakiraさんのテンプレート待っておりました。
そうしたら凄く素敵なテンプレートが出たのでダウンロードさせていただきました。
ありがとうございます。

でも3カラムになるのはパソコンみたいですが
一応iPadの12インチ使っておりますが2カラムになるので
スマートフォン版の表示設定「利用しない」してみましたが
なりません。
何故できないのかわかりますでしょうか？
お忙しいと思いますが手が空いた時によろしくお願いします。

vanillaice (Akira)
Akira
2020/01/16 (Thu) 03:56

To きろろさん

こんばんは ('0')/

ありがとうございます。今回はガーリーにしてみました (o'ω')ﾉ

vanillaice (Akira)
Akira
2020/01/16 (Thu) 04:00

To オタネさん

こんばんは。ありがとうございます :)

> 何故できないのかわかりますでしょうか？〜

答えは「レスポンシブウェブデザインだから」です。不具合等ではなくそういう仕組みのテンプレートだ、ということです。レスポンシブについての説明は以下の参考ページをご覧ください。また、当ページ内仕様表に各デバイスでの見え方の違いを掲載してありますのでそちらもご確認ください。そしてテンプレート利用の注意点(必須個人設定など)もお読みくださいね。特に今回「タブレット」閲覧のお問い合わせですから、FC2検索バーの設定について熟読をお願いします。よろしくお願いします。

参考記事: 今更だけど「レスポンシブ」ってなんぞ？
https://vanillaice000.blog.fc2.com/blog-entry-491.html

参考記事: ご質問の前に「テンプレあるある」(『カラム落ち？と思ったときは』の章を参照のこと)
https://vanillaice000.blog.fc2.com/blog-entry-220.html

参考記事: レスポンシブテンプレートを選ぶ前に
https://vanillaice000.blog.fc2.com/blog-entry-951.html

オタネ
2020/01/16 (Thu) 05:52

To Akiraさん

akira様、わざわざご返信ありがとうございます。
あれから、色々ネットで調べてみたんですが
レスポンシブというのは全く持って初めて聞く言葉だったので
申し訳ありませんでした💦
よく見てみるとakiraさんのブログに色々載せてあったのですね。
これから色々勉強させていただきます。
今回は丁寧にお答えいただき感謝してます。
ありがとうございました。

-
2020/01/16 (Thu) 08:20

管理人のみ閲覧できます

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

きろろ
2020/01/16 (Thu) 14:45

To きろろさんTo Akiraさん

師匠、きろろはガーリーが好きですよ(* ¨̮*)/♡

vanillaice (Akira)
Akira
2020/01/16 (Thu) 21:55

To オタネさん

こんばんは。
ご理解ありがとうございます。お疲れ様です :)

vanillaice (Akira)
Akira
2020/01/16 (Thu) 22:02

To 全記事リストの件 内緒さん

こんばんは。お久しぶりです :)

> 全記事リスト〜あのページが重い場合、軽くする方法はありますでしょうか？〜

このページ種は元々はプラグイン扱いだったようで、他のページ種とは仕組みが違うんですね。そして記事数が多くても少なくても非常に重たい(読み込みが遅い)のが特徴です。
その解消のため「tremolo」(2019年3月下旬リリース)を含みそれ以降のテンプレートではprefetchという技術で改善を試みています。

現在ご利用中のPinboardを継続される場合はこの処理はありません。当ページのBigGirlNoCryに変更される場合は処理済ですから素早く表示できるはずなのでお試しください。ただし条件は「SSL化を済ませていること」で、内緒さんの場合クリア済なので問題ないと思います。
よろしくお願いします。

あと今回「IE非対応」に踏み切られるということで、できればオーバーレイの導入をおすすめします。当該テンプレートはIEではまともに表示されませんので、IEでの閲覧が困難であることを伝えつつ、他モダンブラウザへの変更を促すものなので入れておいたほうが良いと思います。
Chromeブラウザのダウンロードリンクが表示され、そこから結構DLされる方もいらっしゃいますよ。ご検討くださいね。
(導入の仕方は当ページ内にリンク掲載してあります)

-
2020/01/17 (Fri) 04:19

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/01/17 (Fri) 14:52

To BigGirlNoCryの件 内緒さん

こんにちは。

> 確かに早いっ！！〜

はい。そうだと思います。Pinboardの方は未対応なので申し訳ない ^^;

> ネタとして〜と思いがち

確かにおっしゃるとおりだと思います(笑)
私の場合は結構どぎつく「いつまでもIE使うのやめろって (;`ｰ´)o」という感じの文言で表示していますが、一般ブロガーさんならもう少し柔らかい言い方に変えたほうが良いだろうと思います。ただ内緒さんのジャンルの場合ホントに内緒さんの言及の通りで、どんな文言にしたところでなかなか難しいですよね ^^;

あとは内緒さんの方針を軸に天秤にかけて頂いて、針の振れた方を選んでくださいね。
いつもありがとうございます :)

rossi
2020/01/19 (Sun) 09:25

はじめまして(・∀・)

いつもアナタのテンプレを使用させて頂いておりますm(_ _)m

今回のテンプレはお洒落ですねΣｂ( ｀・ω・´)ｸﾞｯ

キープさせて頂きますm(_ _)m

vanillaice (Akira)
Akira
2020/01/21 (Tue) 01:13

To rossiさん

こんばんは ('0')/

励みになります。ご丁寧にありがとうございます :)

きろろ
2020/02/16 (Sun) 13:43

アイキャッチ？

お久しぶりでございます、絶賛治療中のきろろです。
えーとですね。
今日新記事を投稿したら、画像が表示されていないんです。
今日の分だけです。テンプレートなどはなにもさわっておりません。
あとですね、Fallとかいくつかのテンプレートがやはりトップ画面で新記事分だけ、
No imageと表示されております。
見ていたけませんか、よろしくお願いしますm(__)m

きろろ
2020/02/16 (Sun) 14:36

解決いたしました

よくはわからないのですが、マジわからないのですが(^◇^;)
記事を一度削除してから新しく投稿してみました。
トップ画像がちゃんと表示されておりました。
病院にパソコンを持ち込むことができないわけではないのですが、
キーボードの音がまわりに迷惑かなと思い、iPadで作業をしています。
そのせいなのか、FC2側のせいなのか、きろろにはわかりませんが
とりあえず解決したというご報告まで⸜( ´ ꒳ ` )⸝♡︎

vanillaice (Akira)
Akira
2020/02/17 (Mon) 00:24

To きろろさん

きろろさん、こんばんは ('0')/

以前もアイキャッチの件で同じ内容のご質問があったと思います。なのでタブレットのOSアップデート(アップグレード)を確認してみてくださいね。
iOSはバージョンによってカメラロールのセキュリティやAPIが異なりますので常に最新版へのアップデートを心がけると良いと思います。

-----
闘病中にもかかわらずきろろさんの明るさに救われます。
どうぞお大事になさってくださいね。

深緑の女魔術師
2020/03/24 (Tue) 20:05

質問？

いつもお世話になっております。
深緑の女魔術師です。

お知恵をお借りしたい始末で、
助言をいただきたい始末です。

以前より惹かれるテンプレだったので、
それっぽくカスタマイズして運用しようと思ったのですが、
akiraさんより頂いた 目次作る スクリプト がどうにも動かず…
（hタグを取得して doc に目次作るやつです）

参考URLは以下です。
https://enchantress2009.blog.fc2.com/blog-entry-4358.html

JSは自ブログのファイルサーバにアプしてて
https://blog-imgs-124.fc2.com/e/n/c/enchantress2009/MyScript_20190214.js
にてたぶん読めてると思われ。

そこまで分かってるならデバッグしろと言われそうだけど、
普段使いの火狐にて uncaught exception: Object 的なエラーがはかれてるので
きっとってか確実におかしいんですよね。。。

＃以前は Muse を使っててそちらは問題なし

他力本願でごめんなさい。

＃こんなのヘンタイしか使ってないのでスルー奨励ですが、
＃WindowsPhone（Windows10Mobile）のedgeで正しく表示できないのは、
＃マ〇クロ〇フトの陰謀ですよね。
＃メインスマフォがWindowsPhoneのヘンタイでごめんなさい

以上です。

vanillaice (Akira)
Akira
2020/03/24 (Tue) 22:18

To 深緑の女魔術師さん

深緑の女魔術師さん、こんばんは。こちらこそお世話になっております ('0')/

BigGIrl〜の場合はscopeが #inner-contents ではなく .inner-contents なので書き換えが必要です。
お手数ですがファイルの新規作成をお願いします。

参考記事: 見出し目次を生成するTOCスクリプト(scopeの指定を参照)
https://vanillaice000.blog.fc2.com/blog-entry-826.html

Edgeの方は既に開発が終了しており、現時点ではspartan Edge(レンダリングエンジンがEdge HTML)ですが、chromium Edge(レンダリングエンジンがBlink)に切り替わることが決定しています。
windows phone自体も開発終了なので、残念ですが非対応ということになります。申し訳ないです (*_ _)

----- 追記
未読かもしれませんの意味がわからなければ読み飛ばしてくださいね。
他の方への返信内容をこちらに記載してしまいました。全く関連の無い内容なのでもし既に読まれていた場合は忘れてください(笑)
ごめんなさい ^^;

深緑の女魔術師
2020/03/25 (Wed) 22:04

To Akiraさん

深緑の女魔術師です。

迅速なレス感謝です。

記事にもちゃんと書いてあったし、
JSをちゃんと読めば分かった内容だったので、
Webかじってる身としては恥ずかしい結果…

ま、無事修正出来たので感謝です。
解決ってことでレス不要です。

以上でした。

julie
2021/09/06 (Mon) 00:01

見出し装飾のやり方

こんにちは。
パソコンが苦手で、基本的な質問になってしまって申し訳ないのですが、自力で2時間ほど粘りましたができなかったので質問させていただきます。

私のブログのトップページに行って頂くと、初めて書いた記事のタイトルが表示されていて、その上に何か画像をアップロードできるようになっています。見出し装飾というのでしょうか。そこに画像を入れたいのですが、パソコンの中にある画像をドラッグ＆ドロップしても表示されません。
画像はPNGファイルです。これはアップできない形式なのでしょうか？

vanillaice (Akira)
vanillaice (Akira)
2021/09/06 (Mon) 01:14

To julieさん

こんばんは ('0')/

えっと、ちょっとよくわからないので順を追って確認します。

> 何か画像をアップロードできるようになっています〜

これはもしかして以下のスクリーンショットの赤枠部分のことでしょうか。
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_09_06.png

ポラロイド写真風になっているグレーの部位ですね。今の状態は「記事内に画像無し」ということで、「No image」というグレー表示になっています(アップロードの受付を示唆するものではありません)

このページ(及びブログの全ページ)というのは世界中に公開されており、管理人であっても一般閲覧者であっても外的な操作を一切受け付けません。管理人がページの操作をするには「管理画面」を起点とする各機能のために準備されたページを通す必要があります。なので、ブログトップページからドラッグ&ドロップ等で画像を追加する、といったことはできません。それを行うためには「記事編集画面」です。

トップページに並ぶ各記事の「サムネイル画像」は、FC2側で自動的に取得します。条件等は以下の記事を参照してくださいね。

参考記事: FC2ブログ「サムネイル」「アイキャッチ」のおさらい
https://vanillaice000.blog.fc2.com/blog-entry-900.html

簡単に説明すると、トップページのサムネイルは
・「本文」の一番最初に掲載されている画像
・記事編集画面の記事を書く場所の下にある「OGP画像設定」でアイキャッチ画像として指定された画像
のいずれかです(対象外になる例は参考記事で確認してください)

なのでjulieさんが既存の記事(そうだ、投資をしよう！)にサムネイルを付けたいとして、記事内に画像を掲載するならば「本文」の方へ。記事内に画像掲載はしたくないがトップページサムネイルはほしい、という場合はアイキャッチ画像指定を行ってください。

また、記事編集画面に於いてもFC2ブログのエディターはドラッグ&ドロップでの画像挿入はできませんので、ツールバーの下段左端にある写真アイコンをクリックし、ファイルアップローダーを通して掲載を行ってください。

* 一般的に「見出し装飾」というのは h1, h2, h3など、記事内容の見出し(headline)の装飾のことを指します。今回の場合は「サムネイル指定(設定)」「見出し画像指定(設定)」ですかね。

もしこの回答が的外れでしたらご指摘くださいね。よろしくお願いします :)

julie
2021/09/06 (Mon) 16:15

To Akiraさん

ご親切なご解答、本当にありがとうございます( ;∀;)

FC2の管理画面に出てくる単語も、日本語なのに分からない言葉ばっかりで、何から調べていいのか分からずお手上げ状態でした。
私は｢見出し画像｣を｢サムネ画像/アイキャッチ画像｣と勘違いしていたのですね。この3つはすべて同意語だと思っていました。もう本当にすみません。お恥ずかしい限りです。

お教え頂いた通りやってみます。
最後になりましたが、素敵なテンプレートをありがとうございます。
がんばってもっとおしゃれなブログを目指したいと思います。

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