coding iPhone WordPress

実際のiPhoneメッセージをHTMLとCSSでレイアウトする

 

実際にiPhoneのメッセージでやりとりした内容のデータをダウンロードして、それをHTMLとCSSでレイアウトしてブログ等のWebページに貼る方法をご紹介。

 

メッセージの内容をエディタで手打ちしてレイアウトするだけでよければ、以前の記事でご紹介しました。

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

  iPhoneのメッセージの画面をHTMLとCSSでブログ等のWebページに表示する方法。   画像として記事に表示させるんだったら、スクリーンショットを撮って配置すれば比較的簡 ...

続きを見る

 

内容があまり多くなければ上の記事の方法で問題ないかと思いますが、実際にメッセージでやりとりした内容をもとに、それもある程度以上の内容をレイアウトしたいとき...

 

実際にやりとりしたデータを活用できればラクチンですよね。

 

iPhone(およびiOSデバイス)内のコンテンツを管理・操作できるサードパーティー製Mac/PC用アプリケーションを使用して、ちょっと工夫したら、予想以上にイイ出来だったので公開します。

 

 

完成図

 

まず、利用するiPhoneメッセージの実際のやりとりのスクリーンショットが下の画像。

 

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

キャプチャー画像

 

 

ダウンロードしたデータをもとにHTMLとCSSでレイアウトしたのが下。

 

17:36

まだ〜〜今どの辺ですか?
今帰り道
じゃ、待ってるかな
了解しました!
寄ってみるわ
玉ねぎとでかズッキーニ買ってくかな
ではお願いします

8月19日(月) 12:12

そろそろかな?

 

このあと説明する方法でダウンロードしたデータを最大限利用しているので、iPhoneでの見た目の再現度としては完璧ではありませんが、まあ雰囲気は出てると思うのですがどうでしょう?

デフォルトでは、iPhone11Proの縦横比に合わせてあって、はみ出したメッセージはスクロールして表示できます。

また、次のように上部と下部のインターフェースを省いて、高さを内容に合わせて成り行きで表示することもできます。

 

まだ〜〜今どの辺ですか?
今帰り道
じゃ、待ってるかな
了解しました!
寄ってみるわ
玉ねぎとでかズッキーニ買ってくかな
ではお願いします

8月19日(月) 12:12

そろそろかな?

 

 

これをどうやるか、ご紹介します。

 

CMSにはWord Press、テキストエディタにはSublime Textを使用しています。

 

 

アプリケーションの入手

 

iPhone(およびiOSデバイス)内のコンテンツを管理・操作できるサードパーティー製Mac/PC用アプリケーションを使用します。

 

この手のアプリケーションはいくつかありますが、私が使った中で一番使い勝手が良かったのが「AnyTrans」というアプリケーションです。

下記のリンクから入手できます。

 

無料 (有料ライセンス版3,980円〜)
(2020.2.18時点)

 

なお、この記事ではMacの環境で説明しています。Windowsもほぼ同様ですが、AnyTransについて不明な点は上記リンクの公式サイトでお確かめください。

 

 

メッセージをMac/PCにダウンロードする

 

AnyTrans for iOSのインストールが終わっているものとして、以下進めます。

 

iPhoneとMac/PCをケーブルで接続してAnyTransを起動。

「メッセージ」を選択します。

 

 

初めて使用するときや、最新のメッセージを読み込むときは、「増分バックアップを起動」ボタンをクリックします。

 

 

iTunesでバックアップを暗号化するオプションを選択している場合は、暗号化をオフにするようダイアログが出ます。その場合は...

 

 

iTunesを開いて、デバイスの概要-バックアップの「iPhoneのバックアップを暗号化」のチェックを外してオフにしてから再度操作します。

 

 

最新のメッセージの読み込みが終わったら、メッセージリストからダウンロードしたい会話にチェックを入れて「Macへ転送」ボタンをクリック...

 

 

「.htmlの形式にエクスポート」を選択します。

 

 

しばらく待って、「転送完了」と表示されたら、「ファイルの表示」ボタンをクリックしてみましょう。

 

 

ダウンロードされたデータがFinder(PCの場合はエクスプローラー)上で表示されます。

 

 

データは「AnyTrans-Export-(年)-(月)-(日)」という名称のフォルダに格納されます。

ちなみにMacでは、ダウンロードされたデータフォルダはデフォルトでログインユーザーの「書類」のルートに保存されます(環境設定で変更可能です)。

画像でHTMLファイルは「●●●●.html」という伏字にしていますが、この●●●●の部分は、iPhoneのメッセージリストのスレッド名=会話のタイトル(連絡先アプリに登録してある相手の名前か、アドレスあるいは電話番号)になります(下画像)。

 

「img」フォルダには、メッセージ画面のフキダシ背景のグラフィックスに使用する画像と、メッセージに添付した写真の画像ファイル等が格納されています。

 

AnyTransでダウンロードされたimgフォルダの中身

imgフォルダのなか

 

ファイル「●●●●.html」をそのままブラウザで開いてみると下の画像のような感じです。

 

 

 

「●●●●.html」ファイルと「img」フォルダをサーバーの適当なところにアップすればそのまま公開することも可能です。

とはいっても、ほとんどの場合、プライバシーの問題とかいろいろ編集が必要になることの方が多いでしょう。このまま公開する場合でもこのあとの解説を参考に編集してください。

 

これらのデータをもとに、このあとiPhoneでの見た目になるようにカスタマイズしていきます。

 

 

オリジナルデータ

 

iPhoneメッセージの画面の見た目になるように必要なデータを作成しました。

全部まとめてアーカイブしておきましたので、よろしかったらダウンロードしてお使いください。あるいは、このあとコードおよび画像データを載せておくのでそこからコピペしてもらっても構いません。

 

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

 

ダウンロードデータ

  • HTMLファイル「template.html」
  • CSSファイル「message.css」
  • フォルダ「images」

 

「template.html」は、iPhoneメッセージ画面の上部と下部のインターフェースを追加したテンプレートファイルです。AnyTransでダウンロードされたHTMLコードをカスタマイズして、この「template.html」と組み合わせてWebページ等に貼ります。

このままブラウザでひらけば、メッセージ部分が空の状態になっているのが確認できます。

 

00:00

 

「message.css」は説明するまでもなくスタイルシート。下記、長くなるので必要な方のみ「ソースを表示」ボタンをクリックして展開してださい。

 

/*--------------------
初期化と基本設定
---------------------*/
.message .wrap * {
    margin: 0;
    padding: 0;
    font: normal 14px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Helvetica Neue", "Lucida Sans Unicode", "Arial";
    color: #333;
    line-height: 1.6;
}
.message .wrap img {
    border: none;
}
.message .wrap {
    position: relative;
    width: 325px;
    height: 704px;
    overflow: hidden;
    margin: 0 auto;
    border: solid #ddd 1px;
}

/*--------------------
各ブロック設定
---------------------*/

/*画面上部のブロック*/
.message .wrap .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101px;
    border-bottom: 1px #b9b9b9 solid;
    background: rgba(247,247,247,0.9) url(images/li_th.png) 9px 43px no-repeat;
    text-align: center;    
}
/*画面最上部の情報表示ブロック*/
.message .wrap .header {
    height: 40px;
    background: url(images/header.png);
}
/*画面左上の時刻表示*/
.message .wrap .current_time {
    margin: 0 14px;
    font-family: "Helvetica Neue";
    line-height: 40px;
    text-align: left;
}
/*画面上部:相手のアイコン*/
.message .wrap .account {
    height: 60px;
    background: url(images/avatar.png) center 0 no-repeat;
    padding: 36px 0 0;
}
/*画面上部:スレッド名(相手の名前)*/
.message .wrap .name {
    display: inline-block;
    background: url(images/gr_th.png) right 0 no-repeat;
    line-height: 10px;
    font-size: 10px;
    padding-right: 0.8em;
}

/*メッセージの内容ブロック*/
.message .wrap .cont {
    width: 340px;/*スクロールバーをはみ出させて隠す*/
    height: 495px;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #fff;
    padding: 100px 0 107px;
    z-index: 1;
}
/*スマホ、タブレット用に調整*/
@media only screen and (max-width: 1112px) {
    .message .wrap .cont {
        width: 330px;
    }
}
/*画面下部のブロック*/
.message .wrap .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 325px;
    height: 108px;
    background: rgba(255,255,255,0.75) url(images/footer.png) no-repeat;
}
/*画面上部のブロック、画面下部のブロック共通*/
.message .wrap .top,
.message .wrap .footer {
    backdrop-filter: blur(20px);  
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;   
}

/*------------------------------
メッセージの内容のブロックの設定
-------------------------------*/

/*メッセージの日時*/
.message .wrap .date {
    margin: 2em 0 0.8em;
    text-align: center;
    color: #aaa;
    font-size: 11px;
    font-family: "ヒラギノ角ゴ Pro W6";
    font-weight: bold;
}
/*フキダシ全体の設定*/
.message .wrap table,
.message .wrap table tr,
.message .wrap table td {
    border: none;
    overflow-wrap: break-word;
}
.message .wrap table {
    width: initial;
}

/*左揃えと右揃えの設定*/
.message .wrap .right {
    float: right;
}
.message .wrap .left {
    float: left;
}

/*一連のメッセージのブロック*/
.message .wrap .cont_block,
.message .wrap .block_table .block_table {
    clear: both;
    margin-top: 6px;
    overflow: hidden;
} 
/*吹き出しを含むブロック*/
.message .wrap .block_table {
    width: 100%;
}
/*それぞれのフキダシ*/
.message .wrap .block_table table {
    position: relative;
    margin: 0 8px;
}
/*フキダシの最大幅を設定*/
.message .wrap .block_table tr td {
    max-width: 190px;
}

/*フキダシ自分側iMessageの設定*/
.message .wrap .left_top,
.message .wrap .right_top,
.message .wrap .right_mid,
.message .wrap .left_bottom,
.message .wrap .right_bottom,
.message .wrap .bg_color {
    background: #2793fa;    
    color: #fff;
}
/*フキダシ自分側SMS/MMSの設定*/
.message .wrap .left_top3,
.message .wrap .right_top3,
.message .wrap .right_mid3,
.message .wrap .left_bottom3,
.message .wrap .right_bottom3,
.message .wrap .bg_color3 {
    background: #32cd54;   
    color: #fff;
}
/*フキダシ相手側の設定*/
.message .wrap .left_top2,
.message .wrap .right_top2,
.message .wrap .right_mid2,
.message .wrap .left_bottom2,
.message .wrap .right_bottom2,
.message .wrap .bg_color2 {
    background: #e9e9ed;
}

/*フキダシ四隅の設定*/
.message .wrap .left_top,
.message .wrap .left_top3 {
    width: 14px;
    height: 14px;
}
.message .wrap .right_top,
.message .wrap .right_top3 {
    width: 22px;
}
.message .wrap .left_bottom,
.message .wrap .left_bottom3 {
    height: 14px;
}
.message .wrap .left_top2 {
    width: 22px;
    height: 14px;
}
.message .wrap .right_top2 {
    width: 14px;
}
.message .wrap .left_bottom2 {
    height: 14px;
}


/*フキダシ四隅およびしっぽの設定*/
.message .wrap td::after {
    position: absolute;
}

.message .wrap .right_bottom::after,
.message .wrap .right_bottom3::after {
    right: 0;
    bottom: -7px;
    content: url(images/right_tail.png);
}
.message .wrap .right_top::after,
.message .wrap .right_top3::after {
    right: 0px;
    top: -2px;
    content: url(images/right_tail_top.png);
    /*z-index: 1000;*/
}
.message .wrap .left_top::after,
.message .wrap .left_top3::after {
    left: 0px;
    top: -2px;
    content: url(images/left_top.png);
}
.message .wrap .left_bottom::after,
.message .wrap .left_bottom3::after {
    left: 0;
    bottom: -7px;
    content: url(images/left_bottom.png);
}
.message .wrap .right_bottom2::after {
    right: 0;
    bottom: -6px;
    content: url(images/right_bottom.png);
}
.message .wrap .right_top2::after {
    right: 0px;
    top: -2px;
    content: url(images/right_top.png);
}
.message .wrap .left_top2::after {
    left: 0px;
    top: -2px;
    content: url(images/left_tail_top.png);
}
.message .wrap .left_bottom2::after {
    left: 0;
    bottom: -7px;
    content: url(images/left_tail.png);
}


/*添付画像の設定*/
.message .wrap .right tr td img {
    max-width: 226px;
    margin: -14px 0 -14px -14px;/*フキダシと写真の位置合わせ*/
}
.message .wrap .left tr td img {
    max-width: 226px;
    margin: -14px -14px -14px 0;/*フキダシと写真の位置合わせ*/
}

 

「images」フォルダには、iPhoneメッセージ画面の上部と下部のインターフェースに必要な画像ファイルと、フキダシの形のグラフィックスに必要な画像ファイルが入ってます。

 

「images」フォルダの画像ファイル

left_tail_top.png 左側のフキダシの左上角   right_top.png 左側のフキダシの右上角   left_top.png 右側のフキダシの左上角    right_tail_top.png 右側のフキダシの右上角

left_tail.png 左側のフキダシのしっぽと左側縁取り  right_tail.png 

li_th.png 戻るボタン   gr_th.png 詳細を見る矢印      avatar.png  メッセージ相手のアバター

 

header.png

 上部情報バー

 

footer.png入力エリア

 

AnyTransでダウンロードされたデータでは、フキダシはtd要素の背景色と背景画像として見た目を作っていました(図1)が、このオリジナルデータでは、擬似要素を生成して、teble要素を縁どるようにしてフキダシの形を作っています(図2)。「images」内の「left_tail_top.png」〜「right_tail.png」はそのための部品です。

 

 

こうすることで、AnyTransの方では、縁に余白がついてフキダシの背景色が見えた状態で表示されていた添付写真(図3)を、フキダシの形にトリミングされた状態で表示させています(図4)。

 

 

以上の「template.html」、「message.css」、「images」フォルダと、AnyTransでダウンロードしてあった「●●●●.html」、「img」フォルダを、同じディレクトリに配置します。

最終的には、私の場合、サーバーのルートに作成した「upload」フォルダ内の「anytrans」フォルダにアップロードするので、ローカルの同フォルダに配置するものとします(アップロードはまだしませんよ)。

 

ローカルでのディレクトリ構成

 

あとで、画像ファイルのリンクを書き換えるので、サーバーのどこにアップロードするかはこの時点で決めておきましょう。

 

 

HTMLコードの編集

 

データの整形

 

ダウンロードされたHTMLファイルをテキストエディタで開いてみると、ファイル圧縮(Minify)されているので編集はおろか判読も困難(下画像)。

 

 

使用しているテキストエディタがSublime Text なら、ソースコードを自動で整形してくれるプラグイン:「HTML/CSS/JS Prettify」があるのでインストールして使いましょう。

インストールしてあれば[Tools」メニュー[HTML/CSS/JS Prettify]-[Prettify Code]で...

 

 

一瞬で、綺麗にインデントして整形してくれます。

 

 

 

メッセージを編集

 

メッセージのやりとりが長く続いていた場合は、全体がかなりの量になります。編集の際の手がかりになるように、HTMLファイルの基本的な構造がどうなっているのか、テンプレート化したものが、下に載せたソースコードですので参考にしてください。

 

なお実際は、head 要素内にスタイルシートが記述されていますがここでは省略しています。
また、なぜだかbody要素の開始タグ<body>が抜けているんですが下のコードでは補ってあります。

 

iMessageの場合とSMS/MMSの場合と(→iMessageとSMS/MMSについて:Appleサポート)でHTMLファイルの構造が違っていて、まず「iMessage」の場合。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>タイトル</title>
    <!-- ここにスタイルシート -->
</head>
<body>
<div class="wrap">
    <div class="top">タイトル</div>
    <div class="cont">
        <h1>スレッド名(相手の名前)</h1>
        <p class="imessage">iMessage</p>
        <div class="cont_block">
            <p class="date">日時</p>
            <div class="block_table">
                <table class="left" width="auto" height="auto" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="left_top2"></td>
                        <td width="auto" class="bg_color2" height="12"></td>
                        <td class="right_top2"></td>
                    </tr>
                    <tr>
                        <td height="auto" class="right_mid2"></td>
                        <td class="bg_color2">相手側のメッセージ
                        </td>
                        <td class="bg_color2" width="14"></td>
                    </tr>
                    <tr>
                        <td class="left_bottom2"></td>
                        <td class="bg_color2"></td>
                        <td class="right_bottom2"></td>
                    </tr>
                </table>
            </div>
            <!-- /.block_table -->
        </div>
        <!-- /.cont_block -->
        <div class="cont_block">
            <p class="date">日時</p>
            <div class="block_table">
                <table class="right" width="auto" height="auto" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="left_top"></td>
                        <td width="auto" class="bg_color" height="12"></td>
                        <td class="right_top"></td>
                    </tr>
                    <tr>
                        <td height="auto" class="bg_color" width="14">&nbsp;</td>
                        <td class="bg_color">自分側のメッセージ(iMessage)</td>
                        <td class="right_mid"></td>
                    </tr>
                    <tr>
                        <td class="left_bottom"></td>
                        <td class="bg_color"></td>
                        <td class="right_bottom"></td>
                    </tr>
                </table>
            </div>
            <!-- /.block_table -->
        </div>
        <!-- /.cont_block -->
    </div>
    <!-- /.cont -->
</div>
<!-- /.wrap -->
</body>
</html>

 

14行目から37行目までと、39行目から61行目までの <div class="cont_block">...</div> のブロックが相手側、自分側それぞれのメッセージ部分に当たります。

<div class="cont_block">...</div> 内の <div class="block_table">...</div> の中にある3行3列のtable要素がフキダシ部分です。

レガシーなテーブルレイアウトなのが残念なところですが、その table 要素でメッセージのフキダシの見た目を作っています。

クラス名が「right」のtable要素が自分の側のメッセージで右揃え、クラス名が「left」のtable要素が相手の側のメッセージで左揃えのフキダシになります。

td要素のクラス名の違いによって、スタイルシートでフキダシのグラフィックを変えているので注意してください。

2行目2列目のtd要素がメッセージ内容のテキストを含む部分です。メッセージの内容を編集したいときはここ。

メッセージを丸ごと削除したり、移動したりしたいときは、<div class="cont_block">...</div> のブロックを選択すればOK。

 

 

次に「SMS/MMS」の場合。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>タイトル</title>
    <!-- ここにスタイルシート -->
</head>
<body>
<div class="wrap">
    <div class="top">タイトル</div>
    <div class="cont">
        <h1>スレッド名(相手の名前)</h1>
        <p class="imessage">SMS</p>
        <p class="date">日時</p>
        <div class="block_table">
            <div class="block_table">
                <table class="left" width="auto" height="auto" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="left_top2"></td>
                        <td width="auto" class="bg_color2" height="12"></td>
                        <td class="right_top2"></td>
                    </tr>
                    <tr>
                        <td height="auto" class="right_mid2"></td>
                        <td class="bg_color2">相手側のメッセージ
                        </td>
                        <td class="bg_color2" width="14"></td>
                    </tr>
                    <tr>
                        <td class="left_bottom2"></td>
                        <td class="bg_color2"></td>
                        <td class="right_bottom2"></td>
                    </tr>
                </table>
            </div>
            <!-- /.block_table -->
        </div>
        <!-- /.block_table -->
        <p class="date">日時</p>
        <div class="cont_block">
            <div class="block_table">
                <table class="right" width="auto" height="auto" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="left_top3"></td>
                        <td width="auto" class="bg_color3" height="12"></td>
                        <td class="right_top3"></td>
                    </tr>
                    <tr>
                        <td height="auto" class="bg_color3" width="14">&nbsp;</td>
                        <td class="bg_color3">自分側のメッセージ(SMS/MMS)</td>
                        <td class="right_mid3"></td>
                    </tr>
                    <tr>
                        <td class="left_bottom3"></td>
                        <td class="bg_color3"></td>
                        <td class="right_bottom3"></td>
                    </tr>
                </table>
            </div>
            <!-- /.block_table -->
        </div>
        <!-- /.cont_block -->
    </div>
    <!-- /.cont -->
</div>
<!-- /.wrap -->
</body>
</html>

 

「iMessage」 の場合との大きな違いは、日時を表示する<p class="date">...</p>のブロックです。

上で説明した「iMessage」の場合では、<p class="date">...</p> は <div class="cont_block">...</div> の内部にあったのに、この「SMS/MMS」の場合は、外にあります(14行目39行目)。

もう一つの大きな違いは、相手の方のメッセージ - つまり、クラス名が「left」のtable要素の方は<div class="cont_block">...</div>で包含されておらず、<div class="block_table">...</div>でネストされているということです(16行目。クラス名が「right」の方は<div class="cont_block">...</div>で包含されています)。

どういう理由でこうなっているのかわかりませんが、こういう仕様のようです。

ということで、メッセージを丸ごと削除したり、移動したりしたいときは、<p class="date">...</p>と次のdiv要素(<div class="cont_block">...</div>または<div class="block_table">...</div>)を選択すれば良いということです。

 

 

template.htmlと組み合わせる

 

メッセージの編集が済んだら、「template.html」と組み合わせます。

 

「template.html」のコードは次の通り。

 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="message.css">
</head>
<body>
<!-- ここからコピー -->
<div class="message"> 
<div class="wrap">
<div class="top">
    <div class="header">
        <p class="current_time">00:00</p>
    </div><!-- /.header -->
    <div class="account">
        <p class="name">
        	スレッド名(相手の名前)
        </p>
    </div><!-- /.account -->
</div><!-- /.top -->

<!-- ここにdiv要素class="cont"をペースト -->

<div class="footer"><!-- no-contents --></div>
</div>
<!-- /.wrap -->
</div>
<!-- /.message -->
<!-- ここまでコピー -->
</body>
</html>

 

23行目「<!-- ここにdiv要素class="cont"をペースト --> 」の部分に、上記で編集したメッセージ<div class="cont">から</div><!-- /.cont -->までをコピーして貼り付けます。

 

画面左上の時刻表記を編集するときはクラス名「current_time」の p 要素。

 

        <p class="current_time">00:00</p>

 

スレッド名(相手の名前)を編集するときはクラス名「name」の  p 要素。

 

        <p class="name">
        	スレッド名(相手の名前)
        </p>

 

ここで「template.html」をブラウザで開いて、表示を確認してみてください。

スタイルシートの修正は必要ないかとは思いますが、もしかしたら添付写真がある場合、写真とフキダシの位置が合わない場合があるかもしれません。ただし、サーバーにアップして公開すると正しく表示されたりします。

うまくいかない場合は「message.css」の262行目または、266行目の margin を調整してみてください。

 

 

 

高さ成り行きの場合

 

上部と下部のインターフェースを省いて、高さを内容に合わせて成り行きで表示する場合は...

クラス名「top」のdiv要素を削除。

 

<div class="top"><!-- このdiv要素削除 -->
    <div class="header">
        <p class="current_time">00:00</p>
    </div><!-- /.header -->
    <div class="account">
        <p class="name">
        	スレッド名(相手の名前)
        </p>
    </div><!-- /.account -->
</div><!-- /.top -->

 

クラス名「footer」のdiv要素を削除。

 

<div class="footer"><!-- no-contents --></div><!-- この行削除 -->

 

クラス名「wrap」のdiv要素に「style="height: auto;"」を追記。

 

<div class="wrap" style="height: auto;">

 

クラス名「cont」のdiv要素に「 style="padding: 0 0 20px;height: auto;"」を追記します。

 

<div class="cont" style="padding: 0 0 20px;height: auto;">

 

 

リンクの修正

 

次に、添付ファイルがある場合、添付ファイルへのリンクを修正します。添付写真がない場合は必要ありません。

ここでは「img」フォルダを、サイトルート直下の 「upload」-「anytrans」にアップロードすることにしているので、これに合わせてHTMLファイル内のパスを変更します。

エディタの検索-置換で...

「<a href="img/」を「<a href="/upload/anytrans/img/」に、

「<img src="img/」を「<img src="/upload/anytrans/img/」に置換しました。

 

 

コードを貼る

 

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

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

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

 

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

ここでは上述の通り、サーバーのルートに作成した「upload」フォルダ内の「anytrans」フォルダにアップロードすることにしているので…

 

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

 

となりますね。

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

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

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

 

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

 

WordPressテーマ:AFFINGER5の場合

 

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

 

 

データのアップロード

 

 

アップロードするデータを確認します。

「img」フォルダのファイルのうち、使用する添付写真以外は必要ないので削除しましょう。

 

 

「●●●●.html」と「template.html」はもう必要ないので、それ以外をアップロードします。

 

アップロードするデータ

 

 

WordPress の場合、ここまでやったら投稿を公開しましょう。

以上で完成です。

 

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

 

 

-coding, iPhone, WordPress
-, , ,

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