ラベル Blog の投稿を表示しています。 すべての投稿を表示
ラベル Blog の投稿を表示しています。 すべての投稿を表示


Blogger サイトデザイン（テンプレート）変更手順

Image
Photo by Clark Tibbs on Unsplash

※実行に際しては自己責任でお願いします。

サイトデザインを変更したときの手順をまとめた。

お気に入りのテンプレートを探す

Blogger 向けのテンプレートは次のサイトで取り扱っている。

探すポイントを予め決めておく。

例えば、

  • デザインがよい（色彩、レイアウト、フォント等）
  • SEO 対策がされている
  • 軽量

等。

お気に入りのテンプレートが決まったらダウンロードする。

バックアップを取っておく

元に戻せるようにバックアップを取っておく。

Blogger で CSS を追加する方法

テーマのバックアップ

次の手順でテーマ（デザイン部分）のバックアップを取る。

  1. Blogger を開き、左側のメニューから「テーマ」を選択する。
  2. 「カスタマイズ」から「バックアップ」を選択する。
  3. ダウンロード先に「theme-xxxxxxxxxxxxxxxxxxx.xml」というファイルができる。
    「xxxxxxxxxxxxxxxxxxx」 はブログ ID 。
    元に戻す場合は、「カスタマイズ」から「元に戻す」を選択し、このファイルをアップロードすればよい。

HTML コードを保存しておく

目次や関連記事等を表示するために外部からコードを取り込んでいる場合は HTMLコード全体をテキストファイルに保存しておくと復元しやすい。

  1. Blogger を開き、左側のメニューから「テーマ」を選択する。
  2. 「カスタマイズ」から「HTML を編集」を選択する。
  3. 表示されたコードを全体をコピーし、メモ帳などに貼り付けて保存する。

HTMLコード全体をコピーするのは、取り込んだコードの配置場所を特定するため。
予め取り込んだコードにわかりやすいコメントを入れておくと探しやすい。

コンテンツのバックアップ

次の手順でコンテンツ（投稿、ページ、コメント）のバックアップを取る。

  1. Blogger を開き、左側のメニューから「設定」を選択する。
  2. 「ブログの管理」から「コンテンツをバックアップ」を選択する。
  3. ダウンロード先に「blog-mm-dd-yyyy.xml」というファイルができる。
    元に戻す場合は、「ブログの管理」から「コンテンツをインポート」を選択し、このファイルをアップロードすればよい。

テスト用サイトで試す

いきなり新しいテンプレートを適用するのはリスクが高い。
まずはテスト用サイトを作成し、そこで新しいテンプレートを試してみる。

テスト用サイトを作成する

  1. Blogger を開き、左側メニューの最上部にあるブログ選択プルダウンメニューから「新しいブログ…」を選択する。
  2. テスト用サイトの名前を入れて新しいブログを作成する。

テスト用サイトに現在のテーマとコンテンツを適用する

いきなり新しいテンプレートを適用してもよいが、極力本番サイトと同じ条件にしておくことが望ましいので、上記のテーマとコンテンツのバックアップをテスト用サイトに適用する。

  1. Blogger を開き、左側のメニューから「テーマ」を選択する。
  2. 「カスタマイズ」から「元に戻す」を選択し、バックアップファイルをアップロードする。
  3. 左側のメニューから「設定」を選択する。
  4. 「ブログの管理」から「コンテンツをインポート」を選択する。

テスト用サイトに新しいテーマを適用する

新しいテーマをテスト用サイトに適用し、見栄えなどを確認する。

  1. Blogger を開き、左側のメニューから「テーマ」を選択する。
  2. 「カスタマイズ」から「元に戻す」を選択し、テンプレートサイトからダウンロードしたファイル（拡張子「.xml」）をアップロードする。
  3. 左側のメニューから「レイアウト」を選択し、ガジェットの配置を整える。

本番サイトのデザインを変える

テスト用サイトで新しいテーマを確認して問題がなければ本番サイトに適用する。

本番サイトに新しいテーマを適用する

テスト用サイトで行った手順にならって、本番サイトに新しいテーマを適用する。

  1. Blogger を開き、左側のメニューの最上部にあるブログ選択プルダウンメニューから本番ブログを選択する。
  2. 左側のメニューから「テーマ」を選択する。
  3. 「カスタマイズ」から「元に戻す」を選択し、テンプレートサイトからダウンロードしたファイル（拡張子「.xml」）をアップロードする。
  4. 左側のメニューから「レイアウト」を選択し、ガジェットの配置を整える。

デザインを整える

フォント、フォントサイズ、背景色、テキスト色、線の種類、線の太さ等、気になるところを CSS で調整する。

  1. Blogger を開き、左側のメニューから「テーマ」を選択する。
  2. 「カスタマイズ」から「HTML を編集」を選択する。
  3. 該当の CSS 定義を変更して保存する。
  4. 本番サイトを開き、意図したとおり表示されていることを確認する。

外部から取り込んだコードを適用する

目次や関連記事等を表示するために外部からコードを取り込んでいる場合は HTMLコードを編集してそれらを復旧する。

  1. Blogger を開き、左側のメニューから「テーマ」を選択する。
  2. 「カスタマイズ」から「HTML を編集」を選択する。
  3. 保存した HTMLコードの中から外部のコードをコピーし、新しいテンプレートの該当箇所に貼り付けて保存する。
  4. 本番サイトを表示し、外部から取り込んだコードが正しく適用されていることを確認する。

その他の確認

本番サイトを巡回し、問題があれば都度修正する。

この作業がサイトの品質を高めることになる。

まとめ

サイトの改造は楽しい。

問題が生じても調べながら解決していくことはスキルアップにつながる。

期待どおりに改造できれば気分も盛り上がる。

ただし、これまで問題なく表示できていたものが表示できなくなる等のリスクはある。

あくまでも自己責任で。

Posted in  on 2/11/2022 by rteak |  


jQuery の脆弱性対策

Image
Photo by FLY:D on Unsplash


昨日サイトのデザインを一新したが、Lighthouse で評価してみると、Fig.1 のようなセキュリティ上の問題が検知された。

Fig.1 jQuery 脆弱性対策前

導入したテンプレートの HTML コードを見たところ、

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

という記述があった。

このコードをコメントで無効にしたところ、モバイルページのプルダウンメニューが動かなくなった。

多分このためだけに使っているようだ。

そこでこれを次のコードに書き換えてみた。

<script src='https://code.jquery.com/jquery-3.5.0.js' type='text/javascript'/>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'
 type='text/javascript'/>

コードを書き換えた後も、モバイルページのプルダウンメニューは正常に機能しているので、問題はなさそうだ。

再度、Lighthouse で評価してみたところ、Fig.2 のとおり問題は検知されなくなった。

Fig.2 jQuery 脆弱性対策後

ヤマカンで試したので、うまくいく自信はなかったけれど、とりあえず一件落着。

参考：jQuery 3.5がリリースされ、XSSの脆弱性が修正された


Posted in  on 2/08/2022 by rteak |  


PyCharm （無償のデスクトップアプリ）を使って HTML コードを整形する

Image
Photo by Artem Sapegin on Unsplash

※この記事は2020年7月31日の投稿を再編集したものです。
※この記事は2021年5月19日の投稿を再編集したものです。

HTML コードを整形してくれるツールを探していたら、すでに持っていたという話。

Blogger の HTML コードは読みづらい

Blogger は編集したテキストを HTML コードに変換してくれる。
ところが、この HTML コードは、改行がほとんどなく、インデントもされないので、非常に読みづらい。

修正したい箇所を探すのにいつも苦労していた。


Fig.1 Blogger が変換してくれた HTML コードの例

HTML コードを整形するツール

そこで HTML コードを整形してくれるツールを探してみたところ、いろいろなオンラインツールが提供されていることがわかった。

PyCharm で HTML コードが整形できる

半ば諦めて上記のオンラインツールの中から選ぼうと思いながら PyCharm を眺めていたところ、ふと PyCharm のメニューに目が止まった。

PyCharm は Windows で使える無償のデスクトップアプリ。
PyCharm は Python の開発環境として使っているが、HTML コードも編集することができる。

それに気づき、HTML に関するメニューを探してみた。

そして、そこに「Code」->「Reformat Code (ctrl + Alt + L)」というのがあった。


Fig.2 PyCharm Code のメニュー

試しに、scratch.html というファイルを作り、そこに Blogger が変換してくれた HTML コードを貼り付け、Reformat Code をクリックしてみた。

なんと、あの読みづらいコードをきれいに整形してくれるではないか！


Fig.3 PyCharm で HTML コードを整形した結果

目からウロコとはまさにこのことだ。

PyCharm は見事に悩みを解決してくれた。

PyCharm のインストール方法

PyCharm のインストール方法は「 PyCharm を Windows 10 にインストールする 」に掲載しているのでよければご覧いただきたい。

Posted in  on 1/16/2022 by rteak |  


サイトのイメージダウンにつながる不快な広告をブロックする方法（Google AdSense 利用サイト運営者向け）

Image
Photo by Myriam Jessier on Unsplash

不快な広告を表示するとサイトのイメージダウンになる

ニュースサイト等を見ていると、たまに生理的不快感をもたらす広告〈具体的に書くと実際に表示されてしまう可能性があるため抽象的な表現にしている〉が表示されていることがある。

このような広告を不快だと思うかどうかは人によるとは思うが、私は不快になるし、見たくもない。

そして、このような広告はサイトのイメージダウンにつながると思っている。

悪質な事業者の広告である可能性もある

不快だと思った広告主の名称を検索してみると、○○に関連する検索キーワードに「○○　解約」「○○　評判」「〇〇　怪しい」「〇〇　解約できない」「○○　電話つながらない」（○○は広告主の名称）などが表示されることがある。
また、「サンプルを注文したのに定期購入にされた」などのネガティブな口コミも見られた。
これは事業者間のネガティブキャンペーンによるものかも知れないが、いずれにしても関わりたくはない。

悪質な事業者であった場合、被害者を増やすことにつながりかねないし、サイトを訪問してくださった方々に不快な思いをさせるかも知れないという不安は拭えない。

特定の広告をブロックする方法

以下は Google AdSense だけの対処となるが、Google AdSense の左側にあるメニューの「ブロックのコントロール」で特定の広告を表示させないようにできる。（Fig. 1 参照）

なお、当然のことながら、広告を表示させないことにより、収益が減る可能性があることはご認識いただきたい。

Fig. 1 ブロックのコントロール

広告レビューセンターでブロックする

「広告レビューセンター」を開くと審査前の広告が表示されるので、表示したくない広告をブロックする。（Fig. 2 参照）

※ Fig. 2 では、審査前の広告がない状態。

Fig. 2 広告レビューセンター

広告主の URL を指定する

次に広告主を検索し、探し当てた URL を指定してブロックする方法について説明する。

まず、「広告レビューセンター」の下にある「すべてのサイト」を開いて、「広告主の URL を管理」をクリックする。（Fig. 3 参照）  

Fig. 3 広告主の URL を管理

広告主の URL を入力して「検索」をクリックする。（Fig. ４ 参照）

※ すでにブロック済みの URL については、Fig. 4 では、広告主への業務妨害につながる可能性があるため、マスキングしている。（当サイトではすでに 19 件ブロック済み）

Fig. 4 広告主の URL を検索

検索結果が表示されたら、「許可済み」のスイッチをクリックする。（Fig. 5 参照）

すると、スイッチの表示が変わり、「ブロック済み」となる。（Fig. 6 参照）

※ URL が実在しなくても検索結果が表示されるようなので、スペルミスなどに注意する。

Fig. 5 広告主の URL 検索結果表示


Fig. 6 広告主の URL ブロック済み 

目先の収益か？サイトの評判か？

レピュテーションリスクという言葉がある。
否定的な評価や評判が広まることで、信用やブランド価値が下がり、損失を被る危険性のことである。

価値観や主義、考え方は人によって異なるので、押し付けるつもりはないが、個人的には目先の収益よりサイトの評判を取る。

きれいごとだと思われるかも知れないが、人を陥れてまで儲けたいとは思わない。
何よりも誰もが幸せな気持ちでいられることを望んでいる。

Posted in  on 1/17/2021 by rteak |  


Google 自動広告をオンにしているとサイト内リンクが反応しなくなる件【改善済み】

Photo by Raphael Lovaski on Unsplash 

モバイルでサイト内リンクが反応しないときがあった

スマホで当サイトにアクセスし、サイト内のリンクをクリックして別ページに移動しようとしてもできないことがあった。
サイト内のリンクを連打すると別ページに移動できることもあった。

デスクトップでもサイト内リンクが反応しなくなった

最近デスクトップでも同じような現象が発生するようになってきた。
関連性があるかどうか不明だが、11月3日にデスクトップでもモバイルのように全面広告が出せるようになってからのような気がする。
ただし、当サイトにおいて全面広告は見たことがない。

Google 自動広告をオフにしたら解消した

サイト内リンクが反応せず、別のページに移動できないのは困るので、解決策を模索した。
普段、Chrome を使用しているが、IE や Edge でも試したが、現象は変わらなかった。
Google の広告に問題があると見て、すべての Google 広告を非表示にしたところ、現象が解消し、円滑にページ移動ができるようになった。

いろいろな広告表示のパターンを試してみたところ、自動広告をオンにしているとこの現象が起きるところまで突き止めた。
参考のために、対処手順について記しておく。

  1. 自動広告をオフにする
    Google Adsense にアクセスし、「サマリー」のページを開く。
    「サイトごと」のタブを開き、自動広告をオフにする。
    変更が反映されるまで 1 時間ほどを要する。


    Fig.1

  2. インフィード広告のコードを作成する
    同じく「サマリー」のページで、「広告ユニットごと」のタブを開き、インフィード広告のコードを作成する。


    Fig.2

  3. インフィード広告を配置する
    Blogger の「レイアウト」を選択し、ガジェットを追加する。
    ガジェットは「AdSense」ではなく、「HTML/JavaScript」を選択する。
    インフィード広告のコードを貼り付け、広告を表示した場所に配置する。


    Fig.3

Posted in  on 12/18/2020 by rteak |  


Blogger で CSS を追加する方法

Image
Photo by Ben Kolde on Unsplash

ブログのデザインを変えたくなったわけ

デコラティブなデザインはあまり好きではない。
シンプルなデザインがもっとも美しいと思う。
色に関しては、水墨画のように白と黒の濃淡だけで表現したい。

識別のしやすさでいうと、シンプル過ぎても、デコラティブ過ぎてもいけない。
何を見ても同じように見える。
識別しやすくするには、ベースはシンプルにして、識別してほしいところだけを際立たせればよい。

見出しを際立たせたい

見やすいサイトを見ていると、下図のように見出しの左側に太い縦棒を表示させたりして目立つようにしている。

Image
画像をクリックして拡大表示

この太い縦棒はバーティカルバー「|」ではない。
見出しを囲んでいる見えない四角形の左辺だけを見えるようにしているのだ。

見出しは「h2」タグを使っている。
「h2」タグのスタイルを四角形の左辺だけが表示されるように定義してやればよい。
見出しと本文を分けるために細い下線も引いてみよう。

以下、その方法について説明する。

Blogger で CSS を追加する方法

  1. メニューの「テーマ」をクリックする。

    Image
    画像をクリックして拡大表示

  2. 「カスタマイズ」をクリックする。
    Image
    画像をクリックして拡大表示

  3. 「詳細設定」をクリックする。
    Image
    画像をクリックして拡大表示

  4. 「ページのテキスト」をクリックするとプルダウンメニューが表示される。
    Image
    画像をクリックして拡大表示

  5. 「CSS を追加」をクリックする。
    Image
    画像をクリックして拡大表示

  6. CSS コードを追加する。
    コメントの「<!-- css をカスタマイズしてもよい領域 -->」は、追加した CSS を編集する方法で使用する。
    Image
    画像をクリックして拡大表示

  7. 画面の右下にある「保存」マークをクリックする。
    Image
    画像をクリックして拡大表示

これで、見出しの左側に太い縦棒と細い下線が表示されるようになる。
他にスタイルを変えたければ、同じ要領でやればよい。

追加した CSS を編集する方法

追加した CSS を編集し直したい場合は、HTML編集モードで編集する。

  1. メニューの「テーマ」をクリックする。
    Image
    画像をクリックして拡大表示

  2. 「カスタマイズ」の右横のプルダウンボタンをクリックする。
    Image
    画像をクリックして拡大表示

  3. 「HTMLを編集」をクリックする。
    編集ミスをした場合に備えて、「バックアップ」をクリックしてバックアップを取っておく。バックアップから戻すときは、「元に戻す」をクリックして、バックアップしたファイルを選択すればよい。
    Image
    画像をクリックして拡大表示


  4. コード上のどこかをクリックした後、『Ctrl』 + 『F』 キーを押下すると、左上に検索ボックスが開く。
    Image
    画像をクリックして拡大表示

  5. 検索ボックスに「css をカスタマイズ」を入力して Enter キーを押下する。
    Image
    画像をクリックして拡大表示

  6. 「<!-- css をカスタマイズしてもよい領域 -->」以下に追加した CSS が表示されるので、それ以降の行で CSS のコードを編集すればよい。
    Image
    画像をクリックして拡大表示

  7. 編集後、右上にある「保存」マークをクリックして保存する。
    Image
    画像をクリックして拡大表示

以上で編集したコードがブログに反映される。
自身で追加したコードなので、いくらでも編集可能だ。
なお、編集は自己責任で行っていただきたい。

参考：ブログのデザインを変更する - Blogger ヘルプ

Posted in  on 11/01/2020 by rteak |  


ブログに目次をつけたわけ

Photo by Frank Vessia on Unsplash

目次が必要になったわけ　

目次はいらいなと思っていた

初期の頃はすぐに読み終えられるショートブログを目指していたが、最近は長めの記事が多くなってきた。
それでも書籍のように何百ページも書くわけではなく、スクロールするだけで十分に読めるので、目次はいらないと考えていた。
また、目次があるとジャンプされ、苦労して書いた記事が読み飛ばされてしまうのではないかとも思っていた。

訪問者は何かを探しにやってくる

目次が必要だと思い直したのは、「訪問者は何かを探していてこのブログに辿り着いたのだから、探しものがあるかないかくらいは早めに判断できるようにしておくのが親切というものだろう。」と考えたからである。
ブログを運営する上で何かを決めるときは、「訪問者は何かを探しにやってくる」ということを忘れてはならない。

目次があると記事全体が俯瞰できる

長めの記事になると、どこに何が書いてあるのか見えなくなる。
目次があれば記事全体を俯瞰できるようになる。
目次は地図やフロアマップのようなものである。
やはり何かを探すときは、目次があると便利である。

目次機能を実装する

目次機能に求める要件

目次機能に求める要件はつぎのとおり。

  • 記事全体を読み込み、自動で編集・表示してくれること
  • 記事が短い場合は目次が非表示になること
  • 実装が簡単であること
これらの要件を満たす目次機能のプラグインを探すことにした。

条件に合うプラグインが見つかった

WordPress なら苦労せずに目次機能が実装できるのかも知れないが、こちらは Blogger を使っているので、ネットでプラグインを探さなければならない。
探しても見つからないことも多い。

しかし、目次機能に関しては、上記条件を満たしてくれるものが見つかった。
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）-スケ郎のお話 が提供しているプラグインだ。

目次機能を実装してみた

このサイトの指示どおりにプラグインを実装してみたところ、問題なく目次が表示された。
目次の表示数は、見出しの数で制御でき、本ブログでは ３個以上の見出しがある記事のみ目次を表示するようにした。
見た目も本ブログのデザインに合わせるために CSS で調整した。
（ Blogger で CSS を追加する方法 を参照）

その結果がこの記事にも表示されている目次である。

まとめ

何かを探しにきた訪問者の気持ちを考えると、目次はないよりある方がよい。
ブログ運営において、何かを決めるときは、必ず訪問者の立場で考えよう。

Posted in  on 10/04/2020 by rteak |  


ネタに悩んだらリバイバル

ネタ切れ

ブログをやっていたら、誰でもネタ切れになることがあると思う。
ネタ帳代わりに、タイトルだけを下書きに入れているが、どれを見ても書く気にならない。
そんなときは、無理をせず、その気になるまで時間をおくことにしている。

ネタ切れの対処法

時間をおいている間は、過去に書いた記事を読み返してみる。
記事に書くくらいなので、それらは日頃関心を持っているテーマであることが多い。
過去の記事を改めて読むと、情報が古かったり、今の考えと異なっていたりすることに気づく。
内容を書き直したくなったり、不足している情報を追加したくなったりするので、その気持ちに従うことにしている。
過去記事のリバイバルである。

リバイバルの効用

過去記事をリバイバルすると、つぎのような効用がある。

  • 自分の考えが深まる。
  • 誤った情報が修正されるので、記事の信頼性が上がる。
  • 貧弱だった記事が充実した内容になる。
  • 劣化して読まれなくなった記事が読まれるようになる。

何よりもネタ切れが解消できるということがうれしい。
ネタ切れに悩んだら、リバイバルを考えてみてはいかがだろうか？

Posted in  on 9/21/2020 by rteak |  


OGP を設定した

Photo by Mathilde LMD on Unsplash

Twitter カードを表示させたい

ブログ記事を Twitter 等の SNS で共有する際、その記事のタイトルだけでなく、内容の一部やイメージ画像も表示したいと思った。
これを Twitter カードという。
Twitter カードを表示するには、 OGP （ Open Graph Protocol ）を設定する必要があるらしい。

OGP を設定する方法

Facebook・TwitterのOGP設定方法まとめ｜ferret というサイトにその設定方法が説明されていたので、参考にさせていただいた。（ありがとうございます）

設定がうまくいったかどうかは Card Validator | Twitter Developers で確認できる。


Twitter カードが表示できるようになった

結果はこのとおり。

少しでも見栄えをよくするためなら、多少の手間がかかるのも仕方がない。

Posted in  on 9/12/2020 by rteak |  


ブログのページ構成について考える

Photo by Francisco Moreno on Unsplash

導入

ブログを書く際、ある程度標準化されている方が書きやすくなると思い、ページ構成について考えてみた。

まず、この導入部分では、問題や課題、困っていること、悩んでいることなど、記事を書くきっかけとなったことについて書く。
いきなり解決方法など、結論から書いてしまっても構わない。
長文になる場合は、要約を書くのも悪くはない。

本文

本文では、伝えたいことを詳しく書く。

伝えたいことが複数ある場合は、小見出しや準見出し、段落等を使ってひとつずつしっかりと伝える。

わかりやすく伝えるために、表や図を多用する。
また、箇条書きや番号付きリストも活用する。
手順など、順序が重要な場合は、番号付きリストの方がよい。

まとめ

最後に結論やまとめ、感想などの文章を入れる。

これで迷わずに記事が書けるようになるだろう。
関連記事については自動化できるようになるまで挿入しないでおくことにする。

Posted in  on 9/08/2020 by rteak |  


お問い合わせページを設置した

Photo by Fezbot2000 on Unsplash

お問い合わせページを設置した理由

Blogger にはサイト管理者に連絡（問い合わせ）するためのガジェットがある。
これまではそのガジェットをサイドバーに表示させていた。

お問い合わせの前に、メールアドレス（個人情報）の登録が必要であるため、プライバシーポリシーを確認していただくための注意書きを添えなければならなかった。

モバイルでの閲覧も考慮して、サイドバーに掲載する情報量は少なくしたかったので、注意書きとお問合せフォームの両方が掲載できるようなページを追加した。

お問い合わせページを設置する方法

お問い合わせページを追加する方法について調べたところ、「Bloggerで連絡フォームを個別ページのみに設置する - Cottpic」という記事があったので、こちらを参考にさせていただいた。（ありがとうございます。）

手順は以下のとおり。

  1. 自サイトで、お問い合わせ用のページを作成し、HTML 編集モードで編集フィールドを開いておく。
  2. 「Bloggerで連絡フォームを個別ページのみに設置する - Cottpic」より連絡フォームの HTML コードをコピーする。
  3. 上記 1 の HTML 編集フィールドに HTML コードを貼り付ける。
  4. 貼り付けた HTML コードの中に 4 箇所の「ブログ識別番号」を自身のブログ ID に書き換える。また、「ブログのサブドメイン」も自身のサブドメインに書き換える。
  5. 入力フォームの上に、注意書きを添える。
  6. このページを呼び出せるようにする。

このサイトで紹介されているとおりやれば、すんなりと実装することができた。

お問い合わせページを設置した結果

出来栄えについては実際の「お問い合わせ」をご覧いただきたい。

お問い合わせページを設置したことにより、以下のような効果があった。

  1. サイドバーの見た目がスッキリした。
  2. 注意書きと入力フォームが一つのページで完結するようになった。
  3. 名前やメールアドレス、お問い合わせ内容を入力するフィールドが広くなり、入力しやすくなった。
  4. 「送信しています」「メッセージを送信しました」「メールアドレスを正しく入力してください」などの表示がされ、利用者に対しても親切になった。

デメリットは特に見当たらない。

課題が解決できたので、とても気分がいい。

Posted in  on 8/29/2020 by rteak |  


当ブログをカスタムドメインに移行した

Image
Photo by Erda Estremera on Unsplash

カスタムドメインをもつメリット

今までは、Blogger が無料で提供している blogspot.com （元のURL は rteak-blog.blog ）で当ブログを運営していた。

カスタムドメイン（「独自ドメイン」とも呼ばれている）をもつと次のようなメリットがあると言われいている。

  1. 同じドメインや URL が使い続けられる
  2. 無料のドメインサービスだと、サービスが打ち切られたときにこれまでのSEO対策が無駄になる
  3. サイトの信頼度が上がり、SEO的にも有利になる

このようなメリットがあることを知る前ではあったが、Blogger でブログを始めるときから、設定にカスタムドメインの購入オプションがあったので、ずっと気にはなっていた。

カスタムドメインの購入

意を決してカスタムドメインを購入することにした。
いろいろなプロバイダーが存在するようだが、次のような理由で Google が提供するサービスを選んだ。

  1. 移行がしやすい（ Blogger の設定だけで済む）
  2. すでに個人情報が取られているし、支払情報も新たに登録する必要がない
  3. 邪悪なことはされないだろうという安心感（解約も円滑に対応してくれる）

年額 1,540円（税込）で、他のプロバイダーと比べると高いらしいが、何より安心感を買いたいと思った。

購入したいドメイン名はこちらから指定し、その末尾に ".com" や ”.net” 等を付けた候補と価格が表示され、それらの中から選べるようになっている。

当サイトの場合、"rteak" という誰も使わないようなドメイン名であり、そのまま選択肢に現れたので、何の迷いもなく最安値の "rteak.com" を選んだ。

購入時は、氏名、住所、電話番号を入力させられるが、問題や事件が生じたときのために必要なので仕方がない。

whois で個人情報がさらされないか心配になったが、プライバシー保護の設定もできるようになっており、その心配もなくなった。

カスタムドメインへの移行

購入し終わったら、Blogger の設定でカスタムドメイン名を登録する。
カスタムドメインには、"rteak.com" ではなく、"www.rteak.com" や "blog.rteak.com" を指定しなければならない。

カスタムドメイン登録後すぐに "www.rteak.com" にアクセスしても元のブログは表示されない。しばらく待つ必要がある。

"www.rteak.com" にアクセスして元のブログが表示されるようになったら、カスタムドメインにリダイレクトする設定を有効にする。

この設定により "rteak.com" にアクセスしても、 "www.rteak.com" にリダイレクトされるようになる。HTTPS の使用については、さらに待たなければならない。
ステータスが「不明」から「使用可能」になったら、HTTPS の使用とリダイレクトの設定を有効にする。


自分の家や店を持った気分に

以上で移行（引っ越し）は終わった。
たったこれだけのことだが、自分の家や店を持った気分になれた。
まだブログ運営はしばらくは続けられそうだ。

Posted in  on 8/23/2020 by rteak |  


Python で Blogger のサイトマップを取得する方法

Image
Photo by Kat Juska on Unsplash

Blogger のサイトマップがある場所

以前調べたので、Blogger のサイトマップがどこにあるのかはわかっている。

Blogger のサイトマップを Google Search Console に送る方法

https://rteak-blog.blogspot.com/sitemap.xml
sitemap.xml の中を見ると次のようになっている。
（元々改行やインデントはなく、後で編集したもの。）

page=1 と page=2 がある。
今後投稿記事が増えたら、これらも増えていく。（ 150 記事ずつ？）

それぞれの中に、投稿記事の URL（<loc> ～ </loc> で囲まれている） と最終更新日（<lastmod> ～ </lastmod> で囲まれている）が記載されている。
（下図は page=2 の方。これも改行やインデントはなく、後で編集したもの。）

投稿記事の URL と最終更新日を抜き出す方法

投稿記事の URL と最終更新日時を抜き出すには、ライブラリ requests と re を使用する。
また、各投稿記事のタイトルを抜き出すには、ライブラリ BeautifulSoup を使用する。
手順は次のとおり。

  1. サイトマップを取得する（34 行目～ 38 行目参照）
    requests で https://rteak-blog.blogspot.com/sitemap.xml の中身をテキスト化し、re で <loc> ～ </loc> で囲まれている部分（サイトマップの URL ）をリスト（ sitemap ）にセットする。
    今回の場合は、 https://rteak-blog.blogspot.com/sitemap.xml?page=1 と https://rteak-blog.blogspot.com/sitemap.xml?page=2 をリスト（ sitemap ）にセットする。

  2. サイトマップの数だけ処理を繰り返す（ 41 行目参照）
    リスト（ sitemap ）の要素数分繰り返す。
    今回はサイトマップが 2 つあるので、2 回繰り返す。

  3. 投稿記事の URL と最終更新日を抜き出す（ 43 行目～ 49 行目参照）
    requests で各サイトマップの中身をテキスト化し、re で <loc> ～ </loc> で囲まれている部分（投稿記事の URL ）をリスト（ loc ）にセットする。
    また、<lastmod> ～ T で囲まれている部分（最終更新日）をリスト（ lastmod ）にセットする。
    ～ </lastmod> としなかったのは、時刻は不要だったため。
    47 行目で <url> の前に改行コードを入れているのは、改行コードで文字列を区切ることにより、findall で文字列をうまく抜き出すため。

  4. 投稿記事のタイトルを抜き出す（ 51行目～ 55行目参照）
    各サイトマップの URL と最終更新日をすべて抜き出してから投稿記事のタイトルを抜き出す。
    requests で投稿記事の URL の中身をテキスト化し、BeautifulSoup で title タグに記載されているタイトルを抜き出して、リスト（ title ）にセットする。

  5. サイトマップを HTML で編集する（ 5行目～ 24行目参照）
    投稿記事の URL 、タイトル、最終更新日をテーブル表示できるよう HTML で編集する。

今後の課題

そもそも次のことがやりたくて、この課題に取り組み始めた。

  1. 出力した HTML を自動でサイトマップのページに表示させたい。
  2. 各記事を自然言語処理でテキスト分類し、関連記事を自動で表示できるようにしたい。

早々に解決したいと思っている。

ソースコード

実行結果

タイトル 最終更新日
キカガク（KIKAGAKU）を復習する 2020-08-03
FX の運用成績(2020年7月) 2020-08-01
見切り発車の効用 2020-08-01
PyCharm を使って HTML コードを整形する 2020-07-31
キカガク（KIKAGAKU）で「テキスト分類」を学ぶ 2020-07-30
キカガク（KIKAGAKU）で「機械学習による自然言語処理」を学ぶ 2020-07-30
キカガク（KIKAGAKU）で「自然言語処理の基礎」を学ぶ 2020-07-29
Pytorch を Windows10 にインストールした 2020-07-29
キカガク（KIKAGAKU）で「畳み込みニューラルネットワークの代表的なモデル」を学ぶ 2020-07-29
税金は適正かつ効果的に使うべきである 2020-07-29
キカガク（KIKAGAKU）で「データ拡張」を学ぶ 2020-07-29
ブログの質と量を高める方法について考えたこと 2020-07-29
FX の運用成績(2020年6月) 2020-08-01
非常事態宣言が解除されたからと言っても新型コロナウイルスの感染リスクがなくなったわけではない 2020-06-30
ブログを一年間続けて思ったこと 2020-07-30
ショッピングサイトの商品を定期的にチェックするプログラムを Python で作った 2020-07-29
毎日書くのはやめよう 2020-06-20
新しいスマホが欲しくなったら 2020-08-01
ボーっと過ごす 2020-08-01
感謝する 2020-08-01
キカガク（KIKAGAKU）で「畳み込みニューラルネットワークの精度向上」を学ぶ 2020-08-01
SDカードを内部ストレージ化する 2020-08-01
受信ボックスの未読メールをなくす方法 2020-08-01
それ、本当に必要なの？ 2020-08-01
プロセスより結果が大事 2020-06-02
キカガク（KIKAGAKU）で「ファインチューニング」を学ぶ 2020-06-07
FX の運用成績(2020年5月) 2020-08-01
キカガク（KIKAGAKU）で「畳み込みニューラルネットワークの実装」を学ぶ 2020-05-31
キカガク（KIKAGAKU）で「畳み込みニューラルネットワークの基礎」を学ぶ 2020-05-31
ブログカードを超簡単に作る方法 2020-05-30
自分が変わればいい 2020-05-30
要件定義とプロトタイプ 2020-05-28
Tensorflow のインストールがうまくいかないときの対処 2020-07-29
Web 記事を聴く 2020-05-25
新型コロナウィルス禍の影響とこれからの期待 2020-05-24
キカガク（KIKAGAKU）で「ニューラルネットワークの実装（回帰）」を学ぶ　《練習問題》 2020-05-24
キカガク（KIKAGAKU）で「ニューラルネットワークの実装（回帰）」を学ぶ 2020-05-30
会議の前に結論を決めてしまう 2020-05-22
今日一日を組み立てる 2020-05-21
タスク管理 2020-05-20
敬体と常体 2020-05-18
キカガク（KIKAGAKU）で「ニューラルネットワークの実装（分類）」を学ぶ 2020-05-30
他人の力を借りる 2020-05-16
話題 2020-05-30
置き配サービスは治安を脅かす 2020-05-13
スマートフォンの操作を自動化する 2020-05-30
特別定額給付金を申請した 2020-05-30
スマートフォンで音楽アプリを開いたときに自動で Bluetooth をオンにする方法 2020-05-30
Web ページにソースコードを掲載する方法 （GitHub を利用） 2020-05-13
Blogger の表編集機能は便利 2020-05-30
Blogger に新機能！　まだ見捨てられてはいないようだ 2020-07-30
サイトのテーマを変更した 2020-05-15
キカガク（KIKAGAKU）で逆伝播を学ぶ 2020-05-30
Blogger と note で迷った 2020-05-30
OGP を設定した 2020-05-30
Web ページにソースコードを掲載する方法 2020-05-30
フォトギャラリー 2020-07-28
FX の運用成績(2020年4月) 2020-08-01
ちょうどよい長さの記事 2020-05-30
嫌われる勇気 2020-05-30
サイトをプチ改造 2020-05-30
プライバシーポリシーについて 2020-05-30
パルスオキシメータは個人で買うべきでない 2020-05-14
キカガク（KIKAGAKU）でニューラルネットワークの概要と順伝播を学ぶ 2020-05-06
ミスを減らすための対策 20 箇条 2020-05-08
見られていないからこそ力を尽くす 2020-05-06
初動が大事 2020-04-29
HP製ノートブックPCで毎回 fn キーを押さなくてもファンクションキーが使えるようにする方法 2020-04-29
効率のよい資格試験対策 2020-05-08
リモートワークに向いている性格 2020-05-06
新しいPCのセッティング 2020-04-29
個人でやっているシンコロ対策 2020-05-03
Blogger のサイトマップを Google Search Console に送る方法 2020-04-29
休日の過ごし方 2020-04-29
ブログの楽しみ 2020-04-29
成果を出せるのが優れたリーダ 2020-05-06
キカガク（KIKAGAKU）で機械学習実践（教師なし学習）を学ぶ 2020-05-06
キカガク（KIKAGAKU）で機械学習実践（教師あり学習）を学ぶ 2020-08-03
リモートワークには筋トレが欠かせない 2020-05-06
チャンスが巡って来るまで我慢 2020-04-29
セルフカット 2020-05-06
マスクは有効か？ 2020-05-06
生物学的に見て 2020-04-29
キカガク（KIKAGAKU）で AI を学ぶ 2020-08-03
公金助成 2020-05-03
リモートワーク　自分で決めて守っているルール 2020-05-06
FX の運用成績(2020年3月) 2020-08-01
自分なりの基準を持てば他人に振り回されることはない 2020-05-04
いまここに生きる 2020-04-29
現金は残しておくべき 2020-05-01
矛盾発見 2020-05-01
仕事を楽しむ 2020-05-01
リモートワークして感じたこと 2020-05-06
リモートワーク 2020-05-05
スタバの mobile order & pay を使ってみた 2020-05-01
喉のポリープが消えた 2020-05-01
新型コロナウイルス禍の一市民のブログ 2020-05-06
Deep Learning の学習記録 2020-05-06
Python で日数を加算（減算）した日付を求める 2020-05-09
レンタサイクル 2020-05-01
損切りは難しい 2020-05-02
Python で日数計算 2020-05-09
Google Colaboratory 2020-05-03
Python 開発環境再構築 2020-07-31
ディープラーニング学習計画 2020-05-03
Python で Web スクレイピング（2） 2020-05-09
進捗報告は成果物で確認する 2020-05-03
休日の過ごし方 2020-05-03
e-Tax で確定申告 2020-05-03
Python で Web スクレイピング 2020-05-09
ブログのメリット 2020-05-02
Python ファイルをビルドしてEXE ファイルを作る方法 2020-05-06
Python で Google Sheets の複数シートを操作する方法等 2020-05-14
Python で Google Sheets にアクセスするために必要な手続き 2020-05-09
ブログネタ 2020-05-02
Python で Google Sheets を操作するための環境設定 2020-05-09
FX の運用成績(2020年1月・2月) 2020-08-01
PyCharm を Windows 10 にインストールする 2020-08-03
Python を Windows 10 にインストールする 2020-05-04
利益確定と損切りは感情を入れない 2020-05-04
読者を気にせずに書く 2020-05-02
日課 2020-05-04
願った後は忘れろ 2020-05-04
目的と目標の共有 2020-05-05
本を読んだら 2020-05-05
判断は間違ってもいい 2020-05-05
スケジュールは毎日更新すべき 2020-05-06
常に正しい選択をする方法 2020-05-06
すべて借り物 2020-05-06
免疫力を上げるには 2020-08-01
本当の強さ 2020-05-08
一行でもいいから書く 2020-05-02
続けていればものになるさ 2020-05-30
夜にシャワーを浴びる効用 2020-05-08
再開 2020-05-08
トラブルは起きて当たり前 2020-05-09
旅程はGoogle Calendar で立てる 2020-05-09
とにかく100万円貯める 2020-05-09
願望を叶えるには 2020-05-11
ミスをしないために 2020-05-11
散り椿 2020-05-11
英語多読 2020-05-12
決して諦めない 2020-05-12
成功の基準は自分で決める 2020-05-12
自分の基準で生きる 2020-05-13
投資について 2020-05-13
好きなように生きる 2020-08-01
脳を鍛えるには運動しかない 2020-05-16
ジムに行かなくても 2020-05-06
まず目的を確認しよう 2020-05-01
プロジェクトマネージャが忘れてはならないこと 2020-05-16
思い込み 2020-05-16
覚悟を決める 2020-05-17
こだわりを捨てる 2020-05-17
国を守る 2020-05-17
生産性を高める仮説と検証 2020-05-20
投資こそ強力な社会貢献になる 2020-05-20
頭から洗う？体から洗う？ 2020-05-08
締切を設定する 2020-05-20
先延ばしも悪くはない 2020-05-22
すぐやる 2020-05-22
中断しても再開すれば習慣化できる 2020-05-22
とりあえず、5分間だけやろう 2020-05-22
緩く続けて行こう 2020-05-22
文章を書く 2020-05-22
はじめに 2020-07-29
Posted in  on 8/04/2020 by rteak |  


ブログの質と量を高める方法について考えたこと

Image
Photo by Matthew Waring on Unsplash

少しずつ書き足して行こうと思ったきっかけ

効果的な SEO 対策として、記事の質と量の向上がある。
検索したユーザのニーズに応えられることが重要であるという考えだが、当然のことだろう。
（参考：検索エンジン最適化（SEO）スターター ガイド - Search Console ヘルプ）

ブログ記事の質や量を高めるには、ある程度の時間を要する。
元ネタを収集しないといけないし、構成も考えないといけない。

しかし、時間をかけていては、ブログの更新が滞ってしまい、読者から見向きもされなくなる。

そこで、取り敢えず、書こうと思ったテーマについて、触りでもいいから何でも書いて投稿してみる。
その後、時間をかけながら情報を収集し、書き足していく。
何かそのテーマについて思いついても書き足していく。

そのようにしていけば、記事の質も量も高くなっていくのではないだろうか？

過去の記事を読み返す

書き足していくには、過去に投稿した記事を定期的に読み返す必要がある。

現在と過去では持っている情報量が増えている。
考え方も変化しているはずだ。

ブログネタを新たに考えるのは結構大変だ。

一方、過去の投稿はそもそも自身が興味を持っていることなので、そのことについて考えるのは苦にならない。

新しいひらめきが生まれる可能性も高い。

記事を書き足したら公開日をどうするか

記事を書き足した記事の公開日として考えられるのは次の３つ。

  1. 公開日を書き足す前の日のままにする。
  2. 公開日を書き足した日に変更する。
  3. 書き足す前の記事はそのままにし、新しい記事として公開する。

1つ目は、記事が古いと思われ、読まれない可能性がある。
2つ目は、投稿数が増えないが、記事の質は高まる。
3つ目は、1つ目と2つ目の課題がクリアでき、他のブログでもよく見かける。

3つ目のやり方はゴミのような記事が増えるだけなので、当ブログでは 2つ目のやり方を採用する。

Posted in  on 7/12/2020 by rteak |