前の10件 | -
ブログに他のサイトを貼る方法 [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>
Apple GarageBand とか [Mac iPhone iPad]
音楽の為の便利なツールが出ている。
けど、使い方を覚えたり、使っているうちに、投げ出して、実際の楽器の方がよっぽど早いと思ってしまう。
メロディに、自動的にコードが付き出したら、感性を磨く機会を逸することになる気がする。
けど、使い方を覚えたり、使っているうちに、投げ出して、実際の楽器の方がよっぽど早いと思ってしまう。
メロディに、自動的にコードが付き出したら、感性を磨く機会を逸することになる気がする。
エクセルで、ワークシート名を取得 [Excel]
エクセルで、ワークシート名を取得したい。
そんな時は、この式をセルに書くと、ワークシート名を出せる。
=MID(CELL("filename",A1),FIND("]",CELL("filename",A1))+1,LEN(CELL("filename",A1))-FIND("]",CELL("filename",A1)))
このままコピペして使える。
そんな時は、この式をセルに書くと、ワークシート名を出せる。
=MID(CELL("filename",A1),FIND("]",CELL("filename",A1))+1,LEN(CELL("filename",A1))-FIND("]",CELL("filename",A1)))
このままコピペして使える。
so-netブログにhtmlタグを書く場合 [HTML]
so-netブログにhtmlタグを文中に使う場合は、注意が必要ということがわかった。
「＜」という記号を半角で書くと、タグの一部と解釈してしまうらしい。
対策として、文字コード「＆lt；」と半角で書けば良い。
「＜」という記号を半角で書くと、タグの一部と解釈してしまうらしい。
対策として、文字コード「＆lt；」と半角で書けば良い。
Facebookページのメッセンジャーボタン [Facebook]
Facebookページでメッセンジャーのボタンを非表示にするには、PCで操作する場合は、「設定」→「一般」→「メッセージ」でボタンの削除にすればよい。
前の10件 | -
