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

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

テンプレート
2019/06/20 26
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS4 RWD
Blowingテンプレート

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

最終更新 2020.5.28
  • ページ送りのJSを修正

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

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

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

更新履歴 2020.3.23
  • コメント返信のJS変更
更新履歴 2019.11.23
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
最終更新 2019.10.16
  • サイドメニュー部プロフィール画像の縦横比が崩れる件修正

再ダウンロードが困難な方はお手数ですが自主修正をお願いします。申し訳ございません。

#side-prof-pic { で検索するとスタイルシート内に1箇所ありますので、ルールセット内 height: 100%; の直下に object-fit: cover;追加

最終更新 2019.8.3

花びらエフェクト削除用ガイダンスを追加。

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

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

【重要】テンプレートの変更点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 <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a></li>

を以下の通り 変更

<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-stroke" 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-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--/comment_author--></li>
②について

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

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

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

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

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

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

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

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

#comment_form {
  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 { で検索するとスタイルシート内に2箇所あります。1箇所目のルールセットを 削除 し、2箇所目の line-height: 1.9; の直下に margin: 20px 0;追加

続いて .inner-contents p:first-of-type で検索するとスタイルシート内に1箇所ありますのでこのルールセットを 削除

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

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

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE 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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

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

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

IE非対応

This theme is incompatible with Internet Explorer.

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

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

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

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

ヘッダー画像変更

How to change backgrund-image in header

https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/blowingheader_sp.jpg
https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/blowingheader_pc.jpg

上記2URLが対象画像で _sp のついている方がスマートフォン用、_pc がパソコン用です。いずれもスタイルシート内に1箇所づつ記載されています。

デフォルト画像はパソコン用は横1600px, スマホ用は横800pxですので参考までに。それぞれ変更したい画像のURLに差し替えを行ってください。

花びらはcanvas要素で表示しています。画像を変更しても勝手に降ります。

ドミナントカラー

Dominant colors

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

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

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

How to reverse the direction of rows.

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

スピード強化について

Behavior about navigation

Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

「新着記事リスト」と「プロフィール」について

About recent list and profile

それぞれのプラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策(新着記事リスト)

できればプラグイン側を非表示にされた方が良いと思います。表示位置の変更は可能です。

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。コピー対象はhtml内を <!-- 個別記事ページナビ --> で検索し、すぐ上にある <!--permanent_area--> を含め、<!-- 個別記事ページナビここまで --> のすぐ下にある <!--/permanent_area--> までを含めた範囲です。

複製したhtml内容は以下の作業してから希望の位置へペーストしてください。

html冒頭の <div class="pager-wrapper" id="pager-wrapper"><div class="pager-wrapper"> に修正(id属性の取り除き)

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

Cautions before asking for something.

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

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

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

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

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

 26

There are no comments yet.
そふぃあ
ブログカードについて

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

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

2019/08/09 (Fri) 15:17
vanillaice (Akira)
Akira
To そふぃあさん

こんばんは ('0')/

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

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

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

2019/08/09 (Fri) 18:27
そふぃあ
To Akiraさん(完了報告)

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

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

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

2019/08/09 (Fri) 21:29
vanillaice (Akira)
Akira
To そふぃあさん

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

2019/08/10 (Sat) 00:30
ぼん
ヘッダー下画像のアニメーションについて

はじめまして。

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

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

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

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

2019/08/23 (Fri) 22:32
ぼん
上の質問について

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

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

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

2019/08/25 (Sun) 15:42
ぼっちん
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) 20:05
ぼん
ありがとうございます!

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

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

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

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

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

2019/08/25 (Sun) 23:07
vanillaice (Akira)
Akira
To ぼんさん, ぼっちんさん

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

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

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

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

2019/08/26 (Mon) 14:17
ぼん
To Akiraさん

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

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

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

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

2019/08/28 (Wed) 14:39
vanillaice (Akira)
Akira
To ぼんさん

こんばんは。

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

2019/08/30 (Fri) 01:20
vanillaice (Akira)
Akira
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) 15:35
-
管理人のみ閲覧できます

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

2019/11/03 (Sun) 18:47
vanillaice (Akira)
Akira
To Blowingヘッダーの件 内緒さん(終了のご報告)

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

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

2019/11/03 (Sun) 19:32
とうとま
文字サイズについての質問です

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

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

2020/02/04 (Tue) 11:18
vanillaice (Akira)
Akira
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) 18:11
とうとま
無事に大きくすることができました!

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

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

2020/02/04 (Tue) 22:52
vanillaice (Akira)
Akira
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) 17:28
とうとま
詳しい説明ありがとうございます

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

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

2020/02/05 (Wed) 23:42
とうとま
見出しについて質問です

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/06 (Thu) 17:30
とうとま
解決致しました。

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

2020/02/08 (Sat) 00:33
vanillaice (Akira)
Akira
To とうとまさん(終了のご報告)

こんばんは。

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

お疲れ様でした :)

2020/02/09 (Sun) 19:39
-
管理人のみ閲覧できます

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

2020/04/04 (Sat) 18:45
vanillaice (Akira)
Akira
To Blowingをご利用の内緒さん

こんにちは。

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

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

2020/04/05 (Sun) 00:23
-
管理人のみ閲覧できます

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

2020/04/05 (Sun) 06:00
vanillaice (Akira)
Akira
To Blowingをご利用の内緒さん(完了のご報告)

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

2020/04/05 (Sun) 16:25

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

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

テンプレート