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技術ブログ フリーソフトへ

2018年06月29日

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

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

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

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

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

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

調べてみると、これは「ツールチップ」と呼ばれるものらしく、やり方はとても簡単でした。
こういうコードを書くだけです。
<span title="説明文">"説明対象の言葉"</span>

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

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

「Win10メール」の文字の上にマウスカーソルを乗せると、説明が表示されます。
コードは、↓ このように書いています。
<span title=Windows10標準のメールアプリのこと。>Win10メール</span>

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

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

コードは、↓ このようになります。
<span title=Windows10標準のメールアプリのこと。><ins>Win10メール</ins></span>


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

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



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

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 をインストールする

1)下のリンク(Link2Clip)をクリックして、右上の[CHROMEに追加]ボタンをクリックします。

 Link2Clip

SC183523125.png


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

SC183523150.png


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

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

SC183523216.png

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

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


SC1835232017.png


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

1)下のリンク(Chrono ダウンロードマネージャー)をクリックして、右上の[CHROMEに追加]ボタンをクリックします。

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

SC18222114318.png


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

SC1822211749.png


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

SC1822211828.png

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

SC1836111351.png

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

SC1836111745.png

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

SC18222111016.png

 3−3)メッセージ右下の[スタート!]ボタンをクリックします。


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


1)Google Chrome で、忍者ブログの管理ページを開いて、[ファイルアップロード]を開きます。

SC1832224948.png


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

SC183222543.png


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

SC183223619.png


4)範囲選択した部分の上で右クリックし、メニューの中の[Copy all links selected]をクリックします。

SC1836141314.png


5)[Chrono ダウンロードマネージャー]アイコンをクリックして、下の[マネージャーを起動]をクリックします。

SC1836141847.png


6)[+]アイコンをクリックします。

SC1836142254.png


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

SC1836142521.png


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

SC1836143024.png


9)「選択されたタスクを完全削除しますか?」と聞いてくるので、[はい、ファイルも削除します]ボタンをクリックします。

SC1836144036.png


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

SC1836144332.png


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


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

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

1)[Chrono ダウンロードマネージャー]アイコンをクリックします。

SC18222114927.png


2)開いたウィンドウの下の方にある[マネージャーを起動]の文字をクリックします。

SC1835233018.png


3)開いたページの右上にある[歯車]アイコンをクリックします。

SC1835232652.png


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

SC1835233713.png


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



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

2018年03月03日

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

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

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

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

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

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


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


1)下のリンクをクリックして、右側にある[窓の杜からダウンロード]ボタンをクリックします。

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

SC1822115236.png

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


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

 展開(解凍)のし方はこちら ↓

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


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

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

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

Irvine の初期設定をする


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


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

SC1822116831.png


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

SC1822116932.png


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

Sleipnirをインストールする

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

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

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

SC18228232739.png


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

SC18228232722.png

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

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

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

SC1832224948.png


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

SC183222543.png


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

SC183223619.png


4)Sleipnir の左上の[Sleipnir]ボタンをクリックして、[ページ]→[拡張コピー]→[選択部分のリンクをコピー]をクリックします。

SC1832231528.png


5)Irvine を起動して、[ツール]メニューの[リンクのインポート]をクリックします。

SC183223367.png


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

SC1832234217.png


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

SC183223430.png


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

SC18330552.png


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

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





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

2017年05月23日

いくつかの変更で Google Adsense の収益がましになった

はじめに言っておかなければなりませんが、この記事を読んで真似したら Adsense の収益が上がるということは、まずありません。
もし役に立つとしたら、PVに対して Adsense の収益が桁違いに低い人、または、始めて Adsense を利用する人が同じ間違いをしないためという点で、わずかに可能性はあるかも知れません。
でも、始めて Adsense を利用する人は、ちゃんとした専門の本を読んだり、もっと詳しいブログ記事を読んだりした方がいいですけどね。

Google AdSense 成功の法則 57 (成功の法則) [ 染谷昌利 ]

価格:1,598円
(2017/5/23 16:34時点)
感想(2件)




さて、収益がどれぐらいましになったかというと、1PV当り0.2〜0.3円になりました。
ネット上で調べる限り、たぶん一般的な数字です。
問題は、それ以前がひど過ぎで、1PV当り0.02円前後だったということです。
普通はちょっと計算すれば気付きそうなものですが、計算してみなかったことと、どうせそんなに儲かるものではないという固定観念があり、そんなものだろうと思っていたので気付きませんでした。

なお、このブログはPVが多くないので、いずれにしても金額的には大したことないです。

グラフで見ると、これぐらい変わりました。
SC17519114649.png


というわけで、たぶん参考にならないと思いますし、はっきりこれと分かったわけではないですが、以下、4月19日に何をしたか書いておきます。


ブログのデザインを新しいものに変えた


このブログは、ファンブログというA8.netが運営する無料ブログを使っているのですが、2014年1月に大きなリニューアルがありました。

そのリニューアルのときに、新しいデザインが追加され、リニューアル前のデザインは「旧デザイン」と呼ばれるようになりました。
何種類かに分かれていたHTML編集が1本化されたり、新旧デザインにはかなり違いがありそうでした。

ただ、それまで使っていたブログのデザインも引き続き使うことができたのと、以前のデザインはいろいろ先輩たちに教えていただいてカスタマイズしていたので、変更したくないという思いもあり、そのままにしていました。

それを今回思い切って変更したのが、4月19日でした。

たぶん、このデザイン変更は収益アップと直接関連しないと思いますが、まだ旧デザインを使っていて、1PV当たりの金額が桁違いに低い人は、新しいデザインに変えるといいかもしれません。


アカウント情報のタイムゾーンを東京にした


Google Adsense の[設定]の中に、[アカウント]→[アカウント情報]→「タイムゾーン」というのがあって、どういうわけか変な場所(ロサンゼルスかどこか、忘れましたが)になっていたので、「東京」に変更しました。

調べてみると、2013年以前は全部「太平洋標準時」だったのが、各地域のタイムゾーンに変更できるようになったようです。
ただし、私の場合は「太平洋標準時」ではないどこかになっていたので、自分で間違って設定していたのかも知れません。

また、このタイムゾーンの変更が収益に影響するかどうかは、さっぱり分かりません。


広告の表示場所を変えた


Google Adsense の広告は、記事下と右サイドバーの2か所に貼っていましたが、このうち右サイドバーの広告の場所を変えました。
これまでは、カテゴリー、最新記事、コメントなどを並べたその下の方に貼っていましたが、トップページや記事の先頭を表示したときに見える、一番上に変更しました。

訪問してくれた人の目に必ず入るようになったので、収益に影響する可能性はありますが、先頭にあるか下の方になるかの違いで、同じページにあるということに変わりはないので、効果は分かりません。
クリックされやすいということはありそうですが、今のところこのブログではクリック数はとても少ないので、関係なさそうです。


広告ユニットを貼る場所ごとに分けた


広告ユニットは、貼り付ける場所によってサイズを自動で選んでくれるレスポンシブというタイプを選んでいますが、自動でサイズを選ぶのならと、これまでは1つの広告ユニットのコードを、記事下とサイドバーに貼っていました。
それを、場所ごとに別の広告ユニットにしてみました。

私の勘では、これはかなり怪しいと考えています。
2か所に貼ったコードが同じ広告ユニットのものだったので、2つで1つ分の収益しかなかったとか、あるかもしれません。
でも収益が10倍以上になっていることを考えると、計算が合いませんが。

SC17523153847.png


4月19日よりも後にやったこと


今回の収益増には関係ないですが、4月19日から何日か経ってからやったことは、以下のとおりです。
その後5月に入ってからも少し伸びているので、効果があるかも知れません。

1)スマートホン用のサイトにも広告を設置

上の画像にあるように、スマートホン用の広告ユニットも作って貼るようにしました。
このブログでも、スマートホンで見てくれる人の割合は25%程度あるので、貼っておいた方がよさそうです。

2)Google アナリティクスと統合

最適化のお勧めとして、「Google アナリティクスと統合」というのが表示されていたので、やってみました。
Google アナリティクスはアクセス解析ツールですが、その結果とリンクして、Adsense のレポートが分かりやすく高精度になるというものだと思います。
(そのような説明が書いてあったような気がします)



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

2016年10月05日

最新! Twitter のタイムラインをブログのサイドバーに表示する方法

これは以前このブログで書いたことがあるのですが、やり方がずいぶん変わっていたので書き直すことにしました。

順に説明します。

1)Twitter にログインして、自分の Twitter の URL をコピーして、メモ帳などに貼り付けておきます。
 (こんなやつです → 「https://twitter.com/pontajya」)(このURLはあとで使います)


2)Twitter 右上のプロフィール画像が表示されているところ[プロフィールと設定]をクリックします。

SC16105163959.png


3)メニューの中の「設定」をクリックします。

SC16105164512.png


4)左側に表示されるメニューの中の「ウィジェット」をクリックします。

SC16105164756.png


5)先ほどのメニューの右側上に「ウィジェット」と表示されると思います。
 その右側にある[新規作成]ボタンをクリックします。

SC16105165023.png

上から「プロフィール」「いいね」「リスト」「コレクション」「検索」の5つが表示されますが、一番下の「検索」以外は、どれをクリックしても同じです。
(たぶん、メニューがまだちゃんと完成していないのだと思います)


6)上の4つのどれかをクリックすると、こんなのが開きます。
 (日本語でお願いしたいところです)

SC16105165925.png


7)「何を埋め込みたいですか?」と聞いているようです。
 よく見ると、白いところに「Enter a Twitter URL」と書いてあります。
 ここで、1)でコピーしておいた自分の Twitter のURLを貼り付けます。


8)自分の Twitter のURLを貼り付けたら、その右側の「→」矢印をクリックします。

SC16105171454.png


9)2種類のパターンが表示されますが、タイムラインを表示したいので、左側をクリックします。

SC1610517185.png


10)下のような表示になりますので、上の青い文字「set customization options」のところをクリックして、少しカスタマイズします。

SC16105172129.png


11)各オプションを設定します。

SC16105172815.png

 「Height(高さ)」は設定した方がよさそうです。
 設定しないで試したところ、すごく長く表示されてしまいました。
 このブログに設置している高さは 600px ですので、参考にしてみてください。
 (入力するときは「px」を付けないで、単に「600」とします)

 「Width(幅)」は、220px以上で設定します。
 自分のブログのサイドバー幅を入れればいいと思いますが、サイドバー幅が200pxしかないときは、「220」としてみてください。
 
 他の設定は、変えてみると、その場でどのように表示が変わるかわかるので、お好みで変更してみてください。

 オプションの設定が決まったら、[Update]ボタンをクリックします。


12)[Copy Code]ボタンを押すと、コードがコピーできます。
 貼り付け先が用意できていないときは、メモ帳などにいったん貼り付けておくといいです。

SC16105172129.png

 [Copy Code]ボタンを押したとき、下のような表示になりますが、これは「コピーしたよ。ブログの適切な場所に貼り付けてね。」みたいなことが書いてあります。(たぶん)
 これは、右上の「×」をクリックして閉じてください。

SC16105175017.png


あとは、自分のブログのサイドバーなど表示したい場所に、コードを設置すればOKです。
コードの設置のやり方は、それぞれのブログのヘルプなどに書いてあると思います。

以上です。


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

2015年05月20日

ブログにツイッターのウィジェットを設置する方法

ツイッターは、あまり活用していないので、このブログにはツイッターならぬ「つぶやき」というのを、右サイドバーに設けていたんですが、やはり使いづらいので、変えてみることにしました。

よく見かけるツイッターを表示するやつです。
(ウィジェットっていうらしいです)

【2016年10月6日追記】
やり方がずいぶん変わっていたので、書き直しました。


最新! Twitter のタイムラインをブログのサイドバーに表示する方法

ここから下は、古いやり方になります。

ブログにツイッターのウィジェットを設置する手順


すでにツイッターを使っているという前提です。
まだ使っていない人は、「ツイッターの始め方」などで検索して、アカウントを作っておいてください。

1) ツイッターにログインして、右上のプロフィール画像のところ(プロフィールと設定)をクリックします。

S150520202658.png

2) 開いたメニューの中の「設定」を開きます。

S150520203546.png

3) 左側にメニューが現れます。
  その一番下の「ウィジェット」をクリックして、[新規作成]ボタンを押します。

S150520203743.png

4) 「設定」の各項目をお好みに変更して、[ウィジェットを作成]ボタンを押します。
  よく分からなければ、とりあえずそのままでも、いいかと。(私、そうしました(^_^; )

S150520204234.png

5) 下の方にコードが表示されるので、それをコピーして、メモ帳かテキストエディタなどに貼り付けます。
  準備ができていれば、直接ブログに貼り付けてもいいですが、いったんメモ帳などに貼り付けて保存した方が作業しやすいと思います。
  コードをコピーするときは、コード部分をクリックしてから、[Ctrl]+[A]キーを押して、全部選択した状態にしてからコピー([Ctrl]+[C])するといいです。

S150520204659.png

  コピーしたら、左側の[変更を保存]ボタンを押しておきましょう。

6) 最後に、ブログの設定でサイドバーに設置します。
  自由形式でコードを設置できるコンテンツを利用して、そこに5)でコピーしたコードを貼り付ければいいと思います。


あとは、ツイートするとブログにそれが表示されるということになりますが・・・

これまでブログの更新しかツイートしていなかったので、ちゃんと他にもツイートするようにしなければなぁと、少々プレッシャーを感じております(^^ゞ



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

ブログ内を検索
ファン
最新記事
カテゴリー
最新コメント
ツイッター

広告設置のお知らせ

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

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

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