このページの記事目次 （カテゴリー: テンプレ・FC2マニア 108 件）
total 27 pages 次のページ →
このブログは 2013年4月末～ FC2ブログ の有料プラン（Pro） を適用していますが、この有料版の仕様が 少し（良い方向に）変更になったようです。 有料版の 1ヶ月お試しキャンペーン もあるようですし、FC2ブログを始めたばかりの方などでは どのように違いがあるのか、よく分からない方もいるかと思うので記事にしてみました。
PC版，スマートフォン版，携帯版 で全ての広告（全モードで10種類以上） が表示されることが無くなったことが個人的には一番嬉しいところです。 元々は 「FC2ポイントがあるからお試しで...」 というのがきっかけで使っているのですが、月300円（12ヶ月プランだと 3300円）くらいでこの違いがあるなら、今後も使おうか迷うだけの魅力も多くなりましたし 利用者も増えるかもしれませんね。
FC2ブログ 「有料プラン」と「無料プラン」 の比較
| | FC2 BLOG Pro 有料プラン
月 300円，12ヶ月 3300円
（※アダルトジャンルは別） | FC2ブログ 通常プラン
無料 |
|---|
PC，スマートフォン，携帯
ブログ内広告 完全オフ | 〇 2013/07/31より これまでは残っていた広告も 完全に非表示になっていました。 | × 但し、画像高速表示機能OFF などにより、元々 非表示にできる広告もあります。
（〇 広告免除ブログ を除く） |
|---|
| 404ページカスタマイズ | 〇 PC版，スマホ版，携帯版 それぞれがカスタマイズできるようになってました。
（404 Error - PC版 見本） | × 404 Error - FC2ブログ |
|---|
| アップロードファイル容量 | 1ファイル 5MBまで | 1ファイル 2MBまで |
|---|
| ファイル保存容量 | 無制限 | 10GB （写真ブログでもなければ これだけあれば十分かと） |
|---|
| 1日あたりの記事投稿数 | 100件まで | 30件まで |
|---|
| 独自ドメイン | 〇 これで有料版を選ぶ人も多そうですね。 私は元のまま.. | × |
|---|
| FTPアップロード | 〇 FTPクライアントを使ってファイルをまとめてアップロードすることが可能に。（もちろんこれまでの方法でもOK） | × ファイルアップロード画面から 最大5件ずつアップロード |
|---|
詳しいことは、リンク先を参照してもらうと良いと思いますが、ブログ内広告 完全オフ について ユーザー目線でもう少し詳しく載せておきます。 下の画像6枚は 広告が表示される場合の表示イメージです。（※テスト用ブログで再現した 合成画像です）
FC2ブログの広告 の主な種類 （1. ～ 16.）
1. 検索バー 2. アカマイ広告 3. テキスト広告
クリックで画像を拡大します
検索バー： ユーザーが設定でON・OFF を設定できるものです。表示する場合には ページ上部に固定され、通常プランでは FC2のインフォメーションなども入ります。
アカマイ広告： 画像高速表示設定 で「利用する」を選んでいる場合に表示される オーバーチュアの広告です。 記事下（最初の記事1つ）に挿入されます。 通常プランでのデフォルトは 利用するになっていて、「利用しない＆広告を表示しない」 を選んでも設定が反映されるまでには1週間かかります。 有料プランでは この画像高速表示機能 をONにした上で 広告も表示されないようになります。 有料プランの期限が切れた場合には デフォルトにリセットされそうな...予感（?）
アカマイは アップロードした画像などのファイルをキャッシュしているものなので、上書きした画像などは すぐには反映されない ことがあります。 アカマイを利用しない場合にも 類似の現象は起こりますが、詳細は 関連記事を参照してください。
テキスト広告： [PR] で始まるテキスト広告で、通常版でも 可視可能であれば移動は自由なため、邪魔になることはないシンプルな広告です。 <%ad><%ad2> の位置に挿入されます。 私が FC2ブログを始めた2008年の頃は、ブログ上には この広告しか表示されていませんでしたね。。
4. スポンサーサーチ
クリックで画像を拡大します
スポンサーサーチ： サイト内検索 をした場合の 検索結果ページ 及び その後の個別記事ページ などで表示されるもので、検索キーワードに関連した広告がある場合 に挿入されます。（厳密には テンプレートの構造により異なるので 関連記事を参照してください。）
5. 6. 1ヶ月更新なし広告
スポンサーサイト， 追従型オーバーレイ広告
クリックで画像を拡大します
1ヶ月更新なし広告（スポンサーサイト）： 1ヶ月（多分720時間？）以上記事を書かなかった場合に、記事のような形で 1つ目の記事の上に表示される広告です。 変数 <!--topentry-->～<!--/topentry--> 関連の変数に反応して挿入されるので、この広告が表示されることも考慮しておかないと、変な記事タイトルや変なメタデータになっていることもあるようです。
1ヶ月更新なし広告（追従型オーバーレイ広告）： 閲覧者も ×印 で簡単に消すことができますが、そのままではかなり鬱陶しい広告です。 通常プランでも、記事を投稿すれば 即消える広告ですので、表示されないように意識したいものです。
7. PC版 追従型広告
iPad や スマートフォン などで PC版を表示した時の広告
クリックで画像を拡大します
PC版 追従型広告 iPad などでFC2ブログを開くと、このようなページで表示されます。 パソコンで閲覧している時には表示されない、画面追従型の広告がドカーンと入ってくるので（閲覧者もピュンと避けることは出来るのですが...）邪魔に感じることも多い広告です。 以前の有料プランでは この広告は残っていましたが、今回の仕様変更で これも非表示になりました。
8. 9. 10. 11. 12. 13. スマホ版 広告各種
スマートフォン などで スマホ版を表示した時の広告
14. 15. 16. 携帯版 広告各種
携帯（ガラケー） などで 携帯版を表示した時の広告
スマホ版での広告・他
- バナー広告
- バナー広告
- テキスト広告
- 注目記事（PR入り）
- ランキング（PR入り）
- 検索BOX
- 記事一覧へのリンク
- 追従型広告
これでもかーってくらい色々入っちゃいますね。 ソースもすごく増えてしまいます。
携帯版での広告
と、通常プラン（無料）ではこんな感じで広告が入りますが、有料プラン ではこれらの広告を全て消すことができます。 他に コメント投稿時に表示される広告 や アルバムを使用している場合の上部バナー広告 なども表示されなくなっているようです。
関連記事
↓ Sleipnir4 for Windows（Blink版）なら UA（ユーザーエージェント）の変更 も選択するだけでOKです。 iPad や スマートフォン，ガラケー などでどのように見えるのかなという確認も 一番手軽に出来ると思います。 以下も参考にどうぞ。
キーワード検索 ： FC2ブログ 比較 仕様変更
スポンサーリンク
またか.. という印象ですが、FC2ブログで 2013年6月15日頃から Google のクロール数が激減し、インデックスもされにくくなっている現象が起こっているようです。
今回の現象は FC2リクエスト などでも報告されています。
Google の ウェブマスターツール で、健全性 → クロールの統計情報（最近 90 日間の Googlebot の活動）1 日あたりのクロールされたページ数 を調べると、確かに ガクンと急に少なくなっています。 それも 最低が 16ページ とか悲しい状況です。
※この記事中の ウェブマスターツールでの画像は 2013/7/1 のキャプチャですが、本日（7/2）に再度確認した時には 「ナビゲーションを新しく改良しました」 となっていて、図中の 健全性 という項目は クロール という項目に変わっていました。
クリックで画像を拡大します
ちなみに 2010年10月の時のデータ（下図）が残っていましたが、その頃は 1日平均で 436ページ のクロールがあったので、最近のクロール数（平均で 168ページ、最高でも 285ページ）が 以前よりもかなり少なくなっていたことも分かります。
過去記事 : 関連記事リスト（変数）でトップページが重くなる より 2010年10月 のクロール状況。
最近は 月に1つか2つの記事しか投稿していないブログなのですが、全体のアクセス数自体は 地味に増えてきていますし、日ごとには大きな変動もなく（記事を書いても書かなくても殆ど変化がない..）安定はしているのですが、今後はどうなっていくのでしょうか。。
ちなみに...
FC2ブログ と Google の関係には過去にも色々ありましたが、最近では 「Googleブログ検索 で site:FC2ブログのドメイン を検索しても、記事が一切ヒットしない」 なんて時期もありました。 今はこの件は 改善されていますが、関連コメント なども参考にしてみてください。 サイトマップ が自動で更新されなくなってしまった現象にもかなり悩まされました。
今回の FC2ブログが Google に殆どクロールされなくなってしまった現象、インデックスされにくい現象が、今後に悪い影響を及ぼさないといいのですが。。
追記 ： この記事ページの経過
- 2013/07/02 22:51 記事を投稿する。
- 07/03 06:00 サイトマップが自動で更新される様子はないので、手動で送信してみる。
ページのキャッシュを確認してみたが、まだキャッシュなしの状態。
- 07/04 00:30 サイトマップは 「保留」 のまま。。（こんなことは初めて）
ページのキャッシュを確認してみたが、まだキャッシュなしの状態。
Fetch as Google でページを取得させてみる → 取得ステータス が 「成功しました」 になって、インデックスに送信する というボタンが表示される → 送信 をしてみたら 「リクエスト処理中のエラーが発生しました」 と表示される。。
- 07/04 00:50 再度 インデックスに送信する を試してみる → 「リクエストが受信されました。まもなく処理されます」 となってOKに！
- 07/04 00:55 ページのキャッシュを確認してみたら、キャッシュされていた！
さすがにインデックスはまだ。。
- 07/04 12:00 Google の通常検索などでインデックスされていることを確認。
site:arinogotokuatumarite.blog19.fc2.com （site:ドメイン） で検索した ブログ検索 や ウェブ検索 では まだ記事がヒットしない。
- 07/05 16:00 site:arinogotokuatumarite.blog19.fc2.com （site:ドメイン） で検索した ブログ検索 や ウェブ検索 でも 記事がヒットするように。
サイトマップは 「保留」 のまま。（何度か 再送信 をしていますが...）
- 07/13 07:00 クロールが増えることもなく、サイトマップは 「保留」 のまま。
Fetch as Google → インデックスに送信する は成功するようで、更新した記事などを送信すれば、すぐにキャッシュにも反映。
しばらくは Fetch as Google → インデックスに送信する を利用するしかないのですかね。。 サイトマップが 保留のまま だったり、まだ不明な点が多いので もうしばらく様子を見てみようと思います。
キーワード検索 ： Google ウェブマスターツール アクセス解析
スポンサーリンク
スマートフォン用テンプレートに 文字サイズを デフォルト・大きめ・特大 などに調整できる jQuery のスクリプトを設置してみました。 クッキーを利用しているので、ページを送っても有効です。
iPad からFC2ブログを閲覧した場合、以前は パソコンからのアクセスと同じ扱いになっていましたが、2013年3月頃からは スマートフォン用テンプレート にも切り換えられるような仕様に変わっています。（※現在のデフォルトは PC用テンプレート のようで、共通URLでアクセスした場合は 毎回1度は PC用テンプレートが表示されます。）
PC用テンプレートで閲覧すると、上部に【 スマートフォン版で表示 】というリンクが 大きく表示されてしまうようになったので、仕様変更は賛否両論なようですが、どちらでも閲覧できるようになったのは便利になったと言えるのかもしれませんし、iPad などからも閲覧し易いようにしていく必要が出てきたと言えるのかもしれません。
iPad から実際に見てみると、不便に思う点がいくつかあります。 例えば
- スマホ向けテンプレで閲覧すると、ズーム（ピンチアウト）が出来ないサイトが多い。
- スマホ向けテンプレで閲覧すると、ズーム（ピンチアウト）が出来る場合でも、ズームをすると （画面幅での折り返し表示がされない為） 横スクロールが必要になるケースが多い。
1つ目は スマートフォン用テンプレートなどに maximum-scale=1.0, user-scalable=no という設定がされているケースが多いためです。 FC2ブログの公式テンプレートもそのようになっていて、私も最初そのままにしていましたが、何故ズームをさせないのか嫌がらせにしか思えないので、この設定は変更してあります。
公式テンプレ等 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no," />
↓
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
maximum-scale=3.0,
user-scalable=yes" />
本題ではないので解説は省略しますが、↓サイトなどが分かりやすく解説されています。
さらに厄介なのは
FC2のスマートフォン用広告変数 で自動で挿入されるスクリプトに
<!-- sp resize --><script type="text/javascript">(function() {var resize = function() {document.body.style.width = '320px';};if (window.addEventListener) {window.addEventListener('load', resize, false);} else if (window.attachEvent) {window.attachEvent('onload', resize);}})();</script><!-- /sp resize -->
という、表示サイズを 320px にするスクリプトが入っていることです。 なのに ズーム（ピンチアウト）できないサイトが多く、細長いまま見るしかないという。。
ちなみにこの表示サイズ変更は スタイルシートに body { width: auto !important; } を入れることで回避できます。 （なお、広告変数で表示されるスクリプトなため、このサイトを含む有料版を利用中のサイト や 広告免除サイト ではこのスクリプトは挿入されません。） 個人的には、完全にページを読み込んだ後に 表示サイズが変わるのは好きではないので、共有テンプレートにもこの設定を入れていますが、問題なく ズーム できるようにしてあれば このスクリプト（サイズ変更）も悪くはないかも。。
maximum-scale=1.0, user-scalable=no は嫌ですね。。
2つ目は スマートフォン用テンプレートの多くが1カラムで作られているため と 「自動で折り返しをしない」という iPad の仕様によるもののようです。 （※iPad を例にしましたが、ズームでは折り返しされないブラウザが殆どなようで、私の使っている WiiU や 3DS でも同様です。 ズームしても画面幅で改行をしてくれるのは Android版の Opera Mobile くらいかも...。）
取り敢えず、ズームでは改行されないブラウザがあることが分かったので、本文のフォントは大きめに...とは思っていますが、実際にはブラウザ（解像度）によって 小さく感じることは多々あると思うので、文字サイズを大きくできるスクリプトを設置しました。
文字サイズを変更できるスクリプトを FC2ブログに設置する方法
準備するもの
- jQuery 本体
Googleのサーバーから直接読み込んで使用する場合、準備は不要です。 私が使っているのは バージョン1.2.3（少し古いバージョンのもの） ですが、各自で選択してください。
※FC2ブログのスマートフォン用公式テンプレートなどでは 元々 jQuery（現在は Ver.1.3.2） が設定されていますので、入っている場合はそれを利用すればOKです。
- jquery.cookie.js (2 KB)
jquery-cookie · GitHub から入手できます。 デフォルトでは 7日間 の設定です。
※FC2ブログでは ファイル名に .(ドット) が含まれているとアップロードできないので、予め、ファイル名を jquery_cookie.js などのように変更しておいたものを利用してください。
- jquery.fontsizechange.js
Web Mugen さんのサイトで紹介されているソースをコピーして、フォントの拡大率などは必要に応じて変更し、文字コードを指定して保存します。（FC2ブログの場合 utf-8 で。ファイル名は .(ドット) を含まない jquery_fontsizechange.js などにしておきます。）
フォントの拡大率は、デフォルトでは var fontSize = [100,116,131]; という設定で、100％，116％，131％ になっていますが、私はそのまま利用しています。
1. <head> ～ </head> 部分
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blog-imgs-○○.fc2.com/○/○/○/ブログID/jquery_cookie.js"></script>
<script type="text/javascript" src="http://blog-imgs-○○.fc2.com/○/○/○/ブログID/jquery_fontsizechange.js" charset="utf-8"></script>
赤文字部分にはアップロードしたファイルのパスを入れてください。
<script src="http://static.fc2.com/js/lib/jquery.js" type="text/javascript"></script> などが入っている場合は jQuery本体は不要ですので、それより下に jquery_cookie.js と jquery_fontsizechange.js だけを入れてください。
2. サイズを変更したい部分
このサイトでは スマートフォン用テンプレートの記事ページ 「記事内容など」 のみに設定していますので、それを例にしています。 <!--permanent_area--> ～ <!--/permanent_area--> が個別記事ページで表示されるエリアなので、その中だけに入れてあります。
<!--permanent_area-->
<!--▼▼個別記事ページ▼▼-->
<ul id="fontSize">
<li class="changeBtn">デフォルト</li>
<li class="changeBtn">大きめ</li>
<li class="changeBtn">特大</li>
</ul>
<div id="changeArea">
文字サイズを変更したいエリア
（記事の内容，他）
</div><!--/id=changeArea-->
<!--▲▲個別記事ページ▲▲-->
<!--/permanent_area-->
3. スタイルシートの設定例
私の例ですので、適当に変更してください。IE以外のブラウザでは 概ね図のとおりに表示されると思います。（IEだとボーダーの位置が何故か上に付いちゃいます。。）
ul#fontSize {
list-style: none;
color: #fff;
margin-left: 0;
border-bottom: 1px dashed #999; /*IEでは何故か上にボーダーが*/
}
ul#fontSize:after {
content: "";
display: block;
clear: both;
}
ul#fontSize li {
background: #999;
padding: 2px 10px 1px;
margin-right: 6px;
float: left;
cursor: pointer;
-webkit-border-radius: 11px 11px 0 0;
border-radius: 11px 11px 0 0;
}
ul#fontSize li:hover {
background-color: #5dbec3; /*見本はピンクですがここでは水色に変えてます*/
}
ul#fontSize li.active {
background-color: #444;
border-bottom: 1px solid #222;
}
ul#fontSize li.active:hover {
background-color: #444;
}
なお、＃changeArea （文字サイズを変更したいエリア） 内に 記事タイトル，カテゴリー名，その他 が含まれる場合、スタイルシートで font-size を 設定してあるケースは多いと思いますが、%設定 にしてあるものは［大きめ］［特大］が機能しますが、px設定 にしてあるものについては そのまま固定 になります。 スマートフォン向けのテンプレートなどでは、全ての font-size を px で設定しているケースも多いので、変動させたい部分は font-sizeのパーセント表記一覧 などを参考に ％設定 に直しておく必要があります。
画像サイズはそのままで 文字だけを拡大できる というのは便利ですよね。 実際、iPad や 解像度の高いPC で見た時などは ［大きめ］ くらいが丁度よく感じる私です。。 スマートフォン用のサイトづくりは難しいですね。
参照 ： このカスタマイズをする前に読んでおくと便利かも。。
関連記事
キーワード検索 ： jQuery javascript フォント iPad スマートフォン ブラウザ
スポンサーリンク
カテゴリーの一覧（カテゴリーリスト）は どのサイトでも表示されていると思いますが、それが カテゴリー毎の画像（もしくはアイコン等）になっていたら どのような内容なのか一目で分かるので、文字だけの時よりも目立つようにできますね。
以前、コメントで似たような質問を受けたことがありますが、最近また FC2ユーザーフォーラム でトピックが上がっていたので、それにも回答し 記事に残しておくことにしました。
図は 完成イメージの一例です。
画像部分とテキスト全体をリンクにしてあります。 背景画像を使っているので、サイズ次第で アイコンのようにすることもできますし、一部のカテゴリーを非表示 にすることも簡単です。 （非表示の方法は 「CSS で見えなくする方法」 と、「FC2ブログの仕様と変数を利用し、ソース自体にそのカテゴリーを載せないようにする方法」 があります。）
色々応用できると思いますが、図を例にして 方法を紹介します。
FC2ブログ カテゴリーリストに それぞれの画像を入れる方法
1. プラグイン「カテゴリー」 の 【 HTMLの編集 】
環境設定： プラグインの設定 で 該当するプラグイン の 【 詳細 】 をクリック → プラグインの改造 【 HTMLの編集 】 をクリックで 表示される内容を書き換えます。 プラグインを使わず、テンプレートに直接記入してもOK です。
<ul class="catlist">
<!--category-->
<li class="
cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category-->
</ul>
2. スタイルシートの設定
環境設定： テンプレートの設定 で スタイルシートに以下を追加します。 （テスト中は 複製のテンプレートなどで作業をすると良いと思います。）
/* 画像の大きさが （幅200px） 高さ38px の場合 */
ul.catlist {
list-style:none;
margin:auto 0;
padding:0;
font-size:12px;
}
.catlist li a {
display:block;
margin:0 2px 12px 2px;
padding:40px 2px 0 2px;
color:#999; /* リンクの色を他と変える必要がなければ不要 */
}
.cat24 { background:url(A画像のパス) no-repeat center top; } /* カテゴリー名メモ */
.cat0 { background:url(http://blog-imgs-53.fc2.com/a/r/i/arinogotokuatumarite/test_cat_img0.png) no-repeat center top; } /* テスト用 */
.cat19 { background:url(C画像のパス) no-repeat center top; } /* カテゴリー名メモ */
.cat20 { background:url(D画像のパス) no-repeat center top; } /* カテゴリー名メモ */
/* 以下同様 */
/* 非表示にしたいカテゴリーがある場合 */
.cat31 { display:none; }
応用： 親子カテゴリーの場合
親子カテゴリーを利用している場合で、親と子に見た目の変化をつけたい場合には 以下のようなソースを利用すると良いと思います。 この場合にも 非表示カテゴリー が利用可能です。
<ul class="catlist">
<!--category-->
<!--category_parent-->
<li class="
c_oya cat<%category_no>"><b><a href="<%category_link>" title="親カテゴリー: <%category_name> へ [ total <%category_count> 件 ]"><%category_name></a></b></li>
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> -<%category_count></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> -<%category_count></a></li>
<!--/category_sub_end-->
<!--/category-->
</ul>
- 親カテゴリー部分のスタイルに c_oya を追加してある以外は 基本形と同じです。
- 必要に応じて li.c_oya { 親カテゴリーの時のスタイル } を追加してください。
この記事では スタイルシートで各カテゴリーの背景画像を設定する方法 を紹介しましたが、背景ではなく 直接画像タグ（<img>）を使うことも可能です。 ここで紹介していないものについては、フォーラムのコメントなどを参考にしてみてください。
キーワード検索 ： 画像 カテゴリー FC2ブログ プラグイン 変数
スポンサーリンク
![【送料無料】0さいー4さい こどもずかん (4冊セット)英語つき [よしだじゅんこ]](http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d80x80)
共有テンプレート PC用：3作， スマートフォン用：3作， 携帯用：2作 を公開しています。
