【追記】FC2ブログ期間限定配布テンプレート「Ample」に変更‼︎カスタマイズに悪戦苦闘したけど素敵で満足♪

2019年10月22日

2019年11月02日

#FC2ブログ #FC2ブログテンプレート #FC2ブログテンプレートカスタマイズ #ブログ運営 #FC2ブロガー #期間限定 #ブログカスタマイズ

FC2ブロガーのMです。

とうとうやってしまいました。

FC2ブログのテンプレート製作者Akiraさんがブログ記事を更新されたんで気になって覗いてみたんです。

すると…。

Ample - ブログ内期間限定配布

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

アッ！

素敵で格好いい新作テンプレート『Ample』が発表されてる(￣O￣;)

しかも、今使ってるテンプレと同じ「期間限定配布」じゃん(ﾟoﾟ;;

とりあえず、何も考えないでダウンロード。

10月に入ってブログをダークモード→ホワイト系に変えたばかりだしな。体調も悪いし、おまけに今回はカスタマイズがいろいろあって上級者向けときたもんだ。

FC2ブログのテンプレート、背景色を黒→白に変更した理由は⁈【運営報告】（ページ1/3）

ご報告です。ブログのボディ背景色として「ダークモード（黒系）デザイン」の採用にずっとこだわりを持ち続けてきた僕ですが、突然このFC2ブログ『ゆうらり Happy Smile』をパステルカラー調（白系）に変更したので驚かれた方も多いのではないでしょうか？今は「ダークモード」という言葉をよく耳にするようになりまして。3月29日には、あのTwitterもダークモードをiOS版公式アプリ向けに公開するなど、Webデザインにダーク色を採...

僕が手を出したら挫折しそうだから手を出すのはヤメとこ…

ε=ε=ε=ε=ε=ε=┌(;￣◇￣)┘

しかし、時が経つごとに僕の気になるモードが最高潮に達してしまった( ；´Д｀)

何故なんだ！！

なぜ僕のブログ魂の虫が騒ぐんだろ
(● ˃̶͈̀ロ˂̶͈́)੭ꠥ⁾⁾

結局、居ても立っても居られなくなった僕は、仮にこのテンプレに引っ越しするまでの過程を頭に思い描きました。

すると、何となく今と基本構造が同じ気がしてきた。

もしかして、中身をそのまま移植すれば大丈夫なんじゃね⁈的な…。

いちおう、最後まで仕上げるイメージが描けちゃうんです。約2～3時間もあれば出来ちゃうかも⁈

で、休み休み移植を始めました。今回は、FC2ブログテンプレートのカスタマイズで悪戦苦闘した備忘録を書き記しておこうと思います。

いやー。上級者向けというのがこんなに難しいものだったとは…。

改めてhtmlとcss、jsといったウェブデザインの奥深さを痛感することになりましたヨ(^_^;)

FC2ブログテンプレート「Ample」に変更するうえで決めた僕の基本方針

自分で決めた今回の方針は、今使ってるテンプレートに記述してある内容を移植するだけ。決して移植するデザインには変更（色や幅とか）を加えないことを心がけました。

そうすればいつでも元に戻せますから。

headから記述内容のコピペをはじめ、最初の移植作業は順調でした。

ところが…。

思わぬところで作業を中断。自分の描いていたイメージが安直だったことを後悔する羽目になったのです( ；´Д｀)

「FC2プラグイン非対応」に四苦八苦

それは「FC2プラグイン」のこと！

ブログの右側（スマホの場合は下に移動する）にあるいろんな箱のことですが、今回は「FC2プラグイン非対応」バージョンのテンプレ。

僕のブログはプラグインに書いてある内容が多いから、これをどうするか…。

新テンプレートには、プラグインの代わりに使える箱がフッター辺りに3つ用意されてます。最初にイメージで思い描いたのは、この箱の数を増やしてそこに移植すればイイよね、というものでした。

しかし、実際に箱を増やしてみたところ、増やした数だけ横に並んで広がっていく。増やせば増やすほど、1個あたりの箱が縦長にビヨーンと伸びてしまうんですヨ‼︎(￣▽￣;)

や、ヤバイ！！

自分の予想では、3個ずつ下に増えていくものだと思っていたからさあ大変（汗）

いったんお昼寝して、夢の中で考えました。そして、思いついたのは、箱をコピペするのではなく、このエリア全体をコピペして新たなエリアを作って3個ずつの箱を下に増やしていこうかなと…。

ただし、このエリアは「id属性」でくくられている。とすると、エリア全体をコピペしたら内容をすべていじくらなくちゃならなくなるんですね(￣▽￣;)

それは困る（汗）

で、さらに中断。再びお昼寝しました。体調が悪いのですぐ疲れてしまい、作業を続けられないのが辛い…。

で、最終的に考えたのが、id属性をclass属性に変更してエリア全体をコピペしていくこと。いちおう念のため、属性をidからclassに変えた際のデメリットを調べましたが、何とか大丈夫そうでした。

プラグインからの移植作業もかなり手間取りました（汗）

横にあるプラグインとは異なり、箱1個あたりの情報を少なく表示する必要があるんですよね。そうしないと、下にどんどん伸びてみっともないブログになっちゃいますから(^_^;)

内容が長くなるものは、表示を隠す「アコーディオン」で対応しました。また、公式プラグインのcssは既存のテンプレに実装のものをコピペ。何とか山を越えた予感がしてひと安心です。

あとは、移植した内容を延々と微調整。もうすぐ完成かな？と心躍る自分を抑えながら最後にもうひとつの作業にかかりました。

「最初に『圧縮CSS』の内容を見ておけば…」最後に待ち受けていた大作業

最後の作業は、head内に「圧縮CSS」を実装すること。

これは、やらなくてもいい作業なんですけど、今回はAkiraさんが親切に圧縮CSSまで用意してくれていますから(^^)

圧縮CSSの内容を見ると、スゴイ！！ちゃんとエリア分けしてあるんです(￣O￣;)こんなことはプロじゃないと出来ん（汗）

で、この圧縮CSS。FC2ブログの公式爆速テンプレートと同じで、headにCSSを全部のせる形式のものです。

【まとめ】FC2ブログ爆速テンプレート特別仕様で真似できるものは？

FC2ブロガーのMです。FC2ブログ公式の爆速テンプレートについて、これまで4回にわたり記事を書いてきました。FC2が「爆速」と命名した背景には、あの阿部寛のホームページに勝るとも劣らぬページ読み込み速度を誇っており、実際にそのスピードを体感してみることで自信のほどが窺い知ることが出来ます。＞＞爆速テンプレートサンプルブログ＞＞阿部寛のホームページ当ブログでも、上のようにスムーズな閲覧環境を整えるべきで、常...

ここで、あることに気付く。

「あっ！今まで加えたCSSの内容変更を圧縮CSSのほうにはしてなかったじゃないか！」

実は、CSSの全部のせだとは思ってなかったので、この作業を後回しにしていました。ファーストビューくらいのインラインCSS程度なら少し手直しすれば済むのかな？と。

ところが違ってました（汗）やっと時間をかけて修正したスタイルシートは用無しになってしまうんですね(￣▽￣;)

結局、修正したCSSの内容を圧縮CSSのほうに一からコピペ。大変な二度手間になってしまった…。

もしも圧縮CSSを使用される場合は、最初にheadに記述して、スタイルシートの内容と一緒に修正していったほうがいいですね。

新テンプレートを公開した後にさまざまな不具合発生‼︎その内容とは⁈

やっと完成‼︎

さっそく、新しく実装したブログテンプレートを公開しました(*ﾟ▽ﾟ*)

ただし、いろんな不具合が生じるでしょうから、ここからはしばらく修正に追われます。

フッター部分が表示されない‼︎

まず、最初に分かった不具合は、フッター以降のプラグインに値する部分がまったく表示されてない！！

ウソ！！さっきプレビューで確認したら表示されてたのに(￣O￣;)

いつものことながら、不具合の発生原因を見つけるのは大変ですよね。今回も、見つけるまでかなり苦しみました（汗）

そして、やっと気付いた。さっき、idからclassに属性を変えたやつ。圧縮CSSではそのまんまになってた(￣▽￣;)

圧縮CSSの手直し作業を最後にやったことがこんな凡ミスを招いてしまった…。

個別記事のページ送りサムネイル画像が表示されない‼︎

二つ目は個別記事の下にあるページャー。これのサムネイル画像がどうしても表示されずに白いまま(￣O￣;)

これについては、いくら原因を調べても分からなかった。

自分の能力で出来る範疇を超えてしまったと感じた僕は、Akiraさんにコメントをして助け船を求めました。

Akiraさんはすぐに原因を指摘してくれて、消しちゃいけないjsを削除してしまったせいだと分かりました（汗）

jsの詳しい内容については勉強したことがないので、テンプレの編集で苦しむ時はだいたいこのような問題が多い。

Akiraさんの言われた通りに直したら、すべてがうまく修正できました(о´∀`о)

おまけに、ブログの見栄えが悪い所まで教えてくれて、いつも親切な対応ぶりには感謝感激雨あられです♪

まとめ／期間限定配布の「Ample」は充実機能満載で至れり尽くせりの内容

おかげさまで、とっても素敵なブログに仕上がって非常に満足しています(*'▽'*)

このFC2ブログテンプレートを使用してみて、本当に素晴らしいなぁと実感しています。

まず、何よりページ読み込み速度がもの凄く速いのが一目瞭然‼︎Google AdSenseの広告を貼っているのに、このスピード感。これは凄いです‼︎

FC2ブログの高速化が完了、ページ表示速度測定ツールで100点を達成！

こんにちは。FC2ブロガーのMです。これまで当ブログでたびたび行なってきましたページ読み込み速度の高速化ですが、このたび、FC2ブログ「ゆうらり Happy Smile」の高速化のフルカスタマイズが完了いたしました。この結果、あの阿部寛のホームページや、それに勝るとも劣らぬページ読み込み速度を誇るFC2の公式爆速テンプレートにかなり匹敵するようなスピードを体感することが出来るようになったのでは？と自負しております。＞＞...

次が、ヘッダー画像を3パターンでランダム表示出来るところ。以前も同じようなテンプレを使った経験がありましたが、改めて使ってみるといいもんですね(^^)

さらに、記事幅が広いのもGOOD‼︎ FC2プラグイン非対応のためですね。

他にも、ハンバーガーメニューの搭載や個別記事ページのコピーリンク機能、テンプレートが2種類（ダーク&ホワイト）用意されてることなど至れり尽くせりの内容になっています♪

▼コピーリンクのボタン

しかし、このテンプレ。初心者が見切り発車で安直に使い始めるとかなり大変かも知れませんから、少しずつコツコツと勉強しながらカスタマイズしていくのがおすすめ。

そのためには、まずテンプレートをダウンロードしておく必要があります。10月末までの期間限定配布ですから。

追記

【追記】せっかく、素敵なテンプレにカスタマイズ出来たというのに新たな問題が発生しました。

RankletがGoogleのポリシー審査対象になったとのことで、僕のところにもメールが送られて来ました。

このブログにも搭載している「人気記事ランキング」。これは僕が勝手にランキングを決めているのではなく、RankletがGoogleアナリティクスのデータを元に抽出しています。

現在は審査中ですが、もしRankletが使えなくなると今のところ代替策が見当たらないので困ったことになりますよね（汗）

でも、審査に落ちる可能性は十分に考えられます。なぜなら、Rankletには有料版があって、収益を生み出しているから。

ちなみに、この話しはAkiraさんが記事にしてますのでご一読を。

なお、FC2ブログでスマホ版のテンプレートを併用している方はRankletが上手く機能しないです。原因は、スマホ版のurlが混在して、ランキングが重複したりしてしまうから。

RankletがGoogleのポリシー審査対象に

Rankletを利用している方には既にメールが届いているかと思います。Google Analyticsのデータを利用している点についての審査ということだと思います。...

【警告】FC2ブログテンプレート「Transit」の再配布、それは違法です！

今回はFC2ブログ運営のトラブルについて。ブログを運営していると、メールフォームを通して様々なメールが送られてきます。ブログのページによく設置される「コメント欄」にコメントを書くのとは異なり、基本的に書いた内容が公開されず、ブログの管理人しか読むことが出来ないのがメールの特徴です。コメントと違って機密性の高いことも理由のひとつかも知れませんが、メールによっては好ましくないものが内容に含まれていること...