2年ほど前からこっそりとオリジナルテーマ作りに取り組んできたのですが、この度ついに完成しました!
…といっても実は、取り組み始めて早々に挫折して2年近く放置(笑)していたものの、最近になって再びエンジンが掛かり、ここ2週間ほどで一気に仕上げたというのが実際のところです(^^;
テーマ作成のきっかけと経緯
なぜ2年もやる気が出なかったのに突如エンジンが掛かって再開しようと思ったのかというと、すでに公開していた Tricktree FB というリンクリスト用のテンプレートに固定ページ機能を追加するバージョンアップ作業で、思いの外すんなり出来たことで自信がついて、やる気スイッチが入ったというわけです。
Blogger のテーマ(テンプレート)のウィジェットには旧バージョンの 1 と新バージョンの 2 があるのですが、v1 に関しては QooQ のカスタマイズで慣れているものの、v2 に関しては、特にメインとなるブログウィジェットの仕様が大きく異なるために難解そうで、今までろくに手もつけず、研究もしてこなかったのですが…
Tricktree FB のテンプレートはデフォルトでウィジェットバージョン2 にしていて、新規追加のウィジェットは自動的に v2 になるため、必然的にブログウィジェットも v2 にせざるを得なかったのですが、弄っている内に次第に構造や仕様が理解できてきたのです。
当ブログのテーマはデフォルトのバージョンが 1 の QooQ を使用していましたが、実はすでにサブコンテンツのウィジェットは v1 と構造が同じ v2 に入れ替えていて、残るは最大の難関であるブログウィジェットだけという状態になっていました。
いざ、現状の v1 ブログウィジェットと v2 の物を入れ替えてみると、エラーにはならないものの、完全に真っ更な素の状態で一から設定し直す必要があるので一つ一つ地道に作業。
特にデータタグの名前や仕様が v1 と v2 で違いまくっていたため、相当難儀しました。エラーの原因がどのタグなのか突き止めるのも一苦労でしたし。
そんな時頼りになるのが、いつもカスタマイズでお世話になっている Blogger フォーラムエキスパートの Soraya さん。ブログはフランス語ですが、翻訳ウィジェットがあるのでなんとか理解できます。
Blogger Code PEBlogger Code PE - Expert XML BloggerExpert agréé Blogger. Spécialité: Technologie des thèmes. Réf…http://bloggercode-blogconnexion.blogspot.com/
途中何度も躓きつつも、一つ上手くいく度にテンションが上り、時間が経つのも忘れるほどに楽しく作業が進み、短期集中で完成に至ったという感じです。
F-light テーマについて
まず、ベースとなっているのは QooQ テーマで、flex-box を使った基本構造やレスポンシブデザイン等は引き継いではいますが、それ以外の部分はフルカスタマイズされていてほぼ別物といっても過言ではないです。そもそもウィジェットバージョンが 1 と 2 という時点で大きく異なりますし。
当初は純粋なオリジナルテーマと呼ぶことに躊躇いもあり、配布するつもりもなかったのですが、良いものが作れたという自信もありますし、他のブロガラーさんたちに使ってもらいたくて、思い切ってリリースしようという思いに至りました。
もちろんもし何かしら問題があるというのであれば速やかに対応はさせていただきます。
テンプレートの名前について
「F-light」の F は言うまでもなく私、ふじやんの頭文字です。light を付けたのは、テンプレートの動きの軽さを表しています。「フライト」とも呼べるのもなんとなくいいかなと。
ちなみに制作中の段階では「Flaw」という仮称で呼んでいました。「欠陥」「傷物」「瑕疵」という意味です(笑)
ところで、この「F-light」という名称ですが、実は明確な読み方が決まっていないのです。当初は「フライト」にするつもりでしたが F と light で区切っているので「エフライト」というのもありかなという気がしてきまして。自分的には五分五分で決めかねているという現状です。
というわけで先日試しに Twitter でアンケートを取ってみたところ、8月10日の夜の時点ではほぼ五分五分(笑)
F-light の読み方、どっちがいい?
— ふじやん (@fujiyanx) 2022年8月9日
締め切りまでまだ数日ありますが、最終結果はどうなるのやら。もし同率だったらどうしよう(笑)
2022/08/16 追記
せいぜい5~6人ぐらいかなと思ってたら、予想以上に沢山の方に投票して頂きました。ありがとうございます!
結果は、僅差ですが「エフライト」が多数となりました。というわけで「F-light」の公式な読み方を エフライト [éf lάɪt] とさせていただきますので、以後お見知り置きくださいませ。
実は脳内では自然と「エフライト」と呼ぶようになっていたのでこっちに決まってよかったです。ちなみに同率だった場合はエフライトにするつもりでした(笑)
デモサイトとダウンロード
まだ名前(の読み方)も決まっていませんが、すでにデモも兼ねた紹介サイトを立ち上げました。ダウンロードリンクもこちらの記事内に貼ってあります。
導入前の注意事項やテーマに関する情報を記してありますので、「F-light」を使ってみたいという方は、こちらのサイトをご覧になって下さい。
実際に使用した感想や、バグ報告、機能要望、質問などをコメントして頂ければ幸いです。
F-lightF-lightBlogger テーマ F-light (エフライト) のデモサイトですhttps://f-light-theme.blogspot.com/
最後に
仕様の違うウィジェットバージョンに変わったということもあって、もう QooQ に関するカスタマイズ記事は書かないと思います。まあ何れにせよカスタマイズネタは尽きてましたけど(笑)
今後は F-light 等の v2 テーマ関連の記事が中心になるかもですが、果たして F-light の需要はあるのだろうか…Tricktree FB のユーザーも全然見かけないし(^^;
コメントを投稿
別ページに移動します22 件のコメント (新着順)
ふじやん
>雲さん
お役に立てたようで何よりです!
今回のような特定のラベル記事にのみ適用させる分岐タグは、とても便利で色々応用できますので、試してみて下さいね!
雲くん
>ふじやんさん
私の質問に時間を割いて回答していただき、ありがとうございました。
フォント表示の問題が解決し、ほっとしています!
記事のフォントは毎回手動で変更しなければならないと思っていましたが、タグで一括設定できるとは思いませんでしたので、新しい勉強になりました!
ふじやん
> 雲くん さん(雲さん の方がいいかな?)
F-lightテーマをお使いいただきありがとうございます。気に入って頂けたようで嬉しいです!
まず1つ目のご質問に関してですが、雲さんがなさった方法で全く問題ありません。
テーマを復元するやり方だと、エラーになってしまったり、旧テーマのウィジェットが残ってしまったりする事がありますので、XMLファイルの上書きを推奨します。
2つ目のご質問ですが、たとえば「中文文章」のラベルが付いた記事にだけ繁体字フォントを適用させたいということでよろしかったでしょうか?(解釈が間違っていたらごめんなさい)
<data:post.body/> の直下に以下のコードを挿入して下さい。
<b:if cond='data:post.labels any (label => label.name == "中文文章")'>
<style>
.post-body,
.post-body *,
#p-header-title {
font-family: 蘋方, "Microsoft JhengHei", 微軟正黑體, sans-serif;
}
</style>
</b:if>
これで「中文文章」のラベルが付いた記事のタイトルと本文が繁体字フォントになっているはずです。蘋方はApple用のフォントですが、当方はApple環境がないため、ちゃんと繁体字になっているか確認できませんのであしからず。
雲さんの日本語は完璧ですよ!
お世辞抜きで私の拙い日本語よりも美しいです(^^)
雲くん
ふじやんさん こんにちは、私はblogger初心者の雲です。 私はいくつかのテンプレートを探していましたが、このテンプレートは初心者に最適だと思います、それを作成していただきありがとうございます!!!
もしよろしければ、2つ質問があります、お教えいただければ幸いです。
1. 当初、テンプレートをF-light変更にする際、何度か試行錯誤しましたが、復元方法では変更できず、最終的にhtmlを上書きすることで、正常に表示できるようになりましたが、この方法で他に問題はないでしょうか?
2.私は香港人ですが、私は日本語と中国の繁体字でブログの記事を更新する予定ですが、現在いくつかの記事の中国の繁体字は、日本の漢字として表示されますが、指定された記事のフォントを中国語繁体字に変換する方法をご存知ですか?
日本語は下手なので、もし失礼があったらお許しください!長文失礼しました!
ふじやん
acco さん、こんばんは。目の具合はいかがですか?
F-light を使って頂いて嬉しいです!
以前にお使いの JetTheme に比べたら機能的にはかなり劣るものの、カスタマイズはやりやすいんじゃないかなと思いますので、色々弄ってみて下さいね(^^)
acco
ふじやんさん
オリジナルテーマ凄いっ!
最近は目の調子が悪くてブログには全く手を付けられずにいましたが、F-lightを使わせて頂きます。
これからも宜しくお願いします。
ふじやん
> アタルさん
わざわざ DM でのやりとりの結論の詳細を書いて頂いてありがとうございます。私も解説を書いておこうかなと思っていたのですが、手間が省けて助かりました(笑)
一応私からもひとつ補足ですが、F-light では data-theme="light(dark)" 属性は不要で、これが残ったままだと、モード切り替えに連動しなくなります。
アタル
ふじやんさん、お手間を取らせてしまい すいません。
Twitter 埋め込み時の「data-chrome=”transparent” (背景を透明にする)」オプションが効いていたため、ブログ背景の色(白/黒)が透けてただけだそうです。 つまり、モード切り替え後、手動またはJSコード( location.reload(); )にてページのリロードが必要です。
なお、このオプションは『タイムライン』埋め込み時のみ有効とのこと。(他オプションもあり)
詳細は、じゅんぺい( @junpei_sugiyama )さんの以下の記事をお読みくださいませ!
Twitterのタイムラインを埋め込む方法【カスタマイズ方法も解説】
ふじやん
> アタルさん
色々確認したいことがあるのと、何度もやり取りすることになるかもしれない?というわけでこの件に関しては Twitter の DM でよろしくお願いします。
アタル
以下の「F-light」表示サンプルページにはコメントできなかったので…
https://f-light-theme.blogspot.com/2022/07/sample.html#12
ダークモードとライトモードの切り替え時、Twitter の 背景色が Safari ブラウザだと変わりません。
でも、ふじやんさんのブログ(トップページ)だとTwitter の 背景色も変更されます。
ページリロード(手動、あるいは location.reload(); )無しで、Twitter の背景色を変更する方法を教えてください。
ふじやん
> りもさん
ありがとうございます!
「トップ2カラム・記事1カラム」という基本レイアウトは F-light の大きな特徴の一つと言っても過言ではないです!
テーマ作成(v2 化)で JetTheme の XML も色々参考にしていますけど、外部の JavaScript の不具合の場合は対処は難しいでしょうねえ。
うちの記事はあまり参考にならないかもしれませんが…りもさんのテーマ作りで少しでもお役に立てれば幸いです(^^)
りも
おめでとうございます、すごいですね!
Special Thanks に載せていただきありがとうございます。
私は未だにバージョンの理解も追いついておらず。。
テーマ自作されている方は本当にすごいなと思います。
今使ってるテーマの不備が自力で直せず、最近はテーマの移行も検討しているところだったんですが、自作という方法もあるんだなぁと刺激を受けました。
関連記事参考にさせていただきます ^^
ふじやん
>HARUさん
F-light を使っていただけるのは嬉しいですが…HARU さんのオリジナルテーマも非常に興味深くて期待していたのでちょっと残念(^^;
どうぞ使いやすいようにガッツリ弄って下さい!今後のアップデートの参考にもなりますし。
あと、不具合や要望等あれば知らせて頂けるとありがたいです(^^)
HARU
>ふじやんさん
正直なところ、 F-light は私にとっても理想的なテンプレートに近いため、使うことを検討しているところです…!!
(いろいろいじってしまうかもしれませんが。ごめんなさい。)
ふじやん
>HARUさん
ありがとうございます!
私も長らくカスタマイズしか出来ない体?状態でしたけど、きっかけ一つで重い腰が上がったら一気に仕上がっちゃいました(笑)
うちよりも HARU さんとこの方がオリジナル度が高いような気がしますけどね(^^;
QooQ からの v2 化は確かに面倒ですけど、HARU さんならきっと自力でも大丈夫ですよ(^^)
HARU
私も自作テーマを考えていた時期がありましたが、挫折してカスタマイズしかできない体に…w
完成おめでとうございます。
私も挑戦してみたいので、気が向いたら作成手引きなど記事にしてもらえると嬉しいです!
ふじやん
>Fuma さん
ありがとうございます!
このような理想的なテーマを作る事ができたのも、経験や知識が豊富な Blogger ユーザーさんたちのお陰です。
中でも Fuma さんのウィジェットやスクリプトには大変お世話になりました。このテーマの半分は Made in IB-Note と言っても過言ではないです(^^)
Fuma さんのオリジナルテーマも楽しみにしてます!
Fuma
自作テーマの完成、おめでとうございます!
シンプルさと実用性が追求された素敵なテーマですね。デモサイトを拝見しましたが、どのページも高速に表示されていて快適です。テーマ作成は調整・運用テスト・バグ修正…等々、楽しさはありつつもなかなか大変な作業だったと思います。お疲れさまでした。
私も自作テーマ作成中なので、「F-light」のソースコードを参考にさせて頂きます(^^)
ふじやん
>BINUBALL さん
ありがとうございます!
BIUINUBALL さんもオリジナルテーマをいくつか作られていて、それに刺激を受けた部分もあります。
また、投稿日フォーマットのやり方を教えていただいていたお陰で本当に助かりました。
リンク修正しました。浮かれていてつまらない所でミスを見逃していましたね(笑)
BINUBALL
テーマ自作、お祝い申し上げます!
ただSpecial Thanks 部分QooQテーマリンクが過ちかかっています。
(最近Bloggerに手を放していました)
ふじやん
>ヒデヒデさん
早速のコメントありがとうございます!
私も一度は挫折したものの、重い腰が上がったら楽しくて一気に作業が進んで完成させることが出来ました(^^)
ヒデヒデさんの票も追加させて頂いて最終的に集計しますね!
ヒデヒデ
おおっ!遂にオリジナルテーマ完成したんですね!
(私も以前挑戦してみたけど挫折しましたorz)
「F-light」ですが、私は「エフライト」と読みました。