2019年10月02日

swf2jsを使って表示したFlashがスマホ版で、はみ出さないようにする

swf2jsを使ってFlashをブログで表示する方法(概要と準備編)の最後に、さっちゃんの部屋 さんからお借りしたFlashを表示していますが、Flashを元の大きさで表示すると、スマートホン版で、はみ出してしまうので、スマートホンで、はみ出さないで表示できる大きさに縮小して設置しました。
そうすると、スマートホンで見るとちょうどいい大きさで表示されますが、パソコンでは小さく表示させているので、少し残念です。


元の大きさで表示すると、スマートホンでは ↓ こんな感じになり、画面から、はみ出してしまいます。
Screenshot_2019-09-26-20-24-51.png


Adobe Flash Player を使わず、swf2jsを使ってFlashをブログで表示する方法は、以下の記事を参考にしてください。
swf2jsを使ってFlashをブログで表示する方法(概要と準備編)
swf2jsを使ってFlashをブログで表示する方法(FC2ブログ編)
swf2jsを使ってFlashをブログで表示する方法(ファンブログ編)
swf2jsを使ってFlashをブログで表示する方法(SeeSaaブログ編)


今回は、パソコン版では元の大きさで表示して、スマホ版では画面の幅いっぱいに収まるように表示してみます。
ただし、私はHTMLやCSSの知識がイマイチなので、正しいやり方かどうかは怪しいです。
FC2ブログでのやり方で説明しますが、他のブログでも同じようにできると思います。


やり方は、使っているテンプレートがレスポンシブか、そうじゃないかで2通りになります。
レスポンシブというのは、スマートホンもパソコンも同じテンプレートで表示するもので、表示するデバイスの解像度によって、文字や画像が自動的に収まるように縮小されるものです。


使っているテンプレートがレスポンシブかどうかの確認


使っているテンプレートを選ぶときに、説明に「レスポンシブ」と書いてあればレスポンシブということになります。
テンプレートを選んだのが、ずいぶん前なのでよく分からないという人は、レスポンシブの場合は、スマートホン版の表示設定が「無効にする」になっているはずなので、そこで確認できると思います。


1)管理画面で[設定]の中の[環境設定]を開きます。
SC190927103053.png


2)[ブログの設定]の中の[スマホ版の表示設定]を開きます。
SC190927103340.png


3)「スマートホン版の表示設定」を見ます。
「無効にする」になっていればレスポンシブ、「有効にする」になっていればレスポンシブじゃないということになります。
SC190927103200.png


テンプレートがレスポンシブの場合のやり方


ブログ記事に書いた、Flashを表示するコードの最後の行に「max-width: 100%;」を書き加えます。

<script type="text/javascript" src="(ここに swf2js.js のURLを入れる)"></script>
<script type="text/javascript">
swf2js.load("(ここに swf ファイルのURLを入れる)", {tagId: "test1", quality: "high"});
</script>
<div id="test1" style="width: 540px; height: 380px; max-width: 100%;"></div>


以上です。


テンプレートがレスポンシブではない場合のやり方


9月28日追記
以下、スタイルシート(CSS)を使ったやり方を書きましたが、上で書いた「max-width: 100%;」を書き加える方法で出来そうです。
なので、レスポンシブかどうかにかかわらず、上に書いた方法で良さそうです。

スマートホン版のテンプレートのスタイルシート(CSS)に、スマートホンで表示する場合の設定を書き加え、ブログ記事に書いたFlashを表示するコードに、スタイルシートを適用するためのコードを加えるとういうやり方になります。


1)管理画面の[設定]の中の[テンプレートの設定]を開きます。
Snap190926210359.png


2)スマートホン用の[テンプレート管理]を開きます。
もし、スマートホン用テンプレートを適用していなかったら、好きなテンプレートを選んで適用しておいてください。
Snap190926210530.png


3)「スタイルシート編集」で、一番最後に以下のコードを追加して、下の[更新]ボタンをクリックします。
「sumahosyukuso」の部分は好きな文字列に変えてもいいですが、他のCSSと重複しないものにしてください。

/* ▼ スマホ版縮小 ▼ */
.sumahosyukuso{
max-width: 100%;
height: auto
}
/* ▲ スマホ版縮小 ▲ */

Snap190926210657.png


4)ブログ記事に書いた、Flashを表示するコードの最後の行に「class="sumahosyukuso"」を書き加えます。
「sumahosyukuso」の部分が、3)で設定したCSSと同じ文字列になります。

<script type="text/javascript" src="(ここに swf2js.js のURLを入れる)"></script>
<script type="text/javascript">
swf2js.load("(ここに swf ファイルのURLを入れる)", {tagId: "test1", quality: "high"});
</script>
<div id="test1" style="width: 540px; height: 380px;" class="sumahosyukuso"></div>


以上です。


これで、パソコンで見ると元の大きさで表示され、スマートホンで見ると画面の幅に収まった大きさで表示されるはずです。
Screenshot_2019-09-26-20-23-34.png



にほんブログ村 IT技術ブログ フリーソフトへ

2019年09月24日

swf2jsを使ってFlashをブログで表示する方法(SeeSaaブログ編)

SeeSaaブログは、JavaScriptとFlash(swfファイル)ともに、そのままでアップロードできる仕様になっていますが、記事設定などで少し工夫が必要です。


swf2jsを使ってFlashをブログで表示する方法の概要と、swf2jsのダウンロード方法などの事前準備などについては、下の記事 ↓ を参照してください。
 swf2jsを使ってFlashをブログで表示する方法(概要と準備編)


別の記事で、FC2ブログ、ファンブログでのやり方も書いていますので、参考にしてみてください。
swf2jsを使ってFlashをブログで表示する方法(FC2ブログ編)
swf2jsを使ってFlashをブログで表示する方法(ファンブログ編)


swf2jsをSeeSaaブログにアップロードする


まずは、Flashを表示するためのプログラム swf2js.js を、SeeSaaブログにアップロードします。


1)SeeSaaブログの上部メニューの中の[ファイルマネージャ]をクリックします。
Snap190922211707.png


2)「クリック、もしくはここにファイルをドロップ」のところで、言葉のとおり、クリックして swf2js.js を指定するか、swf2js.js をドラッグ&ドロップします。
Snap190922212245.png


3)そのまま少し待つとアップロードが完了し、下部のファイル一覧に swf2js.js が表示されます。
Snap190922212634.png


以上で、swf2js のアップロード完了です。


Flash(swfファイル)をSeeSaaブログにアップロードする


すでにブログ記事内にFlashを設置している場合は、swfファイルをアップロード済みですから、この作業は不要です。


新しくFlashを設置する場合は、上の swf2js のアップロード方法にならって、Flash(swfファイル)をアップロードします。


アップロードしたファイルのURLをメモ帳などにコピーしておく


ブログ記事に Flash を表示するためのコードには、上でアップロードした2つのファイル(swf2js.jsとswfファイル)のURLを入れることになります。
ここで、アップロードしたファイルのURLをメモ帳やテキストエディタなどに、コピーしておきます。


1)上の作業で、アップロード完了後に下部に表示されるファイルの一覧で、ファイルの右側の[HTML]ボタンをクリックすると、右側にコードが選択された状態で表示されます。
Snap190922214606.png


2)コードが表示されている枠内で右クリックからコピーするか、[Ctrl]+[C]キー同時押しでコピーして、メモ帳やテキストエディタなどに貼り付けます。
下の画像は、swf2js.jsと、swfファイルを、貼り付けた状態です。
Snap190922214229.png


3)コードの中のダブルクオーテーション( " )で挟まれた部分がURLなので、その部分をコピーして、下の行に貼り付けておきます。
Snap190922214306.png


4)URLの中の「 .up 」は不要なので、「 .up 」削除したURLを、下の行に貼り付けておきます。
Snap190922215402.png
「 .up 」が不要な理由は分かりませんが、「 .up 」を削除するとFlashが表示できるというのは、swf2jsの作者がswf2jsを公開している記事のコメント欄で書いてくれていました。


以上で、アップロードしたファイルのURLをメモ帳などにコピーする作業は完了です。


ブログ記事内にFlashを表示するためのコードを入れる


ブログ記事の編集画面で、[通常エディタ]ボタンをクリックしてHTML編集モードにし、下のようにコードを入れます。
Snap190923115234.png

<script type="text/javascript" src="(ここに swf2js.js のURLを入れる)"></script>
<script type="text/javascript">
swf2js.load("(ここに swf ファイルのURLを入れる)", {tagId: "test1", quality: "high"});
</script>
<div id="test1" style="width: 324px; height: 228px;"></div>

(ここに swf2js.js のURLを入れる)と(ここに swf ファイルのURLを入れる)のところには、上でメモ帳などにコピーしておいた swf2js.jsswf ファイル のURLをそれぞれ入れます。


「width: 324px; height: 228px;」のところの数値は、表示させるFlashの幅(width)と高さ(height)に置き換えてください。
幅(width)と高さ(height)は、パソコン版の表示で大きめにすると、スマートホンで表示したときにはみ出してしまう場合があります。
スマートホン側のCSSで縮小する方法もあると思いますが、とりあえずここでは、スマートホン側でもはみ出さない大きさにしてください。


スマートホン版で、はみ出さない方法を考えました。↓
 swf2jsを使って表示したFlashがスマホ版で、はみ出さないようにする。


SeeSaaブログは、記事の編集モードが通常エディタ(HTMLモード)とリッチテキストに分かれていて、通常エディタでコードを入れますが、コードを入れた後でリッチテキストに切り替えると、どういうわけかコードの最後の行が削除されてしまいます。
そのため、リッチテキストで文章を完成させたあとで、最後に通常エディタに切り替えてコードを入れたら、そのまま投稿するようにしてください。


以上で、ブログ記事内にFlashを表示するためのコードを入れる作業は完了です。


記事の詳細設定の変更


SeeSaaブログの場合、今回のやり方でFlashを表示する記事では、一部設定を変更する必要があります。
[記事の詳細設定]の[編集機能]の[URL補完]を、「補完しない」に変更してください。
Snap190923132300.png

PCプレビュー、スマホプレビューで、設置したFlashの動作が確認できます。


swf2jsを読み込むためのコードをHTMLに入れられない


上のFlashを表示するためのコードの1行目は、swf2jsを読み込むためのコードです。
この部分は、通常は記事内に入れずにHTMLに入れることもできますが、SeeSaaブログの場合は、スマートホン用のHTMLは編集できないので、swf2jsを読み込むためのコードも、各記事内に入れることになります。


画質を上げるオプション


高画質だと結構CPUとメモリを消費するため、標準では75%-80%程度縮小し、少し画質を下げているそうです。
上の説明で書いたコードは、高画質にするための「, quality: "high"」を加えているので、くっきり表示されます。
swf2js.js の作者によれば、「表示や動作を見ながら設定してもらえればと思います。」とのことです。
CPUとメモリの消費を抑えたい場合は、コードの中の「, quality: "high"」を削除してください。

<script type="text/javascript" src="(ここに swf2js.js のURLを入れる)"></script>
<script type="text/javascript">
swf2js.load("(ここに swf ファイルのURLを入れる)", {tagId: "test1", quality: "high"});
</script>
<div id="test1" style="width: 324px; height: 228px;"></div>



にほんブログ村 IT技術ブログ フリーソフトへ

2019年09月23日

swf2jsを使ってFlashをブログで表示する方法(ファンブログ編)

ファンブログは、JavaScriptはそのままアップロードできる仕様になっていますが、Flash(swfファイル)はそのままではアップロードできないので、少し工夫が必要でした。



swf2jsを使ってFlashをブログで表示する方法の概要と、swf2jsのダウンロード方法などの事前準備などについては、下の記事 ↓ を参照してください。
 swf2jsを使ってFlashをブログで表示する方法(概要と準備編)


別の記事で、FC2ブログ、SeeSaaブログでのやり方も書いていますので、参考にしてみてください。
swf2jsを使ってFlashをブログで表示する方法(FC2ブログ編)
swf2jsを使ってFlashをブログで表示する方法(SeeSaaブログ編)


swf2jsをファンブログにアップロードする


まずは、Flashを表示するためのプログラム swf2js.js を、ファンブログにアップロードします。


1)管理画面の上部メニュー[画像管理]を開いて、「クリック、もしくはここにファイルをドロップ」のところで、言葉のとおり、クリックして swf2js.js を指定するか、swf2js.js をドラッグ&ドロップします。
Snap190922101623.png


2)そのまま少し待つとアップロードが完了し、下部のファイル一覧に swf2js.js が表示されます。
Snap190921191850.png


以上で、swf2js のアップロード完了です。


Flash(swfファイル)をファンブログにアップロードする


ファンブログは、そのままではFlash(swfファイル)をアップロードできないので、エクスプローラでswfファイルの拡張子(swf)を編集して(js)にします。
拡張子を変えることで、ファンブログにアップロードできるJavaScriptのふりをしてアップロードするわけです。
中身が変わっているわけではないためか、これでもちゃんと表示できます。
Snap190921192023.png
  
Snap190922104520.png


あとは、上の swf2js のアップロード方法と同じように、拡張子を js に変えたFlash(swfファイル)をアップロードします。


アップロードしたファイルのURLをメモ帳などにコピーしておく


ブログ記事に Flash を表示するためのコードには、上でアップロードした2つのファイル(swf2js.jsと拡張子を js に変えたswfファイル)のURLを入れることになります。
ここで、アップロードしたファイルのURLをメモ帳やテキストエディタなどに、コピーしておきます。


1)上の作業で、アップロード完了後に下部に表示されるファイルの一覧で、ファイルの右側の[HTML]ボタンをクリックすると、右側にコードが選択された状態で表示されます。
Snap190922104755.png


2)コードが表示されている枠内で右クリックからコピーするか、[Ctrl]+[C]キー同時押しでコピーして、メモ帳やテキストエディタなどに貼り付けます。
下の画像は、swf2js.jsと、拡張子を js に変えたswfファイルを、貼り付けた状態です。
Snap190921192902.png


3)コードの中のダブルクオーテーション( " )で挟まれた部分がURLなので、その部分をコピーして、下の行に貼り付けておきます。
Snap190921192936.png


4)URLの前半が省略されているので、自分のブログのURLをコピーして、URLの前に貼り付けます。
Snap190921193029.png


以上で、アップロードしたファイルのURLをメモ帳などにコピーする作業は完了です。


ブログ記事内にFlashを表示するためのコードを入れる


ブログ記事の編集画面で、[HTML表示]ボタンをクリックしてHTML編集モードにし、下のようにコードを入れます。
Snap190922112200.png

<script type="text/javascript" src="(ここに swf2js.js のURLを入れる)"></script>
<script type="text/javascript">
swf2js.load("(ここに swf ファイルのURLを入れる)", {tagId: "test1", quality: "high"});
</script>
<div id="test1" style="width: 324px; height: 228px;"></div>

(ここに swf2js.js のURLを入れる)と(ここに swf ファイルのURLを入れる)のところには、上でメモ帳などにコピーしておいた swf2js.jsswf ファイル のURLをそれぞれ入れます。


「width: 324px; height: 228px;」のところの数値は、表示させるFlashの幅(width)と高さ(height)に置き換えてください。
幅(width)と高さ(height)は、パソコン版の表示で大きめにすると、スマートホンで表示したときにはみ出してしまう場合があります。
スマートホン側のCSSで縮小する方法もあると思いますが、とりあえずここでは、スマートホン側でもはみ出さない大きさにしてください。


スマートホン版で、はみ出さない方法を考えました。↓
 swf2jsを使って表示したFlashがスマホ版で、はみ出さないようにする。


以上で、ブログ記事内にFlashを表示するためのコードを入れる作業は完了です。


投稿の詳細設定の変更


ファンブログは、記事の編集モードがHTMLモードと通常モードに分かれていない、ちょっと特殊な編集モードになっています。
そのため、今回のやり方でFlashを表示する記事では、一部設定を変更する必要があります。

1)[投稿]などのボタンの上にある[詳細設定を開く]ボタンをクリックします。
Snap190922113431.png


2)改行タグ変換を「改行を<br />タグに変換しない」に変更して、URLに自動でリンクを付けるを「無効」に変更します。
Snap190922113556.png


詳細設定の変更はこれだけですが、この変更によって、記事内で[Enter]で改行した部分に自動で<br />タグが入らなくなります。
そのため、Flashを設置した記事の文章部分は、改行したい部分に自分で<br />タグを入れておく必要があります。
(Flashを表示するコード部分は、<br />タグを入れません)


また、プレビューでは設置したFlashが表示されないので、投稿してからその記事を見るまで、Flashがちゃんと表示されるか確認ができません。


swf2jsを読み込むためのコードをHTMLに入れられない


上のFlashを表示するためのコードの1行目は、swf2jsを読み込むためのコードです。
この部分は、通常は記事内に入れずにHTMLに入れることもできますが、ファンブログの場合は、スマートホン用のHTMLは編集できないので、swf2jsを読み込むためのコードも、各記事内に入れることになります。


画質を上げるオプション


高画質だと結構CPUとメモリを消費するため、標準では75%-80%程度縮小し、少し画質を下げているそうです。
上の説明で書いたコードは、高画質にするための「, quality: "high"」を加えているので、くっきり表示されます。
swf2js.js の作者によれば、「表示や動作を見ながら設定してもらえればと思います。」とのことです。
CPUとメモリの消費を抑えたい場合は、コードの中の「, quality: "high"」を削除してください。

<script type="text/javascript" src="(ここに swf2js.js のURLを入れる)"></script>
<script type="text/javascript">
swf2js.load("(ここに swf ファイルのURLを入れる)", {tagId: "test1", quality: "high"});
</script>
<div id="test1" style="width: 324px; height: 228px;"></div>


にほんブログ村 IT技術ブログ フリーソフトへ

2019年09月22日

swf2jsを使ってFlashをブログで表示する方法(FC2ブログ編)

FC2ブログはJavaScript、Flash(swfファイル)ともに、そのままアップロードできる仕様になっているので、あまり迷わずに設置できました。


swf2jsを使ってFlashをブログで表示する方法の概要と、swf2jsのダウンロード方法などの事前準備などについては、下の記事 ↓ を参照してください。
 swf2jsを使ってFlashをブログで表示する方法(概要と準備編)


別の記事で、SeeSaaブログ、ファンブログでのやり方も書いていますので、参考にしてみてください。
swf2jsを使ってFlashをブログで表示する方法(SeeSaaブログ編)
swf2jsを使ってFlashをブログで表示する方法(ファンブログ編)


swf2jsをFC2ブログにアップロードする


まずは、Flashを表示するためのプログラム swf2js.js を、FC2ブログにアップロードします。


1)管理画面の左側のメニュー[ホーム]の中の[ファイルアップロード]を開きます。
SC190920170905.png


2)[ファイル選択]ボタンをクリックして swf2js.js を指定するか、「ここにファイルをドロップできます。」のところに swf2js.js をドラッグ&ドロップします。
SC190920171255.png


3)「アルバムに追加」と「サムネイル」は必要ないので、チェックを外して、[アップロード]ボタンをクリックします。
SC190920171419.png


4)「ファイルをアップロードしますか?」のメッセージが出た場合は、[OK]ボタンをクリックします。
SC190920171732.png


5)アップロードが完了したら、下部のファイル一覧に swf2js.js が表示されます。
SC190920171848.png


以上で、swf2js のアップロード完了です。


Flash(swfファイル)をFC2ブログにアップロードする


すでにブログ記事内にFlashを設置している場合は、swfファイルをアップロード済みですから、この作業は不要です。


新しくFlashを設置する場合は、上の swf2js のアップロード方法にならって、Flash(swfファイル)をアップロードします。


アップロードしたファイルのURLをメモ帳などにコピーしておく


ブログ記事に Flash を表示するためのコードには、上でアップロードした2つのファイル(swf2js.jsとswfファイル)のURLを入れることになります。
ここで、アップロードしたファイルのURLをメモ帳やテキストエディタなどに、コピーしておきます。
上の作業で、アップロード完了後に下部に表示されるファイルの一覧で、「ファイル情報」の下段の枠内にあるのがURLです。


枠内をクリックするとURLを選択した状態になるので、右クリックからコピーまたは、[Ctrl]+[C]キー同時押しでコピーして、メモ帳やテキストエディタなどに貼り付けます。
SC190920172609.png


ブログ記事内にFlashを表示するためのコードを入れる


ブログ記事の編集画面で、[HTML表示]ボタンをクリックしてHTML編集モードにし、下のようにコードを入れます。
Snap190921210549.png

<script type="text/javascript" src="(ここに swf2js.js のURLを入れる)"></script>
<script type="text/javascript">
swf2js.load("(ここに swf ファイルのURLを入れる)", {tagId: "test1"});
</script>
<div id="test1" style="width: 324px; height: 228px;"></div>

(ここに swf2js.js のURLを入れる)と(ここに swf ファイルのURLを入れる)のところには、上でメモ帳などにコピーしておいた swf2js.jsswf ファイル のURLをそれぞれ入れます。


「width: 324px; height: 228px;」のところの数値は、表示させるFlashの幅(width)と高さ(height)に置き換えてください。
幅(width)と高さ(height)は、パソコン版の表示で大きめにすると、スマートホンで表示したときにはみ出してしまう場合があります。
スマートホン側のCSSで縮小する方法もあると思いますが、とりあえずここでは、スマートホン側でもはみ出さない大きさにしてください。


スマートホン版で、はみ出さない方法を考えました。↓
 swf2jsを使って表示したFlashがスマホ版で、はみ出さないようにする。


以上で作業完了です。
記事編集画面下にある[プレビュー]ボタンをクリックすると、Flashの動作が確認できます。


swf2jsを読み込むためのコードはHTMLに入れてもいい


上のFlashを表示するためのコードの1行目は、swf2jsを読み込むためのコードです。
この部分は、記事内に入れずにHTMLに入れることもできます。
HTMLに入れてしまえば、各記事内ではこの1行を入れなくていいので、少し効率がいいと思いますが、逆にswf2jsを読み込む必要がないページを見るときも、swf2jsが読み込まれるのかもしれません。
このあたりのことは、私には今のところよく分かりません。


ブログサービスやテンプレートによっては、パソコン用のHTMLを編集できても、スマートホン用のHTMLは編集できないという場合もあるので、swf2jsを読み込むためのコードも、各記事内に入れることにした方が、簡単かもしれません。


swf2jsを読み込むためのコードをHTMLに入れたい場合は、パソコン用のHTMLであれば、やり方は以下のようになります。


1)管理画面の左側のメニュー[設定]の中の[テンプレートの設定]を開き、使っているテンプレートのHTML/CSSの[編集]をクリックして開きます。
SC190920172907.png


2)開いたHTMLの最初の方にある <head> と </head> の間に、下記のコードを挿入します。
</head> の前の行に入れるのがいいと思います。
SC190920173209.png

<script type="text/javascript" src="(ここに swf2js.js のURLを入れる)"></script>


画質を上げるオプション


高画質だと結構CPUとメモリを消費するため、標準では75%-80%程度縮小し、少し画質を下げているそうです。
高画質にするためには、下のように「, quality: "high"」を加えると、くっきり表示されます。
swf2js.js の作者によれば、「表示や動作を見ながら設定してもらえればと思います。」とのことです。

<script type="text/javascript">
swf2js.load("(ここに swf ファイルのURLを入れる)", {tagId: "test1", quality: "high"});
</script>
<div id="test1" style="width: 540px; height: 380px;"></div>



にほんブログ村 IT技術ブログ フリーソフトへ

2019年09月21日

swf2jsを使ってFlashをブログで表示する方法(概要と準備編)

Flashはネット上で多くの人に利用されてきましたが、Adobe Flash Player の脆弱性の問題から、HTML5への移行が進められています。
Google Chrome の場合、Flash Player のサポートも2020年12月で終了しますし、現状でも Flash Player をブロックする設定にしておかないと、ちょっと面倒くさい状態になっています。
参考に ↓
 「Flash Player のサポートは2020年12月で終了します」が表示されないようにする

他のブラウザでも、そのままでは表示されない仕様になっている場合が多く、いずれはどのブラウザでも Flash Player が動作しなくなると思われます。

概要


フリーで公開されているFlashや自作のFlashを、ブログなどに設置している人は少なくないと思います。
それをすべてあきらめてしまうのは、あまりに惜しいので、HTML5で表示できる形式に変更する方法を考えないといけませんが、なかなか良さそうな方法が見つかりません。

そんな中で見つけたのが、JavaScript製FlashPlayer(swf2js)でFlashをそのままHTML5に変換するというものです。
簡単に言うと、ブログ側で swf2js を設置して、Flashを表示する部分のコードを変更すれば、そのままFlashが表示できるということです。
Adobe Flash Player を使わないので、ブラウザ側で Flash Player をブロックした状態でも、ブログに設置したFlashを見てもらうことができます。
おそらく現状で、最も手間をかけないで Flash を表示させられる方法だと思います。

以下、swf2js を使ってFlashをブログで表示するための準備を説明していきます。

エクスプローラーでファイルの拡張子を表示させる


Windowsの標準設定では、エクスプローラーでファイルの拡張子が表示されていないと思いますが、説明を分かりやすくするためと、Flashを設置ブログによっては拡張子を変更する必要があるため、拡張子を表示する設定にしておいてください。

エクスプローラーの[表示]タブを開いて、「ファイル名拡張子」のチェックを入れると、拡張子が表示されます。
ファイル名の後ろの「.zip」「.xlsx」などが拡張子で、たいてい3文字か4文字です。
SC190920150558.png

swf2jsをダウンロードする


ダウンロードの作業になれている人は特に読む必要はないですが、簡単に説明しておきます。

1)swf2jsの作者ienagaさんのQiitaのページを開きます。
ブラウザで下のリンクをクリックするとページが開きます。
 JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita

2)完成品のところにある「swf2js/swf2js」をクリックします。
SC190920143904.png

3)開いたページの[Clone or download]ボタンをクリックします。
SC190920144755.png

4)[Download ZIP]をクリックすると、ダウンロードが始まります。
SC190920145332.png

5)ダウンロードしたファイルは、「ダウンロード」フォルダに swf2js-master.zip というファイル名で入っています。
これは圧縮ファイルになっていますので、展開(解凍)しておきます。
Windows10での展開方法は、↓ こちらを参考にしてください。
 121ware.com > サービス&サポート > Q&A > Q&A番号 018844

6)swf2js-master.zip を展開すると、swf2js-master というフォルダができて、その中に swf2js.js というファイルがあります。
これがFlashを表示するためのプログラム(JavaScript)です。

以上で、準備完了です。

Qiitaの記事のコメント欄について


swf2jsを公開されているQiitaの記事 JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換 では、コメント欄で作者による丁寧な説明が書かれています。
とても参考になるので、コメント欄も読んでみることをおすすめします。

ただし、記事の最後にも書いてありますが、現在はその記事のコメント欄では返事を書かないで、株式会社SONICMOOV で製品として問い合わせを受け付けているそうです。

設置テストのためにお借りしたFlashのことなど


記事を書くにあたってテストで使ったFlashは、ブログ友達のさっちゃんさんにお借りしました。


下部の水色の花をクリックすると、障子が開き、景色が変わります。
左右2つの花で景色が違うので、試してみてください。

さっちゃんさんは、同じswf2jsを使ってFlashを表示する方法で、他にもいくつか自作のFlashを公開されていますので、参考にしてみてください。
右サイドバーのカテゴリ「フラッシュでお遊び♪」にあります。

実際にブログに設置する方法の詳細は、私が試せるFC2ブログ・ファンブログ・SeeSaaブログの場合について、別の記事で順に書いていきます。

FC2ブログに設置する方法の詳細

ファンブログに設置する方法の詳細

SeeSaaブログに設置する方法の詳細

swf2jsを使って表示したFlashがスマホ版で、はみ出さないようにする

にほんブログ村 IT技術ブログ フリーソフトへ

2019年08月06日

ブログのリンクを新しいタブで開かせる「 target="_blank"」は、余計なお世話なのか

ブログの記事内に参照先のリンクを埋め込むとき、URLの後ろに「 target="_blank"」を付け加えると、リンクをクリックしたときに新しいタブで開きます。
これまで私は、新しいタブで開いてもらうように、必ず「 target="_blank"」を付け加えていました。
リンクは、元の記事を読んでいるときに、ちょっと参照するためのもので、たいていは元の記事に戻りたいはずなので、その方が便利だろうと考えていたからです。


そう考えていたから、他の人のブログやWebサイトでリンクをクリックしたときに、同じタブでリンク先が表示されたときは、どうして「 target="_blank"」を入れてくれていないのだろう、不便だなと思っていました。


ところが最近、この「 target="_blank"」は余計なお世話かもしれないと、思うようになりました。
ブログを見てくれる人にとって、「 target="_blank"」はない方がいいのではと。



「 target="_blank"」はない方がいいと思ったきっかけ


スマートホンのブラウザは、Sleipnir Mobile を使っています。
Sleipnir Mobile はパソコンのブラウザのようなタブの使い方なので、とても使いやすいからです。
SC190805170822.png
ところが、自分のブログのリンクのチェックのために、リンク部分をタップしてみると、「 target="_blank"」を入れているのに、新しいタブで開かないで同じタブでリンク先が表示されてしまいます。
Sleipnir Mobile の設定ミスなんじゃないの?
一瞬そう思いましたが、少し考えて、Sleipnir Mobile には Hold and Go という機能があるからだろうと、気付きました。
Hold and Go は、リンク部分をロングタップ(長押し)すると、新しいタブで開く機能です。
つまり、「 target="_blank"」があろうと、なかろうと関係なく、読者側が自由に開き方を決められるわけです。


そもそも、ネット上のリンクには「 target="_blank"」が設定してあるものもあれば、設定していないものもあって、クリックしてみるまでどちらか分からないので、Sleipnir Mobile のリンクの開き方はまったく正しいと言えます。


他のブラウザだとどうかというと、Sleipnir Mobile と同じようなことはできそうです。
スマホ版の Google Chrome だとロングタップでメニューが開いて、そのメニューの中に「新しいタブで開く」があるので、Sleipnir Mobile より劣るとしても、大差はありません。
パソコンのブラウザだと、[Shift]キーを押しながらクリックすると、新しいタブで開くことができます。
つまり、読者側が新しいタブで開きたければ、「 target="_blank"」がなくても、方法はあるわけです。


逆に、新しいタブで開きたくないときがあったとしたら、「 target="_blank"」が設定してあったら、それを回避する方法がない。
リンクを同じタブで開いたとしても、元のページに戻りたければ[戻る]ボタンをクリック(またはタップ)すればいいだけなので、新しいタブで開きたくない場合もあるはずです。


だとすれば、「 target="_blank"」は設定しない方がいいということになります。


ブログエディタでの「 target="_blank"」のあつかい


各ブログサービスのエディタでリンクを設定するときは、基本的には「 target="_blank"」は付けることもできるし、付けないこともできるようになっています。


SeeSaaブログでは、リンクを設定するときに、「 target="_blank"」を付けるかどうか選択するようになっていて、付けない方が選択された状態になっていますが、簡単に変更できます。


Blogger でも、同様に「 target="_blank"」を付けるかどうか選択するようになっていて、付ける方にチェックが入っていますが、簡単にチェックが外せるようになっています。


ここファンブログでは、自動的に「 target="_blank"」が付いたコードが挿入されますが、挿入されたコードの「 target="_blank"」部分を削除すればいいだけなので、どちらでもできると言えます。


でもやはり「 target="_blank"」を設定した方がいいかも


「 target="_blank"」設定の是非についてネットで検索してみると、意見は2つに分かれていることがわかります。
ある程度ブラウザの機能を知っている人なら、新しいタブで開く方法を知っているから、「 target="_blank"」はない方がよいと書いている人がいる一方で、何で「 target="_blank"」を設定してくれていないんだ、不便でしょうがないという意見もあります。


合理性で言えば、上の方で書いたように、「 target="_blank"」は設定してない方がいいということになると思います。
でも、本当にそれでいいのでしょうか。


Google の見解やHTMLの作法という点では、「 target="_blank"」についてどうしろという記述は見当たりません。
あとは基本に立ち返って、読者にとってどちらが便利なのかという視点で考える必要がありますが、それにしても、両方の意見があるわけです。
困りました。


ここで、ちょっと乱暴に「自分だったらどっちがいいか」で考えてみると、私の場合は「 target="_blank"」は設定しておいてほしいと思います。
リンク先を新しいタブで開く方法も知っているけど、リンクを開くときに常に「このリンクは別タブで開きたい」とか「このリンクは同じタブで開こう」とか考えながら、クリックしているわけではありません。
リンクをクリックしたら同じタブで開いてしまったから、「「 target="_blank"」設定してないのかぁ〜」と思いながら、[戻る]ボタンで元のページに戻って、リンクを開きなおすこともあります。
やはり、「 target="_blank"」は設定しておいてほしいと思います。


それに、考えてみると、「 target="_blank"」の有無にかかわらず新しいタブで開く方法を知っているようなユーザーなら、新しいタブで開いてしまったページや、不要になった元のページを簡単に閉じる方法も知っているはずです。
「 target="_blank"」が設定してあることに、不満は感じないんじゃないでしょうか。


前半では「 target="_blank"」は要らない、余計なお世話というようなことを書いておきながらですが、最終的には、やはり「 target="_blank"」が設定してあった方がいいという考えに変わってしまいました。


「 target="_blank"」の使い分け


「 target="_blank"」の是非についてネットで調べているときに、外部リンクは「 target="_blank"」を設定して、内部リンクは「 target="_blank"」を設定しないという使い分けがよいと書いているものがありました。
(内部リンクは自分のブログの他の記事へのリンクで、外部リンクは自分のブログじゃない他のブログやサイトへのリンクです)


私の考えは少し違っていて、外部リンクだろうと内部リンクだろうと「 target="_blank"」は設定してあった方がよいと考えています。
唯一「 target="_blank"」が設定してない方がいいかなと思うのは、見出しを設けて長い文章を書いたときに文頭に目次を設けた場合です。
(この記事にも試しに作ってみました)
この場合だけは、さすがに「 target="_blank"」がない方がいいかなと思います。


ちなみに、このブログには記事の先頭に戻るためのボタンを右下に設置しているので、目次に戻ることは簡単ですが、ボタンを設置していないブログでも[Home]キーを押せば記事の先頭に戻ることはできます。


ブラウザ側の設定で「 target="_blank"」を無視できればいいのでは


それでもやはり「 target="_blank"」がない方がいいという人がいるのも、無視できません。


となると、ブラウザ側が Sleipnir Mobile のように、「 target="_blank"」を無視できるようになっていれば、いいのではないでしょうか。
もちろん「 target="_blank"」があった方がいいという人もいるので、設定でどちらでもできるように。


もしかしたら、すでにそういう機能のあるブラウザもあるかもしれないし、拡張機能(プラグイン・アドオン)にそういうものがあるかもしれません。
これについては、別に調べてみました。


 「 target="_blank"」問題から解放してくれる Google Chrome 拡張機能



にほんブログ村 IT技術ブログ フリーソフトへ

2019年05月14日

ブログの箇条書き(番号付きリスト)をいろいろな形式で作る方法のまとめ

ブログのエディタには、たいてい箇条書き(番号付きリスト)が簡単に作れる機能が備わっています。
このブログで利用しているファンブログの場合は、こんな感じです。
Snap190512233335.png


実際に作ってみると、このようになります。

  • 十三代目 石川 五ェ門
  • ジュラキュール・ミホーク
  • 十三代目 比古 清十郎

  1. 十三代目 石川 五ェ門
  2. ジュラキュール・ミホーク
  3. 十三代目 比古 清十郎


コードはこのようになっています。

<ul>
<li>十三代目 石川 五ェ門</li>
<li>ジュラキュール・ミホーク</li>
<li>十三代目 比古 清十郎</li>
</ul>

<ol>
<li>十三代目 石川 五ェ門</li>
<li>ジュラキュール・ミホーク</li>
<li>十三代目 比古 清十郎</li>
</ol>
<ul>の場合はマーカー付きの箇条書きで、<ol>の場合は番号付きの箇条書きになっています。


他のブログサービスでも、たいていこの2種類が作れるようになっています。
ファンブログの場合はちょっと特殊で、実際にはリスト <li> の各行にスタイルの設定が入っています。

<li style="list-style-type: decimal; margin-left: 1em;">十三代目 石川 五ェ門</li>


この箇条書きを、1)2)3)、a b c、ア イ ウ、1章 2章 3章など、いろいろなパターンにする方法が今回の内容です。


list-style-typeプロパティを使う


まずは基本的な方法で、list-style-typeプロパティを使うことで、いろいろなタイプの箇条書きが作れます。


list-style-type−スタイルシートリファレンス


↑ ここに書いてあるとおりですが、マーカー付きの箇条書き<ul>で4種類(マーカーなしを含む)、番号付きの箇条書き<ol>で17種類の箇条書きができます。
HTMLコードの書き方も書いてあるので、割と簡単にできそうです。


マーカー付きの箇条書き

  1.  マーカーなし
  2. ● 黒丸
  3. ○ 白丸
  4. ■ 黒四角


番号付きの箇条書き

  1. @.A.B. 小文字のローマ数字
  2. T.U.V. 大文字のローマ数字
  3. α.β.γ. 小文字のギリシャ文字
  4. 1.2.3. 算用数字
  5. 01.02.03. 先頭に0をつけた算用数字
  6. a.b.c. 小文字のアルファベット(latin)
  7. a.b.c. 小文字のアルファベット(alpha)
  8. A.B.C. 大文字のアルファベット(latin)
  9. A.B.C. 大文字のアルファベット(alpha)
  10. 一.二.三. 漢数字
  11. あ.い.う. 平仮名(あいうえお)
  12. ア.イ.ウ. 片仮名(アイウエオ)
  13. い.ろ.は. 平仮名(いろは)
  14. イ.ロ.ハ. 片仮名(イロハ)
  15. א‎.ב‎.ג‎. ヘブライ数字
  16. Ա.Բ.Գ. アルメニア文字(大文字)
  17. ა.ბ.გ. グルジア文字(ムヘドルリ)

調べてみると他の種類もあるようですが、ブラウザなどの環境によっては表示されないものもあるので、あまり特殊なものは使わない方がいいかもしれません。


CSS(スタイルシート)を使うと毎回コードを書かなくていいですし、できるだけ CSS に書く方がいいそうです。
↓ こちらが参考になります。


list-style-type - CSS: カスケーディングスタイルシート | MDN


1章 2章 など文字を付けたり、カッコ付きにしたりする


ol,li,リストで括弧付の数字を作る方法


↑ こちらのページは、(1) (2) (3) などカッコ付きにする方法が書いてあります。


このページのCSSの最後の行を見ると、番号の前後に "(" と ") " を付けることでカッコ付きの数字にしているのが分かります。

content: "(" counter(cnt) ") ";


ということは、例えば 1章 2章 にしたい場合は、前の "(" を消して、後ろの ") " を "章 " に変えてやればいいことになります。

content: counter(cnt) "章 ";


これを使えば、数字の前後に文字やカッコなどの記号を自由に付けられます。


文字・記号など何でもできるようにする


[CSS]ol のリストで@やAなどの丸数字を表示させる方法|CSSプロパティ|WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」


↑ このページの説明は@Aみたいに丸付き数字にする方法が書かれていますが、方法としては list-style を none で消しておいて、替わりに丸数字を表示させています。
丸数字もそれぞれの行に順に入れているので、他の文字でもいけそうです。


例を作ってみます。
上の ウェブアンテナさん のページを参考にして、CSS(スタイルシート)を追加します。

/* ▼ 箇条書き(その他) ▼ */
ol.list_etc{
position: relative;
margin:0;
padding:0
}
ol li{
list-style: none;
list-style-position:outside;
margin:0;
padding-left: 1em
}
ol li span{
position: absolute;
left:0;
margin:0
}
/* ▲ 箇条書き(その他) ▲ */

ブログに書くHTMLはこんな感じ。

<ol class="list_etc">
<li>㋐リスト1</li>
<li>㋑リスト2</li>
<li>㋒リスト3</li>
</ol>


㋐㋑㋒のところは、 など入力できる文字や記号、何でもいいことになります。


多階層の箇条書き


箇条書きの中に別の箇条書きを入れるような、多階層の箇条書きを作ることもできます。
リスト <li>文章</li> の中に <ul> </ul> や <ol> </ol> を入れることで、多階層の箇条書きができます。
詳しくは、↓ こちらが参考になります。


HTMLタグ/リストタグ/順不同のリストを作る - TAG index


その他の箇条書き


CSS(スタイルシート)を使った、さらに工夫した箇条書きなどを作ることができる説明が書かれたサイトを貼っておきます。




にほんブログ村 IT技術ブログ フリーソフトへ

2019年03月18日

ブログの記事内に見出しタグを使うときは h3 か h4 から使うのがよさそう

Webページの記事には、適切に見出しを設けるのがいいと「検索エンジン最適化(SEO)スターター ガイド - Search Console ヘルプ」にも書いてあります。
見出しタグを使用して重要なテキストを強調する

一般に、見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。複数の見出しサイズを正しい順序で使用すると、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。

というわけで、このブログでもときどき見出しを設けるようにしているのですが、ここのブログのエディタに装備されている見出しは、下のような感じでちょっとイマイチ目立たない感じです。

SC20190318193841.png

しかも、<h1>とか<h2>のような見出しタグが使われていません。
<div style="margin:20px 0 0; border-left: 7px solid #FF0000;
padding:4px 0 4px 6px;">Word文章内の表が破損したときの対処法</div>

どうせなら見出しタグを使って、おしゃれな見出しにしようと少し勉強して、最近はこんな感じの見出しを使っています。

SC20190318193802.png

こういった見出しはCSSを使って表示していて、ネットで「見出し CSS」の言葉で検索すると、いろいろなカッコいい見出しが見つかります。


ネットで見つけた「見出しCSS」はそのままでは使えない


ネットで見つけたCSSは、そのままコードをコピーして、自分のブログのCSS編集で貼り付ければ使えるように公開してくれているのですが、試してみると、そのデザインで表示されませんでした。
ブログエディタのプレビュー機能ではCSSのデザインが反映されないのだろうと思いましたが、投稿した記事をブラウザで見ても、そのデザインになっていません。

少し悩んで、CSSの<h1>の部分を、<h2>、<h3>と順に変えてみました。
すると<h4>にすると、ちゃんとデザインが反映されることが分かりました。
どういう仕組みかまでは分かりませんが、とりあえずこのブログでは、<h1>〜<h3>まではCSSでデザインが変わらないようです。

考えてみると、ネットで見つかる見出しCSSは、ブログ専用に書かれたものではなく、ブログではないWebサイト用なのかもしれません。
それに、ブログの<h1>〜<h3>ではなぜ使えないのか、というより<h1>〜<h3>は何に使われているのか・・・。
たぶん、ブログのタイトルや記事のタイトルで使われているのだろうと、想像はつきます。
調べてみました。
Google chrome系ブラウザであれば、調べたいブログのタイトルや記事タイトル部分で右クリックして、「検証」を開くと調べることができます。


ここ「ファンブログ」の場合


SC20190318132358.png

ブログのタイトルが<h1>、記事タイトルが<h3>となっていて、どういうわけか日付部分に<h2>が使われています。
ということは、順番からして、記事内で使用する見出しは、<h4>からということになります。


「Blogger」の場合


SC20190318133103.png

Bloggerの場合も同じような感じで、ブログのタイトルが<h1>、記事タイトルが<h3>となっていて、投稿というのに<h2>が使われています。
なので、ファンブログと同じように、記事内で使用する見出しは、<h4>からということになります。


「SeeSaaブログ」の場合


SC20190318133319.png

SeeSaaブログの場合は、ブログのタイトルが<h1>、記事タイトルが<h2>となっていて、<h3>は使われていないので、記事内で使用する見出しは、<h3>からということになります。


まとめ


ブログの記事内に見出しタグを使うときは、ブログのタイトルや記事タイトルで<h1>〜<h3>が使われているので、<h3>または<h4> から使うことになり、ブログによって違うので、自分で調べる必要があることが分かります。
ちなみに、見出しタグは<h1>から順に使うもので、例えば途中の<h3>を飛ばして<h4>を使うというような使い方はしない方がいいそうです。

初めの方で書いたように、ファンブログの標準機能の見出しは、見出しタグを使っていないのが不思議でしたが、Google(Search Console)の推奨する「見出しを設ける」という点では、すでに<h1>〜<h3>を使っているので、記事内で無理に見出しタグを使う必要がないということなのかもしれません。

今回このブログで使用し始めた見出しCSSは、こちらで見つけました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

コードをコピーして、自分のブログに合わせて<h1>のところを<h3>か<h4>に変えて、CSSの最後に貼り付ければ、そのまま使えます。



にほんブログ村 IT技術ブログ フリーソフトへ

2019年03月17日

リンク先ページの文章の途中部分が表示されるようにリンクを貼る方法

ブログの文章の中に、自分の他のブログ記事へのリンクを貼ることはよくあるのですが、たまにリンク先の記事の途中部分が表示されるようにしたいときがあります。

その方法は、簡単に言うと

 1)リンク先に「 id 」を設定する。
 2)リンク元のコードに、「 id 」を加える。

ということになります。

リンク先に「 id 」を設定しないといけないので、基本的には自分のブログでのみ可能です。
ただし、他の人のブログでも、リンク先に設定したい部分に「名前(ID)」が設定してあれば、それを利用することで可能だと思います。

以下、具体的に方法を説明します。


1a)リンク先に「 id 」を設定する(見出し行の場合)


リンク先を開いたときに、そのページの先頭に表示したい部分(ここでは「あいうえお」と書いてある行とします)に、「 id="a001"」のように書き加えます。
そこで使っている見出しタグ(<h4> 、<h5> 、<h6> など)の中に入れます。
ブログの場合 <h1> 〜 <h3>は、ブログタイトル〜記事タイトルまでに使われていることがおおいので、<h4> 〜 <h6> を使うことになると思います。
1) <h4 id="( a001など )">あいうえお</h4>
2) <h5 id="( a001など )">あいうえお</h5>
3) <h6 id="( a001など )">あいうえお</h6>

 ↓ こんな感じになります。
<h4 id="a001">あいうえお</h4>
<h5 id="a001">あいうえお</h5>
<h6 id="a001">あいうえお</h6>


( a001など )の部分は、そのURL(Webページ)の中で複数設定した場合、同じものを使ってしまうと、どちらを表示したいのか分からなくなるので、重複しないようにします。
(別のURL(Webページ)であれば、同じものを使ってかまいません)

使用できる文字は、半角アルファベット・半角数字・記号(「 - 」ハイフン・「 _ 」アンダーバー・「 : 」コロン・「 . 」ピリオド)で、最初の文字は必ず半角アルファベットとします。

私は、分かりやすいかと思って、日本語の名前にしてみたのですが、そうするとブログのエディタが、自動的に日本語部分を「#53#A2#12」みたいなコードに置き換えてしまい、余計に分かりにくくなってしまいました。
「a001」「a002」「a003」など、英字+数字の連番のようなものにするか、章や節を設定している場合は、その番号を使うのも、分かりやすくていいと思います。


1b)リンク先に「 id 」を設定する(通常行の場合)


見出し行ではない通常行の場合は、本来はpタグを使うべきであり、pタグを使っていれば、そこに「 id 」を設定すればいいので、見出しタグと同じように入れるだけです。
<p id="a001">あいうえお</p>

このブログもそうですが、pタグを使わないでbrタグ(<br />)で改行している場合は、うまくいきません。
aタグ(<a> </a>)を使ってidを設定して、「 <a id="a001">あいうえお</a> 」とすればいいかなと考えたのですが、やってみるとおかしなことになります。
idを設定した「あいうえお」のところが、リンクを埋め込まれたような見え方になって、クリックすると404エラーとなってしまいます。
また、1つ上の行に、文字を入れないで「 <a id="a001"></a> 」として空行を作ってみると、リンク元から開くときに、その行が表示されません。

brタグで改行している通常行に「 id 」を入れたい場合のやり方としては、一つ上に文字のない見出し行を作ってやるとうまくいきました。
文字のないpタグ行としても、大丈夫かもしれません)
<h4 id="a001"></h4>

ただし、この方法は見出し本来の使い方として、あまり良くないかもしれません。
Search Console ヘルプの 検索エンジン最適化(SEO)スターター ガイド の中の「避けるべき方法」に該当しそうな気がします。
そのページを見る人の目には、この見出しがないように見えるのだから、問題ないだろうとも考えられますが、最善策としては、その行よりも少し前にある見出しとして適切な部分を、見出しとしてidを設定するか、その行だけでもpタグを使うのがいいと思います。


「 id=”〇〇” 」の代わりに「 name="〇〇" 」と書いてあるところもあります。
どうもこの違いが分かりません。
たぶん、それでも大丈夫だと思いますが、HTML5だと「 name= 」は使えないと書いてあるところもあるので、「 id=”〇〇” 」の方がいいのかなと考えています。
(HTML5だと使えないというのは、別の使い方のときの話しなのかもしれませんが)


2)リンク元のコードに、「 id 」を加える。


まずは、いつものようにリンク先のWebページのURLでリンクを埋め込みます。
(普通はブログのエディタにその機能があるはずなので、その機能を使います)

次に、そのコードの「リンク先URL」のうしろに、「#」と「 id 」を加えればOKです。
「 id 」は、上の1)で設定したものです。

<a href="(リンク先URL)#( id )">かきくけこ</a>

実際の例は、↓ このようになります。
<a href="http://fanblogs.jp/pontaoyaji/archive/799/0#a001">かきくけこ</a>



以上です。
ブログのエディタによっては、「 id 」を挿入するボタンが付いているものもあるようです。
別のブログで、この作業をけっこうな量をやっているのですが、すごく面倒くさいです。



にほんブログ村 IT技術ブログ フリーソフトへ

2019年03月02日

ワイド画面ディスプレイで縦長の大きな表や画像をキャプチャーする方法

仕事関係のPDF資料の中の表や図をキャプチャーして画像にしたものを、別のブログで使うことがあります。
そのとき、元のPDFがA4縦で印刷して使えるように設定してあるため、1ページ全部使うような大きな表や図の場合、PDFを開いてキャプチャーしようとすると、うまくいきません。
縦方向が納まるようにすると、大きく表示できないので、それをキャプチャーすると、小さい文字が読めない画像になってしまいます。

使っている環境は、横1,920×縦1,080のワイド画面、PDFビューワーは「PDF-XChange Editor」です。
PDF-XChange Editorでキャプチャーしたいページを表示して、[F11]キーを押してフルスクリーンモードにして表示してみると、こんな感じになります。

SC20190301113803.png

これだと、ブラウザで拡大して表示しても、小さい文字がつぶれて読めなくなってしまいます。
仕方がないので、これまでは上下2つに分割してキャプチャーして、2つの画像を別に並べてブログ記事に入れていました。

ここまで読んでいただいた方の中には、もっと大きく表示してキャプチャーする方法を、思い付いた方もあるかもしれません。
そう、PDFの表示を横向きに回転させれば、より大きく表示できますね。
今日私が思い付いた2つの方法のどちらかが、その方法になると思います。

PDFビューワーで回転して横向きにする


私は、PDF-XChange Editorを使っているので、それで説明しますが、他のビューワーでも同様の機能があるはずです。

1)PDF-XChange EditorでPDFファイルを開いて、キャプチャーしたい表や図があるページを表示します。

2)上部のツールバーの左の方にある[反時計回り]をクリックして、横向きにします。

SC20190301171834.png

3)[F11]キーを押して、フルスクリーンモードにします。
 下の画像のように、ワイド画面いっぱいに表示されます。
 (ちなみに、もう一度[F11]キーを押すと、フルスクリーンモードが解除できます)

SC20190301115142.png

4)表示エリアに余裕があって、もう少し拡大したいときは、[Ctrl]キーを押しながらマウスのスクロールボタンで拡大・縮小できます。

5)適当な大きさに表示出来たら、画面キャプチャーアプリでキャプチャーします。
 私は SnapCrab を使っています。

6)画像が横向きになっているので、縦に直します。
 キャプチャーした画像ファイルをペイントで開きます。
 エクスプローラーで見つけて、右クリックから「編集」で、ペイントで開けます。

7)ペイント上部のツールバーの左の方にある「回転」をクリックして、その中の「右へ90度回転」をクリックします。

SC20190301174108.png

8)横向きの画像が縦にできたら、ペイントの左上のフロッピーアイコンをクリックして、上書き保存して完成です。

Windowsの画面を丸ごと横向きにする


もう一つの方法は、表示を横向きにする部分以外は上の方法と同じです。

キャプチャーしたい表や図があるページを表示した状態で、[Ctrl]キーと[Alt]キーを押しながら、矢印[←]キーを押します。
これでWindowsの画面が丸ごと横向きになります。

[Ctrl]+[Alt]+[↑]で元に戻ります。
また、[Ctrl]+[Alt]+[→]で左向きに、[Ctrl]+[Alt]+[↓]で上下逆になります。

ただし、この方法だと、やってみると分かりますが、マウスの操作がとても難しくなります。
例えば、左横向きにした状態でマウスを上に動かすと、マウスカーソルは左に行ってしまうので、マウスで範囲を選択してキャプチャーしようとすると、とても難しいです。

ディスプレイ自体が回転して縦向きにできるものであれば、この方法も使えますが、そうじゃなければ、やはり、最初の方法がいいと思います。

この機能、人によっては要らない機能のように感じるかもしれませんが、実は知っておいた方がいい機能でもあります。
そのあたりのことは、別の記事で書いてみます。



にほんブログ村 IT技術ブログ フリーソフトへ
ブログ内を検索
ファン

最新記事
カテゴリー
最新コメント
ツイッター
広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール