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

投稿 2018年10月26日
13
テンプレート
HTML5CSS4RWDDark
Son-Of-Valkyrieテンプレート

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

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

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

名称 Son-Of-Valkyrie
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大860px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾(手書き風, ドッグイヤー)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
パソコン タブレット スマートフォン
2カラム 2カラム or 1カラム (デバイスサイズ依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下(デバイスサイズ依存) サイドメニュー --- 下

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

サンプル

Samples

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

カスタマイズのコツ

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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

IE非対応

This theme is incompatible with Internet Explorer.

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

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

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

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない?」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...

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

How to reverse the direction of rows.

#main-container で検索されますと3箇所ヒットします。
3つ目display: flex; の直下に flex-direction: row-reverse; を追加。
続いてその直下にある #primarymargin-right: 40px; 緑部位 right を left に変更。

ドミナントカラー

Dominant colors

root で検索されますとスタイルシート内に各種カラーなどがまとまって記載されています。
各々カラーコードを変更すると同じ色指定が行われている要素を一括で修正できます。

ページ送りサムネイルについて

About thumbnails in pager

個別記事ページ送りのサムネイル画像を表示するにはブログ個人設定で OGP設定を有効化 してください。
メタタグの設定

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

Cautions before asking for something.

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

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

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

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

13 COMMENTS

There are no comments yet.

NOB  

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

Akiraさん

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

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

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

2018/10/28 (Sun) 09:41

NOB  

自己解決出来ました。

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

2018/10/28 (Sun) 13:45
vanillaice (Akira)

Akira  

To NOBさん

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

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

2018/10/29 (Mon) 17:54

神谷 幸弥(さや)  

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

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

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

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

Akira  

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/20 (Thu) 20:55

神谷 幸弥(さや)  

To Akiraさん

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

2018/12/21 (Fri) 06:25
vanillaice (Akira)

Akira  

To 神谷 幸弥(さや)さん

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

2018/12/21 (Fri) 13:16

-  

管理人のみ閲覧できます

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

2018/12/23 (Sun) 18:16
vanillaice (Akira)

Akira  

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

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

2018/12/23 (Sun) 21:13

-  

管理人のみ閲覧できます

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

2018/12/24 (Mon) 13:32
vanillaice (Akira)

Akira  

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

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

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

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

2018/12/24 (Mon) 16:19

コウダイ  

To Akiraさん

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

2018/12/24 (Mon) 18:23
vanillaice (Akira)

Akira  

To コウダイさん

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

2018/12/24 (Mon) 21:26

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)