2・なんでそんなことしてるの？
3・目次機能を入れてみよう
4・画像にリンクを埋め込もう
5・動画再生開始秒数指定しての埋め込み
6・リンクの文字ボタンを作ろう
7・ルビをふってみよう
8・定義説明文を分けよう
9・他にも……
10・使ったhtmlタグ
1・はじめに
なんか、すずたかのブログの雰囲気が変わったな！？って思った皆さん、こんにちは
そうでない皆さん、こんにちは
検索から来た皆さん、はじめまして
今回はアメブロでhtml編集で色々と試してみようってブログです
2・なんでそんなことしてるの？
普段は推しの女優さんの葉月智子さんについて書いたり、観た舞台の感想を書いたりしているのですが、ご存じの方も多い通りに私のブログって
長い
んですよね
ありがたいことにそれでもそれなりの人数に読んで頂いてはいるのですが、あまりユーザーフレンドリーではない
で、昨日書いたブログ を読んだ知り合いから
WordPressとかだと文字数カウントプラグインもあるし、そういうので予め文字数とか伝えてくれると助かる
との助言を頂きました
でも、アメブロには文字数カウントとかの便利機能はない
まあ、検討の結果ブログのお引っ越しはしないのですが、色々と読みやすくはしたい
noteとかの記事を読んでいると目次とか付いていてわかりやすい
これから何が書かれてるのか、とか、どれくらいの分量があるのか、とか、読みたいことはどこにあるのか、とか、そういったことが予想出来る
で、調べてみたらアメブロでもhtml編集機能を活用すれば目次とかも実装出来るとわかったのです
そこで実験してみようってのが今回のブログです
今までYouTube以外の動画リンクを貼る時くらいしかhtml編集を使ってなかったので色々試してみます
3・目次機能を入れてみよう
ずっと入れたかった目次機能
まずはそれを試します
ですが、冒頭の目次のリンク飛べなかったぞ！？って方いますよね？
とりあえず目新しいのあったら押してみますよね？
そう、（ブログを見ている環境によって）ページ内リンクが飛べないんですよ！！
で、色々試した結果
アメブロのアプリだと飛べなさそう
という何とも残念な感じに笑
そこで、、、
アメブロのアプリで見ている方はアプリの上の方の地球マークから通常のブラウザでブログを開いて、それで目次をタップしてください
飛べるはずです
4・画像にリンクを埋め込もう
そもそも私が何故ブログを書いているのかと言うと思ったことや感じたことを表現したいってこともありますけれども、推している女優さんの葉月智子さんを応援したいっていうこともあるわけです
葉月智子さんのInstagram
（画像をタップ）
↓
で、葉月智子さんInstagram みたいなリンクの貼り方をするよりも画像を貼ってそっから飛んで欲しいなってこともあるわけです
てことで調べていたら画像にもリンクを貼れるらしい
で、どうやらhtmlでやるのは手間が掛かるけれどもPC版のアメブロの編集サイトからやると簡単らしい
ってことで、携帯のブラウザからPCモードでアメブロ開いてリンクを貼ってみたのが上の画像です
タップ、クリックしてみてね
そして、フォローまだの方はフォローしてね！！
5・動画再生開始秒数指定しての埋め込み
アメブロで元からの機能でYouTubeを埋め込むことは出来るのですが、長い動画で再生開始の位置を指定した動画とかになるとデフォルトの機能では出来ない
そこで
YoutubeをWebブラウザ版で開いて開始時間を指定しての動画の埋め込みリンクを取得してhtml編集で貼る
上の動画は1分26秒のところから開始するはず
ちなみにアイドル時代での大宮での路上ライブでの様子です
6・リンクの文字ボタンを作ろう
推しメンしゅきしゅきマンである私が個々のブログを書く目的はいくつかありますが、その内の1つに推しが次に出演する舞台の宣伝を勝手にやりたい
そして
あわよくば推しの扱いでチケットを買って欲しい
というものがあります
あ、推しの葉月智子さんが次回出演する舞台は
『純血の女王』
5月28日(土)〜6月5日(日)
六行会ホール
にて上演されます
推しは「coffin」チームでの出演です
主演は
元宝塚の 澄華あまね さん
AKB48の 込山榛香 さん
結構面白そうだぞってことは1つ前のブログ
に書きました
で、宣伝ブログを書いた後には当然チケットリンクを貼りたいわけで、そういう場合に単なるリンクではなくてボタンがあると嬉しいわけですね
作ってみました
タップしてみてください
リンク飛べますか？
後は行ける日程と座りたい席を選んで
入金するだけです
あ、Coffinnチームの公演を買ってね
お目当てのアンケートでは「葉月智子」を選んでね
7・ルビをふってみよう
舞台に関するブログを書いていて困ることの1つに読み方がわかりづらいってのがあります
「下手」って漢字なんか、演技の巧拙を示す「へた」って読む場合もあれば、舞台の客席から向かって左側を示す「しもて」って読む場合もあるわけです
演劇に関することを話している場合にはどっちも使うことがありますが誤読するとスムーズに読めないので今までは「シモテ」とかカタカナで表記したりしていました
舞台に関する話をしている流れの時に「下手の横好き」なんて言葉が出てくると本来読める人でも「しもてのよこすき」みたいにめっちゃ端っこから観るのが好きな人みたいな誤読をしてしまうこともある
そこで
下手の横好き
ってルビをふれると捗る
ふむふむ、こういうことも出来るのね
8・定義説明文を分けよう
ブログを書いていてしばしば悩むのがどこまで説明をするかってこと
知らない人には丁寧な説明がないとわからない用語があるとして、でも、それは知ってる人にとってはいらない情報だしわざわざ書くと文章がその人にとっては無駄に長くなる
今までは「知ってる人は読み飛ばしてくれ！！」って思いながら逐一説明を入れてた
例えばさっき出た「扱い」って言葉とかも一応説明を入れてた
しかし、扱い*
って感じにすればわからない人だけ後で解説読めばOKになる
捗る
<dl><dt><dd>で作れるって書いてあるところもあったのだけれど、私は上手くいかなかった
アメブロだと対応してないのかも
9・他にも……
ブログ冒頭で使った色枠付きの見出しとか色々と出来ることはありそうだけれども、そこは追々勉強していくことにする
まあ、機能がアップするなら使うけど見た目はそこまで拘らないような予感はしてるけど
10・使ったhtmlタグ
最後に今回使ったhtmlタグを書いておく
色付き見出し
<fieldset style="text-align: center; background:#dbffdb; padding:10px; border-radius:10px; border:2px solid #98d98e;"><b>見出しの本文をここに書く</b></fieldset>
目次
<div style="text-align: center;"><b><font size="5">目次</font></b></div><a href="#1">1・1項目目</a><br><a href="#2">2・2項目目</a><br><a href="#3">3・3項目目</a><br><a href="#4">4・4項目目</a><br><a href="#5">5・5項目目</a>
目次からのリンク先
<h2 id="2">2・2項目</h2>
2項目目の本文
リンクの文字ボタン
<p><a style="text-decoration: none;" href="【リンク先のアドレス】" target="_blank" rel="noopener noreferrer"><span style="display: inline-block; color: #ffffff; padding: 10px 30px; text-decoration: none; border-radius: 24px; background: linear-gradient(to bottom, #ffd2e7 0%, #ffbfde 65%);">チケットはこちら</span></a></p>
ルビ
<p><ruby>下手の横好き<rp>(</rp><rt>へたのよこずき</rt><rp>)</rp></ruby></p>
定義説明文とかのやつ
<fieldset style="border:2px dotted #2a83a2;"><legend>【用語】</legend>説明の文章</fieldset><br><p></p>
見出しの種類の1つですね
ってことで今回のブログは3865文字でした！！←
す