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

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

テンプレート 配布中テンプレート
2018/04/17
21
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWD
Behaviorテンプレート

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

名称 Behavior
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大900px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
構造化マークアップ 個別記事のみ
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カラム 1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下(デバイスサイズ依存) サイドメニュー --- 下
最終更新 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

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

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

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

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

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

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

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

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

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <footer class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め </footer> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>-<%comment_month>-<%comment_day> <%comment_youbi> <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a class="post-a" href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a class="post-a" href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="post-a" href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
  <li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}
②について

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

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

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

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

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

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

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

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

#comment_form {
  padding-top: 40px;
}
③について

<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 {
  margin: 20px 0;
}

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

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

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2018.12.20
  • Font Awesome(JS)を廃しインラインSVGに変更
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

日本人という民族は本当に繊細で素晴らしいですよね。
エレベータの保守点検は決められた日時に決められた通りにちゃんとやれ(in あめりか)
何があったかはお察しください (;`ー´)o

びへいびあ
承認されました。ありがとうございます。

サンプル

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.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • トップページ画像表示縦横比変更
  • テンプレートと無関係なプラグインなど導入のお手伝い
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズのお手伝い

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

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

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

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

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

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

ご利用の前に

Important notice.

本テンプレートは実験的な意味合いで製作しております。
ご質問・ご相談が届くであろうことを想定し、仕様の説明をしておこうと思います。
ご自身の理想や希望などと照らし合わせた上で利用のご検討をお願いします。

トップページサムネイル画像の縦横比は元画像を参照踏襲しません

今回の製作テーマは「メイソンリーレイアウトの表示負荷をいかに抑えるか」です。
グリッド = 全てのアイテムのサイズを揃えて整列させる
メイソンリー(可変グリッド, 変形グリッド) = 個々にサイズが異なるアイテムをレンガ状に配列する

メイソンリーというのは配列前に縦幅の計算が必須ですので、画像の遅延読み込みと大変相性が悪い んですね。
遅延読み込みが適用されたbelow the fold(画面外, ファーストビュー外)の画像はスクロールを行うまで情報の取得が行われません。
html内に逐一 width, height属性を記せば別ですが、テンプレート製作者がユーザー利用画像のサイズを前もって知ることは不可能です。

メイソンリーを実現するには「初回表示時の縦幅計算」「画面及びブラウザサイズが変わった時に再計算(レスポンシブ)」がいずれにしろ必須なのですが、画像遅延読み込みと両立させるためにはそれに足すことの「スクロールで画像が表示された時に再計算」が加わります。
また、メイソンリーは時系列を遵守しませんので、「スマートフォンで縦一列になった際に時系列順に戻す処理」がさらに追加されます(ここは製作者によると思いますが私は行なっています)
メイソンリーというのは人間(製作者)もコンピュータも非常に頭を使うレイアウトです。

既存テンプレートの MochaNostalgia では上記全ての処理をJSで行なっています。
が、やっぱりパフォーマンスが落ちるんですね (´・ω・`)
そして現在ChromeでrequestIdleCallbackのバグがあり、その影響で計算量の多いスクリプトでは非常に動作が遅くなってしまいます。

難しい説明はここでは抜きにして、要するに
画像の縦横比が不明な状態のままでメイソンリー配列を行うとパフォーマンス低下を招く
ことになります。

画像を遅延させず通常の読み込みをすれば多少改善されますが、いずれにしろ画像は一足遅れでの情報取得になりますので結局は再計算が必要です。
メイソンリーで アイテムが重なっている ページ(そしてそのまま直らない)とか目にしたことがありませんでしょうか。heightの計算(及び再計算)を怠るとそうなります。

とまぁいろいろゴチャゴチャありますが、要するに あらかじめ画像の縦横比を決めておく ことが一つの解決策になりますので、今回はこちらを採用しています。
縦横比設定はランダムに行われますのでページを開く度に各アイテムの表示状態、ページ全体の表示状態が変わります。
ここにご納得頂けるかどうかですね。まずは。

  • ページスピードを極力低下させないこと(その一環が遅延読み込み)
  • メイソンリーデザインが成り立っていること
  • スクリプトを最小限に抑えること

今回最も重視したのは上記の点です。
「元画像の縦横比に準ずること」は重要ではない と個人的判断をしました。
何故なら元画像の縦横比というのは画像の持ち主にしかわからないんですよね。
縦長だろうが横長だろうが、画像の持ち主しか「正しい縦横比」を知らないわけなんです。つまり閲覧者にはわからないってことです。
画像の撮影者・保有者はこだわりがあるかもしれませんが、閲覧者はこだわりませんというかわかるわけが無いので、最重要とはしていません。

という事情なので 「トップの画像を元画像と同じ縦横比にしたい」というカスタマイズのご相談はお受けできません。
事前にご理解を頂ければと思います。
現時点ではCSSのみでのメイソンリーは無理なんですよね。
いや、実際には2つばかり実現できる構成がありますけれど。
一つは記事数を制限せざるを得ないケースが出て来るため現実的ではない。
もう一つは「ブログ」を大前提にすると、時系列は左から右へ流すのが絶対条件だと思います。
縦基準に並べて良いのならCSSだけで比較的容易にメイソンリーにできますけどね (´・ω・`)
ブログでそれはナシだと思うので使わない。

ここがたぶん最も引っかかる点、なんとかしたいという気になる点だと思いますので、理屈のご説明とご相談は承れませんという事前回避策として(笑)
メイソンリーとしてはかなりハイパフォーマンスに仕上がっているはずですので、ここは変更に妥協できない部分です。申し訳ないです。

(たまに初回表示時に一瞬アイテムがグシャっと重なってしまうことがありますが、そこはご愛嬌ということでご容赦ください(汗))

Font Awesomeについて

About Font Awesome

リリース直後は Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。

FAがどうしても必要、という方はhtml内に

注)Font Awesome(JS)必要な方この一行削除

という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。

CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome

JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。

IE非対応

This theme is incompatible with Internet Explorer.

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

重要プロパティのobject-fitがEdgeでもようやく実装されましたので、思い切ってIEをサポート外にさせて頂きました。
また、IE対応をやめることによりIEでしか利用しないスクリプト多数を削除することができました。
現在ではIEを開くとMicrosoftからEdgeに移行を勧められるようになっていますし、リリースメーカーが開発を放棄したブラウザをいつまでもサポートする義理はないかと (´・ω・`)

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

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

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

ナビゲーションについて

The important thing to be careful when adding links to navigation.

ナビゲーションリンクテキストの日本語変更やリンク追加などをされます方は、デフォルト設定よりも早い段階でナビゲーションが折りたたまれるよう調整してください。
(見た目・操作性の問題とスクロール位置のズレ・リンクの重なり回避)

navi breakpoint

で検索されますとhtml内に1箇所、CSS内に1箇所、合計2箇所出てきます。
いずれも直近(すぐ下にあります)の 900px の数値を大きい数字に変更してください。

レスポンシブデザインですので一定の見た目で判断せず、ブラウザ幅を拡大・縮小しながらあらゆるサイズでの目視確認を行ってください。

個別記事横幅調整の仕方

How to increase or decrease width of container of article.

デフォルトは個別記事の最大横幅を 900px に設定しています。

注)個別記事横幅最大値

で検索して頂きますと、CSSソース内に 1箇所 あります。
実寸は900pxに 足すことの 120px1020px としてありますので、変更される際にも
希望寸法 + 120px の値を入れてください。
例) 800pxに変更したい場合は 920px と記述

ドミナントカラー

Dominant colors

以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51

rgb(237,236,238) ナビ背景色, コメント送信・削除ボタン背景色 など
rgb(137,140,163) 基本リンク色
rgb(250,249,250) サイドメニュー背景色

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

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

Cautions when copying pagination in permanent page

2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。

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

Cautions before asking for something.

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

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

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

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

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

Related post

Comments  21

-
2018/04/17 (Tue) 22:31

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/04/18 (Wed) 00:26

To Behavior DLリンクの件 内緒さん

またやってもーた (´=д=`)
修正しましたー。いつもお知らせ頂き感謝です ('0')/

-
2018/09/29 (Sat) 15:19

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/30 (Sun) 01:35

To Behaviorレイアウトの件 内緒さん(終了のご報告)

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

そうですね。仕様です。
縦横比については本文にある通りです。そしてそもそもメイソンリーレイアウトというのは時系列を尊重しないレイアウトなんです。
ご理解頂けると助かります。ありがとうございます :)

秋風コスモス
2018/10/05 (Fri) 16:43

トップページのカテゴリに追加出来ません。。

Akira様、ステキなテンプレート使わせて頂きましてありがとうございます。

ブログもちょっと見はステキな感じになってます。
でも、トップページのカテゴリHTMLはガタガタで「出た所勝負」な状態です。
カテゴリ番号と場所が合うように設定されているはずなのに、なぜが反映しません。
なので番号を進めて充てたりして適当に収めている状態です。
それでも最後のカテゴリ「その他」をどうしても出す事が出来ませんでした。
どこに問題があるのか、お時間のある時で結構ですので、見て頂ければ幸いです。
よろしくお願い致します。

vanillaice (Akira)
Akira
2018/10/06 (Sat) 00:44

To 秋風コスモスさん

ありがとうございます (o'ω')ノ

こちらの記事をお読みください。
https://vanillaice000.blog.fc2.com/blog-entry-785.html

maroemon
2019/02/02 (Sat) 18:06

個別記事のテキストについて

はじめまして。
写真を表示するのにとても適しているので気に入り、Behaviorを使わせていただいております。
個別記事において、画像(img)は最大幅で表示しながら、テキストだけ1行の文字数か横幅を制限することは可能でしょうか?
スタイルシートをいろいろといじってみたのですが、画像の幅だけを小さくすることはできても、テキストの幅だけ制限することができませんでした。
可能でしたらご教示ください。
よろしくお願いいたします。

vanillaice (Akira)
Akira
2019/02/02 (Sat) 19:59

To maroemonさん

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

同じ領域内で画像は横100%、テキストはそれよりも小さく、ということですよね。
基本的にそれをテンプレートでなんとかするというのはできません。何故ならいつどこにどのサイズの画像が掲載されるかをテンプレート構造で判断することはできないからです。
ですからこれを実現するにはmaroemonさんが書くテキストの方で一工夫しなければいけません。

幸いp要素を利用して記事を書かれていてクラス名も付いていますので、そちらにプロパティを追加されてはいかがでしょうか。p要素のクラス名は
MsoNormal
で合ってますでしょうか。そしてこのクラス名は特に何も指定されていないように見受けられます。
ただこれ、意図的なら良いんですが、もしかしてwordあるいはその類似アプリケーションやビルダーで文章を書かれてませんでしょか。文章のhtml構造についてあまりよろしくない状態になっている点はお伝えしておきます。
<span lang="EN-US"> と <o:p></o:p> が到るところに書かれていますが全てhtml構文エラーです。
そしてクラス名の文頭には小文字のみ許可されていますが見て取れるように頭が大文字になっています。

この件についてはお任せします。私からは「html専用エディターを利用した方が良いですよ」とアドバイスさせてくださいね。
本当はクラス名を利用してCSSを指定するのがベストなんですが、問題がありますので今回は以下のような内容の方が良いかもしれません。

p要素ももしかしたら意図的ではないかもしれませんが、とりあえず以下の通り。

例)
@media screen and (min-width: 560px) {
#inner-contents p {
width: 80%;
margin: auto;
}
}

赤字の数値はご自身で調整し、スタイルシートの末尾に記載。
上記内容は画面幅560px以上になった時のみ有効です。スマホでもテキストが狭くなっても構わないのであれば

#inner-contents p {
width:80%;
margin: auto;
}

でもOKです(おすすめはしませんが)
同じ要領で「見出し」も

#inner-contents h2,
#inner-contents h3,
#inner-contents h4,
#inner-contents h5,
#inner-contents h6 {
width: 80%;
margin: auto;
}

こうしてp要素と同じ指定を行ってください。

仮にエディターを変更し、p要素が自動入力されなくなった場合には上記内容は無効化されます。記事に記載するテキストは

<p>テキスト内容</p>

この形を守るようにしてください。
これが一番簡単な対処法ではないかと思います。
一度お試しください。
不正な文字列と不正なクラス名についてはいずれどこかのタイミングで綺麗に修正された方が良いと思います。

------
また、テキストの幅を制限したいというのはテキストの一文あたりの分量が気になるからではないかと思いますので、別のアプローチもお考えください。

1. 一文改行を辞めて段落を意識して書く
参考記事: 記事の横幅が広すぎて文章の見た目が悪い… と感じたときの対処法
https://vanillaice000.blog.fc2.com/blog-entry-810.html

2. 文字を大きくする。

文字を大きくするだけでも見た目は違ってきます。また、上に記したp要素への指定について、widthへの%指定ではなく参考記事にあるようなmax-widthへのpx指定でも良いと思います。挙動が違いますのでどちらを選ぶかはご自身で決めてくださいね。

maroemon
2019/02/02 (Sat) 20:43

御礼

ありがとうございます。
ご返答いただいた文章はコピーさせいただきました。
こんな短時間に詳しく説明をいただけて感激しております。
僕はライターを生業としていることもあり、たしかにwordで原稿を作成したものがいくつかあります。
参考にして修正してみます。
しばらくwebからは遠ざかっていたものですから、助かりました。

-
2019/02/02 (Sat) 22:55

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/02/03 (Sun) 00:53

To maroemonさん&内緒さん

ごめんなさい。 width が with と誤字でした。コピペされたので間違いをそのまま引き継いでしまいます。
修正しましたので改めてコピーをお願いします。

お知らせ頂いた内緒コメントさん、ありがとうございます!

maroemon
2019/02/03 (Sun) 19:28

修正したものを記載してみたのですが、
やはり画像も小さくなってしまいます。
p:not(img){
max-width: 80%;
}
でいけるかなと思ったのですがダメでした。
この構文は間違っているかもしれませんが、
やりたかったのはこういうことなのです。(汗

なにかほかの手段を考えてみます。
ありがとうございました。

vanillaice (Akira)
Akira
2019/02/03 (Sun) 20:24

To maroemonさん

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

まず、昨日の誤字の件はごめんなさいね。
で、この方法を取るならば以下の2点が必須要項です。

① imgをp要素内に含めない
例)
×
<p>あいうえお<br><img src="xxxx.jpg"></p>

<p>あいうえお</p><img src="xxxx.jpg">

② テキストはp要素でマークアップする
×
<div style="text-align: center;">あいうえお</div>

<p style="text-align: center;">あいうえお</p>

----
2月3日以降の投稿はテキストがp要素ではなくdiv要素に変更されています。横幅の制限はp要素に指定したのですからdiv要素でマークアップしてしまえば効力はありません。

ここでmaroemonさんの方針をはっきりと定めて頂く必要があります。
htmlというのは見た目の操作に用いるのではなく意味や定義のために使用します。
注意点として「imgをp要素に含めない」としましたが、実際はimg要素というのはp要素内に書く、あるいはfigure要素として独立させるというのが適切です。

明確にしたい点はmoraemonさんが「htmlマークアップのセマンティクス(意味論)」を重視しているかどうかです。
恐らくimgのalt属性の使い方から判断するとあまり意識されていないように思います。なのでここではやはり p要素内にimg要素を含めない という方法をおすすめします。

他にもtransformプロパティを利用してテキストよりも画像を大きくする、という方法があり、今回おすすめしているのとは逆方向からのアプローチですが、緻密に計算しないとオーバーフロー(画面幅超過 = NOT モバイルフレンドリー)してしまうのと、一口にimgといっても全てを横100%で表示したいわけではないでしょうし(縦長の画像などもありますよね)、現存のimg要素にクラス名が付いていないので対象要素の特定や振り分けができない、などやはり現実的ではないと思います。

----
あと一枚あたりの画像の容量が大きすぎてページ自体が重たくなっていますので画像容量の削減もご検討くださいね。またはBehaviorはlazyloading(画像の遅延読み込み)用JSが元から含まれていますのでそちらを活用されても良いと思います。こちらについてはお任せしますが容量削減はいまや当たり前ですからせめてそれだけでも行った方が良いと思いますよ。

参考記事: 画像の容量気にしてますか?
https://vanillaice000.blog.fc2.com/blog-entry-228.html

参考記事: lazyloading関連記事(検討編と初級編をおすすめします)
https://vanillaice000.blog.fc2.com/?tag=Lazyloading

今最新記事のページスピードスコアが30%しかないのですが、lazyloadingを使うことで90%取れるはずです。ページの読み込みが遅いと離脱率が上がります(容量削減は必須)

maroemon
2019/02/04 (Mon) 00:16

いろいろとありがとうございます。
以前は画像サイズを500kに抑えていたのですが、制限を外して画質のバランスを見ていました。
これは戻しがほうがよさそうですね。
ほかの件は、僕のスキルでは無理そうですね。
カスタマイズに割ける時間も限りあるので、僕なりに写真を楽しむ手段を考えてみることにします。
大変、お世話になりました。

vanillaice (Akira)
Akira
2019/02/04 (Mon) 21:34

To maroemonさん(終了のご報告)

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

画像は大きすぎても見づらいので原寸で長辺800〜1200px、表示領域はやはり800〜1000px程度が見やすいと思いますよ。文字も大きくされて全体のバランスも良くなり、これならテキストの領域制限は不要だと思います。
お疲れ様でした :)

* 文字の大きさは
body {
を検索し、近接にある

font: 1.4rem/ 省略

太字部位の数字を1.5や1.6に変更することで記事を書く都度エディターツールの利用も不要、過去記事も一括で大きくなります。参考までに。

maroemon
2019/02/05 (Tue) 18:45

ご丁寧にどうも!!

-
2019/09/05 (Thu) 12:02

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/05 (Thu) 21:31

To Behavior背景色の件 内緒さん

こんばんは。

> カテゴリ毎に背景の色を変えたい〜

これは「カテゴリ一覧ページ(blog-category-x.html)」のことでしょうか。「個別記事ページ(blog-entry-x.html)」のことでしょうか。
それとも両方でしょうか。

対象ページ種が不明だと作業できませんのでお返事をお願いします。
それから、サイドメニュー部(ページ下部プラグイン)は元々背景色を分けてありますが、こちらをどうされるのか(メイン背景と合わせる or デフォルト色で固定)も併せてお伝え下さいね。

かんり
2019/09/06 (Fri) 18:51

To Akiraさん

お返事頂きありがとうございますm(_ _)m
情報不足で申し訳ございません
個別記事ページの事になります。
どうかよろしくお願い致します。

-
2019/09/06 (Fri) 18:53

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/06 (Fri) 21:36

To Behavior背景色の件 内緒さん②

こんばんは。

サイドメニューの背景色はどうされるのかお返事が無いので「そのまま」と仮定して進めますね。

-----
<div id="wrapper">
で検索するとhtml内に1箇所ありますのでこれを

<div id="wrapper"<!--permanent_area--><!--topentry--> class="catebg<%topentry_category_no>"<!--/topentry--><!--/permanent_area-->>

に変更。
次に各カテゴリの番号を調べてください。
例) https://vanillaice000.blog.fc2.com/blog-category-5.html
赤字の部位がカテゴリ番号です。

.catebgカテゴリ番号

これがセレクタになります。例えばカテゴリ番号が「5」ならば

.catebg5

です。

.catebgカテゴリ番号 {
background: カラーコード;
}

全てのカテゴリ番号で上記のようなルールセットを作成し、スタイルシート末尾に追加。
カテゴリが10あれば10のルールセットになります。
よろしくお願いします。

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