【追記あり】全テンプレート 修正完了しました + 変更点について

とは言うものの、超急ぎ足で作業したためミスが点在しているのではないかと懸念しています。お気づきの方はその旨お知らせ頂けると助かります。

概ねの変更内容は以下の記事でご確認ください。

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

vanillaice000.blog.fc2.com

本記事では以前と大きく仕様を変更した 縦横比固定の方法 を中心にその他諸々の説明をします。

YouTube縦横比固定

上記はYouTubeで発行された埋め込みコードをほぼそのまま貼り付けただけです。テンプレートアップデート後はこれでOK
* frameborder属性削除とloading属性追加を行っています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/UYwF-jdcVjY?si=2TP4FoiYAWdRVe0G" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>

YouTubeのデフォルト縦横比(アスペクト比)は黄金比と呼ばれる 16/9 です。先日Post Maloneのライブに行ったのでこの動画にしましたが、中身が16/9じゃなかった(笑)
ちょっとサンプル選び失敗した気がしますが、ともかく現在の地上波テレビと同じ16/9の比率がデフォルトだと思ってください。

これまではYouTubeの16/9を維持するのに弊テンプレートでは以下のようなコードが必要でした。

<div class="box-for-video">ここに埋め込みコード</div>

埋め込みコードだけでなく緑部位のラッパー(ある要素を包含する要素)が必須だったんですが、今回の修正でラッパー不要になりました。

以前こんな記事を書いています ↓

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 16:9 のアスペクトが最もよく利用される黄金比だと言われています。 ところが例えば「音楽関連のフライヤー」「映画のポスター」「本の表紙」など。これらは概ね 縦に長い画像 です。特定ジャンルのブロガーさんで縦長にしたい場合もあるよね、ということで ( ﾟДﾟ)ﾉ...

vanillaice000.blog.fc2.com

記事の最終に「この方法はもう時代遅れになっている」と少しだけ触れています。現時点で Internet Explorerの完全終了 及び メジャーなブラウザのaspect-ratioプロパティ実装 を確認できていますので、この機会に変更を行っています。

随分前から正規プロパティではありましたが、IEの存在と未実装ブラウザもまだあったのでなかなか踏み切れなかったという事情があります。なので、デバイス(PC, タブレット, スマホ)を問わず、2020年以降OSやブラウザをアップデートしていない という場合は無効です。心配な方は旧内容の方も残してありますので、これまで通りbox-for-videoクラスのラッパーを用いた掲載を行ってください。
* ただし動画のみならずテンプレートのグリッド画像も方法変更していますのでYouTubeだけ気にしたところであまり意味はありません。

横幅を変更したいとき

横幅を変えたいときは埋め込みコードの width="数値" の部位のみ変更すればOKです。heightを計算する必要はありません。

<iframe width="360" height="315" src="https://www.youtube.com/embed/UYwF-jdcVjY?si=2TP4FoiYAWdRVe0G" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>

横幅変更時の注意点は以下の通り。

• width属性の値に単位をつけないこと
• height属性の値にautoを指定しないこと

単位をつけてしまう

<iframe width="360px" height="315" src="https://www.youtube.com/embed/UYwF-jdcVjY?si=2TP4FoiYAWdRVe0G" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>

HTML上の比率の整合性を気にするあまりheightをautoにしてしまう

<iframe width="360" height="auto" src="https://www.youtube.com/embed/UYwF-jdcVjY?si=2TP4FoiYAWdRVe0G" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>

いずれも構文ルール違反なので気をつけてください。
* width, height属性のデフォルト単位は px で確定しています。
* height属性の値に auto は認められていません。

水平位置合わせを変えたいとき

iframe要素のコンテンツモデルは flow なので、文字と同じようにFC2エディターの位置合わせツールバーを利用した位置合わせが可能です。

ただ残念なことに エディターからYouTube動画を検索して挿入した場合は無効 になります。エディター経由だと正規URLではなくなってしまうので面倒でもYouTubeサイトで埋め込みコードを取得します。そしてコード掲載のためには必然的に HTML編集 の画面を一旦は利用することになります。

HTML編集のみで行う場合は以下の通りです(中央合わせの場合, 右寄せは center を right に変更)

<div style="text-align: center;">ここに埋め込みコード</div>

プラグイン『タグ』について

この章は急遽追加しています。公式プラグイン『タグ』の見た目で、もしかすると気になる人がいるかもしれないなぁ、と気づいたのがテンプレート修正作業の終盤です。もっと早く気付けばよかった ^^;

概ね上記のような形に整形しています。わかりやすいように左辺に赤い縦線を入れてみます。

『HTML』のタグが若干右にずれているのがわかります。タグの数が多ければ多いほど『ガタガタしている』という印象になる可能性があります。これが気になる方もいるかもしれませんね。

タグのもともとの仕組みを言うと、タグの間に必ず 半角スペース が必要で、この点はどのサービスでも同じではないかと思います。FC2ブログでも一つのタグに半角スペースは利用できませんし、別のタグとの区別も半角スペースでもって行いますよね。

公式プラグインでのタグリンク出力の際、この半角スペースは   としてHTMLが構成されます。この半角スペースによってズレが生じます。仕組みを知っていれば別に気にならないかもしれません。私もその口です。ただ視覚的に気になる人もいますよね。たぶん (∵`)

全てのテンプレートを上書きしました。上書きばっかしてホントすみません。気にならない方は再DLの必要はありません。

関連記事リスト

サムネイルつき関連記事リストのリンク範囲を変更しました。以下のサンプルは赤く色付けした部位がリンク範囲です。

アイテム内のリンクの距離が近いですし、同じページへの遷移なので全体リンクにしました。関連記事リストの自動出力はHTMLを変更できませんので、半ば強引な方法で行っています。初心者の方はカスタマイズ非推奨です。

トラックバックについて

今回の修正で取り除こうかとも思ったんですが、温存しています。トラックバックという機能そのものが廃れてきており、FC2ブログに於いてもあまり重視されなくなっているようです。

管理画面の左側に各機能別のカテゴリがあります。トラックバックは以前『設定関連』のカテゴリに分類されていましたが、現在(新管理画面)では『ツール関連』に移動しています。機能の終了を見越しての処置だと思いますので、いずれ消去することを前提にテンプレートでも最低限のスタイリングに留めています。

最後に

全テンプレート上書き済で、当面は不備・不具合の報告待ちです。今年いっぱい多忙、特に10月中旬からははほとんどログインできなさそうな見込み。各テンプレートのDEMOを作成(変更)する時間が取れないので少しづつ更新していきたいと考えています。ただ作業工程中、一旦は変更済みなので最新バージョンと見た目が大きく異なることはありません。

さいごにお願いなんですが、個人カスタマイズは原則『独力・自力』でお願いします。 特にデフォルトの仕様を変更するようなカスタマイズ、例えば『縦並びのものを横並びにする(さらにスタイリングもする)』『常時表示ナビゲーションをスクロール方向によって表示・非表示を繰り返すようにする』など。あるいは『某を追加導入する際の手引きを求める』に至ってははカスタマイズについての質問を超えてもはや『依頼』の域なので控えて頂けると助かります (∵`)