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

wash_ashoreテンプレート

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

名称
wash_ashore
うぉっしゅ あしょぁ
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
全文
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • プロフィール
  • 最新記事サムネイルリスト
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.9 2023.12.22
  • グローバルナビゲーションを固定できるようJSを分離

自身で修正される場合は

<script src="https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/ordinary_days__min.js" async></script>

上記赤字部位のURLを下記の通り変更

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/wash_ashore_ver9.js" async></script>

続いて </body> の直前に以下のscript要素を追加。

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/peekaboo_navigation.js" async></script>
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.22
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.9.9
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • ユーザビリティの最適化
  • コメント削除アラート追加
  • その他UI調整

カラム入れ替えや記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.7.9
  • prefetchの数を調整
更新履歴 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つです。...

本ページの内容は2023年9月9日メンテナンス以降のバージョンが対象です。

サンプル

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設定「有効にする」

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

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

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

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

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

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

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事ヘッダーの管理人アイコン をクリックすると別タブで開きます。

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

Cautions before asking for something.

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

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

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

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

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

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 朧さん(完了のご報告)

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

Anthony
2023/01/16 (Mon) 02:17

ご教授願いたし

シンプルで軽い唯一無比の全文表示タイプのテンプレートを使用させていただいて、感謝の極み!

 ウチのブログは編集部制を敷いていて、同一のPCで顧問の内妻やスタッフが記事を書いたり記事にコメントしたりしているのですが、

 どの記事も「posted by Anthony」と表示され、僕のプロフィール画像(黒木メイサさんですが、、、笑)が表示されます。

 そして、コメントも他の者がコメントをしても、僕のプロフィール画像が表示されてしまいます。

 これらを表示されないようにするには、どうしたら、よいのでしょうか?

 テンプレートのどの箇所を削除すれば、良いのでしょうか?

 ご多忙とは思いますが、是非とも、教えていただけますでしょうか?

vanillaice (Akira)
vanillaice (Akira)
2023/01/16 (Mon) 23:38

To Anthonyさん

こんばんは ('0')/

まず最初に、FC2ブログでは複数名による管理システムが導入されていないため、いずれも『削除』という対処になりますのでご了承くださいね。

-----
【posted by〜 削除】

<div id="entry-author">
を目印に検索するとhtml内に1箇所あります。その上にある
<!--permanent_area-->
から、直近、下の方にある
<!--/permanent_area-->
までを削除。

プロフィール画像を削除することで、記事編集画面へのリンクが失われる点に留意してください。

【コメントのアイコン削除】

<img class="comment-icon-author
を目印に検索するとhtml内に1箇所あります。その上にある
<!--comment_author-->
から、直近、下の方にある
<!--/comment_author-->
までを削除。

一度お試しください。
* 別件で修正すべき内容がありますので、作業完了後にお伝えしますね。

Anthony
2023/01/17 (Tue) 00:31

削除しました

指定箇所を削除しました。

 自分の思っていたとおりに表示されています。

 感謝!

 それでは、別件の修正内容をお待ちします。

vanillaice (Akira)
vanillaice (Akira)
2023/01/17 (Tue) 00:32

To Anthonyさん

まずはご質問の件の解消を私の方でも目視確認でしました。お疲れ様でした :)

----- 別件

コメント欄に長いURLが記載された時にデバイスの横幅を超過するためモバイルユーザビリティエラーになってしまいます。
以下の内容をスタイルシート最終に記載して防いでくださいね。
* この表示不備はPCのchromium系ブラウザ(google chromeなど)では起こりません。iPhoneのSafariのブラウザで起こります(iPhoneはAppleの規定により全てwebkit系ブラウザです)

.comment-body a {
display: inline-block;
max-width: 100%;
word-break: break-all;
}

Anthony
2023/01/17 (Tue) 00:53

修正完了の報告

別件部分も追加して、完了!

 編集部及び投稿者を代表して、感謝いたします、

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

 この「wash_ashore」テンプレートが無ければ、「Synchronisity」を使い続けていたか、FC2公式の爆速を嫌々ながら使っていたと思います。

 SNSが隆盛の世の中ですが、今後ともブログの運営を楽しんでいきたいです。

vanillaice (Akira)
vanillaice (Akira)
2023/01/17 (Tue) 02:20

To Anthonyさん(重要)

ごめんなさい。いっこ書き忘れました。

.comment-contents {
min-width: 0;
}

これも追加してください。二度手間でごめんなさい。

Anthony
2023/01/17 (Tue) 02:28

追加・追加 完了

先程の箇所に続いて、直後のところに追加しました。

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

vanillaice (Akira)
vanillaice (Akira)
2023/01/17 (Tue) 02:36

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

何度もごめんなさい。はみ出し解消を確認できました。お疲れ様でした :)

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