ブログテクニック (2): パソコンを便利に！！

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ブログにアップロードします。

１）管理画面の左側のメニュー［ホーム］の中の［ファイルアップロード］を開きます。

２）［ファイル選択］ボタンをクリックして swf2js.js を指定するか、「ここにファイルをドロップできます。」のところに swf2js.js をドラッグ＆ドロップします。

３）「アルバムに追加」と「サムネイル」は必要ないので、チェックを外して、［アップロード］ボタンをクリックします。

４）「ファイルをアップロードしますか？」のメッセージが出た場合は、［OK］ボタンをクリックします。

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

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

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

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

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

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

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

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

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

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

<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.js と swf ファイル のURLをそれぞれ入れます。

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

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

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

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

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

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

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

１）管理画面の左側のメニュー［設定］の中の［テンプレートの設定］を開き、使っているテンプレートのHTML／CSSの［編集］をクリックして開きます。

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

<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>

posted by ぽん太親父 at 09:36 | Comment(0) | TrackBack(0) | ブログテクニック

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文字です。

swf2jsをダウンロードする

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

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

２）完成品のところにある「swf2js/swf2js」をクリックします。

３）開いたページの［Clone or download］ボタンをクリックします。

４）［Download ZIP］をクリックすると、ダウンロードが始まります。

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

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

以上で、準備完了です。

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

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

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

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

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

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

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

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

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

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

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

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

posted by ぽん太親父 at 20:10 | Comment(5) | TrackBack(0) | ブログテクニック

2019年08月06日

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

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

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

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

この記事の目次
・「 target="_blank"」はない方がいいと思ったきっかけ
・ブログエディタでの「 target="_blank"」のあつかい
・でもやはり「 target="_blank"」を設定した方がいいかも
・「 target="_blank"」の使い分け
・ブラウザ側の設定で「 target="_blank"」を無視できればいいのでは

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

スマートホンのブラウザは、Sleipnir Mobile を使っています。
Sleipnir Mobile はパソコンのブラウザのようなタブの使い方なので、とても使いやすいからです。

ところが、自分のブログのリンクのチェックのために、リンク部分をタップしてみると、「 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"」設定の是非についてネットで検索してみると、意見は２つに分かれていることがわかります。
ある程度ブラウザの機能を知っている人なら、新しいタブで開く方法を知っているから、「 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 拡張機能

posted by ぽん太親父 at 18:38 | Comment(0) | TrackBack(0) | ブログテクニック

2019年05月14日

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

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

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

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

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

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

<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>

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

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

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

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

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

マーカー付きの箇条書き

　マーカーなし
● 黒丸
○ 白丸
■ 黒四角

番号付きの箇条書き

ⅰ.ⅱ.ⅲ.　小文字のローマ数字
Ⅰ.Ⅱ.Ⅲ.　大文字のローマ数字
α.β.γ.　小文字のギリシャ文字
1.2.3.　算用数字
01.02.03.　先頭に0をつけた算用数字
a.b.c.　小文字のアルファベット（latin）
a.b.c.　小文字のアルファベット（alpha）
A.B.C.　大文字のアルファベット（latin）
A.B.C.　大文字のアルファベット（alpha）
一.二.三.　漢数字
あ.い.う.　平仮名（あいうえお）
ア.イ.ウ.　片仮名（アイウエオ）
い.ろ.は.　平仮名（いろは）
イ.ロ.ハ.　片仮名（イロハ）
א‎.ב‎.ג‎.　ヘブライ数字
Ա.Բ.Գ.　アルメニア文字（大文字）
ა.ბ.გ.　グルジア文字（ムヘドルリ）

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

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 のリストで①や②などの丸数字を表示させる方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

↑ このページの説明は①②みたいに丸付き数字にする方法が書かれていますが、方法としては 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（スタイルシート）を使った、さらに工夫した箇条書きなどを作ることができる説明が書かれたサイトを貼っておきます。

いろいろなマーカーの箇条書き
CSSでリストを素敵にするlist-styleの使い方+もっと自由な作り方 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
おしゃれな箇条書き
コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに
見出し付き箇条書き
Try next HTML - Section 1

posted by ぽん太親父 at 19:58 | Comment(0) | TrackBack(0) | ブログテクニック

2019年03月18日

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

Ｗebページの記事には、適切に見出しを設けるのがいいと「検索エンジン最適化（SEO）スターターガイド - Search Console ヘルプ」にも書いてあります。

見出しタグを使用して重要なテキストを強調する

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

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

しかも、<h1>とか<h2>のような見出しタグが使われていません。

<div style="margin:20px 0 0; border-left: 7px solid #FF0000;
 padding:4px 0 4px 6px;">Word文章内の表が破損したときの対処法</div>

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

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

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

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

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

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

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

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

「Blogger」の場合

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

「SeeSaaブログ」の場合

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

まとめ

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

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

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

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

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

posted by ぽん太親父 at 21:06 | Comment(0) | TrackBack(0) | ブログテクニック

2019年03月17日

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

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

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

　１）リンク先に「 id 」を設定する。
　２）リンク元のコードに、「 id 」を加える。

ということになります。

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

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

１ａ）リンク先に「 id 」を設定する（見出し行の場合）

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

１） <h4 id="（ a001など ）">あいうえお</h4>
２） <h5 id="（ a001など ）">あいうえお</h5>
３） <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」など、英字＋数字の連番のようなものにするか、章や節を設定している場合は、その番号を使うのも、分かりやすくていいと思います。

１ｂ）リンク先に「 id 」を設定する（通常行の場合）

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

<p id="a001">あいうえお</p>

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

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

<h4 id="a001"></h4>

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

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

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

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

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

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

実際の例は、↓ このようになります。

<a href="https://fanblogs.jp/pontaoyaji/archive/799/0#a001">かきくけこ</a>

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

posted by ぽん太親父 at 00:09 | Comment(0) | TrackBack(0) | ブログテクニック

2019年03月02日

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

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

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

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

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

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

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

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

２）上部のツールバーの左の方にある［反時計回り］をクリックして、横向きにします。

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

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

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

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

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

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

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

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

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

［Ctrl］＋［Alt］＋［↑］で元に戻ります。
また、［Ctrl］＋［Alt］＋［→］で左向きに、［Ctrl］＋［Alt］＋［↓］で上下逆になります。

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

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

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

posted by ぽん太親父 at 11:11 | Comment(0) | TrackBack(0) | ブログテクニック

2018年06月29日

言葉の上にマウスカーソルを乗せると説明が表示されるやつ

ブログで記事を書いていて、文章の中に使っている分かりにくい言葉などに、ちょっとした説明を加えたいときがあります。

例えば、
・Win10メール（Windows 10 標準のメールアプリのこと。）
・クグる（Web検索するという意味。検索は Google とは限らないので「ググる」ではない。）
・アプリ（最近はパソコンでもソフトというよりアプリということが多いので、アプリと表記することにしました。）
・・・みたいな。

文章中に上の例のようにカッコ書きで説明したこともありますが、文章自体が読みにくくなりそうですし、記事ごとに毎回説明を加えるのかということもあり、あまり良くありません。

こういうのは、どこかのサイトで見かけたことのある「言葉の上にマウスカーソルを乗せると説明が表示されるやつ」を使うのがよさそうです。

こんな感じのやつです。↓

調べてみると、これは「ツールチップ」と呼ばれるものらしく、やり方はとても簡単でした。
こういうコードを書くだけです。

<span title="説明文">"説明対象の言葉"</span>

サンプルを作ってみます。

　「 Win10メールではこのように設定します。」

「Win10メール」の文字の上にマウスカーソルを乗せると、説明が表示されます。
コードは、↓ このように書いています。

<span title=Windows10標準のメールアプリのこと。>Win10メール</span>

ただ、これだとその言葉に説明があることが分からないので、アンダーラインを加えてみます。
「Win10メール」を「<ins>」と「</ins>」で囲みます。

　「 Win10メールではこのように設定します。」

コードは、↓ このようになります。

<span title=Windows10標準のメールアプリのこと。><ins>Win10メール</ins></span>

あとは、コードのサンプルをメモを管理するソフトなどに保存しておけば、使いたいときに簡単に転用できます。

この機能の応用として、単語帳のような暗記物のページが簡単に作れそうです。
もっと便利なスマホアプリもあるので、そっちを使った方がいいでしょうけど。

posted by ぽん太親父 at 23:09 | Comment(0) | TrackBack(0) | ブログテクニック

2018年03月06日

ブログ引っ越しで画像をまとめてダウンロードする方法（Google Chrome拡張機能編）

ブログの画像をまとめてダウンロードする方法として、前回記事でIrvineとSleipnir4またはSleipnir6を使った方法を書きました。

　ブログ引っ越しで画像をまとめてダウンロードする方法（Irvine＋Sleipnir編）

これはSleipnirの「選択範囲のリンクをコピーする」機能と、Irvineの「クリップボードのリンクをインポートしてダウンロードする」機能を組み合わせたものです。

Google Chromeでこれをやれないか調べてみたところ、拡張機能を使えば可能なようです。

「選択範囲のリンクをコピーする」機能 → Link2Clip

「クリップボードのリンクをインポートしてダウンロードする」機能 → Chrono ダウンロードマネージャー

この2つを使えば、Irvine ＋ Sleipnir と同じようなことができます。
Google Chrome 用の拡張機能ですが、Chrome 系のブラウザ（Sleipnir、Kinza、SRWare Iron など）であれば、たぶん使えます。

Link2Clip をインストールする

１）下のリンク（Link2Clip）をクリックして、右上の［CHROMEに追加］ボタンをクリックします。

　Link2Clip

２）「Link2Clipを追加しますか？」と聞いてくるので、そのメッセージ下の［拡張機能を追加］ボタンをクリックします。
　その後は、Chrome ウェブストアは閉じて構いません。

【補足】
Link2Clip は「選択範囲のリンクをコピーする」とき、右クリックメニューを使う方法と、ショートカットキーを使う方法があるようなのですが、ショートカットキーの方はどうも上手く機能しません。

Google Chrome の右上に Link2Clip のアイコンができていると思いますので、それをクリックしてメニューの［オプション］を開きます。

「ShortKey」のところが「SHIFT ＋ C」になっているので、［Shift］＋［C］で「選択範囲のリンクをコピー」できそうなのですが、コピーされません。
Google Chrome の他の拡張機能などで、［Shift］＋［C］を使っていて重複のために機能しないのかと思い、別のキーに変更しようとしましたが、変更のし方が分かりません。

とりあえず、ショートカットキーはあきらめ、右クリックメニューを使うことにします。

Chrono ダウンロードマネージャーをインストールする

１）下のリンク（Chrono ダウンロードマネージャー）をクリックして、右上の［CHROMEに追加］ボタンをクリックします。

　Chrono ダウンロードマネージャー

２）「Chrono ダウンロードマネージャーを追加しますか？」と聞いてくるので、そのメッセージ下の［拡張機能を追加］ボタンをクリックします。
　その後は、Chrome ウェブストアは閉じて構いません。

３）下のようなメッセージが表示されます。

　３－１）「chrome://settings」の文字をクリックして、開いたページの下にある「詳細設定」をクリックします。

　「ダウンロード」の項目を探して、「ダウンロード前に各ファイルの保存場所を確認する」がオフになっていることを確認します。
　下の画像の状態がオフです。
　もしオンになっていたら、オフにしておきます。

　３－２）「chrome://extensions」の文字をクリックして拡張機能の設定ページを開き、「Chrono ダウンロードマネージャー」のところにある「ファイルのURLへのアクセスを許可する」にチェックを入れます。
　その後は、拡張機能の設定ページは閉じて構いません。

　３－３）メッセージ右下の［スタート！］ボタンをクリックします。

忍者ブログの画像をダウンロードしてみる

１）Google Chrome で、忍者ブログの管理ページを開いて、［ファイルアップロード］を開きます。

２）開いたページの少し下にある「ファイル一覧」の右側の、「10件表示」となっているところをクリックして、最大の「15件表示」に変えます。
　少しでもたくさんまとめてダウンロードするためです。

３）「表示」の列に小さい画像が表示されていますが、その画像に元の画像のリンクが貼られていますので、その小さい画像が15件分含まれるようにマウスをドラッグして、範囲選択します。

４）範囲選択した部分の上で右クリックし、メニューの中の［Copy all links selected］をクリックします。

５）［Chrono ダウンロードマネージャー］アイコンをクリックして、下の［マネージャーを起動］をクリックします。

６）［＋］アイコンをクリックします。

７）「URL」のところにクリップボードにコピーされた内容が入っているはずです。
　その状態で、下の［一時停止で追加］をクリックします。

８）クリップボードに入っていたリンクURLが全て表示されますが、画像以外のファイルを削除したいので、画像以外の行を全て選択して、［×］アイコンをクリックします。
　（行を選択するときは、［Ctrl］を押しながらクリックで選択していきます）
　（各行の上段がファイル名になっていて、その末尾が「.png」「jpg」「.gif」となっているのが画像ファイルです）

９）「選択されたタスクを完全削除しますか？」と聞いてくるので、［はい、ファイルも削除します］ボタンをクリックします。

１０）黄緑の三角が２つ重なったボタンをクリックするとダウンロードが始まり、ファイルは「ダウンロード」フォルダにダウンロードされます。

自動で画像ファイルだけをダウンロードするようにできないか

上の８）のところで、画像以外のURLを手動で削除していますが、Chrono ダウンロードマネージャーの設定であらかじめ画像ファイルだけダウンロードするようにできそうな気もします。
ただし、実際やってみたところ、それらしいメニューはあるのですが、どうも上手くいきません。
クリップボードから読み込んだURLについては、フィルタリングできないということなのかも知れません。

それらしい設定をやってみた方法は、以下のとおりです。

１）［Chrono ダウンロードマネージャー］アイコンをクリックします。

２）開いたウィンドウの下の方にある［マネージャーを起動］の文字をクリックします。

３）開いたページの右上にある［歯車］アイコンをクリックします。

４）左側のメニューの「拡張フィルター」をクリックし、「画像」以外の有効のチェックを全て外します。
　チェックは緑色が有効で、グレーが無効です。
　チェックマーク部分をダブルクリックすると、チェックマークを編集できるようになり、もう一度クリックするとチェックを外せます。

Chrono ダウンロードマネージャー以外で、クリップボードの複数URLを読み込めて、ファイルの種類でフィルタリングできる拡張機能があれば、もう少し簡単になるのですが、今のところ見つけられません。
Google Chrome 以外のブラウザでも、同じような拡張機能があれば、同様のことはできると思いますので、必要な人は探してみてください。

posted by ぽん太親父 at 22:55 | Comment(0) | TrackBack(0) | ブログテクニック

2018年03月03日

ブログ引っ越しで画像をまとめてダウンロードする方法（Irvine＋Sleipnir編）

ブログの引っ越しをするとき、記事のテキストは、元のブログでまとめてエクスポート（保存）して、引っ越し先のブログでまとめてインポート（読み込み）できる場合が多いですが、記事内の画像などブログにアップロードしているファイルは、そういった機能がない場合が多いです。

まず考えられるのは、元のブログにアップロードしている画像を、1つずつ「名前を付けて保存」することですが、画像ファイルが多い場合は大変なので、ツールを使ってまとめてダウンロードする方法をやってみます。

ダウンロードツール：Irvineと、国産ウェブブラウザ：Sleipnir4またはSleipnir6を使った方法です。

もう一つの方法として、Google Chrome拡張機能を使った方法を別に書いていますので、こちらもあわせて読んでみてください。

　ブログ引っ越しで画像をまとめてダウンロードする方法（Google Chrome拡張機能編）

ダウンローダー：Irvine をインストールする

１）下のリンクをクリックして、右側にある［窓の杜からダウンロード］ボタンをクリックします。

　「Irvine」高機能な定番ダウンローダー - 窓の杜ライブラリ

［窓の杜からダウンロード］ボタンをクリックするとダウンロードが始まりますが、そのとき開いたページに広告が表示され、その広告に［ダウンロード］ボタンがあります。
この［ダウンロード］ボタンは、公告のソフトをダウンロードするものなので、クリックする必要はないです。

２）ダウンロードフォルダに「irvine1_3_0」というファイルができていると思います。
　これはZIP形式の圧縮ファイルになっているので、展開（解凍）します。

　展開（解凍）のし方はこちら ↓

　Windows 10で圧縮ファイルを展開する方法 | できるネット

３）展開（解凍）すると「irvine1_3_0」というフォルダができます。
　このフォルダを適当な場所に移動します。

　このソフトはインストールプログラムがないので、そのフォルダの中の実行ファイルを起動して使うことになります。
　Program Filesの中に入れてもいいですが、ドキュメントの中に「ツール」などの名前でフォルダを作って、そこに入れておくと分かりやすいと思います。

　元の圧縮ファイルは、削除してしまって構いません。

Irvine の初期設定をする

１）「irvine1_3_0」フォルダの中の「irvine」というファイル上で右クリックして、「管理者として実行」をクリックします。

２）設定用データの保存場所を選択するメッセージが表示されます。
　「Irvine をインストールしたフォルダ(推奨)」は選択された状態になっているので、そのまま［OK］ボタンをクリックします。

３）「JWordプラグイン」をインストールするか聞いてきますが、Windows10環境ではおそらく動作しないと思いますので、「JWordプラグインをインストールしない」を選んで、［OK］ボタンをクリックします。

４）起動した Irvine を一度閉じて、起動し直します。
　再起動するときは「管理者として実行」としないで、通常のダブルクリックで起動できます。
　以降、起動するときは同じです。

Sleipnirをインストールする

下のリンクをクリックして、開いたサイトからダウンロードして、ダウンロードしたファイルを実行すればインストールできます。

　タブブラウザ Sleipnir 6 - Windows / Macの先端的ウェブブラウザ | フェンリル

Sleipnir 6 の場合は、そのサイトの上の方にある［ダウンロードする］ボタンをクリックします。

Sleipnir 4 の場合は、そのサイトの下の方にある Sleipnir 4 の［インストーラ版］をクリックします。

Sleipnir 4 と Sleipnir 6 は起動しなければパソコンのメモリーを占有しないので、2つともインストールして、どちらがいいか試してもいいと思います。
一番の違いはタブ廻りで、Sleipnir 4 は多段タブが特徴で分かりやすく、Sleipnir 6はタブグループとサムネイルタブが特徴で斬新なデザインです。

画像をまとめてダウンロードする

１）Sleipnir 4 または Sleipnir 6 で、忍者ブログの管理ページを開いて、［ファイルアップロード］を開きます。

４）Sleipnir の左上の［Sleipnir］ボタンをクリックして、［ページ］→［拡張コピー］→［選択部分のリンクをコピー］をクリックします。

５）Irvine を起動して、［ツール］メニューの［リンクのインポート］をクリックします。

６）［リンク］ウィンドウが開くので、その中の赤い三角のアイコン（リンクの取得）をクリックします。
　これで、画像ファイルのリンクだけが選択された状態になります。

７）［実行］メニューの［ダウンロード］登録をクリックして、そのあと［リンク］ウィンドウを閉じます。
　これで、ダウンロードが開始されます。

８）［ファイル］メニューの［アイテム］→［保存フォルダを開く］で、ダウンロードされたファイルが保存されたフォルダを見ることができます。

９）あとは、２）３）のところの作業に戻って、画像ファイルがある分だけ、作業を繰り返します。
　少しややこしい作業のように感じるかもしれませんが、慣れればそうでもないと思います。
　作業を簡単に言うと、
　・ Sleipnir で画像のリンクをコピーして
　・ Irvine に読み込む
　ということになります。

　15ファイルずつ繰り返すことになるので、たくさん画像がある人は少し面倒ですが、1つずつ「名前を付けて保存」するのと比べると、ずいぶん楽になると思います。

posted by ぽん太親父 at 00:20 | Comment(0) | TrackBack(0) | ブログテクニック

最初へ 1 2 3 最後へ