回り込みやら、絵文字やら実験。

Markdown記法とhtmlで調整中。

多分来年あたりに忘れてて同じ事をやりそうなので、覚え書きです。
何しろキャパニトとかQタグ...デリミタ設定とか、見事に繰り返してるから。(۶˃́ꇴ˂̀)۶わはー　
いつもはcssなんですが、画像サイズに微調整が必要のようなのでやむを得ずです。(๑•́‧̫•̀๑)
　
~~今ブログに設定してるlove letterテーマ😋は、最近は珍しくなった画像回り込み設定なんですね。~~別テーマに変更し、CSSも書き換え済み。
で...テーマ作者さんのコメントは

補助線に必ず合うようにしてあるため、画像などの後のテキストは必ず回りこむようになっています。改行するなどして上手く調節してください。

だから元々設定してあるままだと崩れないと思うけど、お気に入りのフォント＆フォントサイズに変えて...もうこの時点で、補助線には合いません(๑'ڡ˂̵)ᕗ...さらに画像サイズも可変*1にしてるので微調整が必要になってます。
回り込み解除の時は、本来の解除指示...<p style="clear:both;">か、<div class="clear" ></div>のどちらかを、本文の中...と云うか、回り込んでる最中の文に入れて解除。
しかし...上記理由で、確実に崩れるっ😫
で、今までは画像サイズ（縦方向のね）で直してたけど、pre記法の調整が全く出来ない*2ので直そうと試行錯誤。
アルファチャンネル使えるフォーマットの画像で、ダミーの透明画像を作れば、即出来そうだけど、なんかそれってやりたくないので<span style="font-size: 120px;">　</span> *3と、ダミーの文字で。とりあえずこのページでは出来てるようです。

画像側で出来るかな？

ダミーの文字だと、文字分開いたり改行が入ったりでダメ。
ダミー画像は...透明では無く白い枠が出来て...バックグラウンド設定とか弄らなきゃですね。別個にDIVとか入れれば出来そうだけど面倒だからいいや。
だから、写真は画像サイズ。pre*4記法は文字サイズ。と、住み分けです。インラインのpre記法、このページで見てみてるけど...これは調整しなくても良いかな。

クロームでiPhone顔文字を表示させるコードの実験

unicode-range: ;で、セリフ（ヒゲ付き）やサンセリフ（ヒゲ無し）に、iPhone顔文字を上書き設定。って、 iPhone独自というわけでは無くって、ちゃんとユニコードで規定されてる絵文字*5ですから。
現状では失敗。窓機では表示出来てるかも知れないけどマックでは表示しませんでした。
有名すぎるクロームのバグです。サファリとか火狐なら、何もしなくても表示可能。「AppleColorEmoji」は、アップルの絵文字セット。「Segoe UI Symbol」は、窓機の。このページの所々に色つきの絵文字入れてあるので、ブラウザが対応してれば表示します。

取りあえずcssで、こんなのを入れてみました

上に書いた、絵文字置き換えのコード。

あ、一カ所間違いを見つけたっ直るかな？...って、ダメだった。

っていうかさ...窓機は「Segoe UI Symbol」をクロームのデフォルト文字にセットすればフォントリンク*6が動作しなくても見れるそうだから直接指定でオッケーだと思うけど、

見れなかったのでfont-faceで置き換えてみます。一応、フォントファミリー指定の所...セリフとサンセリフの直前にも入れときます。

@font-face {
  font-family: serif;
  src: local("AppleColorEmoji"),local("Segoe UI Symbol");
  unicode-range: U+FD5-FD6, U+23E9-23F2, U+2618-2797, U+27B0, U+2B05-2B55, U+1F004-1F6CF;
}

@font-face {
  font-family: sans-serif;
  src: local("AppleColorEmoji"),local("Segoe UI Symbol");
  unicode-range: U+FD5-FD6, U+23E9-23F2, U+2618-2797, U+27B0, U+2B05-2B55, U+1F004-1F6CF;
}

この部分の上に、画面には表示されないけど行揃えの指示を日記側のエディタから直接入れてます。上記の行揃え（pre記法の、縦方向）実験。

ところで...

「はてなでの」Markdown記法の、続きを読むはですね。
多分、はてなダイアリーで使ってた注釈*7記法...の流用（「はてなダイアリーの記法も、全部じゃ無いけど使える」とあります）だろうと思うけど、このって、元々あるHTMLのコメント機能なんですよね。
で、moreだけ抜き出してシステムで処理。他にもSYSTEMとか抜き出してるっぽい。
って事は...注釈には予約語が入ってて、こっちの判断に任せられてる？あまり注釈を気軽には使えない？チョッと悩むなぁ...😰(๑•́‧̫•̀๑)

*1:元々、サイズを変えるつもりだったんですが結果として、補助線に合わせる為に画像サイズ変えなきゃです

*2:絵を使ってないから

*3:このタグ同士に挟まれた中には全角スペースが入ってます。Markdown記法は半角スペース2コをデリミタ...と云うか、改行指示に使います。注意、行末に非ず。だから、エディタで行内に改行指定を挟むワザも可能。他にも半角スペースを多用するので空白開けに半角スペースを使うのは止めた方が良いです

*4:コード

*5:マイクロソフトとは違うのだよマイクロソフトとは

*6:窓機の機能。窓機版のサファリとか火狐は使用。クロームは速度を稼ぐ為に使わないそうです

*7:脚注じゃ無くって非表示...コメントね

あきやん 's journal

アニメ、ニュース、ソフトとかの備忘録。