FC2ブログテンプレートの選び方

FC2ブログのあれこれ

2019/03/21

2022/10/03 0

vanillaice (Akira)

初心者向け Yahoo!引っ越し Validation

テンプレート変更の仕方や好みのテンプレートの探し方、という意味ではありません。どんなテンプレートを選んだら良いか、という記事です。

* Yahoo!よりお引越しされた方からの質問など含め立て続けに記事をUPします。ご容赦ください。

別に好きなものを選んで使えば良いだけの話なんですが、後々になって「こうしておけば良かった…」というのはよく起こり得るものです。後の後悔を減らすためのポイントについてです。

初心者向け記事であり、選択肢の少ない(自由度の低い)ブログサービスから移転した方向け記事です。

HTML5テンプレートを選ぶ

web上に記録を残すには html というマークアップ言語が必要です。
(htmlはマークアップ言語ではなくコンテナ言語だ、といった議論はここでは行いません, 意味のわからない方はスルーで)
htmlにはバージョンが存在します。その最新バージョンが 5 で、2014年に正式勧告を済ませています。勧告というのは web標準として制定されるという意味です。html5が現在のweb標準ですから、それ以前のバージョンhtml4などは標準・水準を満たさないことになります。

簡単に例えれば「型落ちの車を買うか、最新か」「プレステ4を買うかプレステ3を買うか」という感じです。そりゃもうできることなら最新のものを手にしたいですよね。

html5だからといって SEO(検索エンジン最適化) で有利に働くわけではありません。例えばhtml5のサイトはhtml4のサイトより検索結果の掲載順位が高くなる、といったことはありません。SEO以外でhtml5を勧める理由は以下の通りです。

古いバージョンはそれ以上の進化は見込めない
html4から大規模な変更・追加が行われている
html対応の技術進歩

古いバージョンは進化しない

web標準を外された旧バージョンのhtmlがそれ以上進化することはありません。「開発終了」とほぼ同じ意味を持ちます。車でも電化製品でもメーカーが開発を打ち切った商品の購入はなるべく避けようとしますよね。長期的な保証という意味でも今敢えてhtml4を選択するメリットは無いと思います。

アプリケーション開発に於いても、例えばゲーム会社は新作をプレステ2向けに制作する、なんてことはまずしません。最新機種に照準を併せてリリースするはずです。htmlでも同じことです。これから世に出る便利なアプリケーションはほぼ間違いなくhtml5を想定して製作されます。

大規模な変更・追加

「長期的保証」という表現を出しました。html4から5に移行するにあたり、多くの廃止や定義の修正・変更などが行われています。

廃止要素

<center>
  <div>あいうえお</div>
</center>

廃止属性

<div align="center">あいうえお</div>

<div style="margin: auto; text-align: center;">あいうえお</div>

緑の部位は廃止されたタグや属性です。廃止されたということはブラウザがサポートをいつ打ち切ってもおかしくないとういうことです。センタリングしたつもりが中央に寄らなかったり、今後視覚的に問題が生じるかもしれません。何故なら「廃止されたもの = もう使えないもの, もう使ってはいけないもの」であり、廃止対象となった要素や属性は見た目を操作するものがほとんどだからです。

旧式の書き方しか知らない、という方はもうそろそろ現時点で「標準・最新」とされる内容に修正した方が良いですね。それにはまず器がhtml5対応であることが重要です。器というのはページ全体を構成する入れ物のことであり、つまりはテンプレートのことです。プレステ3にプレステ4のソフトを突っ込んでも動かせませんから、まずプレステ4を用意しなさい、ということです。テンプレートそれ自体のバージョンが 4(あるいはそれ以下) であるのか 5 であるのかは重要であり確認必須項目です。

テンプレートのhtmlバージョン確認の仕方

まずテンプレートの配布ページに趣き、対象テンプレートのサムネイル画像あるいは「プレビュー」をクリックして画面を表示させます。自身のブログ内容が反映された状態でテンプレートデザインを確認することができます。

その画面で右クリックページのソースを表示またはそれに準ずる文言の項目をクリック。

別タブでhtmlソースが見られるようになります。一番最初の行に注目

ここが

<!DOCTYPE html>

となっていればhtml5です。それ以外のものはhtml5以前のバージョンか、html以外(xhtmlなど)の指定です。この部位を document type declaration (DTD, ドキュメントタイプ宣言, ドキュメント宣言)と言い、文書がどの言語で書かれているかを決定する重要部位です。

比較的リリース時期の新しいテンプレートはhtml5になっているはずですが絶対ではありません。自身の設定テンプレートもこの機会に是非確認を。

大手ブログサービスを利用するユーザーのほとんどが既にhtml5へ移行済みです。何故なら自由度が低いことの引き換えに、ある程度の水準を運営側でキープできるからです。ですがFC2ブログの場合は自由度が高い弊害として、見た目だけで旧式テンプレートを選んでしまうユーザーがかなりまだ多いんですね。この点についてはユーザーが賢い選択をしなければいけません。

デザインの前にレイアウトで選ぶ

もちろん「デザイン(装飾性)」も大事なんですが、それは二の次です。まずは自身の運営方針に見合う「レイアウト(段組み)」を決めてください。選択の例やヒントは以下の通り。

補足情報が多い場合は3カラム

「補足情報」とはFC2ブログで言うと「プラグイン」がそうですね。あとはアフィリエイト広告や外部ウィジェットなど。メインになる記事内容以外の表示内容が多い場合には3カラムを選ぶと良いでしょう。

万人受けする2カラム

主流なのが2カラムです。サイドメニュー(補足情報用カラム)が右か左かは好みです。FC2ブログはカラムの入れ替えを「個人設定で一発変更」といったことはできません。理由は蛇足でしょうが、Yahoo!やAmebaのように「運営が準備したテンプレートしか使えない」というルールではないからです。特に「共有テンプレート」といってユーザーが公益心で提供するテンプレートも多数あります。そのhtml, CSS内容は運営陣の管理外であり、個人設定操作プログラムに含めることなど不可能です。それは「背景の画像や色変更」「フォントのサイズや色変更」であっても同じです。この事情を「難しい」「不便」と感じる方もいらっしゃいますが、それは自由度との引き換えですから文句を言ってはいけない(笑)

話が逸れましたが2カラムは最も無難な選択と言えます。

スピード対策・モバイルファースト型の1カラム

ちょっと上級者向けの説明になります。
ローディングスピードの対策をする場合はシングルカラムが最適です。htmlのレンダリング(描画)はhtmlの記述順に行われます。複数カラムの場合はメインコンテンツを読み終わってからサイドの描画が始まりますのでタイムラグが生じます。シングルカラムを選ぶことでファーストビュー(above the fold)に集中することができ、CSSの最適化なども比較的容易です。

また、スマートフォンでは基本的にどのテンプレートでもシングルカラムになるわけですから、「パソコン」「スマホ」の別を意識する場面も減らせるのではないかと思います。例えレスポンシブデザインであってもデバイスの別は無視できません。全デバイスでシングルならばはその手間が最小限で済みます。

レイアウトまとめ

「ヘッダー画像が綺麗」「色合いが綺麗」「文字が大きくて読みやすい」などは後からどうにでもなるんです。これらは全てダウンロード後に例え初心者であっても指南さえあれば容易に変更可能です。ですから選択時の第一優先事項にするべきではありません。

装飾的要素は容易に変更できますが、カラムの数の増減や位置の変更、つまり段組みの変更となるとそう簡単には行きません。自身の運営スタイルに合わせてまずこちらを最優先で決めておくと良いでしょう。迷う場合や自分でも方針がよくわからない、という場合には無難に2カラムを選ぶと良いと思います。

初心者は共有テンプレートを選ぶ

初心者の方ほど何故か公式テンプレートから選びがちなんですが、公式テンプレートの管理は運営スタッフが行っており、カスタマイズの質問には一切答えてくれません。
上級者は自分でなんでもできますので公式でも共有でもなんでも好きなものを選べば良いんですが、なにかしらの指南や指南役が居なければできないという初心者を自覚する方は共有テンプレートで活動している製作者の作品を選ぶと良いですね。

製作者によっては「カスタマイズの質問は受け付けません」という方も居ますし、既にFC2ブログから離れてしまった方も。その場合はどうにもなりません(笑)
とはいえ質問に答えてくれる作者さんも居ますので、どうにも自力で解決できない場合は思い切って質問してみるというのも一つの方法です。その際には相手方の設けるルールに沿った質問の仕方をするよう心がけてください。

共有テンプレート作者は FC2から何の報酬も受け取っていません。完全無償奉仕です。ですからルールぐらいは守ってくださいね。これマジでお願いします ^^;

また、当然ですが共有テンプレートのカスタマイズに関する質問を運営の問い合わせメールで尋ねるのもお控えくださいね。スタッフさんのお仕事の邪魔をされませんよう(笑)

全デバイス思考の方はレスポンシブテンプレートを選ぶ

自分が記事をパソコンで書いていると、どうしてもパソコンユーザーのことしか気にかけなくなってしまいます。ですが実際には今やパソコンからのアクセスよりもスマートフォンからのアクセスの方が多いと言われています。それを受けての MFI (モバイルファーストインデックス) です。

パソコンアクセスよりもスマートフォンのそれの方が重要なので、「検索結果はスマートフォンの方を最重要とみなします」というGoogleの施策です。既にローンチ(開始)されています。

パソコンのブラウザで自分のブログを開き、マウスで少しづつ横幅を狭くしてみてください。どこかでメインカラムとサイドカラムが重なってしまいますか？文字や画像がカラムからはみ出しますか？もしかしたらタブレットユーザーはその状態を見せられているかもしれません。

タブレットユーザーさんを大事にするならばレスポンシブデザイン一択です。タブレットユーザーでなくとも、「小さめのパソコンで閲覧している人が居るかもしれない」と想定してみてください。あなたのパソコンは横幅が1500pxあるかもしれません。でも他の方は？

パソコンの画面サイズやデバイスの違いなど、「考えるのが面倒・思考難易度が高い」と思われましたら素直にレスポンシブデザインを選んでください。パソコンでもタブレットでもスマホでも画面サイズに合わせて柔軟にレイアウトが組み変わります。

アクセス解析やカウンターを設置されましたか？それらを記載するコードはちゃんとスマートフォン版のhtml にも記載しましたか？パソコン版のテンプレートとスマートフォン版テンプレート、それぞれのhtml, CSSなどは独立していますから連動はしません。アクセス解析をパソコン版だけに記載したのですか？スマホ版にも記載しなければスマートフォンからのアクセスをカウントできませんよ。

二回も同じ作業をするのは煩わしい？意味がわからない？そんな方は素直にレスポンシブデザインを選んでください。一度の作業で全デバイスに対応します。

あなたのブログのパソコンでの見た目とスマホでの見た目が全然違って違和感や戸惑いがあるのですか？そんな方は素直にレスポンシブデザインを選んでください。

レスポンシブテンプレートを設定する際の注意点は以下のリンク先を参照のこと。

デザインにこだわりの無い人は爆速テンプレートをおすすめ

公式テンプレートの最新作です。

ページ表示スピードがめっちゃ速い
自ブログ内のページ遷移スピードがめっちゃ速い
無料会員であっても広告表示が免除

カスタマイズなど一切できませんし、無限スクロールなので過去記事へのアクセスが困難など難点もいくつかありますが、とにかく表示が速くてストレスフリーです。レスポンシブですしね。basic_whiteより全然良いと思うよ。
とにかく何も考えたくない、個性とかどうでも良い、アフィリエイトとか全然興味ない、という方は爆速テンプレートを是非お試しください。

SSL設定を有効化する

テンプレートやレイアウト・デザインとはちょっと離れます。
Yahoo!ブログはどのブログサービスよりも早くSSL化しています(Bloggerよりは後かもしれない)
ところが SSL化の意味をわかっていない方が非常に多いようです。ここでは細かい説明は省きます。簡単に言えばブログアドレスの最初が http ではなく https になっていた(いる)はずなのでご確認ください。

FC2ブログもSSL対応は始まっていますが、今の所ユーザーの任意設定になっています。Yahoo!やAmebaと違い、FC2ブログやはてなブログのようにテンプレートカスタマイズの自由度が高いサービス・ユーザー自己責任度が高いサービスは運営がSSLを強行することはできません。それ故「ユーザー任意設定」として切り替えの猶予期間を設けています。FC2ブログでもいずれ「全ブログhttps化」を予定している旨のアナウンスが出されています。

今後のブログ運営に於いてSSL対応はとても重要です。そしてYahoo!ブロガーさんは既にhttpsで運営していたはずですから、FC2に引っ越してhttpに後退させる必要はありません。個人設定で自主的に有効化してください。
SSL設定「301リダイレクト」

Comments 0

コメントに関する注意事項

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

管理者にだけ表示を許可する