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

El-zigzagテンプレート

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

名称
El-zigzag
える しぐさぐ
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 最新記事サムネイルリスト
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Yeseva One
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.22
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.9.4
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • RSSリンク削除
  • ダークモードの切り替えを任意にしました
  • webフォントの表示方法を変更
  • グローバルナビゲーションからカテゴリリストを削除
  • ナビゲーションにSNSリンクを追加
  • パン屑リストからSVGアイコンを削除
  • ユーザビリティの最適化
  • コメント削除アラート追加
  • その他UI調整

カラム入れ替えや記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.7.9
  • prefetchの数を調整
更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

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

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-prev");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-next");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-cat-prev");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager_entry-image-cat-next");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

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

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

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

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

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

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE 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.

  • デフォルトテンプレートと無関係な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'●)/

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さん、こんばんは~ ^^

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

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

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の件は何が原因とははっきり言えなくてごめんなさいね。

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

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 

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

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さんに教えてもらった方法でやってみます。これからの記事はちゃんと改行して書くようにします。
色々とアドバイスありがとうございます。今まではただ単純にブログを書いてただけなので、すごく参考になる事ばかりです。

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

To tetsu74さん

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

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

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

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

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

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

お疲れ様でした :)

-
2020/03/26 (Thu) 16:28

管理人のみ閲覧できます

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

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

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さん

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

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

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)
紙の書籍等で、地図のコピペは著作権があるだろうと気づかれるている様ですが、ネット上のものにはあまり注意されていないようです。
交流のある方数人には「ダメですよ」とお知らせしたことがありました。

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

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

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ユーザーへの配慮も忘れずに行うようにしてくださいね。

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

To higeさん

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

-
2020/03/28 (Sat) 22:47

管理人のみ閲覧できます

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

tetsu74
2020/03/28 (Sat) 22:57

To higeさん

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

Shinya
2020/04/05 (Sun) 12:58

「最新記事」のついて

Akiraさんこんにちは。
先月からEl-zigzagを利用させて頂いています。素敵なデザイン、ありがとうございます。カラム右の一番下にある「最新記事」についての質問です。現状、右カラムの上の方にアフィリエイトのバナーやカウンターなどを貼っているのですが、希望は右カラムの一番上かもしくは2番目くらいに「最新記事」を表示できればと考えています。Fc2の環境設定-ブロブ設定で変えられるのかいろいろ試してみたのですが出来ませんでした。ブログ設定で変えられる物なのでしょうか?それともhtmlなどの変更になるのでしょうか?初心者ですみません。もうすでに回答が出ている場合は リンクを教えて頂ければ助かります。よろしくお願いいたします。

-
2020/04/05 (Sun) 13:28

管理人のみ閲覧できます

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

vanillaice (Akira)
AKira
2020/04/05 (Sun) 16:34

To Shinyaさん

こんにちは。ありがとうございます :)

まず最新記事に関するhtml内容は
<!-- 注)最新記事リスト不要の方ここから削除 -->
で検索すると出てきます。今回は削除するわけではありませんのでガイダンスは無視してください。
<!-- 注)最新記事リスト不要の方ここまで削除 -->
までの内容が最新記事リストのhtmlです。この内容をコピー&カットします(複製でなく切り取りです)

カットした内容を希望の位置にペーストしますが、順序によってどこにするか変わりますので事前に決めてください。

【サイドメニュー最上部にする場合】
<!--plugin_first-->
と記されている「上」にペースト。プラグインの設定を操作する必要はありません。この場合の並びは以下のようになります。

・新着記事リスト
・プラグイン1
・プラグイン2
・プラグイン3

【サイドメニュー2番目にする場合】
<!--plugin_second-->
と記されている「上」にペースト。さらにプラグインのカテゴリ設定を、最上部にしたいものだけを「プラグインカテゴリ1」に、その他は「プラグインカテゴリ2 または 3」に登録してください。以下のようになります。

・プラグイン1
・最新記事リスト
・プラグイン2
・プラグイン3

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

vanillaice (Akira)
AKira
2020/04/05 (Sun) 16:43

El-zigzag シェアの件 内緒さん

こんにちは。
El-zigzagの場合は既にclassが使われていますので先回と同じように単純にidをclassに変更しただけではできません。

id=e-facebook class=entry_footer-snsitem-anchor

となっているはずなので、これを

class="e-facebook entry_footer-snsitem-anchor"

に修正します。" の記号と 複数のclass名を設置するための半角スペースは必ず必要なので注意してください。
先回と同じくtwitterなども同じ処理を行ってください。最後の e-copy だけは何もせずそのままにしておきます。

続いてスタイルシートの方は先回と同じです。# を . に変更。こちらでも #e-copy は触りません。
html5箇所、スタイルシート5箇所、合計10箇所の変更です。
よろしくお願いします。

-
2020/04/05 (Sun) 17:37

管理人のみ閲覧できます

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

Shinya
2020/04/05 (Sun) 18:28

ありがとうございます

AKiraさん こんばんは。
早速のご指南ありがとうございます。説明が分かりやすく 初心者のワタシでも簡単に移すことができました。また初歩的な質問をさせて頂くこともあるかと思いますが よろしくお願いいたします。ありがとうございました。

vanillaice (Akira)
Akira
2020/04/06 (Mon) 13:55

To El-zigzag シェアボタンの件 内緒さん(完了のご報告)

こんにちは。上手く行って良かったです。お疲れ様でした :)

vanillaice (Akira)
Akira
2020/04/06 (Mon) 13:59

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

こんにちは。変更できたようで安心しました。
お気づきでないかもしれませんので念の為説明をしておくと、サイドメニューの最下部にあるコンテンツは画面滞在時間が長いので(スクロールで画面外に流れない処理をしています)、目立たせたいものを配置するようにされると良いと思います(ただしアフィリエイト以外)
お疲れ様でした :)

Shinya
2020/04/06 (Mon) 22:57

返信ありがとうございます

AKiraさん こんにちは。
アドバイスありがとうございます。アフィリエイトも興味があってとりあえず張っては見たのですが 笑 あまり絵的にもパットせずどうしたものか・・状態です。やっぱり本筋をしっかりやらないと意味ないですよね。サイドメニューは目に留まるので重要・・ですよね・・再認識しました。試行錯誤してやっていこうと思います。ありがとうございました。

vanillaice (Akira)
Akira
2020/04/07 (Tue) 01:53

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

こんばんは ('0')/
滞在時間が長い部位は上手に使うと良いですね。なのでデフォルトでは新着記事リストを最下部に設定しています。
ご自身にとって「大事」と思える内容を指定すると良いと思います。といってもスマホでは関係ありませんが (´・ω・`)
お疲れ様でした :)

Shinya
2020/04/07 (Tue) 21:52

ありがとうございました

Akiraさん こんにちは。
いろいろ勉強になります。AKiraさんのこのHPで少しづつ学んでいければと思っています。ありがとうございました:)

-
2020/04/20 (Mon) 16:16

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/20 (Mon) 20:51

To プロフィール画像の件 内緒さん

こんばんは。
これはEl-zigzagへのお問い合わせでしょうか。ご質問時には 質問対象テンプレートを設定状態に して頂くお約束になっていますので、お手数ですが変更をし、状態の目視確認ができるように しておいてくださいね。
確認できなければ何もお返事ができません。
よろしくお願いします。

テンプレートに関するご質問時のお願い
https://vanillaice000.blog.fc2.com/blog-entry-26.html

-
2020/04/20 (Mon) 21:38

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/20 (Mon) 22:03

To プロフィール画像の件 内緒さん②

お問い合わせの内容は
> 記事タイトル下のアフィリエイトの左横にプロフィール画像〜外せますでしょうか?〜

ということですよね。
現時点でデバイスを変更したり、何度かリロードなども試したんですが、40秒を過ぎてもローディングが完了しません。
ASP側の問題なのかどうかわかりませんが、広告を目視確認することができませんでした。

で、この位置は記事に関する副情報の直下で、プロフィール画像は本記事の説明にある通り「記事編集リンク」です。マークアップ的にも記事のheaderなので、この位置への掲載が不適切ではないかと思います。できれば位置の再考をお願いしたところですが、どうしても、ということであれば
<div id=entry_header-box-left>
で検索し、この行を含め直近の
<div id=entry_header-box-right>
のすぐ上にある
</div>
までを削除してください。
よろしくお願いします。

-
2020/04/21 (Tue) 00:29

管理人のみ閲覧できます

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

-
2020/04/21 (Tue) 23:35

管理人のみ閲覧できます

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

-
2020/04/21 (Tue) 23:37

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/22 (Wed) 12:58

To El-zigzagの件 内緒さん

こんにちは。

個別記事ページ送りの件でしたら内緒さんのバージョンは対象外というか、既に修正済です。
テンプレートのバージョンや更新履歴を確認するにはスタイルシートの冒頭をご覧くださいね。
よろしくお願いします。

-
2020/04/22 (Wed) 22:55

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/23 (Thu) 15:59

To El-zigzagの件 内緒さん

こんにちは。

いえ、こちらこそお手数おかけします。
お疲れ様でした :)

ぼっちん
2023/09/04 (Mon) 11:45

報告です

Akiraちゃん
テンプレートの修正作業、大変お疲れ様です~

ちょっとした不具合報告なんですが……
プロフィール欄のAdmin名部位が
Admin: unknown になってしまっております。

<div class="main_profile-author-name">Admin: unknown</div>
要修正です
<div class="main_profile-author-name">Admin: <%author_name></div>

宜しくお願い致します。

ライトモード/ダークモード切り替えのUI、私のリクエストよりも遙かに素晴らしいですね~ d(-_^)ナイスです~♪

vanillaice (Akira)
vanillaice (Akira)
2023/09/04 (Mon) 16:46

To ぼっちんさん

こんにちは ('0')/

修正しました。全然気づかなかった ^^;
いつもありがとうございます :)

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