The other way round

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

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

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

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

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

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

赤字部位が表示サイズ指定です。原寸は横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でなくとも地図には著作権がありますので、各規約を熟読してから掲載を行うようにしてください。
よろしくお願いします。

SECRET