検索キーワード「label:コンピューター label:Blogger」に一致する投稿を関連性の高い順に表示しています。 日付順 すべての投稿を表示
検索キーワード「label:コンピューター label:Blogger」に一致する投稿を関連性の高い順に表示しています。 日付順 すべての投稿を表示

2021/12/16

Blogger で jQuery を使う

jQuery は機能が豊富な JavaScript ライブラリで,多くの人が使っています.これを使うことにより,JavaScript を使った WEB サイトが簡単に作成できます.ちょっと設定すれば,Blogger でも使うことができます.設定の詳細は ライブラリー: jQuery に記載しました.

ここでは,簡単に設定方法を示します.jQuery を使うためには,テーマの HTML の先頭付近の <head> と </head> の間に以下を記載します.

<script src='httpssurutop:su//ajax.googleapis.com/ajax/libs/
jquery/3.6.0/jquery.min.js'/>

すると,Blogger でも jQuery が使えるようになります.jQuery の動作の確認は,Blogger の HTML ビュー (左上の鉛筆マークから選択) で,以下のコードを 記載します.

<div id="jQ_show"></div>

<script type="text/javascript">
  $("div#jQ_show").html("Hello world.</br>jQuery "+ $.fn.jquery)
</script>

すると,jQuery が動作していると以下のように表示されます.

「Hello world」と「jQuery 3.6.0」と表示されると,jQuery が使えるようになったことになります.

2021/12/21

ブログの記事や WEB サイトのページを増やす3つの方法

私は3つのブログ(シニアーエンジニアーの独り言,東京案内,山本研究室ブログ)と1つの WEB サイト (山本研究室) を運営しています.運営と言っても,ただポチポチと書いているだけですが、野望は大きく,1万円/日の Google AdSense の広告収入が目標です.ブログの記事の数はそれほど多くはありません。WEBサイトのページ数は 3,590 ページとかなりの分量です.ここでは,私が実践しているブログの記事や WEB サイトのページを増やための3つの方法:

  1. ネタの記録 書くべきと思ったことをメモあるいは写真に.
  2. 時間の確保 時間のあるときにまとめて書く.
  3. 公開を急ぐ 中途半端でも公開.

を示します.

ネタの記録  普段から記事やサイトのページになると思ったことを記録します.ちょっとした思いついたことを何でもかんでも記録に残します.ブログの記事の場合は,思いついた瞬間にタイトルを書きます.スマホでもタイトルが書けるので重宝します.写真に撮ることもあります.科学・技術に関する内容は,Evernote に残します.インターネットで調べ物をしているとき,メモとともに有用なサイトのタイトルや内容,URL を Evernote に貼り付けます.面倒な計算などは,手書きのメモですね.このようにして,記事やページのネタ作りをします.一週間でかなりの数のネタが集まります.

時間の確保  私の場合,週末にブログや WEB サイトを書くことが多いです.ブログの場合,タイトルが出来上がっていたり写真があるので「何を書こーかなーって」と悩むことがありません.一気に書くだけです.また,通勤電車で書くことも多いです.WEB サイトは,Evernote の内容をページにします.そのページが出来上がると,Evernote のノートを削除します.一気に週末に書くと,効率は良いです.

公開を急ぐ  ブログにしても WEB サイトにしても公開を急ぐことが大事だと思っています.私の場合は,中途半端でも不十分な出来でも公開します.気に入らない部分は,後で直します.私のモットーは「100点を目指すよりも60点での早い公開の方が良い」です.

このような感じで,私はインターネット上での発信を続けています.かなり楽しいです.これまで示した3つの方法だけでは,継続な発信はなかなか難しいです.モチベーションの維持が大事です.いまから 18 年ほど前に,初めて WEB サイトを公開したとき,訪問者のカウンターがモチベーションの維持に役立ちました.毎日,カウンターが増えるのが楽しみでした.しばらくすると,それが Google アナリティックスになりました.ページビューの変化や読者の動向を見ていました.そして,今は Google AdSense の収益が楽しみです.この広告収入が 1 万円/日になったら,セミリタイアしようなー😁.



2026/04/12

WEB サーバーの apache2 に巨大な error.log の削除

私の html のソースコードに問題があるらしく,時々,WEB サーバーの apache2 のログが巨大になります.この場合,以下のコマンドにより,ログファイルを削除する必要があります.
$ sudo truncate -s 0 /var/log/apache2/error.log
$ sudo rm -f /var/log/apache2/error.log.*
最初のコマンドは,error.log の中身を削除 (size: 0バイト)にします.二つ目はファイルの削除です. 削除後は,
$ sudo service apache2 restart
で,リスタートします.

2021/12/25

Blogger で画像を並べる

 Blogger  の「画像の挿入」では,画像は横に並べることができません.そこで,横に並べるテクニックを示します.

画像を横に並べる方法

Blogger で,以下のように画像を並べる方法を示します.

Blogger では,上のように画像を横に並べる手順は,以下のようにします.

  1. Blogger のエディターの「HTML ビュー」で以下を記述します.例えば,二枚の画像を横に並べる場合は,
    <div style="display:grid; gap:5px; grid-template-columns:1fr 1fr;">
        
    <!--- ここに画像を挿入する -->
    
    </div>
    とします.「grid-template-columns:1fr 1fr;」で,サイズ 1:1 の二つの画像が並びます.fr は fraction の略です.「grid-template-columns:1fr 1fr 3fr;」とすると,サイズ 1:1:3 になります.「grid-template-columns:200px 300px;」とすることもできますし,px と fr  を組み合わせることもできます.
  2. この状態 (HTMLビュー) で,画像を入れる場所にカーソルを移動させます.そして,画像を挿入します.複数の画像を一気に挿入します.
  3. 画像を挿入した後は,画像の幅 (width) の調整を行います.調整する部分は,<img alt=… width="xxx" />の部分です.この img タグはかなり長く,その最後の部分です.
  4. 必要に応じて,キャプションを追加します.キャプションの追加はエディターの「作成ビュー」で行います.

画像を結合する方法

画像の表示枠を結合することもできます.以下の例は,二行目を結合し,横長にしています.

紅葉のはじまり
並木道
昭和記念公園

このように画像を結合するには,gird-row と grid-column を使います.使い方は,下図の通りです.キャプションがない場合は,<div> に書きます.キャプションを入れると<table>に記載します.

さらに,CSS に「grid-area: 左上行/左上列/右下行/右下列;」を書きます.上の写真では「grid-area: 2/1/3/3」で下の写真では「grid-area: 3/3/4/7」です.

grid-row と grid-column を使ったセルの結合.この例は3行7列のセルがあり,その3行目の3列目から6列目までを結合しまます.

2021/12/29

Blogger にアップロードした画像ファイルサイズの変化

Blogger を始めて,二月ほど経過しました.結構気に入っており,当分の間の雑文は  Blogger で書きます.文字だけだとつまらないので,できるだけ画像を載せます.画像,特に写真を掲載するとき,そのファイルサイズが気になります.ファイルサイズの大きな写真は,そのままのファイルサイズでアップロードされるのだろうか? それとも,適当なサイズに圧縮 (画像の分解能低下) されて,アップロードされるのか? が気になります.もし,適当なサイズに圧縮されるならば,ファイルサイズを気にしないで,写真を撮ることができます.圧縮されないらないならば,ファイルサイズを気にする必要があるかもしれません.そこで,アップロードした写真のファイルサイズの変化を調べます.

ファイルサイズの異なる5枚 (図1から図5) の写真 (jpeg) を Blogger にアップロードしました.表1にアップロードの前の元ファイルのサイズとアップロード後のファイルサイズを示します.アップロード後のファイルサイズは,図1から図5をクリックして表示されたファイルをダウンロードし,そのサイズを調べました.アップロード後のファイルは 30 kB から 50 kB くらいファイルサイズが小さくなっています.とはいえ,ファイルサイズの変化は少ないと言えます.ほとんど,元のファイルのままアップロードされます.ただし,表示されている図1から図5のファイルサイズは,26 kB から 28 kB です.表示されているファイルサイズは小さいですが,アップロードされているファイルサイズは大きいです.

ファイルサイズはほとんど変化しないでアップロードされるため,そのサイズに気を付ける必要があります.大きすぎるファイルをアップロードしない方が良いですね.

表1 ファイルサイズの変化
図番号 アップロード前 [MB] アップロード後 [MB]
図1 0.085 0.048
図2 0.197 0.159
図3 0.555 0.509
図4 1.184 1.150
図5 6.811 6.785

図1 ファイルサイズ: 0.084 MB
図2 ファイルサイズ: 0.197 MB
図3 ファイルサイズ: 0.555 MB
図4 ファイルサイズ: 1.184 MB
図5 ファイルサイズ: 6.811 MB

2021/11/30

一ヶ月 Google Blogger を使った感想

 Google Bloggerを使い始めて一ヶ月が過ぎ,20個の記事を書きました.Blogger は使い勝手もよく,大変気に入っています.世の中でこれを使ってる人が少ない理由がわからないですね.コンピューターに疎い人にとっては,とても良いブログツールです.誰でもが簡単に,ブログを書くことができます.

私は,この Blogger の他に,二つのブログを持っています.ひとつは自宅サーバーにインストールした WordPresss,もうひとつはロリポップ上の WordPress です.WordPress は様々な設定ができる反面,その設定とメンテナンスがとても面倒です.私は半分,コンピューターオタクの要素があるので,面倒なことはなんとかこなしています.

コンピューターに疎い人にとっては,WordPress の敷居は高いと言わざるを得ません.事実,私はコンピューターに疎い人のために WordPress の設定を行い,執筆環境を整えたことがあります.環境を整えると数回の記事は書きますが,続きません.いろいろなことをやろうとすると,手間がかかり,そこで諦めてしまいます.アップデートのメッセージが出ようものなら,そこでパニックになる人もいるでしょう.

ほぼ環境の整ったフリー (無料) のブログシステムもあります.裏では WordPress などが動作しています.この場合,自分でブログシステムの設定やメンテナンスをすることがないため,運用は簡単です.問題は勝手に広告がつくことです.これはシステムを提供している会社の収益源がこの広告だから,仕方ないことです.このシステムを使う人の大多数は,WordPress の高機能な部分は使っていないはずです.わざわざ WordPress を使う必要はないです.

その一方で,Google Blogger には面倒な設定は殆どありません.デフォルトでもそれなりのブログを書くことができます.WordPress  のような高機能ではありませんが,90%の人はこれで事足りるでしょう.しかも無料で,広告も付きません.自分で広告を付けて,収益を得ることも可能です.

Google Blogger を始めるのは,とても簡単です.方法は私の WEBサイト「Blogger 設定基本」に書きました.色々なサイトで Blogger の始め方が書いてあります.これらを参考にすると,コンピューターに疎い使徒でも始めることができます.

2021/11/08

Google マップ を Blogger に掲載する方法

地図をつかい場所を示すには,Googe マップが便利です.ここでは,Blogger に Google マップを Blogger に掲載する方法を示します.

そのまま Blogger に載せる (未加工)

素の Google マップを Blogger に掲載する方法を示します.順序は HTML のソースを作成し,それを Blogger に挿入です.

HTML のソースコードの作成

google マップで表示されている地図を,そのまま掲載するのは簡単です.表示のための HTML のソースコードの作成手順は,以下の通りです.

  1. Google マップを開きます.
  2. Blogger に掲載したい場所を表示させます.
  3. 左上のメニューをクリックし,「地図を共有または埋め込む」を選択します.
  4. 共有のダイアログが表示されますので,[地図を埋め込む] のタブをクリックします.
    • HTML ソースが表示されます.
    • ソースは「<iframe src="https://www.google.com/maps/ ......」となっています.インラインフレームを使っていることがわかります.
  5. 地図のサイズを (小, 中, 大, カスタムサイズ) から選択します.
  6. 「HTMLをコピー」をクリックします.

以上で,Google マップの HTML のソースコードの作成が完了しました.そのソースコードはクリップボードに保管されています.次節の操作で,このソースコードを Blogger に挿入します.

Blogger に挿入

クリップボードに保管されている HTML のソースコードを Blogger に貼り付ける(ペースト, ctrl+v) 手順は以下のとおりです.
  1. 表示させる Blogger を開きます.
  2. 左上の鉛筆マークをクリックし, HTML ビューにします.
  3. 地図を表示したい場所に,先ほどコピーした HTML を貼り付け (ペースト, ctrl +v) します.
  4. 左上の鉛筆マークを作成 ビューにします.

以上で完了です.以下のような Google マップが,Blogger のページに表示されるはずです.


編集した地図を Blogger に載せる

Google マップの地図に編集 (マーカー,ライン,ルート) を加えて Blogger に掲載する方法を示します.順序は HTML のソースを作成し,それを Blogger に挿入です.私の別の WEB サイト「領域指定/ルート指定地図をWEBサイト/ブログに掲載」にに記載があります.

HTML のソースコードの作成

先の例とは異なり,地図を編集します.編集とはいえ,できることは限られています.ポリゴンとラインの作成などです.編集を加えた Google マップの HTML のソースコードの作成手順は,以下のとおりです.

  1. Google にログインします.通常は Google のサイトを開けば,ログインできているはずです.
  2. 右上のメインメニューをクリックし,マイプレイスをクリックします.
  3. マイマップを選択し,下の方にある「地図を作成」をクリックします.
  4. [+新しい地図を作成] をクリックします.理由は不明ですが,[+新しい地図を作成] が表示されないで,次の画面になることがあります.
  5. 「無題の地図」をクリックし,地図に名前を付けます.そして「無題のレイヤ」もクリックして,レイヤに名前を付けます.
  6. 編集する地図を表示させます.そして,マーカーとライン,ルートを使い地図を編集します.
  7. 「共有」をクリックすると,「地図の共有」が現れます.適当な項目を ON にします.設定が終われば,閉じる をクリックします.
  8. 地図の名前の横の三点メニューをクリックし,「自分のサイトに埋め込む」を選択します.
  9. すると,HTML のソースコードが表示されます.このコードが選択されていますので,[OK] をクリックします.

以上で,Google マップの HTML のソースコードの作成が完了しました.そのソースコードはクリップボードに保管されています.次節の操作で,このソースコードを Blogger に挿入します.

Blogger に挿入

クリップボードに保管されている HTML のソースコードを Blogger に貼り付ける(ペースト, ctrl+v) 手順は以下のとおりです.
  1. 表示させる Blogger を開きます.
  2. 左上の鉛筆マークをクリックし, HTML ビューにします.
  3. 地図を表示したい場所に,先ほどコピーした HTML を貼り付け (ペースト, ctrl +v) します.HTML の width と height を変更すると,表示サイズを変えることができます.
  4. 左上の鉛筆マークを作成 ビューにします.

以上で完了です.以下のような Google マップが,Blogger のページに表示されるはずです

2021/12/19

Bloggerで Google Code Prettify (GCP) を使う

 Blogger でソースコードを書くとき,私は Bloggerで Google Code Prettify (GCP) を使います.GCP はシンタックスハイライター (Syntax Highlighter: 構文ハイライター)と呼ばれるもので,これを使うとプログラムソースコードをわかり易く表示できます.GCP の使い方に関しては,私の別のサイト「ソースリスト: Google Code Prettify」や「WEB ページ作成基準 google code prettify」に詳しい説明があります. ここでは,Google Blogger に特化して,GCP の使い方を説明します.だだし,これはかなり特殊な使い方なので,誰でもができる方法ではありませんので注意が必要です.

GCP を使うと,Blogger でも以下のような表示が可能です.これは Python プログラムのソースコードを表示した例です.

  1. import numpy as np
  2. import matplotlib.pyplot as plt
  3.  
  4. fig = plt.figure()
  5. axis = fig.add_subplot(1,1,1)
  6.  
  7. x, y = np.mgrid[-2: 2: 4001j, -2: 2: 4001j]
  8.  
  9. axis.set_title('Ellipse')
  10. axis.set_xlabel(r'$x$', fontsize=20, fontname='serif')
  11. axis.set_ylabel(r'$y$', fontsize=20, fontname='serif')
  12. axis.tick_params(axis='both', length=10, which='major')
  13. axis.tick_params(axis='both', length=5, which='minor')
  14. axis.minorticks_on()
  15. axis.set_aspect('equal', 'box')
  16. axis.set(xlim=(-2, 2), ylim=(-2, 2))
  17.  
  18. axis.contour(x, y, x**2 - 2*x*y + 2*y**2, [1])
  19.  
  20. plt.show()
  21. fig.savefig('plot.svg', transparent=False)

ソースコードがわかりやすいでしょう.これって,記載が大変そうですが,実はとても簡単です.具体的な手順は,以下のとろりです.

  1. GCP を使った表示 (HTMLソース) をブログではない別の WEB サイトで作成します.
  2. 表示されたソースコードをコピーします.
  3. Blogger のエディターを「作成ビュー」にします.
  4. コピーしたソースコードをペーストします.
  5. エディターを「HTML ビュー」にして,margin や width, height を調整します.

たったこれだけです.不思議なことに,GCP が反映された表示が可能になります.とっても便利です.

このテクニックを使うためには,ブログではない別サイトが必要です.別サイトで GCP を使っている人は,試してください.

2021/12/13

Blogger で MathJax を使う

MathJax は,WEB で数式を美しく表示させるための,JavaScript ライブラリーです.これを使うと WEB サイトで美しい数式を表示することができます.構文は LaTeX と同一で,LaTeX を使っている人は使い方を調べる必要もないくらいです.Blogger でも MathJax を使うことができます.その設定の詳細は ライブラリー: MathJax に記載があります.ここでは簡単に設定方法と使い方を紹介します.

設定

MathJax を使うためには,テーマの HTML の先頭付近の <head> と </head> の間に以下を記載します.

<script src="https://polyfill.io/v3/polyfill.min.js?
    features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.
    net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

たったこれだけで,LaTeX 構文が使えるようになります.すると,以下のような数式が記述できます.

\begin{align} f(a)=\frac{1}{2\pi i}\oint\frac{f(z)}{z-a}dz \end{align} \begin{align} \int_D(\nabla\cdot A)dV=\int_{\partial D}A\cdot n dS \end{align}

LaTeX の構文は,Bloggerの HTML ビューで記述します.HML ビューは,Blogger のエディターの左上の鉛筆マークをクリックすると選択できます.この二つの数式は,

\begin{align}
f(a)=\frac{1}{2\pi i}\oint\frac{f(z)}{z-a}dz
\end{align}

\begin{align}
\int_D(\nabla\cdot A)dV=\int_{\partial D}A\cdot n dS
\end{align}

と Blogger で記述しました.

モバイル設定

デフォルトだとスマートフォンで表示は,整形された数式ではなく LaTeX のコマンドが表示されます.モバイル用の HTML に先の設定を書き込む必要があります.Blogger の場合,モバイル表示の場合の HTML の編集方法がわかりません.そこで,私はスマートフォンでもウェブバージョン表示に変更しました.方法は,次のとおりです.

  1. メニューボタン > テーマ > カスタマイズ▼の▼を順番にクリックし,「モバイルの設定」を選択します.
  2. モバイルテーマを選択で「デスクトップ」を選択します.
  3. 「保存」をクリックします.

以上で,スマートフォンでもウェブバージョンで表示されます.

2021/12/14

Blogger のラベルの階層化

Google Bloggerのラベルを階層化しました.私のこのブログ「シニアエンジニアの独り言」のラベルが階層化されていることがわかるでしょう.私が考える Blogger の最も使い難い点は,ラベルが階層化されていないことです.ブログの内容をざっと見る興味のある項目を探す手段はラベルしかありません.それが階層化されていないとなると,かなり読者には辛いです.

そこで,ラベルを階層化することにしました.階層化する方法の詳細は私の WEB  サイトのラベルの階層化を参照下さい.ラベルの階層化をする概要は,以下のとおりです.

  • Blogger のレイアウトにあるガジェット「HTML/JavaScript」を使います.
  • このガジェット内に HTML を記述します.
    • リスト (<ul>〜</ul> あるいは <ol> 〜 </ol>) で階層化します.入れ子も可能です.
    • ラベルは「https://あなたのサイト.blogspot.com/search/search/?=ラベル」を使い,リンクを張ります.
    • 検索条件の論理積演算には「+」,論理和には「|」を使います.括弧も使えます.

この方法を使うと Blooger のラベルの階層化はとても簡単にできます.読者にも優しいと思います.

私のガジェットの中身 (HTML) は,以下のとおりです.

<ul style="list-style-type:square;">

<li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター">コンピューター</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:インターネット">インターネット</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:レトロ">レトロ</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:Blogger">Blogger</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:科学|label:工学">科学・工学</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:物理">物理</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:数学">数学</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:その他">その他</a></li>
  </ul>
</li>

<li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢">将来の夢</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:物理">物理</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:コンピューター">コンピューター</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:旅">旅</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン">オピニオン</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:ビジネス">ビジネス</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:技術">技術</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+(label:環境|label:エネルギー)">環境・エネルギー</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:公共関係">公共関係</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:芸術">芸術</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:経験">経験</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:経験+label:授業">授業</a></li>
   </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:散策">散策</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策+label:東京都内">東京都内</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策+label:道具">道具</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出">思い出</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:ブラジル">ブラジル</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+(label:幼稚園|label:小学校|label:中学校|label:高校)">幼稚園/小/中/高校</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:大学">大学</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:社会人">社会人</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活">普段の生活</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:購入品">購入品</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:ひとり言">ひとり言</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:日記">日記</a></li>
  </ul>
</li>

</ul>

2021/12/17

Blogger で外部ファイルを読み込む方法

Blogger でも外部ファイルを読み込むことが可能です.Google ドライブに保管されているファイルの読み込みが簡単です.ここでは,Google ドライブにある画像ファイルを Blogger で表示させる方法を示します.こんなことしなくても Blogger に画像を挿入することは可能ですが,勉強です.

最初に必要なことは,画像のファイルを共有の設定をすることです.Google ドライブの画像ファイルを右クリックし「リンクを共有」を選択します.閲覧者で「リンクをコピー」を選択します.すると

https://drive.google.com/file/d/1aF4BdnHRhEfTI9uB_JTpiagwAIc6_NE6
       /view?usp=sharing

というようなリンクが得られます.赤字の部分がファイルIDで,それをメモします.このファイル ID はファイルごとにユニークに決まっています.

このファイル ID を使い,Blogger 中に以下

<div style="text-align: center;">
  <img src="https://drive.google.com/uc?export=view&amp;id=1aF4BdnHRhEfTI9uB_JTpiagwAIc6_NE6" style="width: 300px;" />
</div>

を記載すると,下の画像が表示されます.

ミツバチの写真

「https://drive.google.com/uc?export=view&id=ファイルID」で Goole ドライブのファイルを使うことができます.

2021/12/23

Google AdSense が「承認手続きを進めています...」に

 ちょっと前に,Google AdSense が「承認手続きを進めています...」になりました.このままほっとけば,そのうちに合格通知が来るものと思っていました.ネットで調べると,ほったらかしはダメなようです.広告の設定を行わないと「承認手続きを進めています...」の状態が延々続くようです.

そこで,広告を設定しました.設定方法の詳細は「ブログに広告を表示する」に示します.ここでは,「承認手続きを進めています...」が表示された後について,簡単に説明します.この表示が現れたら,以下の順序で,Blogger の広告を設定します.

  1. 自分の AdSense のページに移動し,広告 > サマリーをクリックします.そして「コードを取得」をクリックします.
  2. 現れたコードをコピーします.[コードをコピー] をクリックするだけです.
  3. コピーしたコードを Blogger の <head> と </head> の間に貼り付けます.
  4. 次に広告を設定します.AdSense のページに移動し,広告 > サマリーをクリックします.そして,広告を表示させる Blogger の編集をクリックします.
  5. 現れた広告設定の「自動広告」を ON にします.そして,[サイトに適用] をクリックします.
  6. Blogger のレイアウトを開き,「ガジェットの追加」をクリックし AdSense を追加します.これは不要かも? 私は念のために,追加しました.
以上で,しばらく待ちます.私の Blogger では,まだ結果は出ていません.楽しみです.