coding iPhone WordPress

HTMLとCSSでiPhoneメッセージ風の画面を記事に表示する

2020年3月3日

 

iPhoneのメッセージの画面をHTMLとCSSでブログ等のWebページに表示する方法。

 

画像として記事に表示させるんだったら、スクリーンショットを撮って配置すれば比較的簡単。下の画像がその一例。

 

iPhoneのメッセージ画面のスクリーンショット

スクリーンショット(画像)

 

だけどそれだと、テキストじゃなくて、あくまで画像なんで、そのままではコンテンツとして検索対象になりません。

HTMLとCSSで見た目がiPhoneの「Message」風になるように作ってみたら、思いのほかいい出来になったので公開します。

 

完成図

 

20:19

iMessage

まあまあだな

SMS/MMS
最近どうしてるの?
しばらく会ってませんね。
iMessage
それなりに忙しくってね?
そっちはどう?
SMS/MMS
まあまあだな。
近いうちに飲みにでも行こうよ。
iMessage
じゃあ今度の土曜とかどうよ

 

Mac以外だと、フォントが置き換わるのでちょっと違って見えますが、Macだと、ほぼiPhoneでの見た目と変わらないんじゃないかと思います。

縦横比をiPhone11proに合わせて作ってあります。はみ出したメッセージ部分はスクロールして表示できます。

 

モックアップ用のiPhone11Proのフレームを用意して配置すれば、まんまiPhone11Proになります。

20:19

iMessage

まあまあだな

SMS/MMS
最近どうしてるの?
しばらく会ってませんね。
iMessage
それなりに忙しくってね?
そっちはどう?
SMS/MMS
まあまあだな。
近いうちに飲みにでも行こうよ。
iMessage
じゃあ今度の土曜とかどうよ

メッセージに写真を添付した時のように画像を貼ることができます。この記事の下にサンプルがあります。ただし、一つのフキダシに貼れるのはアスペクト比が3:4の写真2枚まで。

絵文字だけを送ったときの見た目には対応していません。Mac/PCで見たとき、iPhoneの絵文字と違う絵文字に置き換わってしまい、レイアウトが崩れるので。だれか解決策をご存知の方お教えください。

 

それでもよろしければ、HTMLのテンプレートと、CSSファイル、背景画像の画像データをセットにしてダウンロードできるようにしておきましたのでお使いください。

 

データをダウンロードする

 

 

使い方

 

ダウンロードしたファイルのうち、CSSファイル「message.css」と画像データの「img」フォルダを、サーバー上の任意のディレクトリへアップロードしてください(「message.css」と「img」フォルダは同一のディレクトリに)。

例えば、サーバーのルート - 私の利用しているエックスサーバーの場合、ルートは「public_html」なので、そこに作成した「upload」フォルダ内の「message」フォルダにアップロードしました。

 

アップロードするディレクトリの例

アップロードするディレクトリの例

 

ローカルでテンプレートファイル「template.html」をエディタとブラウザで開いて、表示を確認しながら 、<div class=“message”> ~ </div><!-- /.message -->の部分を編集します。

テンプレートファイルにコメントを入れているので参考にしてください。

「template.html」をブラウザで開いた状態は下の通りです。

 

17:33

SMS/MMS
水曜日
17:09
(相手側のメッセージ)
iMessage
水曜日
17:10
(自分側のメッセージ)
SMS/MMS
水曜日
17:12
(自分側のメッセージ)
(時間を空けずに続けて投稿した場合)
(しっぽは最後のメッセージだけにつく)

画像添付と同時にメッセージをつけた場合
メッセージの後に続けて画像を添付した場合

 

編集が完了したら、ブログサービス等の投稿の編集画面で<div class=“message”> ~ </div><!-- /.message -->の部分を貼り付けます。

WordPressでは「テキスト」タブで貼り付けて下さい。「テキスト」タブは他のCMS等では「HTML」だったりしますね。

このときWordPressなら、コードのコメント(<!--   -->)を削除してください(自動で改行等が挿入されて表示が崩れるので)。

 

併せてアップロードしたCSSファイルへのリンク要素を記述します。

上記の例では…

 

<link rel=“stylesheet” href=“/upload/message/message.css”>

 

となりますね。

ただ、気をつけるのは、WordPressの場合「テキスト」タブと「ビジュアル」タブを行き来すると、このリンク要素が消えてしまったりするということ。😭

「テキスト」タブでのみで編集するか、それがいやならテーマファイルのhead要素内に記述しましょう。

あるいは、使用しているテーマによっては、記事ごとにhead要素内を編集できる機能があるかもしれません。

 

私が利用しているテーマ「WING(AFFINGER5)」の場合は下図のように「投稿の編集」画面で、headに出力するコードを設定できるのでそこに記述しました。

 

WordPressテーマ;AFFINGER5の場合

テーマ:AFFINGERの場合

 

スタイルシートは全部をコピペして既存のCSSの一番最後に貼り付けるかインポート(@import)する方法もありますが、その際は画像データへのリンクを修正してください。

 

以上が基本的な利用方法です。

 

 

注意点

 

ここでは、<div class=“message”> ~ </div><!-- /.message --> 内にコードを記述しています。

なので、既存のWebページにクラス名「messsage」の要素が存在する場合、スタイルシートの適用でクラス名が競合しますので、その際は適宜クラス名を変更してください。

 

 

以上、どなたかのお役に立てば。

 

-coding, iPhone, WordPress
-, , ,

Copyright© 自炊自賛 , 2020 All Rights Reserved.