Son-Of-Valkyrie - FC2ブログテンプレート

Son-Of-Valkyrie - FC2ブログテンプレート

テンプレート 配布中テンプレート
2018/10/26
87
vanillaice (Akira)
vanillaice (Akira)
LivingStandardRWD

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

名称 Son-Of-Valkyrie さん おぶ ゔぁるきりぃ
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 要約表示タイプ
記事幅(PC 最大) メイン --- 最大 約960px(内寸 約883px)
サイド --- 最大 300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし
Google fonts導入 なし
Font Awesome導入 なし
Lazyloading導入 あり
OSダークモード対応 なし
パン屑リスト表示 あり
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Lighthouseスコア
(トップページ平均)
Son-Of-Valkyrie Lighthouseスコア
固有機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン
2カラム
サイドメニュー --- 右
タブレット
2 or 1カラム
サイドメニュー --- 右 or 下
スマートフォン
1カラム
サイドメニュー --- 下
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.20
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.9.9
  • HTLMのミス及びその他CSSの軽微なミスを修正
更新履歴 2023.8.21
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • その他UI調整

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

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

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

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

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

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

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

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

更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再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("prev-a");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("next-a");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("prev-cate-a");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("next-cate-a");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つ分割に変更しています。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

更新履歴 2020.5.28
  • ページ送りのJSを修正
更新履歴 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.11.25
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

<li class="comment-btn-list"> で検索するとhtml内に4箇所あります。2つ目の

<li class="comment-btn-list"><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%comment_name>さん"><svg class="svg-inline svg-inline-reply" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a>

を以下の通り 変更

<li class="comment-btn-list"><!--comment_author--><!-- <!--/comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-reply" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん"><svg class="svg-inline svg-inline-reply" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--/comment_author-->
②について

#community" で検索するとhtml内に3箇所あります。3箇所とも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、1行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いて #comment_form { で検索するとスタイルシート内に1箇所ありますので text-decoration: none; の直下に padding-top: var(--navi-height);追加

③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

#inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

続いてすぐ下にある #inner-contents {line-height: 1.9; の直下に margin: 20px 0;追加

続いてスタイルシート末尾に以下を 追加

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

最終更新 2018.12.21
  • サイドメニューinput要素に関するCSSの変更

不具合修正ではありませんので旧バージョンのままお使い頂けます。

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

さん おぶ ゔぁるきりぃ
ダーク系背景が見直されています。起床から就寝までスマホを離さない人が増えており、ベッドサイドで読むには白背景だと目が疲れてしまうんですね。
なのでデザイントレンドというのではなく必要が生じた、というところでしょうか。
Mac OSがダークモードを導入したり、YouTubeなんかもそうですよね。
ブログのイメージがあるでしょうからご自身の運営方針と相談してから利用をご検討ください。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

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'●)/

Related post

Comments  87

NOB
2018/10/28 (Sun) 09:41

PC版とスマホ版表示について

Akiraさん

久しぶりに質問なのですが黒系のテンプレートを見つけてSon-Of-Valkyrieを早速使わせてもらってるのですが、
右上の花の画像を自分の画像に入れ替えたのですが、PC版では入れ替えた画像表示しますが、スマホ版だと従来の花の画像になります。スタイルシート編集で他にも触らないといけないのでしょうか?
お時間あればよろしくお願いいたします。

記事中の写真のところだけ右クリック禁止にしてます。

勝手な質問ですいません。

NOB
2018/10/28 (Sun) 13:45

自己解決出来ました。

お騒がせいたしました。
PCでスマホ表示させて画像チェックしたらスマホ表示用画像が別にあるのに気づきました。
スタイルシート編集でも一か所変更したら出来ました。

vanillaice (Akira)
Akira
2018/10/29 (Mon) 17:54

To NOBさん

こんばんは (o'ω')ノ

今回は背景の変更を想定していませんでしたのでお手数おかけしました。
自己解決されたということでお疲れ様でした :)

神谷 幸弥(さや)
2018/12/20 (Thu) 20:25

グローバルナビゲーションにカテゴリ

こんばんは。
せっかくのダーク系をガラリと変えて使用しております。

グローバルナビゲーションのABOUTの部分をカテゴリ一覧に置き換えることは可能でしょうか?

vanillaice (Akira)
Akira
2018/12/20 (Thu) 20:55

To 神谷 幸弥(さや)さん

こんばんは ('0')/

ナビゲーションにカテゴリを追加するにはリンクをひとつひとつ書き足すかあるいは以下のページを参照しながらモーダル実装するかのいずれかになると思います。
https://vanillaice000.blog.fc2.com/blog-entry-537.html

記事内容はメールフォームの導入なので modal-wrap の中身を公式プラグインの「カテゴリ」に差し替えればOKです。
そしてmodalクラスはサイト内検索で既に使われていますので、modalの前に category- を付加するなどの対処を行ってください。modalが付いているもの全てです。CSSも同様。

例)
modal-trigger → category-modal-trigger
modal-overlay → category-modal-overlay
modal-wrap → category-modal-wrap
...

細かいカスタマイズについては自己責任で。よろしくお願いします。

神谷 幸弥(さや)
2018/12/21 (Fri) 06:25

To Akiraさん

おはようございます。
出来ました。ありがとうございます。

vanillaice (Akira)
Akira
2018/12/21 (Fri) 13:16

To 神谷 幸弥(さや)さん

こんにちは。
上手く導入できたようで良かったです。
お疲れ様でした :)

-
2018/12/23 (Sun) 18:16

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/12/23 (Sun) 21:13

To Bingサイト所有権の件 内緒さん

BingはSearch Consoleと仕様が違いますので「サイトの移転」を行ってください。
よろしくお願いします。

-
2018/12/24 (Mon) 13:32

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/12/24 (Mon) 16:19

To Bingサイト所有権の件 内緒さん②

> サイトの移転は行っていたのですが、プロパティ上でhttp表記になっているのが気になって、プロパティを消して作り直し〜

こういうのは基本的にやってはいけないことですね (´・ω・`)
インデックスされているページが既に存在していて、一日でhttpsに書き換わるわけではありません。
httpとhttpsが同じ所有者で同一のサイトだと証明する手続きが取れなくなってしまいますよね。

とりあえずこんな記事もありました ↓
Bing WEBマスターツールへ登録しよう!初心者ブロガーの体験記です! - りゅうまるブログ 様
https://ryuumarublog.com/bing-web-master-tool

コウダイ
2018/12/24 (Mon) 18:23

To Akiraさん

参考サイト見ました。httpsでは出来ませんでしたが、httpで何回か試したら検証し直すことが
できます?みたいなのが出て復帰することが出来ました。ありがとうございました。

vanillaice (Akira)
Akira
2018/12/24 (Mon) 21:26

To コウダイさん

msでは「httpからのリダイレクトである」という証明が重要なんだろうと思いますのでそこから「サイト移転」という手順になると思います。
お疲れ様でした。

きろろ
2019/02/09 (Sat) 00:37

お借りしました

お久しぶりでございますm(_ _)m
テンプレート、お借りいたしました。
で、もうしわけないのですが……
PCとiPadは普通にサムネが表示されているのですが、
iPhonの画像が表示されないのです。
ちなみになにもカスタマイズしておりません。
お暇なときでかまいませんので、みてあげてくださいませ。
もしかしたら、こちらの携帯のせい? かもしれませんので。
よろしくお願いいたします。

追伸
読み込みが遅かったようです。
まえのブクマを消して、新しく登録したら読み込めました(>_<)
お騒がせいたしましたm(_ _)m

vanillaice (Akira)
Akira
2019/02/09 (Sat) 01:03

To きろろさん

こんばんは。

私の環境
機種 --- iPhone XS
OS --- iOS12.1.4(最新)
ブラウザ --- Google Chrome, Firefox, Safari
では問題なく表示されているようです、一度再起動してご確認ください。
それでもダメな場合は「機種名」「OSバージョン」「閲覧ブラウザ」を教えてくださいね。
よろしくお願いします。

あと、Colorboxをお使いになるならjQuery本体を入れないと動かないですよ。このテンプレートにjQueryファイルは導入していません。そしてこれまでにもう何度もお伝えしてますがCSSのlink要素(https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox.css)をこの位置に記載することはできません。</head>直前に記載してください。

-----
お返事が入れ違いになってしまいました。
読み込みが遅いのはメモリ不足 + colorboxの動作不全が原因だと思います。
iPhoneに限らずスマホは一日一度はマルチタスクを終了させると共に電源をOFFにしてメモリを開放した方が良いですよ。
または旧ブックマークがhttpのままでリダイレクトに時間を要した可能性もあります。

きろろ
2019/02/22 (Fri) 00:42

To Akiraさん

お返事が遅くなりました。
みんなから遅れてのインフルで寝ておりました。

Colorboxは現在使用しておりませんw
読み込みが遅くなっていたのは、ブックマークから表示させていたせいだと思います。
一度記事を表示させれば読み込むので、あれえ?と思いブックマークを削除しました。
現在は普通に表示されておりますよ。

>iPhoneに限らずスマホは一日一度はマルチタスクを終了させると共に電源をOFFにしてメモリを開放した方が良いですよ。
あれまあ……
なんでもiPhonは充電を100%にしていても大丈夫だとか、アップルの人が教えてくれたので
再起動をするのはせいぜいosの更新のときだけ? ですかねえ。
一日一度は電源を落としたほうがよいのですね!
ありがとうございましたm(_ _)m

vanillaice (Akira)
Akira
2019/02/22 (Fri) 17:49

To きろろさん

こんばんは。

colorboxですがbody終了タグの前にしっかり記載されていますよ。利用しないのであればテンプレートに記載する必要はありません。無駄に速度が落ちるだけなので削除してくださいね。

iPhoneの方、充電はなんの関係もありません。マルチタスク(複数のアプリ起動)やブラウザのタブを複数開いたままにして終了しないなど、バックグラウンドで複数のアプリが動いたままだと メモリ・CPU、つまり処理能力や処理速度が低下するのでメモリの開放をするために タスク終了 + 電源OFF をおすすめしました。再起動ではなく電源OFFです。再起動と電源OFFは意味も方法も違います。

Appleの人ではなく通信キャリアの店員さんではないかしら。長男が日本に一時帰国中でその間Appleに勤めていますが、Appleの人間はそんなことは言わないはず(笑)

お体お大事になさってくださいね。

きろろ
2019/02/23 (Sat) 00:43

To Akiraさん

こんばんは。

>colorboxですがbody終了タグの前にしっかり記載されていますよ。利用しないのであればテンプレートに記載する必要はありません。無駄に速度が落ちるだけなので削除してくださいね。

おっと、ほんとうでした。
以前におかりしたとき、設置したまま忘れておりました。
削除いたしましたよ。

iPhonの意味、わかりましたよ。
そこは大丈夫ですw
なんか、後ろで何枚もブラウザを表示したままとかアプリを起動しながらということは
Android時代からしないほうなんですよw
Androidが重かったせいもあって、常に消す癖がついておりますw

そうそう、iPad用ではないのですが
スタイラスペン? ですか。買ってしまいました。
すごい便利です。
年ですかね……、画面の反応が指先だと今一つ悪いんですよ。
いやあ、世の中どんどん便利になっていくもんですw

クラクラ
2019/02/27 (Wed) 03:11

サイト幅について

Akira様。
素敵なテンプレートありがとうございます。
知識があまりなく、解決出来ないので質問させてください。
サイト幅を1300pxから1040pxに変え、サイドメニューを450pxから250pxに変えたのですが、
メイン部分(記事部分)のサイズが変更できず困っています。
サイドメニューの幅を例えば100pxに変えてみても、サイドメニュー部分には450px分の空間が出来ている状態です。

サイドメニューの幅を減らした分、記事部分の幅を増やすにはどうしたらいいのでしょうか?
お時間のある時で結構ですので、ご教示していただけると助かります。

(テンプレートの仕様を変えてしまうような質問でしたらすみません汗)

vanillaice (Akira)
Akira
2019/02/27 (Wed) 15:26

To クラクラさん

ありがとうございます :)

ちょっとよくわからないんですが、サイドメニュー450pxというのはどこから導き出された数値でしょうか。デフォルトのサイドメニュー幅は本記事内の仕様表にもある通り 300px です。サイドメニュー部に450pxの空間とのことですが、その状態を確認できません。
現在のクラクラさんのページはサイドメニュー250px固定になっています。


> サイドメニューの幅を減らした分、記事部分の幅を増やすには〜

まずご希望を整理してください。全体幅を1300pxから1040pxに変更されたのですから、デフォルトでは記事幅 960px であったものが全現時点で750pxと、デフォルトよりも小さくなっています。

・全体幅を狭くしたい? YES or NO
・サイドメニューの幅をいくつにしたい?
・サイドメニュー幅は常に固定したい? YES or NO(デフォルトではシングルカラムになった際に最大450pxまでの自動調整がかかります。スマホでは横ほぼ100%になります)

特に自動調整について、現在クラクラさんのカスタマイズによってスマホで見た時のサイドメニューが非常に細くなってバランスが悪いように思います(ブラウザの幅を狭くすればすぐにわかります)

希望の状態が見えてこないのでまずご回答をお願いします。
なた、可能であれば「450px空いている」と判断したのは何故なのか、スクリーンショットなどで説明してもらえると助かります。
よろしくお願いします。

-
2019/02/27 (Wed) 17:32

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/02/27 (Wed) 19:10

To Son-of-valkyrieの件 内緒さん

そうだったんですね。了解です。
CSSを全て一旦デフォルトに戻して頂いて、そこからの説明になります。

> 全体幅を狭くしたい(1040pxくらいに)〜
> サイドメニューをちょっと狭くしてその分、記事部分を広くしたい〜7:3くらいにしたい〜

で、このテンプレートはそもそもメインとサイドの「比率」という考えではありません。サイドメニューが右にある時は常に300pxを保持します。ですから画面幅によって7:3であったり6:4であったりするわけなんです。
これはなぜかというと、比率でやってしまうとどうしても画面が狭くなった時にサイドメニューの横幅がギュウギュウ詰めになって折返し(改行)も多くなりますし、場合によっては外部ウィジェット(twitterなど)の幅が非常に狭くなって見苦しくなったりはみ出したりことが多いからです。
まずその仕様をお伝えしておきます。
内緒さんには6:4に見えていても、他の方には7:3(比較的大きめの画面)に見えているかもしれません。
比率を重視したい場合にはCSS内容を大きく変更する必要が生じますので今回はお力になれません。ごめんなさいね。
比率で製作している共有作者さんもいらっしゃいますので、そちらへの切り替えもご検討くださいね。

-----
その上でまず全体幅を狭くするには
1300px
で検索するとスタイルシート内(CSS)に2箇所ありますので双方を希望の数値(1024px)に変更。

-----
サイドメニューを狭すくるには
#secondary {
で検索するとスタイルシート内に3箇所あり、3つ目のものを対象として
デフォルトの
width: 300px;
太字の 300 の数値を希望の数値に変更。

続いてその近接に
max-width: calc(100% - 300px - 40px);
というのがありますので、こちらも同数値に変更。

この処理でメイン幅はサイドメニューを減らした分だけ勝手に大きくなります。

続いて
.side-menu {
で検索。2箇所あり2つ目のものを対象とし、
width: 300px;
太字の数値を先ほど #secondary に対して指定したものと同数値に変更。

以上です。よろしくお願いします。

クラクラ
2019/02/27 (Wed) 21:33

感謝

こんばんは。
早速のお返事ありがとうございます。
上のは間違えて管理人のみでコメントしてしまいました。すみません(汗)

とてもわかりやすい説明で、知識がない自分でも無事やりたいことが出来ました!
今後もAkiraさんのブログを読んで色々勉強させていただきます。
本当にありがとうございました。
テンプレート大切に使わせていだだきます。

vanillaice (Akira)
Akira
2019/02/28 (Thu) 23:37

To クラクラさん(完了のご報告)

こんばんは。

理想に近づけましたでしょうか。
こちらこそありがとうございます。お疲れ様でした :)

hige
2019/03/02 (Sat) 00:05

テンプレの紹介の仕様一覧表で
トップページ記事並び 全文表示タイプ
となってますが

要約表示タイプでは

vanillaice (Akira)
Akira
2019/03/02 (Sat) 00:07

To higeさん

あー。ほんとですね。
お知らせありがとうございます。修正しました ('0')/

yksb
2019/03/24 (Sun) 19:42

文字色の一括変更について

こんばんは

以前Alternativeを使用していましたが、AkiraさんにSSL化についてアドバイスを頂いたことをきっかけに、こちらのSon-Of-Valkyrieに引っ越しをしました。
初心者ですがAkiraさんや、他の方のサイトを参考に、何とか混在コンテンツの問題も解決出来て安心しています。

質問ですが、記事本文の青色の文字色だけを一括で変更したいと思っています。
<span style="color:#0000FF"></span>
今まで、記事本文に上のコードを使って文字に色を付けていました。
黒背景に青文字が見にくいので、今まで使用してきた記事に一括での変更は可能でしょうか?

vanillaice (Akira)
Akira
2019/03/25 (Mon) 00:07

To yksbさん

こんばんは。

一括変換は容易ではないです。何故なら対象要素にクラス名が付いていないからです。
要素特定ができませんのでどうにも… (´・ェ・`)

普通はクラス名を見つけてそのクラスを持つ要素にスタイルを当てるか、要素名でスタイルを当たるかするんですが、クラス名はありませんし要素名は span ですよね。span は文字色変更だけでなく太字などにも用いられますし、青色だけでなく赤色など他の色に変更している場合もあるわけなんです。

で、ページが表示されているということはもう既にhtmlは変換されていますので、書き換えるにしても、うーん、どうするか。
無理にやっても他で悪影響が出てもいけませんし、ちょっと今のところ良い方法が思い浮かびません。
とりあえず参考記事は以下の通り。

https://vanillaice000.blog.fc2.com/blog-entry-839.html
https://vanillaice000.blog.fc2.com/blog-entry-640.html

エディターツールの色変更は style属性 といって優先度の高い(強制力の強い)書き方です。style属性より優先度を高くするには !important を使う他ありません。なので実現するとなると「style属性値の書き換え」ですよね。「上書き」ではなく「書き換え」です。
いずれにしろJSでやらなきゃどうしようもないので、ちょっと考えてはみますがたぶん無理だと思います。
また後日(一両日中に)改めて追記しますね。よろしくお願いします。

別のアプローチだと記事背景色を1〜2段階明るく調整すれば青文字は明瞭になってきますね。
「青」と「黄」と「緑」は背景反転で可視性がひどく落ちますので利用は避けたほうが良い、と言っても後の祭りですが、今後の参考として。

vanillaice (Akira)
Akira
2019/03/25 (Mon) 01:10

To yksbさん②

んー、もうこれしかないかなぁ (´・ω・`)
変更したい色のコードはもう決まってますでしょうか。決まっているのであればそのカラーコードをお伝えください。
「やっぱり変える」となるとまたややこしい修正が発生しますので、「これでベスト!」と言えるものを熟考してくださいね。
rgb値変更で対応しようと思います。よろしくお願いします。

yksb
2019/03/25 (Mon) 03:26

ありがとうございます!
青色に近く、白背景、黒背景、どちらでも使えそうな色を試しておりました。
以下の色にしたいと思います。よろしくお願い致します。
steelblue
#4682b4
R:70 G:130 B:180

vanillaice (Akira)
Akira
2019/03/25 (Mon) 14:13

To yksbさん

こんにちは。

ちょっと方針変えようと思います。後の管理のことも考えて、jQueryでやった方が良いと思います。このためだけにライブラリ導入しますので良くないんですが、自力での追加や修正が楽なので今回はこちらで。以下の内容をテンプレートhtmlの</body>の直前に入れてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('span[style="color:#0000FF"]').css('color','#4682b4');
});
</script>

説明です。
style属性にカラーコード#0000FFが指定されているspan要素を見つけて、そのカラーコードを#4682b4に変更します。
レンダリング(ページ描画)後に行いますので、元の色が一瞬表示されてその後変化します。

<span style="color:#0000FF">文章</span>
この形で記されているもの限定です。

×
<span style="color: #0000FF">文章</span>
<span style="color:#0000ff">文章</span>

半角スペースの有無、大文字小文字の別も対象外になります。
他の色も変更したい場合があるかもしれませんので、その際は

$(function() {
$('span[style="color:#0000FF"]').css('color','#4682b4');
$('対象要素').css('color',カラーコード');
});

と、こんな風に追加します。
一度お試しください。よろしくお願いします。

yksb
2019/03/25 (Mon) 18:53

早速試しましたが、無事書き換えられていることを確認出来ました!
文章を強調させる手段としてなので、文字色と合わせてフォントサイズを大きくしたり、太字にしたりとしてましたが、
全て一括で変換されて驚きました。こんな方法があるんですね~
ほぼ趣味でやっているブログなので今まで何気無く使ってましたが、今回で色々と覚えることが出来ました。
お手数おかけしました~、ありがとうございます!

vanillaice (Akira)
Akira
2019/03/25 (Mon) 23:46

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

お役に立てましたら幸いです。
お疲れ様でした :)

クラクラ
2019/04/05 (Fri) 22:30

トップページのサムネサイズについて

こんばんは、お世話になってます。
また質問させてください。
akiraさんの「サムネイル」徹底解析の記事を参考に横1200px 縦675pxの画像を用意してみたのですが、トップページのサムネイルがズームされた状態になり上下が切れてしまいます。
こちらのテンプレートで上下が切れずにピッタリになるサイズがあれば教えて頂きたいです。よろしくお願いします。

vanillaice (Akira)
Akira
2019/04/06 (Sat) 01:16

To クラクラさん

こんばんは。

特定のテンプレートだけに画像サイズを合わせるというのは良い結果にはならないと思いますよ。そしてグリッドレイアウトですから特定の画像サイズだけに配慮した縦横比指定もできません。ただクラクラさんが今後確実にアスペクト比16:9でOGP画像をUPできるなら、今ここでこのテンプレートのために画像比率を変えるのではなく、テンプレートのグリッドの比率を変更してはいかがでしょうか。

.grid-image-wrapper::before {
で検索し
padding-top: 48%;

padding-top: 56.25%;
に変更。

画像の方をテンプレートに合わせるのならば
1200×575
で作成してください。
よろしくお願いします。

クラクラ
2019/04/06 (Sat) 14:41

To Akiraさん

こんにちは
比率を変えたらピッタリになりました。ありがとうございます。
FC2は難しいけど色々出来て、覚えたら楽しそうですね。
早く完成させたいと思います。
回答と素敵なテンプレート本当に感謝です。

vanillaice (Akira)
Akira
2019/04/07 (Sun) 17:18

To クラクラさん

こんにちは ('0')/

結局テンプレートの方を変更されたのかしら。画像のサイズとアスペクト比の方はGoogleの推奨なのでテンプレートの方を変更するのがベターだと思います。

いずれにしても希望通りになったのであればよかったです。
お疲れ様でした :)

-
2019/07/16 (Tue) 00:54

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/16 (Tue) 14:09

To Son-Of-Valkyrieの件 内緒さん

こんにちは。

> どちらか一つでもいいのかなと思って〜

#comment {
margin: 0;
margin: 0 0 15px;
~~

赤字は単純に私の消し忘れです。

一応こういうパターンがわざとの時もあるので説明しておきます。

input {
border: 0;
border-bottom: 1px solid black;
}

inputの初期値(User Agent)は
2px solid currentColor
のborderがついているので一旦それをリセット、下borderだけ定義、というパターンです。
こういうのは意味がありますが、今回のmarginプロパティについては私の単なる消し忘れです(笑)
#commentはtextarea要素ですが初期値でmarginは0です。

-
2019/07/16 (Tue) 14:23

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/17 (Wed) 09:52

To Son-Of-Valkyrieの件 内緒さん(完了のご報告)

こんにちは。

ごめんなさい。コメント見落としてました (*_ _)
お手数おかけしました。いつもありがとうございます :)

-
2019/07/17 (Wed) 10:58

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/17 (Wed) 11:51

To Son-Of-Valkyrie 移植の件 内緒さん

こんにちは。

> コメント投稿フォームのアドレスとパスワードの入力部分が、firefoxで閲覧すると意図していない色が〜

私の環境で見るとこんな感じです。
https://file.blog.fc2.com/vanillaice000/capture4/capinput----1200.png

マシンがMacなので、WindowsのFirefoxに独自の挙動があるのかもしれません。
この部位(アドレスとパス)はオートコンプリート(クッキー入力)が効きます。で、CSSでオートコンプリートの背景色を指定することは今のところできないんです。
なのでbox-shadowを利用して内側に影をかぶせる、というやり方で変更したように見せています。

:-webkit-autofill
で検索するとスタイルシート内に有りますので、
-webkit-box-shadow: 0 0 0 1000px カラーコード inset;
の下に
box-shadow: 0 0 0 1000px カラーコード inset;
を「追加」してみてください。あと、カラーコードに不透明度(rgba)が付いていると下の背景色が透けてしまいますのでrgbaではなくrgbになっているかも確認。

あとところどころ圧縮済みCSSにミスがあるようなので、そちらも確認してみてください。
例)
border-radius:2px;;background:var(base-input-color);

いずれにしても圧縮されていますのでこれを解析するのはかなりの苦労が。バリデートサービスではCSS4の検証はできませんのでミスについては地道に探すしかない、という感じです。

-
2019/07/17 (Wed) 13:07

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/17 (Wed) 13:32

To Son-Of-Valkyrie 移植の件 内緒さん(終了のご報告)

もしかしたらその指定以前のCSS内容に単純ミスがあって反映されていないのかもしれませんし(Firefoxは比較的ミスに厳しいブラウザです)、独自挙動かもしれませんね。
はっきり言えなくて申し訳ないです。

CSSのコンパイルのミスは気づきにくいですよね。なにせ見づれぇったら(笑)

-----
アダルトジャンルはフローティングなんですね。しかも悪の極み系((((笑)
足元見てるな〜 ( ̄∀ ̄;)
情報ありがとうございます。早速彼の方にも伝えようと思います。

拒否指定の件は知りませんでした。なんでだろ。そんな嫌なのかしら (´・ω・`)
やっぱり個人的な嗜好の問題ですかね。

-
2019/09/16 (Mon) 22:25

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/16 (Mon) 22:36

To 構造化マークアップエラーの件 内緒さん

こんばんは。
スマホからなのでソースの検証はできませんが、原因は記事に書かれている

プロテイン付属スプーン"

末尾のダブルクォーテーションだと思います。旧投稿画面を利用して作成した記事内では
<
>
"
などのhtmlの構成に利用される記号ご注意ください。
原因が異なるようでしたらその旨ご連絡をお願いします。明日以降パソコンから確認します。
よろしくお願いします。

-
2019/09/16 (Mon) 22:50

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/17 (Tue) 10:03

To 構造化マークアップエラーの件 内緒さん

構造化マークアップのテストツールがありますので検証してエラーが無ければ大丈夫です。

構造化データ テストツール
https://search.google.com/structured-data/testing-tool?hl=ja

私の方で検証したところエラーも警告もありませんので大丈夫のはずです。
旧投稿画面利用の場合は以下の記事内容のような注意点もありますのでご一読くださいね。

参考記事: 顔文字がレイアウトに悪影響を与えることがあります【FC2ブログ旧投稿画面】
https://vanillaice000.blog.fc2.com/blog-entry-601.html

-
2019/09/17 (Tue) 13:56

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/17 (Tue) 19:02

To 構造化マークアップエラーの件 内緒さん(終了のご報告)

こんばんは。

旧投稿画面は便利な反面独特のクセがありますね。
お疲れ様でした :)

-
2019/11/04 (Mon) 22:29

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/05 (Tue) 11:52

To Son-Of-Valkyrieの件 内緒さん

こんにちは。ありがとうございます :)

> 日付の文字色を変えるには〜

.grid-datetime {
で検索し、ルールセット内
box-shadow: 0 0 5px var(--base-shadow-color);
の直下に

color: カラーコード;

を追加してください。カラーコードは任意です。よろしくお願いします。

-
2019/11/05 (Tue) 17:47

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/05 (Tue) 21:43

To Son-Of-Valkyrieの件 内緒さん(完了のご報告)

上手くできたようで安心しました。お疲れ様でした :)

-
2019/11/06 (Wed) 00:01

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/06 (Wed) 07:18

Son-Of-Valkyrie広告の件 内緒さん

おはようございます。

> スマホでも下部に、PCブラウザだと両端下部に二枚、〜広告が入る〜

FC2運営が言う「現在ご利用されているテンプレートをカスタマイズされていない他のテンプレートに変更して」というのは、フォントや背景などの色を変えていない、ヘッダー画像を変えていない、という意味ではなく、[太字]デフォルトのhtml, スタイルシートに1文字でも変更を加えたり追加すればそれはカスタマイズであり サイドメニュー部外部プラグインの導入含む なので、一切そういう操作を行っていないもの、という指示です。
ユーザーさんの思う「カスタマイズ」というのはどうしてもデザインに向きがちですがそういうことではないんですね。

ということで、広告を出しているのは「単眼RSS」です。
「違法」と、法まで飛躍することは無いと思いますが、大抵の場合は広告非表示(display: none)を行えばポリシー違反です。
この広告についてはFC2ブログもFC2ブログテンプレート(あるいはその作者)とも一切関係がありませんので、ポリシー違反になるとすれば単眼RSSの配信元です。
規約をご確認頂きまして、適切な対処をおすすめします。

-
2019/11/06 (Wed) 16:06

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/07 (Thu) 12:44

Son-Of-Valkyrie広告の件 内緒さん(終了のご報告)

こんにちは。

お気遣いありがとうございます。お疲れ様でした :)

-
2023/02/20 (Mon) 15:10

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/02/20 (Mon) 17:04

To Son-Of-Valkyrie スクロールの件 内緒さん

こんにちは ('0')/

> どうしてそこで一旦スクロールが止まって、かくついてしまいます。〜

これはカクつきではなく『スクロールアンカー』と呼ばれる手法です。
通常は全てのコンテンツがスクロールと共に画面外(上)へ流れていきますが、目立たせたいコンテンツなどの画面滞在を長くさせるためのものです。サイドメニュー最終に最も重要なコンテンツを掲載するよう推奨しています。例えば『新着記事一覧』など。

本来サイドメニューのセクションは1セクションにつき1コンテンツという構成ですが、内緒さんの場合このセクションの内容量が非常に多いので画面内に収まりません。そのため「引っかかっている」「カクついている」と誤認されているのだと思います。

動作を検証するには、一つ上の『過去ログ』と表示順序を入れ替えてスクロールしてみてください。それより上のコンテンツは画面外へ行きますが、過去ログはメインコンテンツ(左)が画面内にあるうちはその場に留まります。
(あるいは以下のDEMO画面でも確認できます)
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/son-of-valkyrie_min_entry_mod_mod.html

スクロールアンカーが不要な場合は
.side-menu:last-of-type {
で検索し、このルールセットを削除してください。ブレイス記号が2つ続いていますので無関係な部位を巻き込んで削除してしまわないよう注意。スクリーンショットをご参照ください。
(メインコンテンツ量がサイドよりも多い場合に効力のある手法です。内緒さんの場合はサイド量の方が多いパターンが多そうなのでアンカーは不要かもしれません。)

https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_0220.png

-----
> PC版だと、MENUのボタンが表示されていなくて〜

MENUボタンはサイドメニューの最上部への移動です。PCなど画面の大きなデバイスではメインコンテンツの上辺とサイドメニューの上辺は同じ位置なので、上向き矢印のボタンと同じ位置へ移動することになり意味がないため、カラム編成(2カラム → シングル)が行われたときのみ表示されます。

-----
> 各ボタンの大きさと色(背景色ならびに透明度?)を変更する方法〜

こちらはどの部位のどのボタンのことでしょうか。ボタンといっても大量にありますので具体的にお願いします ^^;
(言葉で伝えづらい場合はスクリーンショットなどが便利です)

ページ内スクロールのボタンのことであれば
#page-scroll a
で検索し、ルールセット内
background: rgba(0,0,0,.4);
が背景色及び不透明度です。

-----
余談(任意)

背景色を rgb(0,0,0) の真っ黒にされていますが、これはおすすめできません(コントラストが強すぎて目が疲れる, スクロール時にチラツキが発生する など)
もう一段下げて rgb(24,24,24) あたりをおすすめします。とは言えこちらは任意です。

参考記事: colorにredとgreenはだめなのよねぇ…(「カラーネーム red green」の章)
https://vanillaice000.blog.fc2.com/blog-entry-1123.html

-
2023/02/20 (Mon) 19:16

管理人のみ閲覧できます

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

-
2023/02/20 (Mon) 23:42

管理人のみ閲覧できます

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

-
2023/02/20 (Mon) 23:50

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/02/21 (Tue) 01:02

To Son-Of-Valkyrie SNSアイコンの件 内緒さん

こんばんは ('0')/
まず、カスタマイズ終了されたとのことでお疲れ様でした。

-----
> ピンタレストのボタンをFimarksのデザインのボタンに〜

今回たまたまSVGがありましたので提供しますが、本来はご自身でアイコンを準備した上でお願いします。SVGは作成がとても難しいのでPNG画像で構いません。いずれにしろアイコンの準備は致しませんので、今回のみということでお願いします。
また、filmarksの場合は周囲のトゲトゲを取り除いてしまうと何のサービスかわからないばかりか『F』は普通はfacebookなので、色も形もそのまま残した方が良いと思います。浮いているように感じるかもしれませんが今回はこれで。変更したい場合はSVGの再作成をお願いします(知識が無いと無理かもしれません、ごめんなさい)

SVGは文字列が非常に長いためコメント欄に直書きできませんので、以下のファイルを開いてコピーしてください。
https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/filmarks.txt

<defs>
で検索するとhtml内に1箇所ありますので、先程コピーした内容を以下の箇所にペースト。
https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_0221a.png

続きまして
<a class="sns-a s-pinterest-p"
で検索し、この文字列を含み直近、下の方にある
</a>
までを以下の内容に差し替え

<a class="sns-a s-filmarks" href="#" target="_blank" rel="noopener noreferrer"><svg class="svg-inline svg-inline-filmarks" viewBox="0 0 72 72" role="img"><use xlink:href="#inline-filmarks"></use></svg></a>

filmarksのアイコンは非常に緻密なので、他サービスアイコンと同じ状態で掲載するとわけがわからなくなります。なので、スタイルシート最終に以下の内容を記し、表示サイズの調整を行ってください。

.svg-inline-filmarks {
height: 1.6em;/* filmarksアイコンの高さ調節 */
}

一応1.6emにしておきましたが、小さいと思えば数値を大きく、大きければその逆を。

最後にスタイルシート最終に

.s-filmarks:hover {
background: rgb(255,225,1);
}

こちらがホバー時の背景色です。ホバーするとフォント自体が小さいためこれまたわけのわからない感じになりますがロゴの特徴なので仕方ないということで ^^;

vanillaice (Akira)
vanillaice (Akira)
2023/02/21 (Tue) 01:22

To Son-Of-Valkyrieの件 内緒さん

> 導入する場合はどう記述したら宜しいでしょうか?〜

申し訳ないんですが、個人的な新規導入カスタマイズのお手伝いは行っておりません。
リリース済みテンプレートをDLして頂いて、そこから移植して頂くのは構いませんが、指南についてはお断りさせてくださいね。
(受けてしまうと依頼があとを絶たなくなるため)
また念の為ですが、他者のテンプレートからの移植はトラブルの原因になりますのでお控え頂けると助かります ^^;

-
2023/02/21 (Tue) 08:36

管理人のみ閲覧できます

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

-
2023/02/21 (Tue) 11:14

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/02/22 (Wed) 01:09

To Son-Of-Valkyrieの件 内緒さん

こんばんは ('0')/
ご理解と励みになるお言葉をありがとうございます。
カスタマイズの方も上手く行ったとのことで良かったです。お疲れ様でした :)

-
2023/02/24 (Fri) 09:41

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/02/24 (Fri) 18:02

To スクロールバーの件 内緒さん

こんにちは ('0')/

ひとつお願いなんですが、フッターの製作者ネームを外されて、弊ブログのバックリンクと共に『リンク』に設置して頂いているのはグレーな対処だとして。
スマホで閲覧した際にリンク自体が非表示になってしまいます。本来はフッター下バックリンクは外さずご利用ください。
また、大量のリンク非表示はgoogleに『隠しリンク』とみなされる可能性がありますよ(クローキング, スパム)

参考記事: テンプレートに関するご質問時のお願い
https://vanillaice000.blog.fc2.com/blog-entry-26.html

-----
スクロールバーについては私の環境下で所有実機では再現できません。
htmlの
<body>

<body style="overflow-x: hidden;">
と追加してみてください。

-
2023/02/24 (Fri) 18:58

管理人のみ閲覧できます

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

-
2023/02/24 (Fri) 21:35

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/02/25 (Sat) 01:27

To Son-Of-Valkyrie スクロールバーの件 内緒さん

こんばんは ('0')/
まず、バックリンクについては以前からどなたへも例外なくお願いしていることなので、お守り頂ければ幸いです。
早速直してくださったようで、ご理解とご協力に感謝します :)

> その少しの一定時間の間、画面を右に動かせます

内緒さんのデバイスが何なのか(iPhone or Android)、ブラウザは何なのか、回線状況がどうなのか 等が不明ですが、いずれにしろスクロールバーの原因は、一定時間右に動かせるということなのでCSS適用前のオーバーフローで間違いありません。つまりCSSの適用が遅い、という意味です。
ブラウザの性能や特性にもよりますし、回線の速度やサーバーの影響、キャッシュが残っているかどうかの影響も受けます。もしかするとブラウザで『キャッシュを残さない』設定になっているかもしれませんので一度ご確認ください。
(キャッシュを利用すると適用が早いです)

<link rel="stylesheet" href="<%css_link>" media="all">
で検索するとhtml内に1箇所あります。これを
<link rel="preload" href="<%css_link>" as="style" onload="this.onload=null;this.rel='stylesheet'">
に変更してみてはいかがでしょうか。
スタイルシートを最優先で読み込み、すぐに適用する、という方法です。これで効力が無ければ正直どうしようもないというか (∵`)

それでもやはり効果がないという場合は
デバイス名(iPhone11 など)
OSのバージョン(Android12 など)
使用ブラウザ名

を教えてください。サポートOS, ブラウザについては先程ご覧頂いたQ&Aのページに載っています。

-
2023/02/25 (Sat) 08:40

管理人のみ閲覧できます

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

-
2023/02/25 (Sat) 13:22

管理人のみ閲覧できます

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

-
2023/02/25 (Sat) 15:09

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/02/25 (Sat) 17:19

To Son-Of-Valkyrie スクロールの件 内緒さん

こんにちは ('0')/
ありがとうございます。確認できました。

原因はやはりオーバーフロー(あふれ, はみ出し)で間違いないです。具体的な部位は『ブログタイトル』です。
アクセス時にアニメーションでスケーリングするようになっていますが、これが100%に対する1.5倍なので当然はみ出してオーバーフロー状態に。

で、通常は先日お伝えしたようにbodyにoverflow-x: hiddenで解消できるんですが、overflowの仕様をこの機会にしっかり確認してみましたら、これはandroid chromeの挙動が正しいです。恥ずかしながら私これ知っていたはずなのに ^^;

参考外部記事: Overflow Viewport Propagation
https://www.w3.org/TR/css-overflow-3/#overflow-propagation

通例的に(?)効くブラウザ(iOSやほとんどのPCブラウザ)がほとんどであっても、効かないのが正しい。
というわけで、以下のように変更してください。
bodyへの記述は削除した上で
#header-banner {
で検索し、このルールセットの最終に
overflow-x: hidden;
を追加。
(他にもhtml, body双方にhiddenという方法もありますがこちらはおすすめしません)

私思い出しました。jQueryでスムーススクロールを書いていた頃(現在はpure jsです)、bodyとhtmlの双方に重複して構文書かないとダメだったこと。これ今回のことと関連しています。すっかり忘れておりました。
良い勉強になりました。ありがとうございます。

一度お試し頂いて、それでもダメなら再度その旨お伝えください。お手数おかけします。

-
2023/02/25 (Sat) 18:55

管理人のみ閲覧できます

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

-
2023/02/26 (Sun) 08:46

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/02/26 (Sun) 17:51

To Son-Of-Valkyrie ダークモードの件 内緒さん

こんばんは ('0')/
色々お伝えする件がありますが順を追って。

-----
まず、ブログタイトル下の2本の水平線については根本的に解消する必要がありますので以下の手順に従ってください。

先日加えた #header-banner の overflow-x: hidden; の一行を削除します。
次に、このルールセットの直近、下の方を目で追ってもらうと
#blog-title のセレクタがありますので、このルールセット内の

text-transform: uppercase;
animation: zoomIn 1.5s;

の2行を削除し、代わりに

overflow: hidden;

の1行を追加。先日のプロパティは overflow-x でしたが今回は overflow なので注意。
続いてこのすぐ下には
#blog-title a というセレクタがあります。このルールセット最終に以下の3行を追加

display: inline-block;
text-transform: uppercase;
animation: zoomIn 1.5s;

この処理で水平線下のシャドウが見えるようになります。
内緒さんの場合は背景色を濃くされていますので、シャドウの色 --base-shadow-color については調整が必要かと思います。
(コントラストが強くなってしまうため、もう少し暗い色にされた方が良いです)

-----
ダークモードについて

Son-Of-Valkyrieはダークモード非対応テンプレートです。なので対応させるにはご自身でやって頂く他ありませんが、このテンプレートは元々ダーク調なのですからダークモードに対応させても意味がありません。

ダークモードには2種類あります
・OSダークモード
・ブラウザ固有ダークモード(拡張機能含む)

製作者あるいは管理人が対応できるのは『OSダークモード』の方だけです。対応の仕方は「prefers-color-scheme: dark を利用して対応CSSを書く」ことです。

ブラウザのダークモードというのは、OSダークモードの対応・非対応に関わらず、どのサイトでも一定の色相(hue)を超えていたら強制的に調整をする、というものです。

OSダークモードは作者の意図を完全に実現できますが、ブラウザダークモードの方はできません。何故なら『ブラウザ固有』つまり各ブラウザの腹一つの調整です。そのブラウザ・拡張機能自体も無数に存在しており、全てに対応させるのは不可能ですし、そもそも『ブラウザのモードがあるかどうか、あるならONにしたかしていないか』の見分けはできません(技術的にできないというよりもブラウザ種何100何1000と分岐できるはずがないという意味です)

ブラウザダークモードの利用意義というのは、OSダークモード非対応のサイトを強制的にダークにする、という使い方なので、元が暗色背景ならばOS・ブラウザ共にダークモードを利用する意味はないですよね。
ブラウザのダークモードは「各ブラウザの基準に沿って半ば勝手に変わってしまう」のですから、同じ色彩を保つというのが無理筋です (∵`)
OSダークモードは管理人の意思決定ですが、ブラウザダークモードは閲覧者個人の権利、という感じです。

-
2023/02/26 (Sun) 20:02

管理人のみ閲覧できます

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

-
2023/02/28 (Tue) 09:00

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/02/28 (Tue) 17:18

To Son-Of-Valkyrieの件 内緒さん

こんにちは ('0')/
えっと、ちょっと困惑しているんですが、お返事が遅れたのでそう感じられたのでしょうか。
税金とかweb案件とか本業とか色々忙しくてログインできませんでした ^^;

上手く行ったということで安心しました。お疲れさまでした :)

-
2023/02/28 (Tue) 17:48

管理人のみ閲覧できます

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

awgs
2023/09/09 (Sat) 08:59

Son-Of-Valkyrie(最終更新日:23/09/04)テンプレートの HTML と CSS について

ブログテンプレート Son-Of-Valkyrie(最終更新日:23/09/04)をダウンロードして HTML と CSS をカスタマイズしていくつか気が付いた点があるので、現在公開中の共有テンプレートについてご確認いただければと思います。
こちらではすでにカスタマイズした Son-Of-Valkyrie を適用して運用中ですが、以下の各項目の下側に記載した方法でとりあえず対策しています。

1. HTML にある <symbol id="svg-reclock-fill" viewBox="0 0 20 20"> 以下にある <g> タグに対して閉じタグ </g> がない
各記事(~\blog-entry-x.html)に対して HTML 終了タグチェッカー(https://oops0011.blog.fc2.com/blog-entry-214.html)使用時に判明
→ HTML に閉じタグ </g> を追加してエラーが出ないことを確認

2. CSS にある --animation-blog_title: zoomIn 1.5s .6s forwards; を削除するとブログタイトル名が表示されない
→ クラス blog-title にある opacity: 0; を削除また opacity: 1; にすることでブログタイトル名の表示を確認

3. 検索結果(SEARCH TERMS:~)のページ数にあるスラッシュ「/」の位置がページ数字よりわずかに下の位置にずれて表示
→ CSS のクラス total_pages::before にある vertical-align: middle; を削除または middle 以外(baseline、top、bottom)にするとずれが解消されているように見える

以上の点となります。よろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2023/09/09 (Sat) 16:53

To awgsさん

こんにちは ('0')/

> <g> タグに対して閉じタグ </g> がない〜

開始タグを削除することで対処しました(不要なタグの消し忘れです)

> CSS にある〜 を削除するとブログタイトル名が表示されない〜

opacityに関するプロパティを追加することで対処しました。

> スラッシュの位置がページ数字よりわずかに下の位置にずれて〜

こちらについては個人の好みと表示OSフォント種の影響もありますのでそのままにしておきました。

-----
お手数おかけしました。他にも色々落ち度があるかもしれませんので、ご報告頂けるととても助かります。ご協力ありがとうございます :)

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