htmlのコメントアウトを利用して、カスタマイズしそうな部位に予めガイダンスをつけるようこころがけていますが、その内容が間違っていたので修正・上書きを行いました。具体的には フッターのSNSリンク指定 に関する指南内容です。
コメントアウト内容を変更しただけでhtml修正をしたわけではありませんが、気になる方は再DLをお願いします。
あとこの機会に シェア用のSNSアイコン群をまとめている部位 について説明したいと思います。
ガイダンスコメント内容の間違い
<!-- 注)Instagramへのリンク不要の方ここから削除(your youtube link, delete from here...) -->
<li class="sns_notification">
<a class="sns_btn emboss" href="" target="_blank" rel="nofollow noopener noreferrer" aria-label="Instagram"><!-- 注)youtubeのアドレスをhrefの値に記載 例) href="https://www.youtube.com/c/xxxxx" -->
<svg class="svg-inline svg-sns" viewBox="0 0 64 64" role="img" aria-hidden="true"><use xlink:href="#inline-instagram"></use></svg>
</a>
<span class="sns_small">Instagram</span>
</li>
背景が薄くついているのがいわゆる「コメント」です。こんな感じで、上記の場合「Instagram」に関するリンクであるにも関わらず、ガイダンスが「YouTube」に関するものになっている。これが複数箇所あります。やたらyoutubeの指南書いてる （￣∀￣；）
それぞれ正しいガイダンスに書き直しました。ご迷惑おかけします。
蛇足になるかもしれませんが、「もしかしたら…」と感じることがしばしばありますので、この場を利用してガイダンス内容の説明も添えておきたいと思います。
<!-- 注)youtubeのアドレスをhrefの値に記載 例) href="https://www.youtube.com/c/xxxxx" -->
<a href="" target="_blank" rel="noopener noreferrer">YouTube</a>
この意味、実際に何をすれば良いかという点。以下は間違いです。
<!-- 注)youtubeのアドレスをhrefの値に記載 例) href="https://www.youtube.com/c/xxxxx" -->
<a href="https://www.youtube.com/c/xxxxx" target="_blank" rel="noopener noreferrer">YouTube</a>
コメント内容にある https://www.youtube.com/c/xxxxx というのはあくまでも サンプルURL ですから、そのまま当てはめても意味ないです。テンプレート製作者が各ユーザーの所有するSNSページのアドレスを知り得ようがありません。ですから、正しいURL(この場合は自身のyoutubeチャンネルのURL)をご自身で確認して記載を行ってください。
じゃあ何故こんなURLを書くのか、紛らわしいじゃないか、と。その理由は URLの形式を確認できるようにするため です。例えば以下をチャンネルだと思ったとします。
https://www.youtube.com/watch?v=Uqkkp7qUujcけれどもサンプルURLは
https://www.youtube.com/c/xxxxx
こうしてURLの文字列の成り立ちが違いますよね(専門的にはディレクトリが違う)
すると「これ違うんじゃないか」と察することができる(はず)
サンプルURLで最も重要なのは xxxxx の前までの文字列であり、その確認のためのサンプルです。
そして xxxxx の文字列がなにかというと、ここは各個人で異なる文字列が入ります。例えに利用したURLはBBCニュースなので、再度例に取ると、BBCのチャンネルの正しいURLは
https://www.youtube.com/c/BBCNewsこうですね。そしてこの緑部位はテンプレート製作者にはわからないので、代替として xxxxx と入れてある、ということです。web上の何かの指南で代替文字列(専門的には「メタ言語, meta language」)を利用することはよくあります例えば以下のようなもの
【日本の場合】
- hoge
- fuga
【英語圏の場合】
- foo
- bar
ただこれらは「知ってる人は知ってる」というだけですし、なんとなく意味がありそうな印象を与えてしまいそうで個人的に避けてる (∵`)
xxxxx とか zzzzz とかなら意味がなさそうに見えませんか。
形式に沿っていないURL(ページ種が違うなど)の記載を結構な頻度で見かけます。そのためこの2テンプレート以降はURLサンプルを記載することにしました。みなさんご注意くださいね。
SNSシェア用ブロック
画像はordinary_daysの個別記事でキャプチャしたものです。右にアイコン群がありこれらはSNSシェア用です。左の画像は何か、というのをできるだけ正しく説明すると 「本文」に掲載された1枚目の画像 または アイキャッチとして指定した画像 であり OGP画像であるとは限らない です。
SNSシェアといえばOGPに密接な関係があるわけで、実際SNSシェアを担うブロックなのに「OGP画像とは限らない」とはなんぞや。それはFC2ブログの仕様が関係します。
また、以下のように画像抜けになってしまう場合もあります。
FC2ブログの個人設定でOGPの設定切り替えが可能になったのはいつだったでしょうか。私忘れてしまいましたけれども、このOGP設定をopt in(有効化)した際には画像について以下の特徴があります。
- 「アイキャッチ画像」として指定した画像 > 本文の一番最初の画像 > 個人設定「サムネイル代替画像」で指定した画像
- いずれも見当たらない場合は プロフィール画像が自動で適用される
記事への画像掲載なし + アイキャッチ指定なし + 代替画像設定していない
というコンボの場合はプロフィール画像が自動的にOGP画像になりますよ、と。
ここでテンプレート変数の仕組みを考えると
画像の有無を見分ける変数を利用した場合
- アイキャッチ画像または記事内掲載画像あり --- いずれか優先度の高いものが表示される
- 上記2つが無い場合 --- プロフィール画像を表示することができる
- 代替画像として指定した画像を表示することができない
画像の有無を見分ける変数を利用しない場合
- アイキャッチ画像または記事内掲載画像あり --- いずれか優先度の高いものが表示される
- 上記2つが無い場合 --- 代替画像として指定した画像を表示することができる>
- プロフィール画像を表示することはできない
いずれも完璧ではない (∵`)
それはつまりどちらを選択しようと「SNSシェアで利用される画像と異なる場合がある」ということです。
これをどうにかこうにかするには、headからOGPを取得すれば良いんだけれども、そのためにJS増やすのはどうかな、と思うのと、ブロックごと削除されることもあり、その場合の大抵は htmlは消してもJSを残したまま にしてしまう方が非常に多いんですね。ガイダンスが付けてあっても、です。なのでこの部位についてはJSの使用は避けたい。
「見分け」については以下の記事をご覧ください。
FC2ブログの「サムネイル代替画像の設定」について え？今更？って感じですね。すみません。もしかしたら私の勘違いで誤情報を発信したかもしれません。あるいは仕様に変更が入っていることに気づかなかった可能性も。いずれにしろお詫びを含めた記事でございます。...
vanillaice000.blog.fc2.com
という事情なので、このままにしておきます。結果的に「プロフィールがOGPとして扱われている人(つまり代替画像設定をしていない人)は画像抜け状態になる」という形です。最終的に最も良いのは サムネイル代替画像を設定する ということになりますね。
ただ、個人的好みとして、画像が無い場合は「No image」という文言が欲しいんですよね。となると代替画像を加工しなくちゃいけない。めんどくさい。それに画像が無いんだったらimg要素使わなくてもテキストだけで良いじゃん… とかも思ってる ^^;
あと変に凝った画像を指定してしまうと、テンプレートと全然雰囲気合わないな、とか。背景色があるだけで「No image」って書いてある「画像」を設定するぐらいならテキストで「No image」って書けばで良いだけじゃん… とかもういろいろ(笑)
結論として仕様の説明だけに留めます。どうにかこうにかしたい云々があればできるだけカスタマイズ相談には乗りたいと思います(主旨から著しく脱線していなければ、です)
最後に、ガイダンスがわかりづれぇ (;`ｰ´)o
と我慢して頂いた方はごめんなさい。以後気をつけます ^^;
There are no comments yet.