もやもやブログ

職場のもやもやを吐きつつ、紙媒体編集者が未経験からWebディレクターを目指す。メンバー3人の持ち回り。

お盆の頃とは一転して涼しい日が続きますね。1号です。

もはや30度前後は「涼しい」になってしまった。

 

BIGBOSSの命により、画像の貼り付けをやってみる。

HTMLの勉強になるよ、とのこと。

日常を写真で見せる気があまりない(というかそんな写真を撮ってない)ので、

フリー素材サイト「ぱくたそ( https://www.pakutaso.com/ )」さんで入手した。

そういうわけで、本ブログ掲載画像の記念すべき第1号はこちら。

 

「ぱくたそ」さんの商品ページによれば「カリスマドーナツ」の画像だそうです。

 

「カリスマドーナツ」って何……?

 

まあ何、確かに特別感あるかな、チョコかかってるし、生地からして周りと違う。

こんな意味不明な素材もあって面白かったのでオススメです、「ぱくたそ」さん。

でも私はドーナツのカリスマってオールドファッション辺りだと思う。

 

さて、ここで「HTML編集」画面を覗いてみる。おお、こんな風になるのか。これドットインストールの序盤で見たかも。もっとシンプルなやつだけど。

「<figcaption class="mceEditable">」でキャプションが始まって、「</figcaption>」で終わると。

今、上記のように入力したら、HTML編集には「&lt;/figcaption&gt;」という文字列が出現している。「<」「>」が置き換わってる。なるほど。

文字化けなのか、HTMLの一部として読み取られない文字列に変換されるようになっているのか?

 

試しに挿入したURL周りも面白い表記になってる。

「<a」っで始まって「/a>」で終わっているように見えるけど……でも「<p>」「</p>」みたいに「<」「>」は最初と最後にセットになるはずでは……あれ……?

……と、何となく気持ち悪くなり、あとなぜかURLが2つ書いてあるように見えたので、試しに1つ消して簡略化してみた。

ところが、プレビューで見たらハイパーリンクじゃなくなってる。何だこれは。

もう1度リンクを挿入し直して、HTML編集画面を見てみる。

<a href="https://www.pakutaso.com/">https://www.pakutaso.com/</a>

とある。

あ、分かった「href」がハイパーリンクなのか。

「以下の文字列はハイパーリンクだよ」が「href="~"」になるわけか。

だから上記の緑と青は同じ文字列になり、実際にブログの文面として見えるのは青の部分になる。

「<a」に見えていたのも、きちんと上に赤で示した部分で終わっていた。

 

少し賢くなった気がしますが、こんなもんでどうでしょうかBIGBOSS。

頭を使ったので、ドーナツでも買おうか検討中。

 

追記:記事をアップしてみたら、上の緑や青で色分けしていた文字列が全部ハイパーリンクになっており……色分けが分からなくなっている……。

うーん何だろうこれ。現状の私のスキルではお手上げです。間に適当な文字とか挿入してリンクを壊せばあるいは……?