wash_ashore - FC2ブログテンプレート

wash_ashore - FC2ブログテンプレート

テンプレート 配布中テンプレート
2021/08/18
35
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWD
wash_ashoreテンプレート

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

最終更新 2022.7.9
  • prefetchの数を調整
名称 wash_ashore
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 全文表示タイプ
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
OSダークモード対応 なし
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Lighthouseスコア
(トップページ平均)
Lighthouseスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 IE非対応
パソコン タブレット スマートフォン
2カラム 1カラム(960px未満) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下(960px未満)サイドメニュー --- 下
更新履歴 2022.1.6
  • 個別記事ページナビ iOS14でサムネイルが時折表示されない件修正
  • コメント関連ボタンツールチップ調整2点「コメントの投稿」の表示位置を右基点に調整 + コメンテーターの名前文字制限

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-prev");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-next");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-cat-prev");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-cat-next");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

【コメント関連ツールチップ修正】
マウスホバーで「To xxxさん」とツールチップ表示されるボタンにおいて、ハンドルネームにとても長い文字列を記載された場合、ツールチップの横幅によって画面超過が起こりますので、文字数の制限(末尾省略)と併せてツールチップ表示の基点を中央から右に移動させました。
<footer class="comment-info"> で検索するとhtml内に1箇所あります。このfooter要素の内容を最新バージョンからコピペしてください。

続いて .info-tooltip { を目印に検索すると4箇所あり、2つ目が対象です。このルールセットを以下の内容と差し替え。

@media screen and (min-width: 769px) {
  .info-tooltip {
    opacity: 0;
    display: inline-flex;
    padding: 3px 8px;
    position: absolute;
    top: calc(100% + 7px);
    z-index: 3;
    max-width: 150px;
    border-radius: 3px;
    background: var(--bgcolor-tooltip);
    color: var(--color-tooltip);
    font-size: var(--font_size-small);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(5px);
    transition: opacity .6s, transform .4s;
  }
  .info-tooltip::before {
    content: "";
    position: absolute;
    top: -4px;
    width: 8px;
    height: 8px;
    background: var(--bgcolor-tooltip);
    transform: rotate(45deg);
  }
  .btn-a .info-tooltip::before {
    right: 0;
    left: 0;
    margin: auto;
  }
  .btn-a:hover .info-tooltip {
    opacity: 1;
    transform: translateY(0);
  }
  .tooltip-name {
    flex: 1;
    min-width: 0;
    margin: 0 .3em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .comment-btn-item:last-of-type .info-tooltip {
    right: -8px;
  }
  .comment-btn-item:last-of-type .btn-a .info-tooltip::before {
    right: 20px;
    left: auto;
  }
}
更新履歴 2021.12.29
  • コメントを任意削除できない件修正
「ordinary_days」「wash_ashore」コメント削除できない件を修正しました

「ordinary_days」「wash_ashore」コメント削除できない件を修正しました

コメントを任意削除できない という問題が発生していました。該当テンプレートは以下の2つです。...

うぉっしゅ あしょぉ
承認されました。ありがとうございます。

先回のリリースから1年以上経過しています。これまでのテンプレートの仕様にいくつかの改善を加えていますので、興味のある方はこの下にある折りたたみ部位を開いてご覧ください。以降の内容は通常通りテンプレートの仕様説明です。

  1. head要素内 meta description の書き方を変更し、新機能の「SEOアドバイザー > title・descriptionタグチェック」での検査を容易にしました。
  2. lazyload適用img要素のダミーをdataURIから透過gifに変更し、新機能の「SEOアドバイザー > 記事内リンクチェック」での検査を容易にしました。
  3. カスタマイズが予想される箇所のガイダンスを増やし、英文ガイダンスも追加しました。
  4. 多言語対応を強化しました。
  5. ページ送りのサイズを大きく、押しやすくしました。
  6. 12px未満のフォントの使用を排除しました(個人の記事への影響はありません)
  7. ヘッダー内ナビゲーションのカテゴリリストで現在リンク(カレントリンク)をわかりやすくしました(カテゴリページのみ)
  8. 記事が「子カテゴリ」に属する場合に親カテゴリも表記するようにしました。
  9. カスタマイズを前提にダブルクォーテーションの省略・終了タグの省略を廃止しました。
  10. カテゴリページでのパンくずリストカテゴリ名表記(親子)を改善しました。
  11. コメント本文投稿時、入力に応じて高さを広げるようにしました。
  12. トラックバックURLにコピーボタンを追加しました。

1. head要素内 meta description の書き方を変更し、新機能の「SEOアドバイザー > title・descriptionタグチェック」での検査を容易にしました

テストはしやすくなりましたが、htmlでの見た目が非常に複雑・難解になりました。アドバイザーテストでの「FC2からの推奨」内容と比較しやすくした結果、こういう弊害となりました。meta要素自体をカスタマイズすること自体は稀だろうと思います。

その代わりにhead部位に「何かを追加する」際のガイダンスを増やしてあります。必ずガイダンスに従って作業を行ってください。

2. lazyload適用img要素のダミーをdataURIから透過gifに変更し、新機能の「SEOアドバイザー > 記事内リンクチェック」での検査を容易にしました

こちらもテストを優先しました。dataURIは 通信リクエストが発生しない ため、テストが結果を「リンク切れ」として返してきます。実際はリンク切れではなくそもそもリンクではない、ということなんですが、実際のリンク切れが存在している場合にこのdataURIの結果が邪魔になると思いますので、通信リクエストの発生するgif画像へと変更しています。

dataURIの利点を取りたい、という方は https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif を全て data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== と差し替えてください。

6. 12px未満のフォントの使用を排除しました。

Lighthouseでは12px未満のフォントが用いられると指摘が行われます。ところが実際はスマートフォンでは11px程度なら割とフツーに見れてしまうんですよね (∵`)
とはいえ12px未満のフォント利用は今後は個人の(自己責任の)カスタマイズ、という扱いにしたいと思います。みなさんが作成した記事内で意図的に指定した12px未満フォントサイズが強制的に補正されることはありません。

12. コメント本文投稿時、入力に応じて高さを広げるようにしました。

特にスマートフォンでは自身が記入したコメントの全体をボックススクロール無しで見られる方が便利だと思いますので調整しました。

13. トラックバックURLにコピーボタンを追加しました。

個人的には「トラックバックはもう必要ない」と考えています。恐らくFC2運営もその予定のようで、お気づきの方もいらっしゃると思いますが、新管理画面では「トラックバックの管理」が分類移行されています(「設定」分類から「ツール」分類へ)
とはいえまだ存在する機能ですから無視はできません。

現状ではFC2ブログ以外のブロガーさんがトラックバックを スマホから 利用したい場合、トラックバックURLを取得するinput要素が機能しませんので非常に苦労している状態です。そのためクリックでコピーできる機能を追加しています。ただ利用頻度はそんなに高くはないと思います。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE DEMO
画像クリックでデモ画面へ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

4. 色調変更に注意
色調(フォント色や背景色)の変更を行った場合、Lighthouseのスコアが著しく低下する可能性があります。自己責任の上、視認性に注意して変更を行ってください。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

Lighthouseスコアについて

About 'Lighthouse' score

仕様表中のスコアの一番左「Performance」は主に通信状態やサーバー状態の指標です。FC2ブログサーバーは調子の良いときは96〜98点程度でますが、場合によって50以下、ひどいときは10程度を記録することもあります(20を下回る場合のほとんどはサーバーに障害が出ている場合です)

他には「画像」についてwebpなど次世代拡張子の利用を推奨されますが、FC2ブログでは未サポートです。あとDOMの大きさ。これも基本は自動出力ですし、1ページあたりの記事掲載数などは個人設定で開放されていますので制限するのもどうかと(さすがに上限50件は過剰な掲載だとは思いますが)
「制限するのはどうか」というのは「私(Akira)が指図するべきでない」という意味であって、みなさんが個々に熟考して決めてね、という意味です。

テストを行ったときはたまたま98が出ましたが、流動的な数値ですから過剰に気にしないというか、しても仕方がない(ユーザーではどうしようもない)という点を事前にお伝えしておきます。

また、その他のスコアについてもカスタマイズ内容や記事の書き方によって大きく数値が変わることがあります。主に

  • JSウィジェット(アクセス解析, RSS表示, Twitterタイムライン など)の導入
  • 色調(フォント色, 背景色 など)の変更によるコントラスト比(contrast ratio)の低下
  • フォントサイズ変更(デフォルトよりも小さくする場合, 特にサイドメニュープラグイン)
  • 行間の変更(デフォルトよりも狭くする場合)
  • 掲載プラグインの内容
  • 画像を多く含む長文を追記を使わずに記事にしている
  • 記事やサイドメニューへの掲載画像の容量を削減していない
  • コメント欄で使用されたフォント色

などお気をつけください。ただあまりスコアを気にしすぎると対策に時間を使ってブログ更新が滞ったり、ブログの運営自体嫌になってしまったりするもこともありますので、ほどほどに、という感じで ^^;

例えば「コメント欄での色使用」は訪問者がコメントツールバーを利用するかどうか、するならばどんな色を使うのか、まで管理することはできませんし、使用された色に目くじらを立てるのもアレなので。気になって仕方がない(コメント内容のせいでスコアが落ちるのが気になる)という方はコメントツールバーを削除する、といった極端な方法を取るしかありません。

他にもSNS系各社のブランドアイコン色によって減点される、というトホホなこともあります(笑)
あとはねー、タグに使うワードなんかも指摘・減点されること結構あります。どうせーっちゅーの、ねぇ? (´・ω・`)

と、そんなこんなで「スコアよりも重要視すべきもの」というのは意外とありますので、あまりガチガチに構えない方が良い、と個人的には思っています。気にしすぎると何もできんからさー (´・ω・`)

あと、wash_ashoreの場合、emboss(凸) と deboss(凹) が色調変更で失われる可能性が高い です。カスタマイズ時にはその点も考慮してくださいね。

全体幅の調整

How to change width

メイン + サイド を合わせた横幅は最大 1200px、記事部位最大横幅は 850px です。記事幅を直接指定する箇所はありませんので、最大幅の数値を調整してください。

--width-whole: 1200px;/* 全体横幅(the total width) */ という箇所がありますので、緑部位 1200 を希望のサイズに書き換えます。

左右カラム入れ替えの仕方

How to reverse the direction of rows

#main-container { で検索するとスタイルシート内に 3箇所 ありますので、3つ目 のルールセット内 max-width: var(--width-whole); の直下に flex-direction: row-reverse; を追加(インデントする方は全角スペースを利用しないよう十分気をつけてください)

続きまして、#primary { で検索すると同じくスタイルシート内に 1箇所 ありますので、そのルールセット内 margin-right: var(--gap); の緑部位 rightleft に変更。

SNS関連ボタンについて

About sns buttons

全ページのフッターにはブログ管理人の各SNSタイムラインあるいはウォール, チャンネルなどへのリンクを掲載するためのアイコンを設けています。そして個別記事フッターには当該記事のシェア用アイコンがあります。

それぞれ 必要の無いものは削除 を行うようにしてください。放置する方が結構な割合でいらっしゃるようなんですが、ほかっておくとLighthouseスコアが下落するのはもちろんのこと、それ以前に空のリンクは訪問者が戸惑います。削除の際のガイダンスはhtml内にコメントをつけていますので参照してください。リンク設定のガイダンスも入れてあります。

逆に「増やしたい」という場合は 追加アイコンの準備はこちらではできません ので、ご自身で準備をし、デフォルト掲載htmlを参照しながら法則に則って追加を行ってください。

ブログタイトルがヘッダーに収まらない場合

How to adjust blog title length

ブログタイトル部位は2行まで表示可能です。パソコンではよほど大丈夫だと思いますが、タイトルが非常に長い場合はスマホ現行機種最小の320pxデバイス(iPhone SE系列など)で収まらないことも予想されます。2行を超える場合は省略されますのではみ出てしまうことはありませんが、ブログタイトルが省略されること自体避けたいので フォントサイズ調整 による対策をおすすめします。

該当箇所は /* ブログタイトルフォント大きさ, スマホ(font size of blog title in smartphone) */ で検索すると出てきますので、1.8 の数値を 1.7 や 1.6 など小さな数値に変更して様子を確認してください。
* 1.8 = 18px相当

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソルをデフォルト(pointer(指マーク)ではない、という意味)にしてあります。

スピード強化について

Behavior about navigation

Lazyload, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

prefetchはバックグラウンドで行われますが、過信して1ページ内に大量のリンクを記載しない よう気にかけてください(自身のブログページ以外のリンクはprefetch対象外です)
記事の表示件数をMaxの50件に指定するなどがそれにあたります。リンク数が過剰だと却ってスピードを落とすこともありますので10〜30件程度が妥当だと思います。また、スペックを最大限に活かすには SSL化 を行ってください。

lazyloadに関して、大手ブログサービスのほとんどが画像掲載に対し独自スクリプトによるlazyloadを採用していますけれども、FC2の場合は真逆の preload を採用しています。いずれも「アクセス直後の表示をできるだけ速く」という試みなんですが方法が真逆。

本来は「above the fold(ファーストビュー)内画像はpreload、below the fold(ファーストビュー外)の画像はlazyload」というのが理想だけれども両得というのはシステム上無理なので、個人的な好みのlazyloadは併せて採用することにしています (∵`)

「新着記事リスト」について

About recent list

プラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策
  • バリデートエラー無し(htmlが正確)

できればプラグイン側を非表示にされた方が良いと思います。

補足事項

Handouts

  • ページ内スクロールボタンの位置について

現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2022年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。

本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。

弊ブログ提供ブログカードについて

About 'blogcard' provided on my website

弊ブログが提供している ブログカード をご利用の方で 引用文にシャドウが付いてしまう という方は、お手数ですが以下の内容をスタイルシート末尾(あるいはブログカード関連スタイルの最終)に以下の内容を追加してください。

.blogcard blockquote {
  box-shadow: none;
}

古くからご利用頂いている方は該当すると思います。比較的最近導入された方はデフォルトCSSに既に記載されていますので追加の必要はありません。

FC2ブログのエディターツールで挿入した引用はクラス名等の付加が無く、詳細な識別はできませんので、自由の効くブログカード側の操作をお願いします。

ブログカード作成ブックマークレットをアップデートしました

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

Related post

Comments  35

Anthony
2021/08/19 (Thu) 17:43

待望の全文タイプのテンプレート。

 作成、本当にありがとうございました。(感謝)

vanillaice (Akira)
vanillaice (Akira)
2021/08/19 (Thu) 18:24

To Anthonyさん

こんにちは ('0')/

お気に召すか不安でしたが、使えそうなら安心しました。
こちらこそいつもありがとうございます :)

Kiyoharu Miyamoto
2021/08/22 (Sun) 13:42

使わせていただきました

全文タイプの作品が発表されて
さっそく、使わせていただきました。
vanillaice (Akira)様にはお体に気をつけて
お過ごしくださるように願っています。

素敵な作品をありがとうございました。
先ずは報告まで。

vanillaice (Akira)
vanillaice (Akira)
2021/08/23 (Mon) 15:24

To Kiyoharu Miyamotoさん

こんにちは ('0')/
ご丁寧にありがとうございます。励みになります :)

-
2021/09/05 (Sun) 06:16

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/09/05 (Sun) 14:55

To wash_ashoreの件 内緒さん

こんにちは。
誤字修正を同時に行ったときに完全にやらかしました。記事内容ほぼ全てordinary_daysの内容に差し替わっていました ( ̄∀ ̄;)
お知らせ頂かなければずっと気づかなかったと思います。ありがとうございます :)

佐藤
2022/01/25 (Tue) 18:21

http://parkland9.blog.fc2.com/

こんにちは

こちらで再度質問いたします。
wash_ashore のテンプレートで

フッターのYouTube等のリンクを作成したいです。

<!-- 注)youtubeへのリンク不要の方ここから削除(your YouTube channnel link, delete from here...) -->
<li class="sns_notification">
<a class="sns_btn emboss" href="" target="_blank" rel="nofollow noopener noreferrer" aria-label="YouTube"><href="https://www.youtube.com/channel/xxxxxxx">
<svg class="svg-inline svg-sns" viewBox="0 0 576 512" role="img" aria-hidden="true"><use xlink:href="#inline-youtube"></use></svg>
</a>
<span class="sns_small">YouTube</span>
</li>

上記のように<!-- 注)youtubeのアドレスをhrefの値に記載 例) を変更しましたが出来ませんでした。
教え下さい。
よろしくおねがいします。

vanillaice (Akira)
vanillaice (Akira)
2022/01/25 (Tue) 18:43

To 佐藤さん

* 操作ミスで以下コメントを削除してしまいました。再度記載します、また内容を若干変更しています *

----- 以下本文
ご配慮ありがとうございます :)

まず、テンプレートのsnsリンクに関するガイダンスが正しくなかった点をお詫びします。今回のご質問について変更箇所はその部位で合っています。

このコメント欄では「URLの自動リンク」を行っているため、実際にはただの文字列である「コメント(ガインダンス)」が反応し、html内容が狂ってしまいます。
なので、変更部位付近のhtmlだけ記しますので、注意深くご覧になり作業をお願いします。

ご自身のチャンネルページを開き、ロケーションバーから正しいURLを取得してください。以下の太字部位が変更対象箇所です。

例) チャンネルURLが https://www.youtube.com/c/BBCNews の場合(対象箇所のみ抜粋)

<a class="sns_btn emboss" href="https://www.youtube.com/c/BBCNews" target="_blank" rel="nofollow noopener noreferrer" aria-label="YouTube">

一度お試しください。

佐藤
2022/01/25 (Tue) 19:44

To vanillaice (Akira)さん

出来ました。ありがとうございました。

vanillaice (Akira)
vanillaice (Akira)
2022/01/25 (Tue) 22:11

To 佐藤さん

私の方でもチャンネルへの遷移を確認できました。お疲れ様でした :)

2022/08/03 (Wed) 13:35

ブログタイトルフォントについて

テンプレートをすごくお気に入りで使わせて頂いております。
ありがとうございます。

使わせて頂いているのに失礼なのですが、
どうしても、ブログタイトルフォント大きさとフォントを変更したいです。
画像にして変更しようかとも考えたのですが、デザインが崩れそうなので控えました。

お忙しいところ申し訳ありませんが、教えて下さい。

vanillaice (Akira)
vanillaice (Akira)
2022/08/06 (Sat) 23:58

To 朧さん

お返事遅くなりました。
恐縮ですが、「コメントに関する注意事項」(コメントフォームのすぐ上に掲載しています)をお読み頂きまして、正しいURLをご記入の上再度ご質問ください。

2022/08/07 (Sun) 09:57

再度すみません

お返事ありがとうございます。
このurlで大丈夫でしょうか?
お忙しいのに申し訳ありませんがよろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2022/08/07 (Sun) 12:15

To 朧さん

こんにちは ('0')/
お手数おかけします。

> どうしても、ブログタイトルフォント大きさとフォントを変更したいです。〜

ブログタイトルフォント大きさ
で文字列検索すると、スタイルシート内に2箇所あります。一つがスマホ用サイズ、もうひとつがPC用サイズです。大きさ変更については必ずここで数値変更を行ってください(行数計算などが含まれるため)

フォントの種類については、以下のページを参照しながらご希望のフォントを指定してください。
参考記事: 意外と知らないフォント設定の仕方
https://vanillaice000.blog.fc2.com/blog-entry-484.html
* 現在ではフォント名は英字名のみでOKです。

.blog-title-anchor
が変更対象です。このルールセットの最終行
text-indent: 2px;
の直後(あるいは一度だけ改行して下の行)にフォントファミリーの指定を行ってください。
また、このルールセット内の
letter-spacing: 2px;
text-indent: 2px;
の2行は各文字間の余白調整とその頭位置の調整なので、ご希望に沿って変更してください。2つの数値が同じになるようにしてくださいね。不要な場合は両方とも削除してください。

2022/08/07 (Sun) 19:13

To vanillaice (Akira)さん

お世話になります。
確かに自分目線な上に浅はかでありました。
お恥ずかしい限りです・・・。
私にはとても難しいので、
記載されていた「Mac/ Windowsの共通欧文フォント」の中からお借りしました。

教えて頂いた通りにtext-indent: 2px;
の直後(あるいは一度だけ改行して下の行)に
font-family: 'Comic Sans MS';
と記入しました。
プレビュー画面ではまだ反映されていないので
「各文字間の余白調整とその頭位置の調整」は確認後に致します。

お忙しいのにお世話おかけしました。
素敵なスキンをお借り出来て本当に嬉しく思います。
ありがとうございます。

vanillaice (Akira)
vanillaice (Akira)
2022/08/07 (Sun) 20:42

To 朧さん

こんばんは ('0')/
いえ、浅はかなんてことはないですよ。皆さん比較的「やりたい」とお考えになるカスタマイズです。ただ実際は思うほど簡単じゃなかった orz というめんどくさいアレです ^^;

反映されない原因はスタイルシート内に含まれる 全角スペース です。
1つ目は

background-image: url(ヘッダー画像のURL); /*画像の指定*/

という行のインデント、2つ目は

font-family: 'Comic Sans MS';

のインデントです。html, スタイルシートなど、日本語の文章以外での全角利用は不正(エラー)になりレイアウト崩れなどの原因になりますので、この機会にお留置きくださいね。

また、
background-image: url(ヘッダー画像のURL); /*画像の指定*/
この行の url(ヘッダー画像のURL) の部位は許可されません。今後のための訳注(コメント)だと思いますので、以下のように正しいコメントアウトに修正してください。

/* 画像の指定
background-image: url(ヘッダー画像のURL);
*/

font-family の指定についても、comic sans は欧文専用書体ですから日本語の文字を持っていません。なので以下の通り修正を。

font-family: 'Comic Sans MS', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, Meiryo, 'Yu Gothic', sans-serif;

-----
今回に関わりのある参考記事を載せておきますね。

関連記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

関連記事: コメントアウトを活用しよう
https://vanillaice000.blog.fc2.com/blog-entry-1080.html

2022/08/08 (Mon) 03:43

To vanillaice (Akira)さん

詳しく教えて下さりありがとうございます。
とても参考になります!!慎重に変更します!!
少々、不安もありますが・・・(汗)

2022/09/04 (Sun) 19:35

こんばんわ

お世話になります。

YouTube:の動画が記事内に張り付けると、
パソコンには反映しているのですが、スマホには反映されていません。
対処方法を教えて下さい。

vanillaice (Akira)
vanillaice (Akira)
2022/09/04 (Sun) 21:38

To 朧さん

こんばんは ('0')/

まず、こういったご相談の場合は以下の2点に留意して質問をお願いします。

1. 必ず実際のサンプルを掲載すること
2. 該当ページのURLを提示すること

「反映されないから」という理由で内容を消してしまう方が多いのですが、原因を突き止めるためには実際の様子を目視確認することが必須です。また、「どのページが該当しているのか」は質問者にしかわかりません。私が全ページから該当を探すといった作業に時間を費やすことはできませんので、質問時の注意2点について今後はよろしくお願いします。

-----
どのページが該当かわかりませんので、既存のyoutubeを拝見しましたが、私からはスマホでも閲覧できています。
以下はhttp://hukumatuhukumi.blog.fc2.com/blog-entry-48.html のスクリーンショットです。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/S__20045827.jpg

最新記事にそれらしい文言があるので、このページに掲載されたのかな?と思いますが、youtube自体のソースは見当たりませんので検証ができません。記事内で利用したソースコードに間違いがあるのかもしれないですし、テンプレート自体にエラーコードがあるのかもしれませんが、いずれにしろ現時点で原因究明はかないませんので、実際にyoutubeを掲載した状態で再質問をお願いします。その際には必ず該当ページURLの添付(コメント本文に記載でOKです)をお忘れないようお願いします。

とりあえず現時点で、何度も繰り返しになり申し訳ないのですが、ご自身がカスタマイズされた際に誤って入力してしまった全角スペースの削除 を行って頂けないでしょうか。この全角スペース混入はクリティカルエラー(致命的エラー)なので修正必須です。作業が難しいでしょうか?説明がわかりにくいでしょうか?
そうであればその旨お伝えくださいね。可能な限りサポートしたいと思います。

現段階で修正必須の大きなエラーは以下の通りです。
【1】
http://hukumatuhukumi.blog.fc2.com/blog-entry-57.html
のページ、「本文」の方にhtml構文エラーがあります。編集画面を開き、「本文」の末尾が

今回は雪肌精からのお知らせです。

になっているかと思います。カーソルを最終に合わせ(最終カーソル位置は上記文言よりも下に入るはずです)、「お知らせです。」の句点の右側になるまで deleteキー を押してください。余白が必要な場合はそこから改めて enterキーで作成を行ってください。

【2】
head内(<head>から</head>まで)にある

<style type="text/css">
<!--
a:hover {
position: relative;
top: 2px;
left: 2px;
text-decoration: none;
}
-->
</style>

この記述内容は不正です。反映(実行)させたい場合は(リンクをマウスホバーするとガクンと右下に下がるモーション)、

<style>
a:hover {
position: relative;
top: 2px;
left: 2px;
text-decoration: none;
}
</style>

に書き直してください。反映させたくない場合は正しくコメント化してください。あるいは削除を。

<!--
<style>
a:hover {
position: relative;
top: 2px;
left: 2px;
text-decoration: none;
}
</style>
-->

このモーションはリンク全てに適用され、ユーザビリティにあまり良くない影響を与えていますので、できれば削除をおすすめします。

------
構文エラーというのは修正しない限り永遠にページレイアウトに悪影響を与えます。先日のスタイルシートの件と合わせ、今回確実に修正を行うようにしましょう。でないと今後ちょっとしたことでも不具合が生じるため、その都度質問に訪れなければならない、という憂き目にあってしまいます。
作業に自信が無い場合は、現在のカスタマイズ済テンプレートからの復帰ではなく、テンプレートの再DLを行って、正常な状態から改めて個人カスタマイズ適用されることをおすすめします。

記事内で利用したhtmlの構文エラーについては、テンプレートユーザーさん個人に一任されているのでテンプレート側での操作やテンプレート製作者による修正はできません。その都度構文チェックを行って、エラーを生じさせないよう注意が必要です。

2022/09/04 (Sun) 23:58

こんばんわ

早速のお返事ありがとうございます。

下記2点につきましては、書き忘れてしまいました。
気を付けます。申し訳ありません。

1. 必ず実際のサンプルを掲載すること
>了解致しました。申し訳ないです。

2. 該当ページのURLを提示すること
>了解致しました。申し訳ないです。

現在のカスタマイズ済テンプレートからの復帰ではなく、テンプレートの再DLを行って、正常な状態から改めて個人カスタマイズ適用されることをおすすめします。
>承知致しました。有難うございます。


・該当ページのURLは、
http://hukumatuhukumi.blog.fc2.com/blog-entry-59.html
http://hukumatuhukumi.blog.fc2.com/blog-entry-56.html
http://hukumatuhukumi.blog.fc2.com/blog-entry-54.html など。
YouTubeを貼った記事全てのページみたいです。
今まで気が付かず、今日、知りました。

・修正必須の大きなエラー【1】【2】に関しましては、直しました。
ご指摘ありがとうございます。

お手数おかけ致しました。
丁寧に回答頂きまして有難うございました。

vanillaice (Akira)
vanillaice (Akira)
2022/09/05 (Mon) 00:19

To 朧さん

ご理解とご協力をありがとうございます :)

3件のページを確認しましたが、いずれも問題なく表示され、再生も通常通り行えます。各ページのスクリーンショットです。

【記事番号 59】
https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/S__20062213.jpg

【記事番号 56】
https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/S__20062212.jpg

【記事番号 54】
https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/S__20062210.jpg

私の環境は
iPhone 13
OS 15.6

です。朧さんのデバイス環境を教えて頂けないでしょうか。
例) Google Pixel 6a/ OS android 12 など

2022/09/05 (Mon) 09:37

To vanillaice (Akira)さん

お早うございます。

療養なさっておいでなのに申し訳ありません。
お加減はいかがですか?ご自愛下さいませ。

早速にお返事ありがとうございます。
各記事まで確認下さり有難うございます。

私の機種は古くて、
iPhone 7 Plus
os 15.6.1
ですが、家族の機種で、
iPhone 12pro
os 15.6.1
ですが、こちらも確認しましたが見れませんでしたので、お尋ねさせて頂きました。

確認をして下さって見れるとのことなので安心しました。お手間おかけ致しました。
仰られる通りに最初からやり直します。
有難うございました。

お大事になさって下さい。

vanillaice (Akira)
vanillaice (Akira)
2022/09/06 (Tue) 00:21

To 朧さん

お気遣いありがとうございます。もうすっかり良くなりました :)

ちょっと今更で申し訳ないんですが、「youtubeが反映されない」というのを私は「youtubeのプレイヤー自体がページに出てこない、表示されない」という意味で受け取ったんですが、もしかして「再生エラーになる」という意味でしたでしょうか。それだとまた話が違ってくるんですが。

youtubeなどの動画はブラウザやOSのセキュリティ設定が影響することがあり、その場合は「再生ができない」という症状になります。それでもプレイヤー自体は表示されるはず。

私の環境ではいずれも(プレイヤー表示なし, プレイヤー表示あり再生エラー)再現ができませんので、できればスクリーンショットをお見せ頂くなど状況説明の工夫をお願いします。

2022/09/06 (Tue) 00:41

To vanillaice (Akira)さん

こんばんわ。いつも有難うございます。

いえいえ、YouTubeを貼り付けてもパソコンから見ると表示されているのですが、スマホだと表示されていないので、お訊ねしました。

でももう大丈夫です。有難うございました。
お身体ご自愛下さい。

-
2022/09/06 (Tue) 01:08

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/09/06 (Tue) 01:16

To 朧さん(終了のご報告)

合ってた ^^;
表示されない、というのは昔のOSで発生したことはありますが、手元のiPhone7でもごめんなさい、やはり再現できなかったです。
質疑応答終了ということで了解致しました。お疲れ様でした :)

---- 追記 同日

今ある方が協力してくれて気づいたんですが、朧さんはyoutubeの埋め込みをFC2のエディターを通してされていますよね。youtubeに直接赴いて、そこから埋め込みコードを取得して張り替えてみてはどうでしょうか。
私も以前から「動画埋め込みはyoutubeでコードを取得してやった方が良い」といった記事を書いているんですが、今回すっかり失念していました。もしかすると何か影響あるのかも (∵`)

vanillaice (Akira)
vanillaice (Akira)
2022/09/06 (Tue) 01:23

youtubeの件 内緒さん

それですわ。すっかり忘れていましたが、ご指摘の data-id というのはFC2のエディターを通したものに付加されるやつ。そうだわー、なんで掲載経路に気づかなかったのか。
もしかするとそれが原因か?まだわからないけど ^^;
ご協力助かります。ありがとうございますー! :D

2022/09/07 (Wed) 10:46

To vanillaice (Akira)さん

こんにちは

何度も有難うございます。
YouTubeの埋め込みタグを利用して貼り付けるのも実行してみましたが、残念ながらスマホには表示されませんでした。これも確かめてから質問させて貰いました。

その後も色々確認していますが、記事によっては表示されているページもあるので不思議です...。でももうご教示通り最初からやり直してみます。

こんなにお手を煩わせてしまい申し訳ないです。
有難うございました。何度も回答頂いて感謝です。

-
2022/09/08 (Thu) 00:38

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2022/09/08 (Thu) 03:23

To vanillaice (Akira)さん

こんばんわ

何度もすみません。報告させて下さい。

スキンテンプレートを入れ替える前に、全ての全角などの確認をして教示頂いたことはクリアにしてから、記事にYouTubeを貼ってみたところ、

なんと!ちゃんと反映されていました!でも、仰られるようにFCの用意してある貼り付けではなく、埋め込みタグで貼り付けました。やはりそこにも問題があったのでしょうか?

いずれにしろ何とかクリア出来ました!有難うございます。これからは埋め込みタグにて利用していきます。

お忙しい上に、具合のお悪い中、本当にお世話をおかけ致しました。他の方にまでお世話になり大変に恐縮です。有難うございました。

このテンプレートは大好きなので、大切に使わせて頂きたいので慎重に進めていきます。

有難うございました。

vanillaice (Akira)
vanillaice (Akira)
2022/09/12 (Mon) 21:06

To 朧さん

お返事遅くなりごめんなさい。
修正されたということで安心しました。余力があればスタイルシートの方の全角スペースも取り除いてくださいね。そうすればブログタイトルの英字フォントがちゃんと comic sans になります。
お疲れ様でした :)

vanillaice (Akira)
vanillaice (Akira)
2022/09/12 (Mon) 21:07

youtubeの件 内緒さん

お返事遅くなりました。いつもご協力ありがとうございます :)

2022/09/15 (Thu) 19:15

To vanillaice (Akira)さん

お返事遅くなりました。
スタイルシートの確認もします。
ありがとうございました。

2022/09/17 (Sat) 04:13

こんばんわ

スタイルシートを確認し、ご指導頂いた箇所などの全角を消しましたら、
タイトルが無事に変更されました。有難うございます。
何度も相談に対応して下さり、本当に感謝致しております。
もっと勉強をしていきたいと思います。お世話をおかけ致しました。
有難うございました。

vanillaice (Akira)
vanillaice (Akira)
2022/09/17 (Sat) 14:57

To 朧さん(完了のご報告)

ご希望がかなってよかったです。お疲れ様でした :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)