Bloggerの投稿のHTMLモードの使い方 結城永人 - 2019年6月10日 (月) Bloggerのウェブの記事/追加ページの投稿(編集)のHTMLモードはページのHTMLを扱える機能だ。HTMLとはHyperText Markup Language(ハイパーテキストマークアップランゲージ:超越文書記述言語)の頭文字四つで、ブログなどのウェブサイトをブラウザに表示するために使われるものなんだ。ブログの記事の投稿でも使ってページをどのように構成するかを個別にカスタマイズできるようにするのがHTMLモードの最大の特徴になる。 追記:2020年9月から投稿画面が変わり、投稿モードはメニューの左端の項目で「HTMLビュー」と「作成ビュー」と呼ばれて区別されるようになった。 投稿のHTMLモードの入力画面|Blogger 通常の作成モードはプレーンテキストで入力可能で、何でも書き込んだまま、ブログに表示される。さらに入力画面にコンテンツやデザインのスイッチも色々と付いていて便利だけど、ただしどのように表示されるかを根本的に変更することはできない。Bloggerのサーバーかテンプレートで先んじて規定される仕方でしか投稿を作成することができないのが通常の作成モードの一つの限界だ。 HTMLモードを使うと入力画面のスイッチに予め用意されてないものも含めて全てのHTMLタグを使えるし――反対に何も使わずにプレーンテキストと同じように記載しても大丈夫だ。ブログ自体のHTMLによってブラウザに投稿そのものは表示される――さらにCSSでデザインを付けたり、JavaScriptで動作を付けたりするのも容易になるので、記事/追加ページを構成する投稿へのブロガーの表現の幅は格段に広がる。 目次BloggerのHTMLモードの三つの利点BloggerのHTMLモードの六つのメニューB(太字)I(イタリック)ABC(取り消し線)リンク🖼️(画像)“(区分け引用)HTMLのその他の良く使われるタグ見出しU(下線)リスト改行罫線マーク定義プリ BloggerのHTMLモードの三つの利点 一般的にいってサイト作成の入力モードのHTMLはプレーンテキストと比べて幾らか不便だけれども何でもできるのが良いところだけど、しかしながらBloggerではもう少し状況が変わっていてプレーンテキストの作成モードに加わえられた変更を反対に打ち消せる分だけHTMLモードにはサイト作成の利点も増えている。 HTMLのサイト作成のコーディングが可能(普通)入力された文字の装飾を個別に付けない(Blogger)コンテンツに段落のpタグを付けられる(Blogger) HTMLモードでHTMLやCSSやJavaScriptなどのコーディングのタグ付けが可能になるのは普通にサイト作成のプレーンテキストの入力モードにはない機能として重宝される。 Bloggerではさらにプレーンテキストの作成モードが独特に動作するためにそれを止めて使わずに済ませられる後二つの利点がある。 一つは他のアプリで書いたか、または閲覧するサイトの文章を作成モードの入力画面にデバイスでコピー&ペーストすると元々のアプリか、またはサイトの文章のデザインが残ってしまう場合がある。 なのでブログの記事/追加ページの投稿毎の文字サイズやフォントを統一できなくなる恐れがあるんだ。 取り込まれた文章にspanタグのstyle属性(インラインCSS)で文字装飾のデザインが付くかも知れず、HTMLモードに切り替えるとコーディングが確認される。 サンプルのソースコード <span style="background-color: white; font-family: sans-serif; font-size: 16px;">コピー&ペーストの文章</span> 三つのデザインのbackground-colorとfont-familyとfont-size/背景色と字体(フォント)と文字サイズが他のアプリやサイトから引き継がれ得る。 HTMLモードへのコピー&ペーストでは他のアプリやサイトの文章のデザインが投稿に取り込まれることは、一切、ないので、投稿毎に文字装飾を統一するには安心していつも使える。 Bloggerの投稿のどちらのモードでも半角スペースがコピー&ペーストで数値実体参照の「 」と記載される場合があるのは変わらないんだ。半角スペースだから見えないし、HTMLモードでも入力画面に数値実体参照のマークアップは現れなくて投稿のソースコードを確認しないと分からない。 デザインに支障はないから大抵は構わないけれどもソースコードに紛れ込むと不具合の原因になり兼ねないので、色んなソースコードを扱うHTMLモードでは特にコピー&ペーストの半角スペースを用心するには越さない。 もう一つはブログの投稿の表示に殆ど影響しないからおよそ無視して構わないけど、とにかく作成モードにはHTMLの段落のpタグが使えないというサイト作成における文章構成の基本からすれば不都合に他ならない弱点がある。現時点、投稿のオプションの「プレビュー(HTML を解釈)」を使っても他のタグのように正常に動作しないし、ソースコードを確認すると一つも記載されないんだ。 追記:2020年9月からBloggerの管理画面が刷新されて段階のpタグが二つのモードで使えるようになり、途中でHTMLから作成に切り替えても消えなくなった。 見出し以外の通常の文章などのコンテンツには概して段落のpタグを<p>コンテンツ</p>のように記載するのがセマンティック(機械向け)に適正とされるので、不味いと感じる。Webサービスのシステムの問題らしくて世界中で昔から指摘されているのにBloggerには無理なのか、一向に修正されないんだ。 このことはGoogleなどの検索エンジンのブログの読み取り(クローラーという機械がやって来てコンテンツを把握する)にも全く影響しないとはかぎらないので、投稿に段落のpタグがないともしかしたらSEO(検索エンジン最適化)対策に反していて検索結果からのアクセスアップを多少とも阻害する要因になると不安視されもする。 HTMLモードだと段落のpタグを受け付けるからHTMLのマークアップを文章構成を踏まえてセマンティックに適正に行いたいか、またはSEO対策のアクセスアップを細かく細かく突き詰めたい場合には作成モードを使ってはならない。 注意点として投稿/編集の途中で作成モードに切り替えるだけでも打ち込んだ<p>と</p>が、全部、消えてしまうので、入力画面では最初から最後までHTMLモードだけを使ってやって行くと良いと思う。 段落のpタグを一つずつ手作業で打ち込むのは大変なので、HTML編集のアプリを使うのが簡単だ。コーディングの変換機能が付いていれば一発で仕上がったり、例えばパソコンのWindowsのOpen Live Writerは段落のpタグの自動変更が可能で使い易いらしい。 Open Live Writerを使えば、文字を打つだけで必要に応じて自動的にpタグを挿入してくれるので、SEO的に優しい記事が書きやすくなります。 Blogger勢に告ぐ!Open Live Writerが泣けるほど便利なので紹介していく|トーマスイッチ 僕がAndroidのスマホ/タブレットで愛用するWebMaster's HTML Editor Liteではコーディングの置き換え機能が楽に使える。前と後のコードを設定したら――改行の終わりと始まりに段落のpの終了タグと開始タグを重ねるようにする――必要な分のボタン/Replaceを押すだけだから相当に早い。 参考サイト<span><p>: 段落要素 BloggerのHTMLモードの六つのメニュー 入力画面の左上の六つのメニューの使い方について。 投稿の設定のオプションの構成モードの「HTML コードを表示」と「プレビュー(HTML を解釈)」はどちらでも結果は同じになる。 B(太字) <b></b> 太字の表示 太字のbタグが出て来るので、開始タグと終了タグの間に太字に表示したい文字を入れて使う。 HTMLで重要性を意味するのはstrongタグで、これも使うとデフォルトで太字のデザインになる。 bタグは重要性などのマークアップの特別な意味付けはなく、太字のデザインでコンテンツを目立たせるためにある。 デザインを変えるだけの場合はCSSの「font-weight:bold」を使うとコンテンツが太字になる。 参考サイト<b>: 注目付け要素<strong>: 強い重要性要素 I(イタリック) <i></i> イタリックの表示 イタリック/斜体の一種のiタグが出て来るので、開始タグと終了タグの間にイタリックに表示したい文字を入れて使う。 HTMLで強調を意味するのはemタグで、これも使うとデフォルトでイタリックのデザインになる。 iタグは強調などのマークアップの特別な意味付けはなく、イタリックの表示でコンテンツを目立たせるためにある。 デザインを変えるだけの場合はCSSの「font-style:italic」を使うとコンテンツがイタリックになる。 参考サイト<i><em>: 強調要素 ABC(取り消し線) <strike></strike> 取り消し線の表示 取り消し線のstrikeタグが出て来るけれどもHTMLとしてもう既に古びてしまっている。 視覚上の整形のみを目的とした <strike> 要素は、HTML 4 および XHTML 1 で非推奨となり、HTML5 では完全に廃止されています。「削除されたテキスト」というセマンティクスを示すには <del> 要素が適しています。それ以外の場合は <s> 要素を使用します。 <strike>|MDN|Mozilla Bloggerの公式テーマだと少なくともHTML5の設定で、それ以前のバージョンと互換性があるからstrikeタグを使ってもエラーにはならないし、取り消し線が表示されるけれども正式なのはdel(削除)タグかs(取り消し線)タグのどちらかになっている。 sタグはdelタグのように削除などのマークアップの意味付けがなくて中線のデザインのために使われる。CSSだとtext-decorationのline-throughを使って同じように表示できる。 参考サイト<del>: 削除文字列要素<s> リンク <a href="URL"></a> リンクの表示 ※ブログ名へのジャンプリンク。 ボタンを押すとポップアップで「URL を入力:」が表示される。リンク先のURLを入力して「OK」でリンクのaタグにhref属性で記載される。開始タグと終了タグの間にリンク名(アンカーテキスト)を記載するとリンクが使えるようになる。URLを入力するだけで、リンク名を記載しないと記事/追加ページには何も表示されなくてリンクは使えないから忘れないように注意を要する。 参考サイト<a>: アンカー要素 🖼️(画像) <div class="separator" style="clear: both; text-align: 位置取り;"><a href="画像URL(元のサイズ)" imageanchor="1"><img border="0" src="画像URL(選択されたサイズ)" width="選択されたサイズの横幅" height="選択されたサイズの縦幅" data-original-width="元のサイズの横幅" data-original-height="元のサイズの縦幅" /></a></div> Bloggerの画像投稿は画像のimgタグだけではなくて元のサイズの画像へのリンクのaタグが必ず付いていてさらに「画像の位置合わせ」がなし以外(左/中央揃え/右)の場合に領域のdivタグも付けられる。 2020年9月以降の画像のソースコード <div class="separator" style="clear: both;"><a href="画像URL(元のサイズ)" style="display: block; padding: 1em 0; text-align: 位置取り; "><img alt="" border="0" height="600" data-original-height="元のサイズの縦幅" data-original-width="元のサイズの横幅" src="画像URL(選択されたサイズ)"/></a></div> 画像に使われる三つのタグ、divとaとimgは変わらないけれども内容が少し変わり、位置取りの「配置」はdivではなくてaのデザインに記載される。 画像投稿のdivタグについて 位置取りを選択するとデザイン付きの親ボックスとしてdivタグが追加される。 style属性のtext-align(文書の整列)で位置取りが可能になって左寄せは「left」、中寄せは「center」、右寄せは「right」だ。 追記:2020年9月からdivタグのstyle属性はaタグに移動されてリンクを対象としてデザインが付けられるように変わった。 class属性のseparatorは主に2017年の公式テーマのContempoとSohoとEmporioとNotableで子要素のリンクのaタグとセットで画像の位置取りの補足(リンクのaタグの外側の余白を選択済みの寄せの反対側だけ空けて他の三方向は消す)のCSSの指定先に使われている。 style属性のclear(解除)のbothは前のコンテンツにfloat(浮遊)が左端/leftか右端/rightへ部分的に使われていた場合に画像が空いた方へ回り込んでしまうのを左右のどちらでも解除するためにある。 参考サイト<div>: コンテンツ分割要素 画像投稿のaタグについて 画像をクリック/タップした際に元のサイズの画像が見られるようにリンクが付けられる。アイコンやロゴなどでリンク先を画像以外に求める場合はhref属性の画像URLをサイトURLに置き換える。 imageanchor属性の1は主に2017年の公式テーマのContempoとSohoとEmporioとNotableで画像の余白を調節するために使われている。位置取りのdivタグのseparatorのclassとセットになって位置取りの補足を行ったり、それ自体ではstyle属性で、float(浮遊)がかけられた場合の位置取りの補足を行ったり、複数の画像を連続で載せた場合に二枚目以降の上の外側の余白を指定したりしている。 追記:2020年9月からstyle属性で「配置」の左と中央と右が「text-align」(文書の整列)の「left」と「center」と「right」で指定されるようになった。何も選ばない場合は中央の「center」の値が入る。その他、「display:block」でリンクを一行分(前後の文章などと並ばない)で扱う、「padding: 1em 0」でリンクの内側の余白を上下に一文字分と左右になしのデザインが指定されている。 参考サイト<a>: アンカー要素 画像投稿のimgタグについて HTMLでimgタグは閉じタグが不要な空要素だけど、XHTML(XMLのHTMLへ互換性を持たせたもの)など、もしも開始タグに収めるならば<img />という仕方で、最後に半角スラッシュを置く。 Bloggerの画像投稿ではXHTMLのマークアップが自動的に取られるけれどもテンプレートの設定そのものはHTMLだから最後の半角スラッシュは消しても構わない。 テーマのHTML編集はXMLファイルで扱われて実際にHTMLを使いたい場合にはXHTMLへ書き換えないとエラーで保存できなくなる。しかし投稿のHTMLモードは正しくHTMLとしてXHTMLとどちらでも使える。 src属性の値は選択された画像サイズの個別の画像URLが使われる。 border属性の「0」は画像に枠線を付けないことを指定する。 width属性とheight属性は画像の横と縦の長さを示す。 data-original-width属性とdata-original-height属性はBloggerの独自の記載だけれども画像の元のサイズの横と縦の長さを示す。そららは画像に直接は影響しないけれどもCSSやJavaScriptでデザインを操作するときに使うこともできる。 Bloggerの画像URLのパターン https://番号.bp.blogspot.com/画像コード/画像サイズ/ファイル名.拡張子 番号1から4までの何れかで、画像が格納されるBloggerのサーバー(blogspot.com)内のサブドメインのサイトアドレスを示す。画像コード画像毎に一意で、七十七文字の半角の英数字とスラッシュ(/)と半角ハイフン(-)の記号の組み合わせを取る。画像サイズ選択された画像サイズの横幅(px単位)の先頭に「s」を付けて五種類で記載される。小:s200中:s320大:s400特大:s640元のサイズ:s1600※元のサイズだけは画像の最大幅を示していて横幅1600pxまでしか取得できない。実際に取得される元のサイズがもっと小さい画像でも元のサイズの画像URLは全て「s1600」として扱われる。ファイル名BloggerかGoogleフォトなどの投稿可能なGoogleアカウント(アルバムアーカイブ)に関連したサーバーにアップロードした時点の画像のファイル名を示す。拡張子画像のファイル形式で、現在はjpeg(jpg)かpngかgifが使える。 border属性の0は画像の枠線を消す。殆どのブラウザでは画像の枠線は付かないのが初期値だから消しても変わらないかも知れない。HTML5ではboder属性は非推奨なので、現行のBloggerブログで画像の枠線を消すにはCSSの「border:none」を使うべきだ。 取得する画像サイズで元のサイズ以外の小か中か大か特大を選んだ場合は実際に表示するサイズの横幅のwidth属性と縦幅のheight属性が追加される。 data-original-width属性とdata-original-height属性は元のサイズの画像のそれぞれに横幅と縦幅を示していてテンプレートのJavaScriptで画像の加工や差し替えなどに使われる場合がある。 参考サイト<img>: 埋め込み画像要素 説明とプロパティを追加する 作成モードでは位置取りと画像サイズに加えてさらに説明とプロパティのカスタマイズが可能なので、HTMLモードでも同じように記載する方法を取り上げる。 画像に説明を追加する方法 画像の直後に文章を載せれば説明の表示は同じだけれども作成モードでtable(表)タグが使われているので、専用のHTMLのマークアップを考えてみる。 tableタグを画像の説明に使うのはHTMLとして古いから止める。表を作りたいわけではないし、一般的にいって画像と説明文の組み合わせにtableタグが使われるのは他の仕方でデザインが付けられないためだ。公式テーマで対応済みのHTML5からすると図表のためのfigureタグが新しく用意されていて説明にもfigcaptionタグが用意されている。画像を含めて図表のコンテンツに適したマークアップが可能だから使いたい。 <div> <figure> <a> <img> </a> <figcaption> 説明文 </figcaption> </figure> </div> 画像投稿に必要なタグ付けの順番を示す。先ずは図表のfigureタグで画像を入れたリンクを囲む。その中で図表の説明のfigcaptionタグを画像を入れたリンクの後に記載すると画像に続いて説明文が表示される。位置取りを指定した場合には親ボックスのdivが付くので、その中にfigureタグを記載しておけば囲んでいる画像と説明文にも反映してくれる。 注意点としてfigureタグはデフォルトで外側の左右に大きめの余白(初期値は40px)が付いて囲んだコンテンツが通常よりも小さく表示されるデザインなので、もっと小さなコンテンツならば何も変わらないけれどもバランスを崩さないように元に戻すにはCSSで消さなくてはなくてはならない。 figure {margin-left:0;margin-right:0;} 左右のmarginを0にすればfigureタグで外側に左右の余白は付かなくなる。 参考サイト<figure><figcaption><table>: 表要素 画像にプロパティを追加する方法 二つの属性、titleとaltが使える。前者はパソコンなどのツールチップ(カーソルが重なると出て来る内容)で、後者は画像が表示されない場合の代替(どんな画像かの説明)だ。マークアップは何れも画像のimgタグに記載する。 <img title="画像のツールチップ" alt="画像の説明文" /> プロパティは使わなくても構わないし、画像の表示に支障はないけど、ただし検索エンジンの画像の読み取りに関して特にalt属性は影響を与えるからSEO対策でアクセスアップを望むならば欠かせない。 Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。 Google 画像検索に関するおすすめの方法|Search Console ヘルプ|Google Google検索のクローラーがサイトの「画像のテーマ」を理解できるかどうかがサイト評価を左右するので、サイト解析に間違いなく使われるalt属性の「代替テキスト」でどんな画像かを伝えるのが大事なんだ。 “(区分け引用) <blockquote></blockquote> 区分け引用の表示 区分け引用のblockquoteタグが出て来るので、開始タグと終了タグの間に区分け引用に表示したいコンテンツを入れて使う。 他の前後のコンテンツは除外されて横並びには表示されない。 一般的に区分け引用は段落なので、段落のpタグも入れて記載される。 <blockquote> <p> 区分け引用のコンテンツ </p> </blockquote> ただしBloggerでは投稿の段落のpタグが非常に使い辛くてHTMLモードでのみ可能だけれどもどんなところで使う場合でも途中で作成モードに切り替えて消さないように注意しなくてはならない。 HTMLの引用はblockquoteタグではなく、段落内の単語や文章などの区分けしない場合はqタグ、作品名や商品名などにはciteタグも使える。 参考サイト<blockquote>: ブロック引用要素<q>: 行内引用要素<cite>: 引用元要素 HTMLのその他の良く使われるタグ Bloggerの作成モードで出て来るのとBlogger以外でも良く使われるHTMLのタグを取り上げる。 見出し 見出し <h2></h2> h2の表示 小見出し <h3></h3> h3の表示 準見出し <h4></h4> h4の表示 HTMLの見出しタグはh1からh6の六種類が使える。デフォルトのデザインはどれも太字で、見出しの番号が先とコンテンツへの意味合いが広いほどに文字サイズが大きくなる。Bloggerでは準見出しと呼ばれるh4が通常の文字サイズと同じになるのが普通だ。 見出しの使い方は文章構成でもコンテンツのアウトライン(外形)に関係している。 大見出しのh1はテーマを明確化するためにページ毎に一つしか使わないのが望ましい。Bloggerの公式テーマならばブログ名で、オリジナルテーマでは公式テーマと同じか記事名にも使われる場合があるかも知れない。記事の本文に使われる見出しは記事名の見出しを追い越さない程度に止めると内容の纏まりを伝え易くなる。公式テーマは記事名の見出しがh3なので、作成モードではh2から使えるけれども本来ならば大きくてもh3以下を使う。オリジナルテーマで記事名がh1の場合はサイトに一つしか使わないのが望ましいので、h2以下を使うのが適しているだろう。 参考サイトh1 要素h2 要素h3 要素h4 要素h5 要素h6 要素HTML テキストの基礎 U(下線) <u></u> 下線の表示 コンテンツの意味合いが通常とは変わるようなところ(正しい表記に対して誤った表記を示す場合など)で注意を引くために使われる。 デザインを付けるだけならばCSSで「text-decoration:underline」を指定すると下線を引ける。 その他、追加されたコンテンツを示すinsタグやBloggerの公式テーマでは消されているけれどもリンクのaタグを使ってもデフォルトで下線が引かれるデザインになる。 参考サイト<u>: 非言語的注釈 (下線) 要素<ins><a>: アンカー要素 リスト 番号付きリスト <ol> <li><li> <li><li> <li><li> </ol> 番号付きのリストの表示番号付きのリストの表示番号付きのリストの表示 番号なしリスト <ul> <li><li> <li><li> <li><li> </ul> 番号なしリストの表示番号なしリストの表示番号なしリストの表示 どちらもリスト項目に一つ以上のliタグを使うのは同じで、リスト項目の全体を番号付きならばolタグ、番号なしならばulタグで囲む。 さらに作成モードで出て来ないけれどもサイト作成で良く使われるタグを取り上げる。 リスト項目のliタグは他のリストなどの タグを入れ子にして表示できる。 <ol> <li><li> <li><li> <li><li> <ul> <li><li> <li><li> <li><li> </ul> </ol> 番号付きのリストの表示番号付きのリストの表示番号付きのリストの表示番号なしリストの表示番号なしリストの表示番号なしリストの表示 リスト項目に他のリストを追加したりすると繋ぎ目が離れる場合もある。くっ付けるには内側のコンテンツの上の外側の余白が影響しているからCSSの「margin-top:0」を指定して消す。 参考サイト<ol>: 順序付きリスト要素<ul;: 順序なしリスト要素<li> 改行 <br> 改行 の 表示 画像のimgタグと同様にHTMLで終了タグは不要な空要素だけれどもXHTMLなどで開始タグに収める場合は最後に半角スラッシュを追加して<br/>と記載する。 brタグは一つのコンテンツを二つの行に分けて表示する。連続して入力すると行間を広げれられる。 HTMLの意味付けとして段落などのコンテンツの纏まりを示さないので、どんなに切り分けても全ては一つの内容上の繋がりを持つままになる。 Bloggerの投稿では右端の投稿の設定のオプション(歯車)の改行で動作が変わる。 <br> タグを使用改行タグを記載しないとコンテンツは改行できない。Enter キーを押して改行入力画面の改行がそのままでブログに反映される。 HTMLモードの投稿の改行は「Enter キーを押して改行」を選択済みでbrタグを記載すると必要以上に行間が広がるから注意しなくてはならない。 参考サイト<br>: 改行要素 罫線 <hr> ※罫線の表示。 画像のimgタグと同様にHTMLで終了タグは不要な空要素だけれどもXHTMLなどで開始タグに収める場合は最後に半角スラッシュを追加して<hr />と記載する。 hrタグは文章の段落を変える程度の複数のコンテンツの区分けを意味する。 デザインで水平線を引く場合はCSSのborder(枠線)を使ってコンテンツを囲んだ領域のdivタグや段落のpタグなどの枠線として「border-bottom:4px #c0c0c0 solid」のように記載する。 参考サイト<hr>: 主題分割 (水平線) 要素 マーク <mark></mark> マークの表示 コンテンツを他と区別して目立たせる場合に役立つ。 参考サイト<mark>: 文字列マーク要素 定義 <dl> <dt></dt> <dd></dd> </dl> 定義の命題の表示 定義の定義文の表示 最大で三種類のタグを組み合わせる。外側にdlタグを使う。dtタグで定義する命題、または説明する対象を記載する。次いでddタグで定義文、または説明文を記載する。dtタグとddタグのセットは何個でもdlタグの中に入れられる。dtタグは必ずしも必要ないので、dlとddタグの二種類だけでも構わない。さらにdtタグとddタグはどちらも一つずつではなくて複数を連続して使える。 dtタグなし <dl> <dd></dd> </dl> 連続のdtタグ <dl> <dt></dt> <dt></dt> <dd></dd> </dl> 連続のddタグ <dl> <dt></dt> <dd></dd> <dd></dd> </dl> 命題のdtタグと定義文のddタグはどちらも他の定義などのタグを入れ子にして表示できる。 <dl> <dt></dt> <dd> <dl> <dt></dt> <dd></dd> </dl> </dd> </dl> 定義の命題の表示 定義の命題の表示 定義の定義文の表示 定義の命題や定義文に他の定義を追加したりすると繋ぎ目が離れる場合もある。くっ付けるには内側のコンテンツの上の外側の余白が影響しているからCSSの「margin-top:0」を指定して消す。 参考サイト<dl>: 説明リスト要素<dt>: 説明用語要素<dd>: 詳細説明要素 プリ <pre></pre> プリの表示 コンテンツのホワイトスペース(空白)や改行をそのままで表示する。いい換えると入力画面と同様の結果をブラウザでも得させる。範囲内にHTMLやCSSやJavaScriptなどのコーディングを行うのも可能だ。 主にソースコードを載せる際にコードを示すcodeタグと一緒に使われる。 <pre><code></code></pre> プリとコードの表示 ※ソースコードの記号はHTMLならば実体参照などの所定の書式へエスケープしないとブラウザに読み込まれて文字としては表示できない。 preタグもcodeタグもデフォルトの字体が等幅フォント(monospace:モノスペース/どの文字の幅も等しくなる字体)で、細かい文字が密集したソースコードに使うと見易くて適している。 デザインでは文章の折り返しが付かなくてカラムを突き抜ける場合があり得るので、CSSでスクロールボックスに入れたり、文章の折り返しを付けたりすると良いと思う。 スクロールボックス pre {overflow:scroll;} CSSのoverflow要素はコンテンツがはみ出した場合の処理を指定する。スクロールボックスは「scroll」になる。他にも「auto」がブラウザに任せるけれどもはみ出しに対してはスクロールボックスが作られる。 文章の折り返し pre {white-space:pre-wrap;} CSSのwhite-space要素は空白と改行と折り返しを指定できてpreタグのデザインに最も適している。全てをブラウザに反映させるのが「pre-wrap」になる。連続する半角スペース( )を無効にする(一つずつしか表示しない)には「pre-line」を指定する。 参考サイト<pre>: 整形済みテキスト要素<code>: 行内コード要素 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
生島浩の5:55の心の目に光り輝く尊さ 日本の ホキ美術館 は日本人の画家の写真のように細密に描かれた写実絵画を中心的に所蔵している。その中で、絵を印刷したポストカードの売り上げがホキ美術館の設立当初から一位で、常に最高の人気を誇るのが生島浩の 5:55 (五時五十五分)といわれる。僕も一見して忽ち引き付けられる物凄い...
コメント