attention admin about comments trackbacks you may also like

El-zigzag - FC2ブログテンプレート

2020年02月25日
テンプレート
22
HTML5 CSS4 RWD Darkmode
El-zigzagテンプレート

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

最終更新 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

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

名称 El-zigzag
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
OSダークモード対応 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細は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カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下 サイドメニュー --- 下

える しぐさぐ
まだ承認されていませんが多忙でログイン困難なため前もって記事にしておきます。

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

サンプル

Samples

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

* OSのダークモードON/ OFFで背景色が切り替わりますのでご確認ください。

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フォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

ダークモード対応について

Supporting Dark Mode - how it works

本テンプレートはOSのダークモードに対応しています。

ダークモードとダークテーマの違い

今回は ダークテーマ(darktheme)の導入ではなく、ダークモード(darkmode)の対応 です。この2つは明確な名称定義がなく混同されていますが、機能的には分けるべきものなので便宜上「theme」「mode」に区別して説明します。

ダークテーマは OSのモードに関わらずページ内で色調を暗色に切り替える という手法です。一方ダークモードは OSの機能への対応 です。

わかりやすい例を挙げると、スマートフォンアプリの YouTube はダークテーマ導入です。同じくスマートフォンアプリの Pinterest はダークモード対応です。

YouTubeは「設定」の中に「ダークテーマ」があり切り替えができます。

YouTubeアプリ「設定」
ダークテーマ opt in
ダークテーマ opt out

YouTubeアプリ側の設定で切り替えますので OSのダークモードとは連動していません。

Pinterestはアプリ内の設定に切り替えはなく、OS(iOS, Android, Mac, Windowsなど)側の「設定」の中にモード選択があります。
* OS設定のスクリーンショットはiPhoneのものです。

iOS「設定」
ダークモード opt in
ダークモード opt out

YouTubeの配色切り替えはアプリ内設定で行います。ユーザーがスマートフォンの「ダークモード」「ナイトモード」をONにしても配色が変更されることはありません。

Pinterestの配色切り替えはOS設定で行います。ユーザーがこの設定をONにすれば自動的に黒背景で表示されます。

つまり「テーマ」はOS設定とは連携しておらず、アプリ内の設定あるいはページ内に設置されているボタンなどで行いますが、「モード」の方はOS設定連携ですからON(opt in)していれば勝手に黒系になる、ということですね。なので「テーマ」は「採用」「導入」、「モード」は「対応」と表現できるかと思います。

OSのダークモードをONにするのは

  • 省電力
  • 眩しさ軽減

が主な理由で、電池保ちのことだけでなくwebページが暗色になることも期待されているはずなので対応をしておく、ということですね。

本テンプレートはOS設定への対応ですからページ内に切り替えボタンはついていません。モードON/ OFFで状態確認を行ってください。ダークモード非対応の旧OSについては暗色背景のスタイルは無視されます(常に白背景で表示されます)
ダークモード対応の注意点もありますので以降の章もお読みください。

ダークモードに不向きなページ

もしあなたが記事を書く際に 文字色を頻繁に変更している という場合にはダークモード対応を行うと却って危険です。

FC2ブログのエディター(新旧投稿画面)には「文字色の変更」を行うツールがついていますので、当然使っている方がいらっしゃると思います。そして色変更時に 背景色が反転したときの視認性 まで考えている方はごく僅かだと思います。

背景色と衝突してテキストが読めない!に対処する

「文字が読めない」このトラブルは多くの場合「白背景から黒背景にしたら(逆も然り)文字がところどころ読めなくなった」というケースが多いですね。つまり フォントカラー指定時に背景色が反転した場合を想定していなかった ということです。この解消法について。...

パターンに当てはまる方がダークモード対応するとテキストが読めないなどユーザビリティを低下させる恐れがありますので、この場合には 非対応に変更する ことをおすすめします。作業内容は以下の通り。

/* darkmode */ で検索するとスタイルシート内に1箇所ありますので、この文字列を含み /* end */ までを削除。この処理を行うと閲覧者がダークモードをONにしていても色調に変更はかかりません。

ヘッダー背景色について

Warning about changing background color of header

ヘッダー背景色変更のカスタマイズをされる方は ダークモード時も同じ色が継承される 点に注意してください。ヘッダー背景色は明色・暗色背景時いずれも共通です。もちろん腕に覚えのある方はダークモード時の調整を任意で行って頂いても構いません。

ヘッダー背景色を変更すると他の部位も一部連動して変化します。カスタマイズ対象部位は /* ポイントカラー(ブラウン) */ で検索するとスタイルシート内にでてきます。この一行の :(コロン)の左側は変更しないよう注意 してください。変更するのは右側に記載されている色コード(デフォルトは rgb(76,60,59))だけです。

ダークモード時の画像について

About image grayscale in darkmode

ダークモード時は画像の彩度を若干抑えています(その方が好ましいという統計結果が出ているため)が、不要と思われる方は以下の部位を削除してください。

filter: grayscale(20%); を目印に検索し、これを含む

  img {
    filter: grayscale(20%);
  }

を削除。すぐ下にある } を巻き込み削除しないよう注意。

記事編集リンクについて

Location of edit icon

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

カラム入れ替えの仕方

How to reverse the direction of rows.

#main-container { で検索するとスタイルシート内に2箇所ヒットし、2つ目 が対象です。そのルールセット内にある max-width: var(--width-max); の直下に flex-direction: row-reverse;追加

続きまして #primary { で検索するとスタイルシート内に1箇所ありますのでルールセット内 margin-right: var(--gap); の赤字部位 rightleft変更

webフォントを利用しない場合

If you do NOT want to use Google fonts...

ブログ名などの一部フォントはGoogle Fontsを利用しています。このフォントを排除したい場合は

注)webフォント不要の方

で検索し、ガイダンスに従って頂くわけですが、ちょっと意味がわかりにくいかもしれませんので補足します。

wf-target で検索するとhtml内に11箇所ヒットします。これらを以下の要領で削除します。

① クラス名が単独の場合

id=blog_title class=wf-target

緑部位を削除して以下の通り。

id=blog_title

② クラス名が複数の場合

<div class="another-title wf-target">

該当クラス名以外はそのまま残して以下の通り

<div class="another-title">

webフォントは読み込まれるまでにタイムラグがありますので、FOUT現象(flash of unstyled text, フォント種が切り替わる際に点滅するように見える)が発生します。それを避けるための処理を行っており、それ故正しい手順で削除しないと文字が表示されませんのでご注意ください。上記手順に沿って削除するとテンプレートで指定されているデフォルトフォント種に戻ります。

カテゴリオーバーレイ表示の際のメインコンテンツぼかしについて

CSS blur doesn't work in Firefox browser.

ナビゲーション内にある「CATEGORY」をクリックするとオーバーレイ表示が行われ、背面になるコンテンツにぼかしがかかるようになっていますが、現時点ではFirefoxに対応していませんので予めご了承ください。オーバーレイが機能しないわけではなく単に後ろにぼかしがかからない、という意味です。

スピード強化について

Behavior about navigation

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

prefetchはバックグラウンドで行われますが、過信して1ページ内に大量のリンクを記載しない よう気にかけてください。記事の表示件数をMaxの50件に指定するなどがそれにあたります。リンク数が過剰だと却ってスピードを落とすこともありますので10〜30件程度が妥当だと思います。また、スペックを最大限に活かすには SSL化 を行ってください。

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

About recent list and profile

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

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

できればプラグイン側を非表示にされた方が良いと思います。

補足事項

Handouts

  • ページ内スクロールボタンの位置について

現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2020年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。

本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。

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

Cautions when copying pagination in permanent page

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

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

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(22)

There are no comments yet.

tetsu74

2020/03/23 (Mon) 20:08

初めまして

こちらのテンプレートをお借りしてみました。初心者というか、全く知識がないので的外れな質問をしていたらすいません。
今までは公式テンプレートの「Diary_2column」を使っていました。
質問ですが、
①個別の記事に入った時、画像ファイルの終わりから改行せずに文章を続けて書いている部分が、そのまま改行されずに表示されています。今までのテンプレートではそうゆう事はなく、改行されてように表示されていました。どうすればいいのでしょうか?テンプレート側でなんとかなるものですか?それとも本文で改行編集でしょうか?このページでう→ http://kato74.blog.fc2.com/blog-entry-303.html

②個別記事の最後に付くSNSボタンを外すのはどうすれはいいのでしょうか?プロフィールのところのSNSボタンの外し方はHTML編集で外せばいいのは分かりました。

③ ②の質問に加えてですが、プロフィールの所のSNSボタンを押すと上に移動するのみなのですが、どうゆう意味があるのでしょうか?個別記事の最後にあるSNSボタンはそれぞれのSNSに飛んでいます。

④これはテンプレートへの質問ではないのですが、Facebookに自分のブログは嫌われているようで、Facebookボタンを押すと「他のFacebookユーザーが不適切であるとして報告したコンテンツが含まれるため、メッセージが送信されませんでした。」という画面になります。以前(5年くらい前)はFacebookとの連携も普通にできていたのですが、突然できなくなりました。プロフィール欄にブログのURLも貼り付けできません。これはInstagramも同じです。Facebookには何度か、「そんな怪しいサイトじゃないく、個人の普通のブログです。解除してください」とリクエストしましたが、なんの回答もありません。FC2がアダルトサイトを運営してるのが関係してるのかもと邪推しています。試しにブログのFacebookボタンを押してみてください。
なにか情報をお持ちであれば教えて下さい。この事もあってSNSボタンを設置する事には消極的です。

⑤ヘッダーの部分に画像を入れるのはやめておいたほうがいいですか?「Diary_2column」の時はヘッダー部分が大きかったので、画像を入れていました。このテンプレートだと入れないほうがいいのかなと思っています。スマホで見た時にも無いほうが良さそうに思えますが。一応お聞きしています。

お忙しいようなので、時間のある時で構いません。よろしくお願いします<(_ _)>

ぼっちん

2020/03/23 (Mon) 20:21

To Akiraさん

Akiraさん、こんばんは~ ^^

あの~ まだ
-----------------
える しぐさぐ
まだ承認されていませんが多忙でログイン困難なため前もって記事にしておきます。
-----------------
のままになっておりますよ~
以上です(笑)

Akira

2020/03/23 (Mon) 21:19
vanillaice (Akira)

To tetsu74さん

こんばんは。

> 画像ファイルの終わりから改行せずに文章を続けて書いている部分が、そのまま改行されずに表示されています。〜

これは当然そうですね。改行が無ければ画像の横に並びます。それが本来の正しい形です。
Diary_2columnでテキストが並ばなかった理由はテンプレートのスタイルシートに意図的に
display: block
が指定されていたためです。画像のdisplayの値は本来は inline で横に並びます。一方 block は横に並びません。
なので対策としては

.inner-contents img:not(.emoji) {display:block}

をEl-zigzagのスタイルシート末尾に追加すればテキストは並ばなくなります。
ただあまり好ましいやり方ではありません。画像を複数枚横に並べたいときはどうするの?といった問題が出てきます。小さな画像同士でさえ横に並びません。
追加内容はFC2投稿画面のツールで挿入する「絵文字」を除外してあります。でないと絵文字だけで1行取ってしまいます。

一般的なテンプレートで画像に block を指定することはまずありませんので、「画像は改行しないとテキストが横に並ぶのが当たり前」と意識を変えて頂くと良いと思います。というかdiary〜のこの仕様は私から言わせてもらうととんでもない仕様です(笑)

-----
> 個別記事の最後に付くSNSボタンを外すのはどうすれはいいのでしょうか?〜

全て外されるのであれば
<ul id=entry_footer-snslist>
を目印に検索し、以下のスクリーンショットを参照しながら注意深く削除してください。不要なものを選択して外す場合は
<li class=entry_footer-snsitem>
が頭になっているものを行単位で削除してください。それぞれが何を指しているのかは e-facebook などサイト名を含んでいるのですぐわかると思います。ちなみに一番右端だけはSNSシェアではなく開いているページのURLをクリップボードにコピーする役割です。

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser2020323----1200.png

-----
> プロフィールの所のSNSボタンを押すと上に移動するのみなのですが、どうゆう意味があるのでしょうか?〜

こちらは「シェア」のためのボタンではなく、ご自身が所有しているfacebookやtwitterへのリンクです。ご自分でアドレスを記載して頂く形です(製作者では各ユーザーが登録しているサイトのアカウントやURLは把握できません)
<!-- 注)SNSボタン不要の方ここから削除, リンク先指定必須 -->
で検索すると該当部位が出てきますので、不要ならばガイダンスに従って削除。必要ならば
href="#"
となっている赤字のハッシュをそれぞれのアドレスに書き換えてください。

-----
> Facebookに自分のブログは嫌われているようで〜

tetsu74さんのfbページもinstagramのページも私は存じませんので確認のしようがありません。ただちょっと今思ったのは、何も違反をしていないのが大前提として、お名前が tetsu74 さんですよね。
何故赤字にしたかというと、「tsu」というアメリカのサイトが昔あって、facebookは「tsu.co」の文字列を禁止に指定していました。もうとっくに終了になっていますが、それが何か関係あるのかしら。ちょっとわかんないけど。
FC2ブログのドメイン自体がブロック対象になっているといったことはまずありません。なのでtetsu74さんの個人アカウントに何かあるのだと思います。
Instagramはfacebookが買収していますから連動しているはずです。

-----
> ヘッダーの部分に画像を入れるのはやめておいたほうがいいですか〜

はい。残念ですがEl-zigzagについてはおすすめできません。ヘッダーへの画像掲載を想定して設計していません。ヘッダー下部のジグザグの部位のCSSを書き換える必要があるのと、横幅がブラウザ幅いっぱいになりますので画像の上下のほとんどが見切れます。

参考記事: テンプレートのヘッダー画像を変更する際のヒント
https://vanillaice000.blog.fc2.com/blog-entry-919.html

以上です。facebookの件は何が原因とははっきり言えなくてごめんなさいね。

Akira

2020/03/23 (Mon) 21:23
vanillaice (Akira)

To ぼっちんさん

書き換えましたー!全然気づいてなかった。ありがとうございます(笑)

-----
内緒投稿じゃなかった orz
最初「内緒さん」で返信してしまいました。管理画面返信使いこなせてない… ( ̄∀ ̄;)
失礼致しました(笑)

tetsu74

2020/03/23 (Mon) 23:24

To Akiraさん

早々の返信ありがとうございます。どのお答えも分かり易く、理解できました。

★この際なので、画像と文章は改行して直しておきます。

★SNSボタンの外し方もよく分かりました。スクリーンショットで尚良く分かりました。

★プロフィールのSNSボタンはそういう意味だったのですね。よく分かりました。

★Facebookなのですが・・・今さっき試しにPCからシェアーボタンを押してみたら、エラー表示が消えて、普通に投稿できるようになってました。何年もダメだったのに。。。今日、スパム報告への異議申し立てを3件送信しました。それに対する回答は相変わらずないのですが、再審査してくれてのかもしれません。スマホからやってみても問題ありませんでした。自分のプロフィールにFC2ブログのURLを貼り付ける事もできました。なぜできるようになったかは謎なので、またすぐにできなくなるかもしれませんが。 というわけで、SNSボタンは置いておくかもです。後、Instagramのプロフィールにも貼り付けできました。お騒がせしました。このテンプレートに切り替えたタイミングで異議申し立てをしましたが、何か関係があったのかも??いいきっかけになりました。

★ヘッダーへの画像掲載は止めておきます。というか仰る通り、このテンプレートのアイコンとも言えるジグザクがなくなっては意味がありませんね。

色々と丁寧にありがとうございます。一旦元のテンプレートに戻して、お借りしているこのテンプレート合うようあちこち修正して、再度アップする事にします。

またなにかお聞きする事もあるかもしれませんが、その時はよろしくお願いします。初心者過ぎてすいません(^^;

この投稿への返信は不要ですので。 では!



tetsu74

2020/03/23 (Mon) 23:53

追伸

記事編集リンク、めちゃくちゃ便利ですね!びっくりです。誤字脱字の多い自分にはありがたいです。素晴らしい~
しかし、えらい大きい画像をアップロードしてたんだなぁと我ながらびっくりしています。このテンプレートのおかげで気付きました(^^;これからもう少し小さくしないと。

このコメントにも返信は不要ですので(^^)v後半は独り言です。

tetsu74

2020/03/24 (Tue) 10:04

度々すいません。

記事幅の変更は可能でしょうか?自分がアップロードしている画像サイズが大きいので記事幅いっぱいになってしまうようです。もう少し画像と文章が同時に見れるようにしたいのです。現状こんな感じです→http://kato74.blog.fc2.com/blog-entry-301.html 

Akira

2020/03/24 (Tue) 21:57
vanillaice (Akira)

To tetsu74さん

こんばんは ('0')/
ちょっとその前にですね、tetsu74さんのトップページの最も古いもの、57ページ目を開いてみてください。CSSが適用されず、htmlのみの表示になっています。

で、チェックしたところ何故かこのページだけが別のCSSファイルにリンクされています。そしてそのファイル自体は既に消失しています。
恐らくですが、滅多におこらないレアケースにあたったのではないかと思います。

参考記事: FC2ブログ【テンプレート編集中に全く別のCSSと入れ替わる現象】
https://vanillaice000.blog.fc2.com/blog-entry-706.html

これホントに一般ユーザーさんの場合は滅多に目にすることは無いんですけども、実際に起こりうるものなんですね。
なので記事内にある通り「一度別のテンプレートを設定する」「再度El-zigzagを設定する」ことで元に戻ると思います。戻らない場合にはテンプレートDL時のデータ破損も考えられます(こちらもたまにあります)ので、再DLをお願いします。

-----
で、本題です。またしても「その前に」で申し訳ないです。
えっとですね、まず レスポンシブデザインテンプレートである、という点を理解しているか の確認をさせてください。

参考記事: 今更だけど「レスポンシブ」ってなんぞ?
https://vanillaice000.blog.fc2.com/blog-entry-491.html

というのは、tetsu74さんが(パソコンから)見ているページの状態と私が見ているページの状態が同じとは限りません。パソコンの画面サイズやブラウズ幅によってはこうなっています ↓ (記事横幅が最大値のとき)

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser2020-3-24----1200.png

右の方赤く囲った部位ですね。テキストが数文字横に並んでいます。
レスポンシブテンプレートというのはデバイスやブラウザの横幅に応じてレイアウトが変化します。変化させるため記事の横幅は一定ではありません。
テキストが並んでいる理由は先回お伝えしたとおり「画像はテキストの横に並ぶのが本来」で、対処法は「改行を行う」ですね。

・理解している
・画面サイズによってはこの表示になっているを知っている
・まだ画像の改行修正をしていないだけ、あるいは修正はしない方針

上記の場合この私の説明は蛇足なので読み飛ばしてくださいね。念のための確認です。

-----
1300px
で検索するとスタイルシート内に2箇所ありますので、2つとも小さい数値に変更してください。

.inner-contents img {
margin: 15px 0;
}

をスタイルシート末尾に追加。
こちらについては任意なのでお任せします。

tetsu74

2020/03/25 (Wed) 00:22

To Akiraさん

回答ありがとうございます!
57ページ目ですが、今確認したところ普通に表示されていました。よく分からないですが、昨日は色々なテンプレートをあれやこれやと試していました。それは関係ないのでしょうか? 
 
「レスポンシブデザインテンプレート」は単純にパソコン、タブレット、スマホのどのデバイスでも同じように表示されるようになってるテンプレートと認識していました。
仰られるように、パソコンの画面サイズは同じじゃないですね。自分はシンクパッドの15.6インチの画面で見ていますが、自分のより大きい画面サイズのパソコンで見ると、画像の横に並んでしまうんですね。自分のパソコンでの事ばかりに頭がいってしまってました。なので改行も自分のパソコンで見ておかしいところだけを直そうと思ってました。間抜けですね~(^^; メインの記事幅が広いテンプレートを試した時にも同じようになってました。それで気付けよって話ですね。教えて頂きありがとうございます<(_ _)>

記事幅の変更の仕方もありがとうございます!

改行の手直しですが、膨大な数になりそうです。写真の枚数分です。これはもう諦めます。Akiraさんに教えてもらった方法でやってみます。これからの記事はちゃんと改行して書くようにします。
色々とアドバイスありがとうございます。今まではただ単純にブログを書いてただけなので、すごく参考になる事ばかりです。

Akira

2020/03/25 (Wed) 01:26
vanillaice (Akira)

To tetsu74さん

えっと、ごめんなさい。先の私コメントで意味不明な箇所がありました ( ̄∀ ̄;)
どうも私が文章を消してしまったようです。

スタイルシート末尾に追加するCSS内容なんですが、「画像と下のテキストには余白が有ったほうが閲覧者には見やすいと思いますので任意でCSSを追加してくださいね」という意味でした。

-----
> 昨日は色々なテンプレートをあれやこれやと試していました。それは関係ないのでしょうか?〜

関係あります。私もテンプレートの修正中コロコロとテンプレートを変えているときに起こります(笑)

-----
> これからの記事はちゃんと改行して書くようにします。〜

そうですね。あまりにも特殊すぎるテンプレート、特に記事の内容に影響するようなものは避けた方が良いと思います。
といってもユーザーさんに気づけと言う方が無茶な気が ^^;
過去のものについては修正しろと言うのはあまりに酷なので、はい、その方針で良いと思います。お時間があってその気になったときにでも地道に修正されると良いですね。

お疲れ様でした :)

-

2020/03/26 (Thu) 16:28

管理人のみ閲覧できます

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

Akira

2020/03/26 (Thu) 17:43
vanillaice (Akira)

To El-zigzag画像調整の件 内緒さん

こんにちは。
実は先回のお返事の際に画像について書いたんですが、一度に言うと記事を書くことが嫌になってしまうかもしれないなぁ、と思って削除したんです。
-----

> ①画像サイズについて〜

まず「テンプレートの横幅によって画像をどうにかする」という考え方が良くないんですね。今それをしてしまうと今後もその横幅以上のテンプレートを選べなくなります。
なので一番良いのは「記事を書く際に画像にサイズ指定を行う」ことです。

内緒さんは恐らく「旧投稿画面」を「改行の扱い『自動』」で記事を書かれていると思います。もし違っていたらこれからの説明内容も違ってきますので、「違うよ」と教えてください(笑)

投稿画面のツールで画像を挿入すると
width="xx" height="xx"
というのがついてきますよね。これは画像の「オリジナルサイズ(原寸)」です。width="700" height="300" となっていれば、その画像は横700px 縦300px ということになります。

で、私がいう「画像へのサイズ指定」というのは、原寸を画像編集ツールなどを利用して変えてしまうのではなく、「CSSで表示の大きさを変更する」という意味です。

<img src="画像URL" alt="代替テキスト" width="700" height="300" style="width: 400px;">

赤字部位が表示サイズ指定です。原寸は横700pxですが、横400pxで表示する、という意味です。
heightは私のテンプレートでは自動調整なので書く必要はありませんが、他のテンプレートでもそうとは限りませんので心配であれば
style="width: 400px; height: auto;"
とheightの方は「auto」を指定します(書かなくてもどのテンプレートだとしてもスタイルシートに一行追加するだけなので省略でも良いと思います。)

これが根本的な解決策なんですね。ただ過去に遡って修正する必要が出てきます。たぶん内緒さんのお考えは「テンプレートへの指定によって一括で修正したい」のではないかなぁ、と思います。可能ではあるんですが弊害もあります。

テンプレートに

.inner-contents img {
width: 数値px;
}

を追加すると指定した数値以上にはなりません。これが最も簡単な方法で、全記事の全画像がその指定にならいます。
ところがこれを行ってしまうと

・数値以下の原寸の画像が拡大されてしまう
・全ての画像が同じ横幅になってしまう

という問題が出てきます。例えばブログ村などランキングサイトの小さいバナーのようなものでも指定数値まで拡大されます。
なのでできれば使いたくない手ですし、今やり方を変えておかないとこの問題をずっと引きずることになります。テンプレートを変えるたびに「どうしよう。どうやって調整しよう」と頭を悩ませることに。

なので「どのテンプレートを採用しても上手く画像が表示されるような記事の書き方をする」というのが一番の良策です。
(公式 diary〜 のような仕様のテンプレートは選ばないよう注意が必要です)
その場合はテンプレートでの一括修正に頼らず今後の記事だけでなくコツコツと過去記事の方も修正する、ということになりますね。

ということで、テンプレートでどうにかしたい、という場合にはテンプレート全体幅の指定はデフォルトに戻した上で先程記したCSS内容をスタイルシート末尾に追加してください。
根本的修正(画像へのサイズ指定)をされる場合には
style="width: 数値px;"
を各画像に追加する、ということになります。大変ですがこれが一番良い方法です。そして「画像の右横で改行をする」を徹底すればテンプレート変更で画像とテキストが並んでしまうことはありません。

過去のものはさておき、私が日頃推奨しているのは「画像掲載は投稿画面のツールを利用せず辞書登録を利用する」ことです。

参考記事: 旧投稿画面を楽に操るために「辞書登録の活用」
https://vanillaice000.blog.fc2.com/blog-entry-937.html

-----
> ②フォントファミリーにメイリオを入れる場合〜

windowsの第一優先フォントはメイリオのはずなんですが、別のフォントで表示されているということなんでしょうか。
コードだけでは確認のしようがありませんので、お手数ですが内緒さんのページのスクリーンショットをお見せください。

-----
> ③グーグルマップの地図を貼り付け場合もテキストが自動で改行するように〜

いえ。Google mapはiframeという要素で、iframeは画像のimgと同じくdisplay値が inline の要素です。なので本来は改行が必要です。
ただiframeの場合は block に変更しても良いのかなぁ、という気はしますのでスタイルシート末尾に

.inner-contents iframe {display: block}

を追加してください。ただし動画掲載などで弊害が出ることはあります。

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

----- 追記
Google mapの掲載ついて、FC2ブロガーさんからアドバイスがありましたのでお伝えしますね。私が先に気づけば良かったんですが遅まきになってごめんなさい(あとこの私の日本語が変かもしれないのでそれもごめんなさい ^^;)

Google mapはスクリーンショット掲載が禁じられていますので、ご利用時は埋め込みコードを取得し、iframe要素として表示させてくださいね。また、Google mapでなくとも地図には著作権がありますので、各規約を熟読してから掲載を行うようにしてください。
よろしくお願いします。

hige

2020/03/26 (Thu) 18:38

To Akiraさん

ちょっと横やりを。
グーグルマップをスクショし画像として貼付けておられる方を度々見かけます。
これは違反になると解釈しているのですが。
そうであればご注意を。
でなければ余計なお世話でした。

Akira

2020/03/26 (Thu) 21:05
vanillaice (Akira)

To higeさん

higeさん、こんばんは ('0')/
はい。そうですね。違反行為にあたります。

私がスクショであることに気づいていなかったもので、アドバイスありがとうございます :)

-

2020/03/27 (Fri) 00:37

管理人のみ閲覧できます

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

tetsu74

2020/03/27 (Fri) 00:43

To higeさん

ご指摘ありがとうございます。気を付けていたつもりだったのですが、利用したサイトの元になっている地図がグーグルマップでした。各当記事の地図は削除して、オープンストリートマップを使うか、グーグルマップを埋め込むようにしておきます。

hige

2020/03/27 (Fri) 08:36

To tetsu74さん

ご丁寧な返信ありがとうございます。
ご存じと思いますが、オープンストリートマップ(OpenStreetMap(OSM))はクレジットを入れておけばスクショなどでの使用はOKですね。
https://www.openstreetmap.org/copyright
tetsu74さんはオープンストリートマップを挙げておられるのでご存じだったのですかね。

念のため私が以前に調べた結果は、グーグルアース、Yahoo、Mapion、国土地理院の地図もブログに勝手にコピペは使用できません。
ただ、他のアプリとかで許可を得てたりで2次使用OKなものもあるとかで、使用条件を調べておくことが大切です。
国土地理院は教育用は許可すると書いています。( https://blgid1974.blog.fc2.com/blog-entry-1376.html

当然、ラインやeメール等、仲間内での使用は許可されているようです。

hige

2020/03/27 (Fri) 08:52

To Akiraさん

コメント欄を勝手にお借りしてすいません。
ネット上の地図をブログへコピペ使用されている例は良く見かけます。(許可を取っておればOK)
紙の書籍等で、地図のコピペは著作権があるだろうと気づかれるている様ですが、ネット上のものにはあまり注意されていないようです。
交流のある方数人には「ダメですよ」とお知らせしたことがありました。

申し訳ありません。お邪魔致しました。

Akira

2020/03/27 (Fri) 14:22
vanillaice (Akira)

To El-zigzagの件 内緒さん

こんにちは。

> 「CSSで表示の大きさを変更する」というのは、画像ソフトで縮小するのと同じ意味なのでしょうか?〜

いえ。違います。オリジナルサイズ(原寸)は画像に「加工修正」しない限り変わりません。「画像ソフトで縮小する」というのがつまり「加工修正」ですから、こちらは原寸自体が変わるということです。
CSSは「表示のサイズを変える」というだけで原寸が変わることはありません。逆にCSSで数文字書いただけで原寸が加工されたら怖いですよね (´・ω・`)

原寸700pxの画像をCSSで width: 300px と指定したら、原寸700pxのまま300pxで表示する、ということです。

で、方針の件なんですが 何故公式テンプレートからEl-zigzagに変更しようと思ったのか、その原点に戻って考えてください。
何か不備・不具合があったのか、もっとSEOを考えたいと思ったのか、ただ単にデザインに飽きただけなのか、それは私ではわかりませんので、ご自身の「何故」を追求してから答えを出されると良いですね。
そして極端な行動に走らない、というのも大事です。

内緒さんが「xxxブログに興味がある」「心機一転出直したい」といった希望があるならばブログサービスの変更、新ブログの起ち上げも良いと思いますが、「今回の画像の件が厄介で放り出したくなったから」という場合それは極端な行動です。
何かあると全て放り出して0からやる「リセット癖」みたいなものを持つ方も結構いらっしゃいますが、ブログ運営ではそれが一番良くない。ブログは記事を重ねないと信用も価値も生まれません。リセットは積み重ねた信用を自ら破棄するような行為になりかねませんので、特に「引っ越し」というのは慎重に行うべきです。

私としては
・過去記事はとりあえず置いといて今後は記事作成時の画像掲載に気をつける(改行及び表示サイズ指定)
・過去記事は時間のあるときにコツコツと修正をする
ことをおすすめします。

修正必須な火急の件というのがありますけれど、内緒さんの画像の件はそれに当たりません。火急の要件というのは
・混在コンテンツの修正
・文字が読めなくなっている
・ページを開くことができない
などがそれに当たります。

内緒さんの場合は見た目にちょっとおかしいかな?とは感じますが、文字が読めないわけでもwebページ構成上致命的な欠陥があるわけでもありません。とかく「パソコンでの表示」に目が向きがちですが、現代では「スマートフォンでの表示」が最重要で、内緒さんの記事の画像はスマホから見たときにテキストと並ぶことはありません。
なので「過去記事についてはぼちぼちと修正を行う」ということで良い、と私は思いますよ。

------
> El-zigzagではなにもしていませんが、メイリオで表示されています。〜

フォントの件は「diary〜」でどう指定したら良いのか、というご質問だったんでしょうか。私は自分が制作したテンプレート「以外」のカスタマイズ指南は行いませんのでお控えくださいね。
フォント表示の仕組みについては以下の記事をごらんください。

参考記事: 意外と知らないフォント設定の仕方
https://vanillaice000.blog.fc2.com/blog-entry-484.html

ブラウザの設定はテンプレートで指定されているフォントファミリーの候補が閲覧者のOS内にひとつも存在しない場合の最終参照です。そしてメイリオとメイリオUIは別のフォントです。
また、windowsユーザーさんはmacユーザーを無視しがちですが、macでメイリオは任意ダウンロードが無ければ表示できませんのでmacユーザーへの配慮も忘れずに行うようにしてくださいね。

Akira

2020/03/27 (Fri) 14:26
vanillaice (Akira)

To higeさん

higeさん、こんにちは ('0')/
いえいえ。いつもご協力とアドバイスをありがとうございます :)

-

2020/03/28 (Sat) 22:47

管理人のみ閲覧できます

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

tetsu74

2020/03/28 (Sat) 22:57

To higeさん

いえいえ。 こちらこそありがとうございます(^^) 指摘していただけなければ、あのまま使用していました(^^;
自転車やバイクに乗ってると地図サイトを使う事は多いです。オープンストリートマップはいいですよね。
3月末で愛用していたルートラボがなくなってしまうのは残念です。使いやすい良いマップでした。過去のブログでそれを使っているのでそっちも差し替えです(^^;

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

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