comments trackbacks you may also like

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

2019年10月22日
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など
-
#FC2ブログ #FC2ブログテンプレート #FC2ブログテンプレートカスタマイズ #ブログ運営 #FC2ブロガー #期間限定 #ブログカスタマイズ

computer

FC2ブロガーのMです。

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

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

すると…。

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

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

アッ!

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

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

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

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

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

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

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

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

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

何故なんだ!!

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

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

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

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

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

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

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

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

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

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

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

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

ところが…。

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

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

それはFC2プラグインのこと!

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

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

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

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

face_man_shock

や、ヤバイ!!

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

寝たきり生活

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

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

それは困る(汗)

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

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

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

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

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

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

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

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

css-code

これは、やらなくてもいい作業なんですけど、今回は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 ̄;)

ページ送りナビゲーションのサムネイル画像が表示されない

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

face_man_trouble

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

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

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

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

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

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

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

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

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

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

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

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

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

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

▼コピーリンクのボタン

コピーリンクボタン

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

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

追記

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

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

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

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

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

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

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

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

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

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

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

あわせて読みたい
\チェック/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール

この記事が気に入ったら
シェア!

 シェア
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
未分類 (0)
シン・胃がん闘病記 (20)
┣  AVANT: 癌の余命宣告~共存 (11)
┗  セントラルドグマ: 父親の胃癌 (9)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5942)
┣  胃がんブログ (279)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (85)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
がん のこと(ガン情報全般) (502)
┣  がんブログ (285)
┗  がんニュース (217)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (139)
┣  Amazonセール (2)
┗  📱kindleセール (136)
おもしろグッズ (11)
今日のエッセイ (110)
ニュース・芸能・話題 (759)
┗  転職・キャリアアップ (21)
占い・心理テスト (5)
恋愛・人間関係 (28)
終活ブログ (12)
グルメ (94)
┣  低糖質レシピ (21)
┗  お酒の飲み方 (2)
胃切除後の食事・レシピ (670)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (74)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (229)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (185)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (28)
┗  ファッション (8)
iPhone の使い方・アプリなど (31)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)