ブログに他のサイトを貼る方法 [HTML]
他のサイトを貼る場合、div構文でブロックの窓を作り、その中にiframe構文で、他のサイトを呼び出す。
［１行目］
1行目のdiv構文にあるpositionは、このdivで作られた箱の親の位置に対するこの箱の位置を指定する方法の指定である。absoluteに指定した場合は、移動させる場合に親の基点からの位置で指定する。relativeだと、本来あるべき位置に対しての移動量を指定する。absolute, relative以外にfixedが指定できるが、fixedは移動しない、例えばスクロールしても同じ位置に表示させる場合に用いる。
次にwidthがあるが、今回は表示枠の変更に対応できるように比率表示となっている。
高さについては、heightで指定できるのだが、今回は表示する対象がサイトなので、高さ方向の拠り所がない。そこで、paddingを利用して、高さを指定している。
paddingとは余白を指定している。paddingの引数として、calcによる計算値と0が二つの3つの引数を指定していることになる。paddingの引数が３つの場合は、最初の引数が上余白、２番目の引数が左右余白、３番目の引数が下余白を指定する。従って、ここでは、上余白が計算値、左右と下には余白は0を指定している。
本来はpaddingは余白を示すが、ここでは、divで作る箱の高さを指定するために利用している。
paddingの中にあるcalc()は記載された計算式を数値とする関数だ。
今回の表示は幅560px、高さ315pxを標準としているので、その比率で示している。
［２行目］
irame構文でサイトを表示する。
今回準備した表示枠の幅は560pxだが、表示するサイトは560pxとは限らない。そのまま嵌め込むと、幅が560pxより大きいサイト(サンプルでは1200px)では画面が切れるし、小さいサイトだと余白ができる。
そこで、表示するサイトを拡大か縮小をかけて、準備している表示枠に合わせる。
余白ができても、余白を表示させないようにするために、positionをabsoluteとして、枠内での位置を左上に指定している。
もし、paddingで余白を確保できていないと、表示上はiframeで表示したサイトの裏に、継続する文章が隠れることになる。
拡大、縮小をかける関数がtransform:scale()だが、各ブラウザに対応する記述をしている。
表示するサイトに応じて、1200という数値は、表示したいサイトで幅を調べて指定する。サイトの幅を調べるにはブラウザの開発者モードに入り、そのサイトの画像の幅やバナーの幅を調べる他ないようだ。
<div style=" position:relative;width:100%;padding:calc(315 / 560 * 100%) 0 0;overflow:visible; ">
<iframe style="-moz-transform:scale(calc(560 / 1200));-webkit-transform:scale(calc(560 / 1200));-o-transform:scale(calc(560 / 1200));-ms-transform:scale(calc(560 / 1200));transform:scale(calc(560 / 1200));transform-origin:0 0;top:0;left:0;width:calc(1200 / 5.6 * 1%);height:calc(1250 / 5.6 * 1%);overflow:hidden;position:absolute;" src=" https://xxx.xxx.xx.jp">
</iframe></div>［１行目］
1行目のdiv構文にあるpositionは、このdivで作られた箱の親の位置に対するこの箱の位置を指定する方法の指定である。absoluteに指定した場合は、移動させる場合に親の基点からの位置で指定する。relativeだと、本来あるべき位置に対しての移動量を指定する。absolute, relative以外にfixedが指定できるが、fixedは移動しない、例えばスクロールしても同じ位置に表示させる場合に用いる。
次にwidthがあるが、今回は表示枠の変更に対応できるように比率表示となっている。
高さについては、heightで指定できるのだが、今回は表示する対象がサイトなので、高さ方向の拠り所がない。そこで、paddingを利用して、高さを指定している。
paddingとは余白を指定している。paddingの引数として、calcによる計算値と0が二つの3つの引数を指定していることになる。paddingの引数が３つの場合は、最初の引数が上余白、２番目の引数が左右余白、３番目の引数が下余白を指定する。従って、ここでは、上余白が計算値、左右と下には余白は0を指定している。
本来はpaddingは余白を示すが、ここでは、divで作る箱の高さを指定するために利用している。
paddingの中にあるcalc()は記載された計算式を数値とする関数だ。
今回の表示は幅560px、高さ315pxを標準としているので、その比率で示している。
［２行目］
irame構文でサイトを表示する。
今回準備した表示枠の幅は560pxだが、表示するサイトは560pxとは限らない。そのまま嵌め込むと、幅が560pxより大きいサイト(サンプルでは1200px)では画面が切れるし、小さいサイトだと余白ができる。
そこで、表示するサイトを拡大か縮小をかけて、準備している表示枠に合わせる。
余白ができても、余白を表示させないようにするために、positionをabsoluteとして、枠内での位置を左上に指定している。
もし、paddingで余白を確保できていないと、表示上はiframeで表示したサイトの裏に、継続する文章が隠れることになる。
拡大、縮小をかける関数がtransform:scale()だが、各ブラウザに対応する記述をしている。
表示するサイトに応じて、1200という数値は、表示したいサイトで幅を調べて指定する。サイトの幅を調べるにはブラウザの開発者モードに入り、そのサイトの画像の幅やバナーの幅を調べる他ないようだ。
highlight.jsの行番号 [HTML]
highlight.js には、行番号を表示する機能がない。
そのため、下記サイトを参考にして、行番号を追加した。
highlight.jsに行番号を追加する方法
この行番号を正しく表示するために、
・書き出しにdiv構文を追加する。
・表示したいソースは
という処理が必要である。
例
そのため、下記サイトを参考にして、行番号を追加した。
highlight.jsに行番号を追加する方法
この行番号を正しく表示するために、
・書き出しにdiv構文を追加する。
・表示したいソースは
に改行なしで続け、ソース最終行の後ろにを続ける。という処理が必要である。
例
<div style="position:relative;"><pre><code class='html'>コード開始
途中は改行可
コード最終部</code></pre></div>ブログにHTMLを表示する方法を修正 [HTML]
よく見たら、いつのまにか、HTMLを表示するプログラムSyntaxHighlghterが正常に動作していないようなので、highlight.js に乗り換えた。
具体的には、テンプレートページに下記を記入。
記事ページには、下記のように記入すれば表示される。
'html'の部分は言語に合わせて書き換える。
HTMLで意味を持つ以下の記号は文字参照で書く必要がある。
& (&)
" (")
' (')
< (<)
> (>)
詳細はこちら。
これまでに使っていた記事も書き換えなければ。。。
具体的には、テンプレートページに下記を記入。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js">
</script>
<script>
hljs.initHighlightingOnLoad();
</script>記事ページには、下記のように記入すれば表示される。
'html'の部分は言語に合わせて書き換える。
<pre>
<code class='html'>
htmlのソースコード
</code>
</pre>HTMLで意味を持つ以下の記号は文字参照で書く必要がある。
& (&)
" (")
' (')
< (<)
> (>)
詳細はこちら。
これまでに使っていた記事も書き換えなければ。。。
SSブログの記事サムネイル [HTML]
SSブログは記事に写真を使うと、そのうちの一枚を記事のサムネイルに採用して、記事選択の画面に表示する。
どの写真を採用するかは、決められないようだ。
記事で写真を使っていない場合は、サムネイルはブランクになる。
写真を設定したい場合は、記事の中に、div構文を使って写真を貼り、divにhiddenを書き加える。
例えば下記のようなタグを書くと、記事には写真が表示されないが、サムネイルには表示されるようになる。
“sample”と書いた部分に実際のフォルダ名やファイル名を記載する。
どの写真を採用するかは、決められないようだ。
記事で写真を使っていない場合は、サムネイルはブランクになる。
写真を設定したい場合は、記事の中に、div構文を使って写真を貼り、divにhiddenを書き加える。
例えば下記のようなタグを書くと、記事には写真が表示されないが、サムネイルには表示されるようになる。
“sample”と書いた部分に実際のフォルダ名やファイル名を記載する。
<div hidden>
<img src="sample.jpeg" width="300" height="169" border="0" align="" alt="sample.jpeg" />
</div>
so-netブログにhtmlタグを書く場合 [HTML]
so-netブログにhtmlタグを文中に使う場合は、注意が必要ということがわかった。
「＜」という記号を半角で書くと、タグの一部と解釈してしまうらしい。
対策として、文字コード「＆lt；」と半角で書けば良い。
「＜」という記号を半角で書くと、タグの一部と解釈してしまうらしい。
対策として、文字コード「＆lt；」と半角で書けば良い。
リンクと埋め込み [HTML]
So-netブログにGoogle MapやYoutubeを表示させる場合、「リンク」と「埋め込み」の２種類の方法がある。
「リンク」というのは、そこをクリックする音、新しい画面に移動し、その画面に地図や動画を表示させる方法だ。
「埋め込み」というのは、記事の中に小さい窓ができて、そこに地図や動画を表示させる方法だ。
Google MapやYoutubeで実際にブログに表示させたい画面を開き、「共有」をクリックする。
「リンク」にしたい場合は、「共有」をクリックした後、表示されたアドレスをコピーする「コピー」ボタンが出るので、そのアドレスをコピーし、自分のブログ内で、
<a href>構文を書き、アドレスを貼り付けて指定する。
「埋め込み」にしたい場合は、「埋め込み」というボタンを押すと、埋め込み用のタグが表示されるので、それをコピーし、自分のブログに貼り付ける。画面幅などは指定できそうだ。
「リンク」というのは、そこをクリックする音、新しい画面に移動し、その画面に地図や動画を表示させる方法だ。
「埋め込み」というのは、記事の中に小さい窓ができて、そこに地図や動画を表示させる方法だ。
Google MapやYoutubeで実際にブログに表示させたい画面を開き、「共有」をクリックする。
「リンク」にしたい場合は、「共有」をクリックした後、表示されたアドレスをコピーする「コピー」ボタンが出るので、そのアドレスをコピーし、自分のブログ内で、
<a href>構文を書き、アドレスを貼り付けて指定する。
「埋め込み」にしたい場合は、「埋め込み」というボタンを押すと、埋め込み用のタグが表示されるので、それをコピーし、自分のブログに貼り付ける。画面幅などは指定できそうだ。
年齢計算プログラムの更新 [HTML]
前に作ったプログラムだと、学歴が関連する若い頃の年しか分からないので、超高齢に至るまでの人生の節目が分かるようにした。
まず追加したのは、厄年。女性は19、33、37、61。男性は25、42、61。いずれも数え年。
恥ずかしながら、宗派などで、厄年や数え方が違うかどうかは知らないので、知ってる方は教えて下さい。
それと、孔子が論語で言った人生の節目？数え年らしい。
子曰、吾十有五而志乎學、三十而立、四十而不惑、五十而知天命、六十而耳順、七十而從心所欲、不踰矩。
漢文で習った気がする。
15歳は除くが。
あとは長寿のお祝い。こちらも数え年。
還暦…61歳（満60歳）
古希（古稀）…70歳
傘寿…80歳
米寿…88歳
卆寿…90歳
白寿…99歳
紀寿または百寿(ももじゅ)…100歳
108歳の茶寿や111歳の皇寿、120歳の大還暦、250歳で天寿も入れた。役満みたいだが。
250歳も生きるとなると、最後の厄年が60歳だから、その4倍は生きられるのか。
プログラムを作ると、数え年と満年齢の違いも分かった。
数え年は学校の1年生、2年生みたいな数え方に近いが、区切りが1月1日。
生まれた日から１歳が始まり、その年の大晦日までと1歳だけは365日より短い。
2歳は最初のお正月1/1からその年の大晦日12/31まで、と数えていく。
そのため、誕生日の日に歳を一つとると、その歳より一つ加算したのが数え年。誕生日前だと２歳足すことになる。
うまく動かない時や間違っている場合は、コメント下さい。
まず追加したのは、厄年。女性は19、33、37、61。男性は25、42、61。いずれも数え年。
恥ずかしながら、宗派などで、厄年や数え方が違うかどうかは知らないので、知ってる方は教えて下さい。
それと、孔子が論語で言った人生の節目？数え年らしい。
子曰、吾十有五而志乎學、三十而立、四十而不惑、五十而知天命、六十而耳順、七十而從心所欲、不踰矩。
漢文で習った気がする。
15歳は除くが。
あとは長寿のお祝い。こちらも数え年。
還暦…61歳（満60歳）
古希（古稀）…70歳
傘寿…80歳
米寿…88歳
卆寿…90歳
白寿…99歳
紀寿または百寿(ももじゅ)…100歳
108歳の茶寿や111歳の皇寿、120歳の大還暦、250歳で天寿も入れた。役満みたいだが。
250歳も生きるとなると、最後の厄年が60歳だから、その4倍は生きられるのか。
プログラムを作ると、数え年と満年齢の違いも分かった。
数え年は学校の1年生、2年生みたいな数え方に近いが、区切りが1月1日。
生まれた日から１歳が始まり、その年の大晦日までと1歳だけは365日より短い。
2歳は最初のお正月1/1からその年の大晦日12/31まで、と数えていく。
そのため、誕生日の日に歳を一つとると、その歳より一つ加算したのが数え年。誕生日前だと２歳足すことになる。
うまく動かない時や間違っている場合は、コメント下さい。
タグ：歳
