あなたの興味を広げる話題を。

新潟県 中子の桜©Koichi_Hayakawa(Licensed under CC BY 4.0

【FC2ブログテンプレートの選び方】 ゆうらりHappySmile 変遷の歴史

2019年05月22日
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など 0

ブロガーのMです。前回のブログ更新で、2013年7月9日にFC2ブログを書きはじめてから9,500記事を達成しました。

年数に換算してみると、9,500記事を書くのに費やしたのは、5年10ヶ月13日。また、1日あたりのブログ更新頻度は約4.43記事でした。

このような過程のなかで、FC2ブロガーとしてのボクがどのテンプレートを使用してきたのか?

今回は、FC2ブログテンプレート選びの変遷について書き記しておこうと思います。

FC2ブログテンプレートの使用に大きな変革があったのは3回

FC2ブログを利用するボクにとって、テンプレート使用について大きな変革があったのは3回です。

これを、第1期~第3期に分けて順番に見ていきたいと思います。

FC2ブログテンプレートの選び方~第1期~一番楽しくブログを書いていた時代

「PC版」と「スマホ版」とで異なるテンプレートを使用していた

まず、ボクがFC2ブログをはじめたとき。

最初は、PC版スマホ版とで異なるテンプレートを使っていました。

なぜ2パターンのテンプレートを使用したのかについて、特に理由はありません。

FC2ブログは端末ごとに違うテンプレートを使うことができるんですよね。だから、PCとスマホで異なるテンプレートを選ぶ。そういうものだと思っていました。

PC版は「lightframe_white」を使用

もう既にバックアップを削除してしまい、当時のブログページを再現できません。ごめんなさい
(o*。_。)oペコッ

PC版のテンプレートは「lightframe_white」を長年愛用しました。自由なカスタマイズ性が特徴です。作者さんがさまざまなカスタマイズ方法をブログで公開していたので、いろんなことをしていました。

>>FC2ブログのテンプレート工房

上記のブログにはさまざまなカスタマイズ方法が記してあり、ボクにとってWeb技術ウェブデザインというものを知るきっかけともなりました。

いわば、ボクのブログ運営におけるバイブルみたいなもので、長年にわたりずいぶんとお世話になりました。

Web知識についてはとても参考になるので、気になったら今でもたまに見返しています。

スマホ版は「sky」を使用

長年愛用したスマホ版のFC2テンプレート「sky」

スマホ版のテンプレートは「sky」を使用。こちらも、長年にわたり愛用してきました。

PC版と同様に、自由なカスタマイズ性が特徴です。

特にその方法について公開はされてませんが、上記のブログを参考にしていろんなカスタマイズを施しました。

ふたつのテンプレートを併用することのメリット

これらふたつのテンプレートを併用することのメリットは、「それぞれに異なった工夫がおこなえる」ことでした。

PC版はホームページみたいな仕様にして、スマホ版はブログらしい仕様にするといったような。

第1期は2017年8月まで。2段構えのテンプレでずっとブログ運営してきた

結局、上記2つのテンプレートを2017年8月までずっと使い続けてきました。

ボクのブログ運営のなかで一番長く愛用したことになります。

FC2ブログテンプレートの選び方~第2期~レスポンシブデザインへの対応

長年愛用してきたFC2ブログテンプレートを、2017年9月より一新しました。

これまで慣れ親しんできたテンプレートを手放すのは、ずいぶんと未練が残りました。

2017年9月からテンプレートを一新した理由は?

テンプレートを一新したのは、いろんな理由がありました。

ブログ運営も4年を過ぎると、さまざまなことを知り、興味を持つものです。

ボクもブログとともに成長してきたんですよね。

レスポンシブデザインに興味を抱く

まず、ブログには「レスポンシブデザイン」というものが存在することを知りました。

ひとつのテンプレートだけを使用しても、端末によってページ表示を見やすく切り替えてくれるというものです。

今までボクのブログをスマホから見たときは、基本的にスマホ版が表示されますが、PC版に切り替えることも出来ます。

すると、PC版はページ画面がそのまま縮小表示され、左右にプラグインを実装していたので、記事がとても小さくて読みづらいんですよね(汗)

PCとスマホで2つのテンプレートを併用すると管理が大変

また、PCとスマホとで異なるテンプレートを併用すると、管理のほうも大変でした。

何か不具合が起きると、それぞれをチェックしなければならないし、記事を作成するときも、両方を意識しながら書かなければなりませんでした。

Ranklet(ランクレット)が使えないのが主な理由

テンプレートを一新するのを決断した主な理由としては、Rankletランクレット)の導入にありました。

Rankletのイメージ画像

Rankletランクレット)とは、自分のブログ記事をランキング形式で表示してくれる便利な無料ツールです。

これをどうしても使いたくなったわけです(^_^;)

ところが、2段構えのテンプレを使用すると、Rankletがうまく機能しないんです。なぜなら、PC版とスマホ版でテンプレートが異なると、個別記事のurlも違っているからなんです。

実際にRankletを使ってみると、何と、ランキングの中に同じ記事が重複してしまうではありませんか!(゚o゚;; それも、片方はPC版の記事、もう一方はSPが付されたスマホ版の記事。これじゃあ、格好悪すぎますよね(汗)

レスポンシブデザインのFC2公式テンプレート「white_card_resp」を初めて使用

そんな理由から、テンプレートを一新することに決めたのです。そして、ボクの選んだのが、FC2の公式テンプレートwhite_card_resp」というもの。

ボクが初めて採用したレスポンシブ対応のテンプレートFC2公式「white_card_resp」

今の目で見ると、厳密な意味でレスポンシブデザインと呼ぶにはどうなの?と思う部分もあるのですが(汗)とりあえず、ボクは第2期で初めてレスポンシブデザインを採用したのです。

ボクには「ページ表示の読み込み速度」の認識が欠落していた

こちらのテンプレートでも、さまさまなカスタマイズを施しました。

ヘッドに固定するグローバルナビゲーションページナビゲーションページスクロールなど…。

この頃は、htmlCSSなど、Webテクを駆使したウェブデザインにも興味を持つようになっていたので、いろいろと自分で勉強し、調べながらコツコツとさまざまなカスタマイズを実装していきました。

そんなことを繰り返しているうちに、ほぼ、フルカスタマイズのような感じになってしまった(汗)

しかし、ボク程度のWeb知識では、レスポンシブデザインのテンプレートをカスタマイズするのに限界があったようです。ボクには、あることの認識が欠落していたのです。

それは、ページ表示の読み込み速度。この認識が欠落していたため、カスタマイズを重ねた結果、もの凄く重たいブログになってしまったのです…。

FC2ブログテンプレートの選び方~第3期~ページ表示の読み込み速度を重要視

ブログが重い」というのは、第1期の頃から気にかけてはいました。

よく、読者の方から「ページが重くてなかなか表示されない」というコメントを寄せられていたからです。

しかし、それは何かカスタマイズにミスがあるせいだと勘違いしていました。JSの乱用など、むやみなカスタマイズを重ねることで、ブログのページ表示に負荷をかけるという認識がまるでなかったのです(汗)

だんだんとそのことに気付きはじめたボクは、テンプレートの根本的な部分に影響を及ぼすようなカスタマイズをすることをやめることにしたのです。

せっかくフルカスタマイズをしたのに、それを手放すことはとても残念な気がしました。でも、重いブログじゃ諦めるのも仕方ないんですよね…。

ボクのテンプレート選びの終着点

それ以降は、プロの製作した秀逸なテンプレートに身を委ねることにしたんです。

そして、ボクがテンプレート選びの終着点としてたどり着いたのが、FC2テンプレート製作者Akiraさんのテンプレートでした。

Akiraさんのテンプレートはどれも非常に秀逸で、常にメンテナンスをしているし、とても使い勝手が良いので気に入ってます(о´∀`о)

また、分からないことがあると、Akiraさんのブログで質問すれば親切に教えてもらえるので本当にありがたいですよね!

Akiraさんのテンプレート「Empty-street」を初めて採用

FC2テンプレート「Empty-street」のイメージ画像

最初にボクが選んだのが、「Empty-street」。デザインが素敵で、とても気に入ってました。

Empty-street - FC2ブログテンプレート

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

最終更新 2018.12.13

Font AwesomeのCSSバージョンを5.6.0にアップグレード
レイアウト関連CSSの追加及び一部削除
個別記事下ページ送りの仕様変更(軽量化含む)
...

すぐに「alias-Jane」へ変更のうえ「ダーク色」にカスタマイズ

ところが、新しいテンプレートが発表されたのを知り、何だかとても目移りしてしまい(゚o゚;; すぐに「alias-Jane」に変更(汗)

alias-Jane - FC2ブログテンプレート

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

FC2テンプレート「alias-Jane」のイメージ画像

この頃に「ダーク色」のウェブデザインというものに興味を持ち始めまして…。このテンプレートをダーク色に改変しちゃいました(^_^;)

「ダーク色」のテンプレート「Muse」に変更

やっと落ちついたところで、今度はダーク色のテンプレートが発表されるという(゚o゚;; せっかくカスタマイズを終えたばかりのボクでしたが、どうしてもこの素敵なデザインに惹かれてしまい、今使っている「Muse」に変更したのです。

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

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

おわりに

今のボクにとってのお気に入りは、次の通り。

  • Akiraさんの製作した作品
  • ダーク色のテンプレート
  • トップページがカード式の要約表示タイプ
  • グローバルナビゲーションの実装(ハンバーガーメニューは嫌い)

これを基本として、細かい部分のみカスタマイズすることにしています。

たぶん、今使ってるテンプレがボクにとっての完成版。今後はたぶん、変更はおこなわないと思われます(^^)

関連記事

コメント 0件

コメントはまだありません
未分類 (0)
シン・胃がん闘病記 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5925)
┣  胃がんブログ (264)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5585)
┣  酒場放浪記 (9)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (84)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (26)
がん のこと(ガン情報全般) (481)
┣  がんブログ (272)
┗  がんニュース (209)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (137)
┣  Amazonセール (2)
┗  📱kindleセール (134)
おもしろグッズ (10)
今日のエッセイ (102)
ニュース・芸能・話題 (745)
┗  転職・キャリアアップ (19)
恋愛・人間関係 (30)
終活ブログ (10)
グルメ (71)
┣  低糖質レシピ (10)
┗  お酒の飲み方 (1)
胃切除後の食事・レシピ (669)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (215)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (176)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (27)
┗  ファッション (4)
iPhone の使い方・アプリなど (31)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)