attention admin about comments trackbacks you may also like

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

2020年01月15日
テンプレート
16
HTML5 CSS4 RWD
BigGirlNoCryテンプレート

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

名称 BigGirlNoCry
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 IE非対応
パソコン タブレット スマートフォン
変則2〜3カラム 2カラム or 1カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 or 下 サイドメニュー --- 右 or 下 サイドメニュー --- 下

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE 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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

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

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

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

スクロールエフェクトの削除

How to disable scrolling JS effect

トップページでスクロール時のポラロイド風アイテムの表示エフェクトが煩わしいと感じる方は

注)スクロールエフェクト不要の方

で検索してガイダンスに従ってください。削除項目は 全3箇所(html内1箇所 + スタイルシート内1箇所)です。

通常のscrollイベントではなくIntersectionObserverで監視していますのでそれほど負荷は高くありません。逆に言えば取り除いたからといってパフォーマンスが格段に良くなる、というわけではありません。なので取り除くとすれば高速化云々よりも見た目や操作感かなぁ、と思います。

マウスオーバーの反転解除

How to remove invert CSS effect

隣り合わせのアイテム同士が重なっていますのでリンク範囲をわかりやすくするためにネガポジ反転を入れてあります。不要な方は

注)マウスオーバー反転不要の方

で検索し、ガイダンスに従ってください。PC閲覧の場合は何らかの示唆が無いとUX的にどうかと思いますので、できればエフェクト「削除」ではなく「変更」をおすすめします(変更内容については各自で考案してください)

カラム入れ替え不可

It is NOT possible to make changes to the order of column.

PC閲覧時、左に固定されているのはサイドメニューではなくヘッダーなので、デザイン的にもUX的にも本テンプレートではメイン・サイドのカラム入れ替えは不可、ということでお願いします(自己責任でのカスタマイズを制限することはありませんので、ご質問は受けない、という意味です)

webフォントを利用しない場合

If you do NOT want to use Google fonts...

「welcome to my blog」などのフォントはGoogle Fontsを利用しています。このフォントを排除したい場合は

注)webフォント不要の方

で検索し、ガイダンスに従って頂くわけですが、ちょっと意味がわかりにくいかもしれませんので補足します。

wf-target で検索するとhtml内に11箇所ヒットします。これらを以下の要領で削除します。

① クラス名が単独の場合

<span class=wf-target id=peekaboo>

緑部位を削除して以下の通り。

<span id=peekaboo>

② クラス名が複数の場合

<div class="another-title wf-target">

該当クラス名以外はそのまま残して以下の通り

<div class="another-title">

webフォントは読み込まれるまでにタイムラグがありますので、FOUT現象(flash of unstyled text, フォント種が切り替わる際に点滅するように見える)が発生します。それを避けるための処理を行っており、それ故正しい手順で削除しないと文字が表示されませんのでご注意ください。上記手順に沿って削除するとテンプレートで指定されているデフォルトフォント種に戻ります。

カテゴリオーバーレイ表示の際のメインコンテンツぼかしについて

CSS blur doesn't work in Firefox browser.

ナビゲーション内にある「CATEGORY」をクリックするとオーバーレイ表示が行われ、背面になるコンテンツにぼかしがかかるようになっていますが、現時点ではFirefoxに対応していませんので予めご了承ください。オーバーレイが機能しないわけではなく単に後ろにぼかしがかからない、という意味です。

スピード強化について

Behavior about navigation

Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

prefetchはバックグラウンドで行われますが、過信して1ページ内に大量のリンクを記載しない よう気にかけてください。記事の表示件数をMaxの50件に指定するなどがそれにあたります。リンク数が過剰だと却ってスピードを落とすこともありますので10〜30件程度が妥当だと思います。また、スペックを最大限に活かすには SSL化 を行ってください。

「新着記事リスト」と「プロフィール」について

About recent list and profile

それぞれのプラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策(新着記事リスト)
  • バリデートエラー無し(htmlが正確)

できればプラグイン側を非表示にされた方が良いと思います。プロフィールの表示位置変更は可能です。

補足事項

Handouts

  • ページ内スクロールボタンの位置について

現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2020年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。

本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。

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

Cautions before asking for something.

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

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

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

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

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

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

コメント(16)

There are no comments yet.

きろろ

2020/01/15 (Wed) 09:00

お洒落〜♥︎︎∗︎*゚

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

オタネ

2020/01/15 (Wed) 10:13

はじめまして

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

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

Akira

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

To きろろさん

こんばんは ('0')/

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

Akira

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

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さん

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

Akira

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

To オタネさん

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

Akira

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

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

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

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

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

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

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

-

2020/01/17 (Fri) 04:19

管理人のみ閲覧できます

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

Akira

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

To BigGirlNoCryの件 内緒さん

こんにちは。

> 確かに早いっ!!〜

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

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

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

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

rossi

2020/01/19 (Sun) 09:25

はじめまして(・∀・)

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

今回のテンプレはお洒落ですねΣb( `・ω・´)グッ

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

Akira

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

To rossiさん

こんばんは ('0')/

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

きろろ

2020/02/16 (Sun) 13:43

アイキャッチ?

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

きろろ

2020/02/16 (Sun) 14:36

解決いたしました

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

Akira

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

To きろろさん

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

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

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

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

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