アメーバブログの【スマホでは画像は画面横いっぱい、テキストは余白あり】をFC2でやってみよう

通常の掲載	画像の横幅を画面幅と同等に

画像は画面幅(ビューポート)いっぱい、テキストの左右にはちゃんと余白がありますので読みづらくありませんよね。
ビミョーにトレンドというか、シャレオツ化計画進行中のYahoo!ブログスマホ版もこういったレイアウトになるようです。
私これ悪くないと思います。なんかスッキリした感じ。
賛否はあると思いますが。
そこでFC2でもやってみようという企画

はじめに

通常の考え方でいくと、テンプレートの余白関係を全て洗い出してそれこそ大改造になってしまいますので、ここでは画像に対する処理だけでなんとかしようと思います。

アメブロでは勝手にというか、自動的にこの形になりますが、FC2では当然なりません。
アメブロがどういったモジュールになっているかわかりませんので、私ならこうやる、という一手法のご紹介という感じです。

んでこれ、単純にはみ出し(オーバーフロー)させても画面がグラついていかんもんですから、その点には留意したつもりですが、なにかしら不備があればお知らせください。

実際に使う前の準備と仕様などの説明

html及びCSSのソースコードが必要です。
雛形をZIPファイルで掲載しますのでDLしてください。
html内容はテキストファイルとして入れてあります(.htmlだと開いた時に変換されてしまうので)

.txt 拡張子のファイルは 記事を書く際に記事内容として貼り付けます。
テンプレートに貼り付けるのではなく、使いたい時に使いたい記事の編集画面で利用する、ということです。

.css 拡張子のファイルは テンプレートの「スタイルシート」(管理画面下段) の末尾に貼り付けます。
こちらはテンプレートへの貼付けです。

スマートフォンをレスポンシブで運営している方以外おすすめできません

今回は スマートフォン閲覧時のみの適用 ですので、レスポンシブを採用していない方、つまりスマホ専用版をご利用の方はおすすめしません。
各スマホ用テンプレートがどういう構造になっているのか私ではわかりません し、広告の状態もありますので(ほぼ)レスポンシブ限定、ということでお願いします。
レスポンシブの場合は構造の関係からも導入しやすいですし、障壁になりそうな広告などが出ませんのでよほど大丈夫かと思います。
「PC版がレスポンシブだからOK」という意味ではないですよ。
スマートフォン版を非表示設定にしている ことが大前提です。

左右に区切り線の入るタイプへの導入はおすすめしません

区切り線というか、
記事範囲とブログ全体範囲との境がくっきり分かれている タイプのことです。

記事範囲の左右辺が出ていますよね。
この場合に利用すると「なんかこの画像って記事からはみ出てるんでない？」という印象になり、ともすれば失敗レイアウトとも捉えられかねません。
ですからおすすめしない (o'ω')

ブレイクポイント

スマホ閲覧時のみ適用ですのでブレイクポイントを設けています。
414px 以下の画面幅になると機能します。

414pxはiPhoneのplus系がこのサイズです。
iPhone6 plus, iPhone7 plus など。
今秋にiPhone8及びXの発売が控えていますが、恐らくこのサイズ設定で行けると思います。

ZIPファイル

Download

上記アイコンをクリックDL後は解凍(ダブルクリックでできます)し、フォルダ内のそれぞれのファイル内容を開きます。

• ブラウザで開く場合にはブラウザの画面にドラッグ&ドロップで放り込む
• html専用エディターで開く

いずれかの方法になると思います。

注意点

独自クラス ですので、テンプレートを変更された際にはCSS内容が 無効化 されます。
html内容は記事に直接書きますので残りますが、デザインが失われます。
テンプレート変更の際は CSS内容の移植 をしてください。
仮に移植をしなくともレイアウト全体が崩れるようなことはありません。

実際に使ってみよう

デフォルトのhtml内容は以下の通りです。

<div class="exImage">
  <div class="exImage-item">
    <img src="" alt="" style="width: パソコンでの横幅px;">
  </div>
</div>

普段記事を書くのと同じようにやって頂ければOKです。
指定ブレイクポイントに達すれば自動で切り替わりますので特に意識しなくて大丈夫です。

画像のalt属性はできるだけ入れてください。
適切な説明文が見当たらない、画像検索を考慮しない、などの場合には無理に入れなくても良いですが、alt属性自体を削除したりせずデフォルトのまま値を空にしておいてください。

パソコンでの横幅調整

パソコンの横幅 の部位は、画像の見た目初期設定です。
レスポンシブですので最大でも記事幅と同等まででストップしますが、比較的大きい画面の時、記事幅よりも画像を小さめにしておきたい場合には任意の数値を指定してください。
原寸のままにする場合には以下のようにstyle属性を削除します。

<div class="exImage">
  <div class="exImage-item">
    <img src="" width="画像横原寸" height="画像縦原寸" alt="" loading="lazy">
  </div>
</div>

画像のセンタリング

以下のような形で行います。

<div class="exImage">
  <div class="exImage-item" style="text-align: center;">
    <img src="" width="画像横原寸" height="画像縦原寸" alt="" style="width: パソコンでの横幅px;" loading="lazy">
  </div>
</div>

投稿画面別の使い方

新投稿画面 をお使いの方は、HTMLモードに切り替えた後、html内容をそのまま貼り付けて編集してください。
編集後は元のモード(WYSIWYG)に戻しても問題ありません。

旧投稿画面をお使いの方は

• 改行の扱い「自動」
• 改行の扱い「HTMLタグのみ」

の2手に別れるかと思います。
前者の場合には htmlソース内の改行は全て取り除いてください。
後者の場合にはそのままお使い頂けますが、記事内容の全てに改行タグが必要となります。

まとめ

スマホは画面が狭いですから、画像は少しでも大きく見せたいだとか。
そういった時に使える小ワザではありますね。
独自クラスですので使いたいと思った時だけ利用すれば良いと思います。

今回のはちょっとテクニックというか多少ひねくれた考えが必要ですので、見る人が見れば「あー。なるほど(笑)」ってなるかもしれませんね。
ひねくれと言っても構文的なエラーなどはありませんのでご安心ください。

Sample(画像・動画)