FC2ブログの歩き方ブログ

---

「スポンサーサイト」を消したい場合は、管理画面で簡単に設定ができます。



上記の図のように、［環境設定の変更］または［各種設定］＞［ブログの設定］＞［アカマイの設定］を開き、　高速表示設定（アカマイ利用設定）を「利用しない＆広告を表示しない」として更新すれば、以後、広告は表示されなくなります。

設定後も表示されるという不具合がありました（アカマイの設定で「利用しない＆広告を表示しない」にしても広告が表示されたまま）が、現在はメニュー共々改善されているようです。


今回の広告表示については、次の記事に譲ります。

---

（１）ブログを見る人の環境は一律ではありません。
あなたのブログを見る人がすべてあなたと同じようにウインドウを広げて見る訳ではありません。したがって、大きな数値で横幅を固定してしまうと、小さめのウインドウで見る人には全体が表示されず不便になります。
たとえば、こんな記事もあります（今急いで拾って来たのでもっと適切な例があるかもしれません）。
akiyan.com：mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由

かつてはウェブサイトの表示は800ピクセルまで、と言われていました。今は、大型ディスプレイの普及もあり、もっと幅広い表示ができる環境に居る人は少なくありませんが、それでも、広過ぎる画面が好かれることはありません。

ひとつには、たとえ大型ディスプレイを利用していたとしても、ウェブを最大化して見るとは限らないこと。個人的な話で恐縮ですが、私のディスプレイは1280まで表示できますがウェブはほぼその半分くらいで閲覧します。広くしても３分の２くらいです。あまり大きな幅を前提にしてあるサイトは読みづらく感じます。
もうひとつは、人間の能力として、読みやすい一行の文字数というものがあること。こんな記事も読んでみてください。
えっけん：「文字数」について書かれた記事

以上から、広くする場合においても、ある程度の幅にしておいたほうが良いと言えます。
あるいは、ウェブの特徴として、「幅を固定しない」という考えもあります。閲覧者が開いたウインドウの幅に合わせてサイトの幅が決まるというもの。これを「リキッドデザイン」と呼びます。
いい例が公式テンプレートにあるのでご覧になってみてください。
mushroom
mushroom_liquid
同じデザインですが、ウインドウの幅を変えてみると、違いが分かっていただけると思います。

（２）トップ画像の幅との整合性を考えましょう
上記きのこテンプレートを見ていただいてもお分かりの通り、リキッドデザインの場合は、連続させて不自然のないような画像を使ったほうが自然です。

ブログの幅を広くする場合、トップの画像をどうするかも考える必要があります。

広い画像を用意する：ただし前述したように、広過ぎると全体を見てもらえない・見づらく感じられる場合があります。
連続して不自然のない画像を用意する：幅が広くても、リキッドデザインでも問題はありません。
画像を使用しない：同じく、幅が広くても、リキッドデザインでも問題はありません。

---

おそらく、FC2ブログの多言語化に伴うものですだと思われます。［追記08/11/21　8:30：公式マニュアルの中にありました。］

chic_eleganceの中の「%template～」で始まる変数を拾ってみました。

　

変数	対応日本語
<%template_prevpage>	<%prevpage_url>の記事タイトル
<%template_nextpage>	<!--index_area-->～<!--/index_area-->内：次のページ
	<!--index_area-->～<!--/index_area--内以外：<%nextpage_url>の記事タイトル
<%template_home>	ホーム
<%template_extend>	続きを読む
<%template_theme>	テーマ
<%template_genre>	ジャンル
TAG（英文字のため変数なし）	TAG
<%template_comment>	コメント
<%template_go_top>	このページのトップへ
<%template_edit_comment>	コメントの編集
<%template_edit>	編集
<%template_post_comment>	コメントの投稿
<%template_name>	名前
<%template_title>	タイトル
<%template_address>	メールアドレス
URI（英文字のため変数なし）	URI
<%template_body>	本文
<%template_comment_js>	Font & Icon
<%template_password>	パスワード
<%template_private>	非公開コメント
<%template_private_check>	管理者にだけ表示を許可する
<%template_send>	送信
<%template_edit_comment>	編集
<%template_delete>	削除
<%template_trackback>	トラックバック
<%template_trackback_this>	この記事にトラックバックする（FC2ブログユーザー）

運営側にとっては、これで複数言語のテンプレート管理が一括で行えるので便利ですが、ユーザには、変数が増えて敷居が高くなることでしょう。実際、別のシステムでこのように定数言語も変数化しているテンプレートのカスタマイズを行ったことがありますが、変数がしっかりと頭に入っていないと、HTMLを把握するのはとても難しくなります。

もしこのデメリットを上回るメリットがあるとしたら、「多言語化に伴い、それぞれの言語のユーザによる共有テンプレートをクロスシステムで利用できるようにする」ことでしょう。日本語ブログ、英語ブログ、中国語ブログのユーザの作成するテンプレートどれもを３カ国語のブログのユーザが共有できるとしたら、ユーザにとっての言語定数の変数化のメリットが見えてきます。

あるいは、「個々に言語定数を手元で管理できる」のであれば、テンプレートを変更しても、常に項目を自分の好きな言葉で表現できるため、それはそれでメリットになるでしょう。一般的にはテンプレートはそう頻繁に変えるものでもなく、また項目にそうバリエーションがある訳でもないので、とても魅力的という訳でもありません。

いずれにしろ、言語定数が変数になることでHTMLソースがビギナーにはますます読みづらくなったという事実は動かず、現状では、ユーザが享受できるメリットは見えず、運営側のメリットのみが見える格好となっています。これからに期待しても良いものでしょうか？

ところで、これも、公式にはまったくアナウンスされていません。重要なことだと思うのですが。

［追記08/11/21 8:30：］公式マニュアルに記載がありました。ご指摘くださった「多言語変数」さん、ありがとうございました。「多言語変数」さんによれば、１ヶ月ほど前に出ていたそうです。「更新履歴」に出してよ～＞FC2ブログ。とまれ、「多言語変数」さん感謝です。

FC2ブログには、公式マニュアルのテンプレート用　変数一覧ページ、管理画面のテンプレート編集のページの「テンプレート中に使える変数一覧」のリンクの下に、リンクを加えていただきたい、と要望しました。

---

▼プラグイン説明の入力有無を判定して、表示/非表示を振り分けるフラグ

• <!--plugin_first_description--> ～ <!--/plugin_first_description-->
• <!--plugin_first_description2--> ～ <!--/plugin_first_description2-->
• <!--plugin_second_description--> ～ <!--/plugin_second_description-->
• <!--plugin_second_description2--> ～ <!--/plugin_second_description2-->
• <!--plugin_third_description--> ～ <!--/plugin_third_description-->
• <!--plugin_third_description2--> ～ <!--/plugin_third_description2-->

カテゴリ1～3内の各プラグインで、説明（description,description2）が入力されている場合に表示されるブロック

ああ、これ、気になっていたんですよ。プラグインの説明欄って、必ずしも埋まっているわけではない。なのに、テンプレート上にはタグが存在するので、空の<p>～</p>ができてしまう。これはあまり座りがよろしくない。

このフラグによって、<%plugin_first_description>や<%plugin_first_description2>が空だった場合、<p style="text-align:<%plugin_first_talign>"></p>や<p style="text-align:<%plugin_first_talign>"></p>といったタグが出力されなくなる、という訳ですね。

ソースがすっきりするので歓迎ですが、公式にアナウンスされていないのはなぜでしょう？_※

---

_※　共有テンプレート「context」ではこの新しいフラグが使われています。他にも、アンテナの感度の高いテンプレーターさんたちは、もう使っているんでしょうね。

---

お節介にもひよこさんのスタイルシートに説明を加えるとすると、

バトンのタイトル

文字の太さ：太字

答え

余白：上0px　右0px　下5px　左0px

区切り線：幅1px　点線　色は薄いグレー

この説明とひよこさんのスタイルシートと、スタイルシート解説サイト（それぞれの項目にリンクを付けました。必要に応じて「右クリック」で別ウインドウで開きます）を併せ見ていただければ、スタイルシートをいじる入口になるかもしれません。

---

［追記：2008/11/19 3:20］レイアウト崩れの指摘については修正されたため、文中より削除しました。［/追記］

ScrollAuthなんて勝手に名前をつけてみたスクリプトを適用したページに外部からアクセスした画面。クリックで拡大表示

<head>～</head>に以下のスクリプトを置く。

1. <script language="JavaScript">
2. <!--
3. if(document.referrer.indexOf("<%blog_id>.blog<%server_no>.fc2.com")!=-1){
4. document.write("☆内部リンクから来た人用メッセージ（ここは でも良さそうですね）。");
5. }else{
6. document.write("<div style='margin:200px;'>★外部リンクから来た人用メッセージ１行目<br />");
7. document.write("★続けて読んでくださる方は<a href='#left '>こちら</a></div>");
8. }
9. // -->
10. </script>
11. <noscript>
12. <div style='margin:200px;'>★外部リンクから来た人用メッセージ（スクリプトオフの場合）
続けて読んでくださる方は<a href='#left '>こちら</a></div>"
13. </noscript>

このスクリプト、「美麗なるTOP画」を入れるなら★のところに<img>タグを入れればいいのだけれど、普段のテンプレートのまま使いたい人も居るかも、ということで、上記スクリプトを<head>～</head>からちょっと移動してみました。

1. </div><!-- /header -->
3. <script language="JavaScript">
4. <!--
5. if(document.referrer.indexOf("<%blog_id>.blog<%server_no>.fc2.com")!=-1){
6. document.write("<div style='margin-left:20px;'>☆内部リンクから来た人用メッセージ</div>");
7. }else{
8. document.write("<div style='margin:200px;'>★外部リンクから来た人用メッセージ１行目<br />");
9. document.write("続けて読んでくださる方は<a href='#left '>こちら</a></div>"");
10. }
11. // -->
12. </script>
13. <noscript>
14. <div style='margin:200px;'>★外部リンクから来た人用メッセージ（スクリプトオフの場合）
続けて読んでくださる方は<a href='#left '>こちら</a></div>"
15. </noscript>
17. <div id="left" class="main">

このスクリプトだと、こんな感じ。クリックで拡大表示

内部リンクから。

これだとトップページだけでなく、すべてのページで適用できるので、こちらが良い、というケースもあるでしょうね。麻生さん、素敵な示唆を頂戴しました。Enterページ作成を考えている方へのもうひとつの選択肢として、掲載させていただきました。

［追記：2008/11/18 23:30］
ブラウザのブックマークからアクセスした場合、「外部」扱いになっちゃうので毎回表示されちゃうなぁ(^_^;

---

独自のEnterページを設置する

Enterページというのは、トップページに配置したいページですね。したがって、<!--index_area-->～<!--/index_area-->、<!--not_index_area-->～<!--/not_index_area-->というエリア（モード）変数を利用します。

エリア（モード）変数というのは、表示モードを切り分ける際に使います。ちなみに、このエリア（モード）変数、公式マニュアルではこのように記されています（テンプレートのカスタマイズの際には、公式マニュアルのテンプレート用変数一覧は必見です）。

変数	意味
<!--index_area--> ～ <!--/index_area-->	トップページ(インデックスページ、?mode 等のクエリが何も付かないURL)のみで表示されるブロック
<!--not_index_area--> ～ <!--/not_index_area-->	トップページ(インデックスページ、?mode 等のクエリが何も付かないURL)以外で表示されるブロック どの場所でも有効

つまり、トップページに表示したいものは、テンプレート上で<!--index_area-->～ <!--/index_area-->で囲み、表示したくないものは、<!--not_index_area-->～ <!--/not_index_area-->で囲む、これだけです。

ただ、「これだけ」と書きましたが、テンプレートのカスタマイズに慣れておられない方々は、テンプレートの「どこ」を囲んでいいのかが分からないと思います。

ここで、２つほど、公式テンプレートをサンプルに、実際のソースを提示してみますが、その前に、この方法のメリット・デメリットをおさらいしておきましょう。

ちょっと手間が必要です

テンプレートのHTMLを読んで、編集しなければなりません。

すべての訪問者にEnterページを読んでもらうことはできません

前述の通り、ブログは、どのページからも見られることができます。直接個別ページ（記事）を開くこともあります。すべての訪問者がEnterページを経由しているという思い込みは避けねばなりません。

デザインは独自のものを適用できます

ブログデザインのままにできますので、自分のブログの雰囲気を壊すことはありません。

検索エンジンにはそのままインデックスされます

Enterページもブログのページの１ページに過ぎませんので、検索エンジンはどのページもまんべんなくクロールします。検索サイトには個別記事も掲載されます。

「プライベートモードの認証ページをEnterページとする」方法とメリット・デメリットが正反対になっています。

公式テンプレートdefaultにEnterページを設置

htmlの該当部分に太字部分を追加。

1. <%introduction></p>

2.  </div>
3.  
4. <!--index_area-->
5. 　<div id="top">
6. 　　<p id="topmsg">
7. 　　　（メッセージ文言。改行が必要な場合は<br />で改行）
8. 　　</p>
9. 　　<p id="enter">
10. 　　　　　<a href="<%url>page-0.html ">Enter</a>
11. 　　</p>
12. 　</div>
13. <!--/index_area-->
14. <!--not_index_area-->
15. 　<div id="left" class="column">
16. （中略）
17. 　　<!--/plugin_second-->
18. 　<!--/plugin-->
19. <!--/not_index_area-->
20.  
21.    <div id="footer">

スタイルシートに以下を追加。

1. #top{
2. width:400px;/*Enterブロックの幅はの数値は適宜*/
3. margin-left:auto;/*中央寄せのためのタグ*/
4. margin-right:auto;/*中央寄せのためのタグ*/
5. border:10px #ffa500 ridge;/*枠はお好みで。枠の幅、色、スタイルを設定*/
6. padding:2em;/*ブロックの内側の余白（枠とコンテンツの間の余白）*/
7. }
8. #enter{
9. font-size:24px;
10. }/*Enterの文字サイズ。変更の必要なければ#enterからここまで不要*/

このカスタマイズを施したdefaultのトップページは、こんな感じです。

カスタマイズ後のトップページにアクセス

公式テンプレートchic_eleganceにEnterページを設置

htmlの該当部分に太字部分を追加。

1. </div><!-- /header -->
3. <!--index_area-->
4. 　<div id="top">
5. 　　<p id="topmsg">
6. 　　　（メッセージ文言。改行が必要な場合は<br />で改行）
7. 　　</p>
8. 　　<p id="enter">
9. 　　　　　<a href="<%url>page-0.html ">Enter</a>
10. 　　</p>
11. 　</div>
12. <!--/index_area-->
13. <!--not_index_area-->
14. <div id="left" class="main">
15. （中略）
16. </div><!-- /right -->
18. <!--/not_index_area-->
21. <div id="footer"><!-- footer -->

こちらは右上に画像が配置されているため、スタイルシートにカスタマイズしなくても、デフォルト（初期設定）の左寄せでいい感じだと思いますが、いかがでしょう？

カスタマイズ後のトップページにアクセス

「私のお気に入りテンプレート」でEnterページを作りたい

ここまで、２つの公式テンプレートでのカスタマイズを載せましたが、これを読んでくださっている方は、今お使いのお気に入りの公式あるいは共有テンプレートでのカスタマイズを望む方が大半と推察します。「今のテンプレートをカスタマイズする手がかりを得るには」についても書く機会を設けたいと思います。

参考リンク

• 2u WebDesign.com：エンターページ（扉ページ）
• ホームページ工場計画：エンターページはいらない
• 二次創作同人娘のためのアクセスアップ講座：enterページは必要？ 同人サイトでのenterページについて

---

公式テンプレートdefaultでトップページにカテゴリのみを置くカスタマイズ

htmlの該当部分に太字部分を追加。

1. <%introduction></p>

2.  </div>
3.  
4. <!--index_area-->
5. 　<div id="top">
6. 　　<p id="topmsg">
7. 　　　（メッセージ文言。改行が必要な場合は<br />で改行）
8. 　　</p>
9. 　　<h3>このブログのカテゴリ</h3>
10. 　　<ul>
11. 　　　<!--category-->
12. 　　　　<li id="c<%category_no>">
13. 　　　　　<a href="./blog-category-<%category_no>.html"><%category_name></a>
14.  　　　　</li>
15. 　　　<!--/category-->
16. 　　 </ul>
17. 　</div>
18. <!--/index_area-->
19. <!--not_index_area-->
20. 　<div id="left" class="column">
21. （中略）
22. 　　<!--/plugin_second-->
23. 　<!--/plugin-->
24. <!--/not_index_area-->
25.  
26.    <div id="footer">

スタイルシートに以下を追加。

1. #top{
2. width:400px;
3. margin-left:auto;
4. margin-right:auto;
5. padding:2em;
6. border:10px #ffa500 ridge;/*枠はお好みで。*/
7. }

一部カテゴリを表示したい場合

すべてのカテゴリではなく、一部のカテゴリを表示したいときもあります。そのときは、<ul>～</ul>の部分を以下のようにします。タイトル部分（<h3>このブログのカテゴリ</h3>）も「<h3>おすすめカテゴリ</h3>」などにすると良いでしょう。）

1. <ul>
2. 　<li id="c［カテゴリ番号］">
3. 　　<a href="./blog-category-［カテゴリ番号］.html">［カテゴリ名］</a>
4. 　</li>
5. 　<li id="c［カテゴリ番号］">
6. 　　<a href="./blog-category-［カテゴリ番号］.html">［カテゴリ名］</a>
7. 　</li>……
8. </ul>

<li id="c［カテゴリ番号］">～</li>は手書きです_※1。カテゴリ番号とカテゴリ名は表示したいものを入力します。

カテゴリ番号の見方

ブログ上にて、カテゴリをクリック。ブラウザのアドレスバーに表示される

ブログアドレスblog-category-[xx].html

[xx]に入る数字がカテゴリ番号です。

このブログだと、「バックアップとろうよ！」をクリックするとblog-category-12.htmlが表示されます。つまり、カテゴリ名「バックアップとろうよ！」のカテゴリ番号は「12」となります。

トップページに最新の記事へのリンクを表示する

最新の記事を表示したトップページ

トップページに最新の記事を表示したいときは、<ul>～</ul>の部分を以下のようにします。タイトル部分（<h3>このブログのカテゴリ</h3>）も「<h3>最新の記事</h3>」にしましょう。）

1. <ul>
2. <!--recent-->
3. <li>
4. <a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
5. </li>
6. <!--/recent-->
7. </ul>

トップページに特定の記事へのリンクを表示する

特定の記事へのリンクを表示する際は、手書きです。

1. <ul>
2. 　<li id="e［記事番号］">;
3. 　　<a href="./blog-entry-［記事番号］.html">［記事タイトル］</a>;
4. 　</li>
5. 　<li id="e［記事番号］">;
6. 　　<a href="./blog-entry-［記事番号］.html">［記事タイトル］</a>;
7. 　</li>……
8. </ul>

トップページに特定の記事へのリンクを配置する

特定の記事へのリンクを配置したトップページ

たとえばブログの説明やプロフィールなど、必ず最初に読んでほしいページがある場合、このような構成にすることもできます。

ただし、訪問者は必ずしもトップページから見に来るわけではありません。そのことを認識しておく必要があります。

1. <p id="enter">
2. 　　　<a href="./blog-entry-X.html">見せたい記事のタイトル</a>
3. </p>

Xには、見せたい記事の番号を入れます。記事の番号は、「記事の編集」画面で確認するのが最も簡単です。

トップページに「Enter」ボタンを配置する

「Enter」ボタンを配置したトップページ

Enterページを作りたいをご覧ください。

トップページにプラグインカテゴリを配置する

もうお気づきでしょうが、トップページにプラグインカテゴリを置いて、トップページの内容を管理画面で管理することも可能です。

プラグインカテゴリ３を表示

「最新の記事を表示したトップページ」と見かけは同じですが、これは「プラグインカテゴリ３に最新の記事プラグインのみを置いた状態」です。もちろん、プラグインカテゴリ３に複数のプラグインを置くこともできますし、プラグインカテゴリ１、２、３すべてを置くこともできます。

ここではプラグインカテゴリ３を置く場合について書きます。<ul>～&lt/ul>の部分を、以下と差し替えます。

1. <!--plugin-->
2. 　        <!--plugin_third-->
3. 　　　　<h3  id="p-<%plugin_third_tag>"><%plugin_third_title></h3>
4. 　　　　　<!--plugin_third_description-->
5. 　　　　　　<p style="text-align:<%plugin_third_ialign>"><%plugin_third_description></p>
6. 　　　　　<!--/plugin_third_description-->
7. 　　　　　<%plugin_third_content>
8. 　　　　　<!--plugin_third_description2-->
9. 　　　　　　<p style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></p>
10. 　　　　　<!--/plugin_third_description2-->
11.     　    <!--/plugin_third-->
12.         <!--/plugin-->

実際にはテンプレート上のプラグインカテゴリ３の部分（<--plugin_third-->～ <!--/plugin_third-->）を移動させると簡単です。ただ、その際に、「<--plugin_third-->～ <!--/plugin_third-->」を新たに「<--plugin-->～ <!--/plugin-->」で囲むことを忘れないでください。

注意（あらかじめ知っておきたいこと）

• <!--index_area-->～<!--/index_area-->で囲んだ部分は、トップページのみで表示されます。
• <!--not_index_area-->～<!--/not_index_area-->で囲んだ部分は、トップページ以外で表示されます。
• 上記タグは必ず対になります。どちらかが欠けると、ブログが真っ白になります。その際は、慌てずに、元のテンプレートに一旦戻して（復元できるように必ず「複製をしておきます」）、もう一度手順を踏みましょう。データ（ブログの記事）はなくなってはいませんから、落ち着いて作業を試みてください。
• この記事は公式テンプレートdefaultのソースを元に解説しています。別のテンプレートではHTMLが異なることもあります。その際は、FC2ブログテンプレート変数一覧を見て、変数を頼りに「どこに何が書かれているか」を理解しながら進めてください。