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

2018年10月26日
テンプレート
37
HTML5 CSS4 RWD Dark
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'●)/

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 37

There are no comments yet.

NOB  

2018/10/28 (Sun) 09:41

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

Akiraさん

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

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

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

NOB  

2018/10/28 (Sun) 13:45

自己解決出来ました。

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

Akira  

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

To NOBさん

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

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

神谷 幸弥(さや)  

2018/12/20 (Thu) 20:25

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

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

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

Akira  

2018/12/20 (Thu) 20:55
vanillaice (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/21 (Fri) 06:25

To Akiraさん

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

Akira  

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

To 神谷 幸弥(さや)さん

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

-  

2018/12/23 (Sun) 18:16

管理人のみ閲覧できます

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

Akira  

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

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

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

-  

2018/12/24 (Mon) 13:32

管理人のみ閲覧できます

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

Akira  

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

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で何回か試したら検証し直すことが
できます?みたいなのが出て復帰することが出来ました。ありがとうございました。

Akira  

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

To コウダイさん

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

きろろ  

2019/02/09 (Sat) 00:37

お借りしました

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

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

Akira  

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

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

Akira  

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

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分の空間が出来ている状態です。

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

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

Akira  

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

To クラクラさん

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

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


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

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

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

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

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

-  

2019/02/27 (Wed) 17:32

管理人のみ閲覧できます

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

Akira  

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

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さんのブログを読んで色々勉強させていただきます。
本当にありがとうございました。
テンプレート大切に使わせていだだきます。

Akira  

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

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

こんばんは。

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

hige  

2019/03/02 (Sat) 00:05

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

要約表示タイプでは

Akira  

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

To higeさん

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

yksb  

2019/03/24 (Sun) 19:42

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

こんばんは

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

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

Akira  

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

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段階明るく調整すれば青文字は明瞭になってきますね。
「青」と「黄」と「緑」は背景反転で可視性がひどく落ちますので利用は避けたほうが良い、と言っても後の祭りですが、今後の参考として。

Akira  

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

To yksbさん②

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

yksb  

2019/03/25 (Mon) 03:26

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

Akira  

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

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

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

Akira  

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

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

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

クラクラ  

2019/04/05 (Fri) 22:30

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

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

Akira  

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

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は難しいけど色々出来て、覚えたら楽しそうですね。
早く完成させたいと思います。
回答と素敵なテンプレート本当に感謝です。

Akira  

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

To クラクラさん

こんにちは ('0')/

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

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

コメント投稿

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)