【備忘録】ヤフオクhtml編集

f:id:kayaak:20210625165120p:plain

Using the illustration of engineer as the core image, shapes are strategically located at around the subject to cannotate electronic waves (of information being distributed throughout cyberspace), so as to create a snappy image.

▮ Outline

テキストエディタで１からコードするのは面倒

はてなが画像のサーバーとしての機能も果たす

　⇒はてブでテキスト編集し、HTMLコードを入手することに。

f:id:kayaak:20210625170512p:plain

ただし、ヤフオクとはてブはタグが異なるため、

タグの置換が必要となる。

このとき、なるべく手作業を少なくする。

置換作業においては、

「メモ帳」アプリをテキストエディタとして使用。

文字コードはUTF-8で保存。

※UTF-8は、業務上SaaSデータベースの管理をしていた際に

インポート形式として指定されてるなど、標準的な文字コード。

▮ ヤフオクタグ

太字
文字装飾
センター　<CENTER></CENTER>
罫線　<hr>
表<table border=”1″>
　<tr>
　</tr>
　</table>

ヤフオクｈｔｍｌタグ講座

文字色はヤフオクのタグが分からなかったので

はてなのタグをそのまま使用してワーク。

<TD><CENTER> 商品タイトル</CENTER> <CENTER></TD>

▮ 置換作業

保存性の観点からWordでの編集を試みたが、カンマがhtmlで作動せず。

文字コードの違いと思われる。

※あいまい検索を解除し、「半角と全角を区別する」にチェックを入れるとコードの置換は適切に可能。

f:id:kayaak:20210613195213p:plain

f:id:kayaak:20210625171834p:plain

そこで「メモ帳」アプリをテキストエディタとして使用。

Step１. フォントサイズの置換

→

→

→

f:id:kayaak:20210625180452p:plain

Step２. 改行の置換

→

※改行ではなく段落としてのにフォントタグをつけるよう置換していくため、

　必ずStep３.より先に行うこと

Step３. フォントサイズの置換

Step１. で置換したフォントサイズの間に挟まれた部分が

前後のフォントサイズに引っ張られてしまうため

タグを付す。

→

Step４. フォントサイズの置換

Step１.とStep３. を行ったことにより、

の後にフォントタグが２つ並ぶ場合がある。

の隣の隣のフォントタグを活かしたいため、

以下のように置換する。

<FONT→<FONT

Step５. 例外の手当て

文字サイズ大のタグと色タグの開始位置が同じケースでは、

となっている。そこで、

①→

②文字サイズ大のタグと色タグの開始位置が同じケースが

段落の先頭で起こるときは、

と並んでしまうので置換。

→

③さらに、段落全体に色・サイズのタグをかけたくないケースもある。

を検索していき、

色・サイズのタグを終了させたい部分に手作業で

を入力する。

Step６. 例外の手当て２

→置換に失敗

Step７.PDCA

商品説明欄に貼り「確認する」⇄editのback and forth。

f:id:kayaak:20210625174228p:plain

f:id:kayaak:20210625174208p:plain

ウェブマーケではスマホでの視認性が最も重要なため、

スマホの画面でも下書きを確認。

で１行22字とし、

Wordの文字数指定を利用しながら不自然な改行をチェック。

f:id:kayaak:20210622175749p:plain

※置換時の注意：

単なる”検索”では、検索する方向が特定される。

カーソル位置を基準に上または下である。

”検索”のアクションを含む”置換”においても同様と思われる。

そのため、置換できない部分ができるのを防ぐため、

全体を選択したうえで置換をかける。

f:id:kayaak:20210625172956p:plain

f:id:kayaak:20210621214331p:plain

※画像

商品説明に掲載可能なのは７枚まで。

width="495" height="278" 近辺で固定。

２分の１にすると、width="200" height="112"。

視認性異なる。

対フォント比でPCで目視したときと同じサイズ感となると捉えて良い。

←下書き　　　　　　　　　　　　　出品後→

f:id:kayaak:20210625180842p:plain 　　　 f:id:kayaak:20210625180901p:plain

はてなフォトライブラリから直接htmlタグを取得できる

コードをウェブで入手。

ブログにアップしなくてもフォトライブラリに直接アップできる。

f:id:kayaak:20210625174434p:plain

※この記号を表すタグは長い

｜

<span style="color: #222222; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', Arial, メイリオ, Meiryo, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">｜

アイキャッチイラスト出典：

シンプル-プログラマーイラスト - No: 1547894／無料イラストなら「イラストAC」

f:id:kayaak:20220128010107p:plain