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

Blowingテンプレート

Blowingテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
Blowing
ぶろういん
動作確認ブラウザ
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 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
更新履歴
2024/08/30
ver.17
記事内リンク色指定ミスを修正
説明ページへ
2024/02/28
ver.16
リスト型ページネーションの複製を可能に
2023/12/22
ver.15
グローバルナビゲーションを固定できるようJSを分離
2023/09/21
ver.14
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
2023/09/05
ver.13
スクロール時のナビゲーションに関連するCSSの記述ミスを訂正
2023/08/26
ver.12
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • ユーザビリティの最適化
  • RSSリンク削除
  • idセレクタによるスタイリングをclassセレクタに統一
  • コメント削除アラート追加
  • その他UI調整
2022/07/09
ver.11
prefetchの数を調整
2022/01/06
ver.10
  • 個別記事ページナビ iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
2020/05/28
ver.9
ページ送りのJSを修正
2020/03/30
ver.8
コメント返信のJS変更
2020/03/23
ver.7
個別記事のページ送りを複製できるようにしました(複製時には複製した方のid属性を必ず消去してください)
2019/12/15
ver.6
パーマリンク設定導入に伴うcanonical指定変更
2019/11/23
ver.5
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
2019/10/16
ver.4
サイドメニュー部プロフィール画像の縦横比が崩れる件修正
2019/09/06
ver.3
花びらエフェクト削除のガイダンスを追加
2019/07/29
ver.2
  • 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  • 受信コメント一覧とコメント投稿フォームのセクションを統合
  • コメント欄管理人ハンドルネームにクラス名を追加(潜在的カスタマイズ)
  • 記事部分の上下余白をpaddingからmarginに変更
 続きを見る

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

ぶろういん
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

ご質問の前に「テンプレあるある」

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

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

そふぃあ
2019/08/09 (Fri) 15:17

ブログカードについて

Akiraさん こんにちは。
いつもお世話になっています。

Blowingテンプレート使用時のブログカードについて質問です。
https://dawn-clover.com/blog-entry-6480.html
私のページでは、ブログカードの上下に余白が多くできてしまい、こちらのページにあるようなスッキリとした見た目になりません。
手直し箇所などありましたら、ご伝授いただきたいと思います。
どうぞ、よろしくお願いします。

vanillaice (Akira)
Akira
2019/08/09 (Fri) 18:27

To そふぃあさん

こんばんは ('0')/

お手数おかけしております。
原因はCSSの優先度の問題です。テンプレート変更のたびにCSS修正して頂くのは面倒だと思いますので、ブログカード側のデフォルトCSSに内容を若干書き加えました。主にimportant指定の追加です。

デフォルトCSSをご確認くださいね(細かく見る必要はありませんので、ブログカード関連内容の差し替えをお願いします)
importantは最優先指定なのであまり乱用するのは良くないのですが許容範囲内だと思います。
よろしくお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-583.html

そふぃあ
2019/08/09 (Fri) 21:29

To Akiraさん(完了報告)

こんばんは。
こちらこそ、いつもお手間ばかりとらせてしまってスイマセン。
ブログカードCSSの差し替えで、希望通りのスッキリした見た目になりました。
どうもありがとうございました。

以前にも、他テンプレートで自分が同じ質問をしていること、他の方が質問してらっしゃった箇所など読みながら自己解決を試みましたが、テンプレートによって仕様が違うようで、ブログカードが良さそうな見た目になると、本文の方が崩れてしまってお手上げでした。

いつも感謝しています。
この度もお世話になりました。

vanillaice (Akira)
Akira
2019/08/10 (Sat) 00:30

To そふぃあさん

今回の変更で恐らくもう修正の必要は無くなると思います。
自分で提供しているのだから自分で作ったテンプレートとの兼ね合いを調整するべきでしたよね。ごめんなさい。
お手数おかけしました。いつもありがとうございます :)

ぼん
2019/08/23 (Fri) 22:32

ヘッダー下画像のアニメーションについて

はじめまして。

家族のブログをカスタマイズしようと思い、使用させていただいております。
無料なのにこんなに素敵なテンプレートでありがたく思っています。

タイトルの件ですが、こちらのテンプレートはヘッダー下画像に白い花びらが舞う
アニメーションが使用されていますね。
とても可愛らしいのですが、政治家というカテゴリでブログをやっているため、
(花が散る)ようなイメージはあまり好ましくないのです。

そこで、このアニメーションをなくすことは可能でしょうか?

お忙しいところ申し訳ありません。
教えていただけましたら幸いです。

ぼん
2019/08/25 (Sun) 15:42

上の質問について

質問する上で「質問時のお願い」は読みましたが、
私の質問でもし気分を害されていたらすみません。
また、質問の仕方がおかしかったらごめんなさい。

もし質問にお気づきになっていないだけでしたら良いのですが…。

自分でできる範囲でカスタマイズしたのですが、
どうしてもアニメーションの部分だけどうしたら良いか分からず、
やり方をご教授いただければと思った次第です。

ぼっちん
2019/08/25 (Sun) 20:05

To ぼんさん

ぼんさん、はじめまして
Akiraさん、きっとお忙しいのだと思いますので、私がとりあえず代わりにお返事させて戴きます。

尚、作業ミスで取り返しが付かないことになると困りますので、復旧出来るように、現在ご利用中のテンプレートの「複製」を取ってから、下記編集作業をなさるようお願い致します。

ご利用テンプレート「Blowing」の花びらアニメーションを除去する方法は、下記3箇所の部分を削除することで出来ます。


■[ Blowing ] のHTML編集欄にある


<!-- 注)ヘッダー下画像不要の方ここから削除 1/3 -->
<!--index_area-->
<div id="header-image-box">
<canvas id="canvas-image"></canvas>
</div>
<!--/index_area-->
<!-- 注)ヘッダー下画像不要の方ここまで削除 1/3 -->

の中にある

<canvas id="canvas-image"></canvas>

を、インデント(行頭の字下げスペース部分)を含めて一行まるまるを削除


② アニメーションスクリプトは下記箇所になりますので

<!-- 注)ヘッダー下画像不要の方ここから削除 2/3 -->

<!-- 注)ヘッダー下画像不要の方ここまで削除 2/3 -->

「ここから」「ここまで」の内容を全て削除


■ [ Blowing ] のスタイルシート編集欄に


/* 注)ヘッダー下画像不要の方ここまで削除 3/3 */

が見つかりますが、その直前にあります

#canvas-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

を、まるまる削除して、最後に「更新」ボタンをクリックして下さい。

以上の3箇所を削除することで、花びらのアニメーションを除去することが出来ます。
どうぞ、お試し下さい。

ぼん
2019/08/25 (Sun) 23:07

ありがとうございます!

ぼっちんさん、代わりにお答えいただき恐縮です…!

そうですよね、Akiraさんお忙しいのに、急かすような真似をしてしまいました…。
すみません。

早速、教えていただいたとおりに変更してみましたところ、無事アニメーションの削除ができました。

知識のない素人でご面倒おかけしました。
わからないならアニメーションのないテンプレート使っとけ、って感じですが、
イメージにピッタリ来るテンプレートが「Blowing」だったもので、
悩んだ挙げ句、質問させていただきました。

本当に助かりました。ぼっちんさんありがとうございました。
コメント欄汚してしまってすみませんでした;

vanillaice (Akira)
Akira
2019/08/26 (Mon) 14:17

To ぼんさん, ぼっちんさん

お返事大変遅くなりました。
ひどい風邪で数日寝込んでおりました、というか、おります ( ̄∀ ̄;)

ぼんさん、完了ということで大丈夫でしょうか。
反応が遅くなってごめんなさいね。

ぼっちんさん、今回もご協力ありがとうございます。
今まだパソコン開ける感じじゃないので助かりました。

何かあればまたご連絡ください。
(ちょっと返信遅れるかもしれないけど)

ぼん
2019/08/28 (Wed) 14:39

To Akiraさん

お風邪でしたか…!
大変なときにすみませんでした。
季節の変わり目で体調崩しやすいですよね…;

はい、おかげさまで完了しました。
見やすいテンプレートで大変気に入っています。
ありがとうございます。

Akiraさんの作品はどれも本当に素敵なので、今後もお世話になります。
よろしくお願いします。

暑くなったり涼しくなったり適応するのに大変ですが、
しっかりお休みください。どうぞお大事に…。

vanillaice (Akira)
Akira
2019/08/30 (Fri) 01:20

To ぼんさん

こんばんは。

お気遣いありがとうございます。
こちらこそよろしくお願いします :)

vanillaice (Akira)
Akira
2019/11/03 (Sun) 15:35

To Blowingヘッダーの件 内緒さん(移動先)

まずレイアウトが崩壊していますので一旦デフォルトに戻します。その上で

【Blowingヘッダーの縦横比固定】
#header-image-box::before {
で検索するとスタイルシート内に1箇所ありますので、ルールセット内の
padding-top: 48%;


padding-top: calc(縦 / 横 * 100%);

に変更してください。縦も横も画像原寸値を入れます。

-----
【No image画像設定】

<div class="grid-image-wrapper"> を目印にhtmlを検索すると直近に

<!--body_img--><img class="lazyload grid-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url_760x420>" alt="<%topentry_title>"><!--/body_img-->

というのがありますので以下の通り変更

<img class="lazyload grid-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<!--body_img--><%topentry_image_url_760x420><!--/body_img--><!--body_img_none-->ここに画像アドレス<!--/body_img_none-->" alt="<%topentry_title>">

よろしくお願いします。

-
2019/11/03 (Sun) 18:47

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/03 (Sun) 19:32

To Blowingヘッダーの件 内緒さん(終了のご報告)

迷惑というよりもダミーで依頼されると時間が倍かかります。
今回の件も素直に教えて頂けてさえいれば半分の時間で済んだはずです。
実証見聞できない環境下では私が「想像」で答えるしかなく、その想像が的外れだと費やした労力・時間など全てが無駄になってしまいますよね。
質問される側としても最短で解決できるのが一番ではないかと思います。
双方の時間の節約のためにお願いしていることです。ご理解をお願いします。

ともかくお疲れ様でした :)

とうとま
2020/02/04 (Tue) 11:18

文字サイズについての質問です

初めまして。先日Akiraさんのテンプレートを見かけてから一気に引き込まれてしまい、テンプレートをBlowingに変更させていただきました。

質問があるのですが、文字サイズの調整はどこで行えるのでしょうか?
全体的にもう少し大きく出来たら良いなと思ったのですが、font-sizeの部分に書いてあったvar(--ex-small-font-size)という見慣れない部分を削除してpxに書き換えても反応されませんでした。
大変恐れ入りますが、ご教授いただければ幸いです。

vanillaice (Akira)
Akira
2020/02/04 (Tue) 18:11

To とうとまさん

こんばんは。ありがとうございます :)
「全体的に」ということなので以下の方法をお試しください。その前に、変更してしまった箇所があれば初期状態に戻すようにしてください。

-----
html {
で検索するとスタイルシート内に1箇所あります。そのルールセット内に
font-size: 62.5%;
というのがあります。今回の変更箇所は赤字部位です。

以下のページを参照してください
参考サイト: Standardista 様
http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/

表が載っています。英語は無視して構いません(読まなくて良い)
表の一番上右側は 0.625rem となっています。これをパーセントに直すと 62.5% で、当テンプレートの標準文字サイズ指定です。
同じ要領で 68.75% や 75% など表を参照しながら順に数値を変更、最適なものを探します。

この手順を行って変化が無い文字についてはカスタマイズ非推奨です(理由は箇所によって様々です)
本作業で変更不可の箇所も修正したい場合には具体的な対象をお伝え下さい。
よろしくお願いします。
* 念押ししますが変更してしまった var のついている文字列は必ずもとに戻してくださいね。

とうとま
2020/02/04 (Tue) 22:52

無事に大きくすることができました!

素早いお返事ありがとうございます。無事に全体の文字を大きくすることができました!

しかし、何故var(--small-font-size)の部分を消してpxにしても反映されないのでしょうか?
自分が前に使っていたテンプレートではfont-sizeの部分を変更すれば大きさを変えれていたので…。
このvar(--small-font-size)というのはどういった命令なのでしょうか??

vanillaice (Akira)
Akira
2020/02/05 (Wed) 17:28

To とうとまさん

こんにちは。

それはカスタムプロパティと呼ばれるものです。通常のCSSは各所で逐一指定しなければいけませんが、これを利用して最初に名称として定義しておくと何度も指定する必要がなくなり、また複数箇所を1箇所で管理できるので便利です。

例) 通常の例

.xxx {font-size:13px}
.yyy{font-size:11px}
.zzz{font-size:13px}
.xyz{font-size:13px}

例)カスタムプロパティ
:root {--fontmiddle:13px}
.xxx {font-size:var(--fontmiddle)}
.yyy{font-size:11px}
.zzz{font-size:var(--fontmiddle)}
.xyz{font-size:var(--fontmiddle)}

上記のフォントサイズ13pxを15pxに変更したい場合
例)通常(変更数3)

.xxx {font-size:15px}
.yyy{font-size:11px}
.zzz{font-size:15px}
.xyz{font-size:15px}

例)カスタム〜(変更数1)
:root {--fontmiddle:15px}
.xxx {font-size:var(--fontmiddle)}
.yyy{font-size:11px}
.zzz{font-size:var(--fontmiddle)}
.xyz{font-size:var(--fontmiddle)}

.xxx, .xxx, .xyzは書き換えなくとも15pxに変わります。

-----
あと、基本はremで文字の大きさを指定しています。remは初期段階での指定(%指定したものです)にたいして相対的にサイズが変わります。
テンプレート内にはremでなくpxで指定している箇所もあり、それは場合は「相対だと不味いからだ」と思ってください。

修正できたということでお疲れ様でした :)

とうとま
2020/02/05 (Wed) 23:42

詳しい説明ありがとうございます

こんばんは。
カスタムプロパティというものは知りませんでした。そんな便利なことも出来るのですね。

remという指定方法があるのは知っていましたが、よく理解できていなかったのでpxばかり使っていました。
勉強不足だと思い知らされました。とても勉強になりました。ありがとうございました。

とうとま
2020/02/06 (Thu) 17:30

見出しについて質問です

h2やh3といったものをカスタマイズしたいのですが、うまくいきません。
CSSはこうなっております。
.inner-contents h2 {
margin: 1px auto 1px;
line-height: 1.6;
font-size: 1.8em;
background: #364e96;/*背景色*/
padding: 0.5em;/*文字まわり(上下左右)の余白*/
color: white;


}
.inner-contents h3 {
margin: 1px auto 1px;
line-height: 1.6;
font-size: 1.7em;
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/

}
.inner-contents h4 {
margin: 1px auto 1px;
line-height: 1.6;
font-size: 1.6em;
border-bottom: solid 3px #cce4ff;
position: relative;
}

これで記事に<h2>あいうえお</h2>のように使おうとしているのですが、指定したものが反映されません。
何か間違えてるでしょうか?それともカスタマイズをしてる際に何かおかしなことをしてしまって、反映されなくなってしまったのでしょうか?
ご教授よろしくお願い致します。

とうとま
2020/02/08 (Sat) 00:33

解決致しました。

連続で投稿してしまって申し訳ありません。
無事に解決致しました。

vanillaice (Akira)
Akira
2020/02/09 (Sun) 19:39

To とうとまさん(終了のご報告)

こんばんは。

解決済ということでよろしいでしょうか。
ひとつだけCSSのミスがあるようです。
.box1 p
に指定している
padding: -20px 0;
赤字部位、paddingにネガティブ値は指定できませんので正しい数値に修正してくださいね。

お疲れ様でした :)

-
2020/04/04 (Sat) 18:45

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/05 (Sun) 00:23

To Blowingをご利用の内緒さん

こんにちは。

> 各記事の行数がデフォルトで3行になってますが1行とか2行に変更したい〜

.grid-desc {
で検索するとスタイルシート内に1箇所あります。このルールセット内に
3
の数字が2箇所ありますので、いずれも希望の行数に変更してください。この2つは必ず同じ数字を指定してくださいね。
よろしくお願いします。

-
2020/04/05 (Sun) 06:00

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/05 (Sun) 16:25

To Blowingをご利用の内緒さん(完了のご報告)

こんにちは。テンプレートが別のものになっているので結果の目視確認はできませんでしたが、解決したということで良かったです。
お疲れ様でした :)

-
2022/01/08 (Sat) 10:18

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/01/08 (Sat) 20:46

To Blowing背景色の件 内緒さん

こんばんは ('0')/

> トップページと個別記事ページで背景色を別の色に指定したい〜

この「背景色」というのはブログ全体背景のことでしょうか。それとも個別記事の領域とグリッド領域それぞれの背景のことでしょうか。前者と仮定した場合は <body> で検索し、これを

<body<!--permanent_area--> class="xxx"<!--/permanent_area-->>

に変更。xxxの文字列は任意です。ご自身でわかりやすいクラス名を付けてください。そしてスタイルシート末尾に

.xxx {
background: rgb(244,244,244);
}

を追加。これが個別記事での全体背景です(記事領域はwhiteのままです)
トップの背景色は
--body-color: rgb(250,250,250);
というのがスタイルシートの上方にありますので、ここのカラーコードを変更します。他に --body-color が指定されている箇所も同時に色が変わりますので、それを避けたい場合は
body {
で検索し、このルールセット内の
background-color: var(--body-color);

background: rgb(255,255,255);
と直接指定してください(background-color でも background でもどちらでもOKです)

前者でなく後者の場合はお知らせください。よろしくお願いします。

-
2022/01/09 (Sun) 14:30

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/01/09 (Sun) 15:46

To Blowing背景色の件 内緒さん(完了のご報告)

こんにちは ('0')/

拝見しました。この方法でOKです。同じく先回のご質問内容もstyle属性を利用することができますが、classで解決できる場合はできるだけスタイルシートを活用されると良いと思います(レンダリングブロック要因になるため)
今回はidなのでこの方法がベターです。
お疲れ様でした :)

-
2022/01/09 (Sun) 19:46

管理人のみ閲覧できます

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

-
2022/01/21 (Fri) 20:18

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/01/23 (Sun) 02:05

To Blowing 代替画像の件 内緒さん

こんばんは ('0')/
まず、コメント場所へのご配慮ありがとうございます :)

> 記事のサムネイルを代替画像に設定したものに差し替えたい〜

グリッド表示ページの「no image」を好みの画像に変更したい、という捉え方で合ってますでしょうか。
方法は3通りありますので、ご都合の良い方を選択してください。

【記事ごとに指定】 = アイキャッチ指定
記事作成(or 編集)ページの記事入力画面下に「OGP画像設定」という項目がありますので、ここで好きな画像を指定。
特徴
・ 記事ごとにサムネイルを変えられる, 記事ページにこの画像は表示されない(トップページなど記事がリスト表示されるページに表示されます)
・ RSSやFC2ランキングにはこの画像は表示されない(SNSシェアでは表示されます, 他社ランキングではその社の仕様によります)

【テンプレートhtmlで指定】
noimage-span
を目印に検索するとhtml内に1箇所あります。この部位は以下のようになっていますので
<span class="noimage-span">No image</span>
以下の通り変更

<img class="lazyload grid-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像URL" alt="<%topentry_title>">

画像URLの部位を書き換えてください。この場合は「記事内画像なし + アイキャッチ指定なし」 という場合に毎回同じ画像が表示されます。

【個人設定で指定】
設定ページ
https://admin.blog.fc2.com/control.php?mode=setting&process=2#tmb_alternative_img

「サムネイル代替画像」の項目で指定します。この方法ではhtmlの変更も必要です。
<!--body_img--><img class="lazyload
を目印に検索し、この付近にある
<!--body_img-->

<!--/body_img-->
を削除。続いて近接にある
<!--body_img_none--> から <!--/body_img_none--> までを削除。

この方法も「記事内画像なし + アイキャッチ指定なし」 という場合に毎回同じ画像が表示されます。

-----
テンプレートhtmlの変更が簡単ですが、今後を踏まえて変更が頻繁になるなど予想できる場合には、個人設定で変えられるようにしておくと良いかもしれません。
一度お試しください :)

佐藤
2022/01/25 (Tue) 16:20

タイ仕入れ代行

こんにちは
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) 17:06

To 佐藤さん

コメント投稿フォーム上に記してある「コメントに関する注意事項」をよくお読み頂いた上で再質問をお願いします。お手数おかけします。

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

To vanillaice (Akira)さん

失礼致しました。

-
2022/01/30 (Sun) 14:36

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/01/31 (Mon) 02:38

To Blowing 代替画像の件(完了のご報告) 内緒さん

こんばんは ('0')/
変更を確認できました。お疲れ様でした :)

-
2023/05/01 (Mon) 19:28

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/05/01 (Mon) 21:46

To サムネイル代替画像が表示されなくなってしまいました 内緒さん

こんばんは ('0')/

> 今日確認してみたら表示されなくなって〜数日前に確認した時は表示されていた〜もちろんテンプレートの記述などは一切いじってません〜

『サムネイル代替画像』というのは個人設定のことで間違いないでしょうか。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#tmb_alternative_img

Blowingテンプレートはもともと、記事内に対象画像が無い場合には「No image」と表記されますので、個人設定で指定した画像は表示されません。以下はデモ画面です。
https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/blowing_min_top.html

「数日前に確認した時は表示されていた」ということは、テンプレートのhtmlに何らかのカスタマイズを加えていたはずです。現在のhtmlの状態を拝見しないと原因は特定できませんので、

<a href="<%topentry_link>" class="list-a">

で検索し、この付近のhtmlが

<a href="<%topentry_link>" class="list-a">
<!--body_img-->
<img class="lazyload search-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url_760x420>" alt="">
<!--/body_img-->
<!--body_img_none-->
<div class="search-noimage">
No image
</div>
<!--/body_img_none-->
</a>

になっているか確認してください。上記がデフォルトです。No imageを任意の画像に変更するには <!--body_img_none-->から<!--/body_img_none--> までを

<!--body_img_none-->
<img class="lazyload search-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像URL" alt="">
<!--/body_img_none-->

に変更してください。上記作業を行って、それでも表示されないという場合はその旨お知らせくださいね。

-
2023/05/04 (Thu) 01:09

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2023/05/04 (Thu) 21:58

To Blowing サムネイル代替画像の件 内緒さん(終了のご報告)

こんばんは ('0')/

原因がわかって良かったです。お疲れ様でした :)

アンヴァンテール
2024/04/07 (Sun) 23:42

ヘッダー画像が表示されない件でお問い合わせ致します

初めまして。美しいテンプレートをお借りさせて頂き感謝申し上げます。

1点、どうしても私では解決方法が見つかりませんもので、ご質問させて頂きます。

スマホで、インスタグラムのプロフィール欄に貼っているリンクからブログへ訪れますと、なぜかヘッダー画像が表示されないのです。

インスタグラムを経由しなければ、ヘッダー画像は問題無く表示され、
また、インスタグラムを経由しても、パソコンであれば問題無く表示されます。

スマホでインスタグラムを経由すると、なぜかヘッダー画像が表示されないのです・・・

本来、ヘッダー画像がある位置には特に大きな空白などはなく、ブログタイトルがあり、その下からすぐに記事が始まっています。

更新ボタンを押してもヘッダー画像は現れませんが、ブログタイトルをクリックしてトップページを再度読み込むと、ヘッダー画像が出てくるという状態です。

私のカスタマイズのせいかもしれないと、カスタマイズ無しオリジナルの状態で反映させ、再度インスタグラムから行ってみましたが、やはりヘッダー画像は表示されませんでした。

もしも、解決方法がございましたら、どうぞお助け頂けましたらと存じます。
どうぞよろしくお願いいたします。

アンヴァンテール
https://inventaire-antique.com/

vanillaice (Akira)
vanillaice (Akira)
2024/04/08 (Mon) 00:23

To アンヴァンテールさん

こんばんは ('0')/

ひとつお願いなんですが、こういったご質問の場合はURLの添付をして頂くことでお互いの時間や労力を短縮できます。今回は検索してインスタグラムのページにたどり着けました。実際にPC、タブレット、スマートフォンからアクセスしましたが、私の環境ではどのデバイスでも問題なく表示されます。但しiOSのインスタグラムアプリケーションではお申し出の症状を確認できました。
「インスタグラムを経由しなければ〜」というのは「アプリからアクセスしなければ」という意味で合ってますでしょうか。
ブログURLが正しく、画像のURLも正しく、通信も正常に行われている場合(今回はこれらに該当します)に考えられる原因は以下の通りです。

1. FC2画像サーバーの一時的不具合
2. 端末の不具合
3. 通信制限などモバイル通信環境の低下
4. 画像の容量が大きすぎてダウンロードに時間を要している
5. アプリ独自の挙動

現時点では5の可能性が高そうです。ヘッダー画像が表示されないというよりも、FC2独自変数の解釈がされていない、ということだと思います。参考記事をご確認ください。
参考記事: やっぱ不具合だと思うわ「index_areaがログオフ状態だと無効化される件」
https://vanillaice000.blog.fc2.com/blog-entry-477.html

恐らく上記記事内容に類する問題ではないかと思います。説明すると専門的になってしまいますので避けますが、モバイルからのアクセスで、OSブラウザであればヘッダー画像が表示されますが、インスタグラムアプリ内ブラウザではindex_areaを認識しない、ということだろうと思います。

解消法としては、Blowingのデフォルトではヘッダー画像はフロントページ(記事羅列系ページの最初の1ページ目)のみになっています。これを全ページで表示させるように変更すると表示されるようになる可能性があります。
この点を検討されまして、全ページヘッダー画像ありに修正される場合は

<!-- 注)ヘッダー下画像不要の方ここから削除 1/3 -->

で検索し、上記文言のすぐ下の行にある
<!--index_area-->
を削除、続いて

<!-- 注)ヘッダー下画像不要の方ここまで削除 1/3 -->

のすぐ上の行
<!--/index_area-->
を削除

この作業で全ページでヘッダー画像が表示されるようになります。作業前に必ず複製を取るようにしてくださいね。作業後に目視確認してヘッダーが表示されるようになればFC2独自変数とインスタグラムアプリの何らかの動作干渉という結論で合っていると思います。解消されないようでしたらインスタグラムアプリ独自の挙動ということになるでしょうか。
InstagramでもLINEでも何でもそうなんですが、アプリ内ブラウザは性能的にはあまり優れていません ^^;

申し訳ないのですが、多忙で次回いつログインできるか不明です。お返事が遅くなる(10日前後)可能性が高いので先にお詫びさせてください。ごめんなさいね。

アンヴァンテール
2024/04/08 (Mon) 14:49

To vanillaice (Akira)さん

早々にご返事頂きまして誠にありがとうございます!
インスタグラムの方のURLを添付しておらず、お手数をお掛けしてしまい誠に申し訳ございませんでした。。

vanillaice (Akira)様の環境では問題無く表示され、iOSのインスタグラムアプリケーションで出るの症状とのこと、そうでございましたか。
そうであれば、このままで使用か、全ページヘッダー画像ありに修正で作動となれば修正して使用か、どちらにするか検討したいと思います。

改めまして、この度は早々のご確認とご回答を誠にありがとうございました(^^)

vanillaice (Akira)
vanillaice (Akira)
2024/04/23 (Tue) 00:21

To アンヴァンテールさん(終了のご報告)

お返事がとても遅くなってしまいました。ごめんなさい。

根本的解決にならず申し訳ないです。よろしくご検討ください :)

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