▪アバター用画像を「パワーポイント」の図のスタイルで加工編集

会話形式(吹き出し)用のアバターを作成するのに、色々なソフトを試してみて、所有のパソコンのソフトで作成してみました。

今回は  Microsoft Office Personal 2019(日本語)を使って作成してみました。

OfficeはExcelとWordは頻繁に利用しますが、PowerPoint(パワーポイント)は利用したことは有りませんでした。

昔サラリーマンのころプレゼテーションで使ったことがありますが、今のパワーポイントはあまりに機能が多すぎて使い方が複雑です。

手探りでパワーポイントの機能操作を探りながら試行錯誤を繰り返して、ようやく作成した成果を見てください!

Ⅰ.実証環境・ソフト等のバージョン

実証環境バージョン
Windows 11 Home21H2
Office Personal 2019(日本語)18.2110.13110.0
ペイント11.2203.2.0
WordPress5.9.3
テーマTwenty Sixteen Ver.2.6
👀実証環境の違いで結果が異なる場合もありますので、記載内容を保証をするものではありません。

Ⅱ.パワーポイント起動~画像の挿入まで

以下の【画像-1】【画像-4】に基づき説明します。

  • .Officeから❶PowerPointをクリックすると新規作成のテーマが表示されます。 
  • .テーマの中から❷「新しい空白のプレゼンテーション」を選択します。
【画像-1】     画像をクリックすると拡大!
  • .「新しい空白のプレゼンテーション」で❸「レイアウト」をクリック
      するとOfficeのテーマが表示されます。
  • .Officeのテーマの中から❹「白紙」を選択します。
【画像-2】     画像をクリックすると拡大!
  • .白紙のプレゼンテーションで❺「挿入」タブをクリックします。
  • .❻「画像」タブをクリックして、画像の挿入元を選択します。
【画像-3】     画像をクリックすると拡大!
  • 【画像-4】の様に、画像が挿入されました。
【画像-4】     画像をクリックすると拡大!

Ⅲ.「図のスタイル」で挿入画像を加工編集

アバターは円形にスタイリングすることが一般的とは思っても、理想的な加工ができるツールを見つけるのは大変です。

パワーポイントを使えば、ある程度満足のいくアバターを作成ができます!

  • 【画像-5】は、挿入した画像と「図のスタイル」です。
      スタイルは28個用意されていますが、そのうち円形(楕円)のスタイルは
      以下の❶、❷、❸の3つのみです。
【画像-5】     画像をクリックすると拡大!
  • 【画像-6】は挿入した画像を、スタイル❶「面取り楕円、黒」
      ❷「楕円、ぼかし」、❸「楕円、メタル」を適用したものです。
【画像-6】     画像をクリックすると拡大!
  • 【画像-7】は、サイズを変更することで円から楕円への変更ができます。
      サイズは「画像」タブをクリックすると表示されます。
【画像-7】     画像をクリックすると拡大!

Ⅳ.「トリミング」で挿入画像を加工編集

パワーポイントには100個以上のトリミング図形が用意されています。

使えるものもあるかもしれません。ご参考に!

  • 【画像-8】は、トリミングの利用方法です。
    ❶から❹の順に選択していくと❹のようなトリミング結果が得られます。
    トリミングは「ホーム」タブで挿入画像をクリックして「画像」タブを選択
     すれば表示されます。
【画像-8】     画像をクリックすると拡大!

Ⅴ.作成したアバター画像の保存

  • .❶「ファイル」タブをクリックする
【画像-1】     画像をクリックすると拡大!
  • .❷「名前を付けて保存」をクリックする。
  • .❸「画像としてダウンロード」をクリックする。
【画像-2】     画像をクリックすると拡大!
  • .❹「閉じる」をクリックする。
【画像-3】     画像をクリックすると拡大!
  • .画像が「ダウンロード」フォルダに保存されました。
【画像-4】     画像をクリックすると拡大!

Ⅵ.アバター画像を「吹き出し」で使う

1.加工編集したアバターのサイズについて

  • 実際の会話形式(吹き出し)プラグインで異なるサイズのアバターで表示の確認をしましたが、アバターの表示に変わりは有りませんでした。
  • 従って150~300ピクセルくらいの画像サイズが適当だろうと思います。

2.会話形式(吹き出し)のプラグインの紹介

下記にワードプレスの公式無料プラグインLIQUID SPEECH BALLOONについて

詳細な実証結果をもとに記事を投稿しておりますので是非ご参考に!

▪「会話形式の吹き出し」プラグインの使い勝手を実証分析 

▪ワードプレスのメディア設定と画像設定の関係性を実証分析

メディアとはブログにアップロードして使う画像・動画・音声・その他ファイルのことを指します。

ワードプレスのメディアと設定に関する投稿記事は多々存在していますが、初心者ではなかなか簡単に理解できるものではありませんでした。

そこで、メディアとメディア設定について初心者感覚で実証分析してみました。

Ⅰ.実証環境・ソフト等のバージョン

実証環境バージョン
WordPress5.9.3
テーマTwenty Sixteen Ver.2.6
関連するプラグインEasy FancyBox Ver.1.8.18
ノートPCの液晶サイズ15.6インチ
ノートPCの最大解像度1920×1080ドット
👀実証環境の違いで結果が異なる場合もありますので、記載内容を保証をするものではありません。

Ⅱ.『メディア設定』と『画像設定』の関係性

1.メディア設定

  • ワードプレスの管理画面のメニューから[設定]➡[メディア]の順にクリックすると
    「メディア設定」画面が表示されます。<[画像-1]参照>
[画像-1]  この画像サイズは1070×650ピクセルです。   画像をクリックすると拡大! 
  • この「メディア設定」の設定値はデフォルト設定です。
  • 当該画像のアップロード時の画像サイズは1070×650ピクセルです。

2.ブロックツールバーの「画像設定」

  • 当該画像ブロックをクリックすると、ブロックツールバーに「画像設定」が表示されます。<[画像-2]参照>
  • 「画像サイズ」と「画像の寸法」により詳細設定ができます。
❖当説明は、アップロードした当該画像を(例)に「メディア設定」との
 基本的な関係性を示したものです。
❖アップロードした画像のサイズにより「画像設定」の表示結果が異なり
 ますので色々な画像で実証分析した結果は後述します。
[画像-2]  画像をクリックすると拡大!

3.「画像設定」の「画像サイズ」と「画像の寸法」の詳細

  • [画像-1]1070×650 px)をアップロード時の「画像サイズ」の表示状態で、初期表示は「大」です。
  • ∨印(プルダウンメニュー)をクリックすると4サイズの選択が可能なことが解ります。
  • [画像-1]1070×650 px)をアップロード時の「画像の寸法」の表示状態です。
  • 幅、高さに「数値」が表示され、100%になっています。

これ以降はピクセルは簡略してpxと表記します。

❖実証結果・Ⅱ

  • .「画像サイズ」を切り替えると連動して「画像の寸法」に各々のサイズ値が反映されることが解りました。
  • .「画像の寸法」の「数値」と「%」でのサイズ変更も可能です。
  • .「リセット」は「画像の寸法」の「幅、高さの数値」あるいは「%」で変更した内容を、その時の「画像サイズ」(サムネイル、中、大、フルサイズのいづれか)の初期状態に戻すことができます。

❖補足及び分析・Ⅱ

  • 「画像の寸法」の「%」で[75%]を選択した時だけ表示が拡大されます。
    プレビュー画面では縮小が反映されるので、編集画面での動作さが問題のようです。
    実証環境の違いで結果が異なる場合もありますので、記載内容を保証をするものではありません。

Ⅲ.「メディア設定」のデフォルト値の実証分析

前述のⅡ.項では、一つの画像サイズを(例)に基本的な関係性を記載いたしましたが、画像サイズによって「画像設定」の表示結果が異なることが解りました。

まづは、「メディア設定」のデフォルト設定値に基づき画像を作成して、アップロードした場合、「画像設定」はどうなるのか?を実証分析してみました。

1.「サムネイルのサイズ」のデフォルト設定値

  • 「サムネイルのサイズ」のデフォルト設定値[幅150] [高さ150]
👀「虎の画像」 150×150 px     画像をクリックすると拡大!

実証結果・Ⅲ-1

  • 「画像サイズ」を[F→S]に変更しても「画像の寸法」に反映される数値は同じです。
    プレビューで表示される画像のサイズは「幅150]×[高さ150]になります)
  • ・・・Fはフルサイズ、Sはサムネイルの略

❖補足及び分析・Ⅲ-1

  • .「画像の寸法」の「幅」、「高さ」でサイズ変更を行う場合、「幅」の数値を替えても「高さ」の数値は変化せず、「高さ」を替えても「幅」の数値は変化しません。
    しかし、実際には相対的拡縮がされています。
  • .「画像の寸法」の「幅」および「高さ」の入力数値の制限は有りません。
    入力値を大きくしていけば、画像は大きくなりますが、「ある数値」から表示制限が働きます。
  • .「%」の縮小結果は正常な動作をしているようです。
  • 編集画面とプレビュー画面では表示の動作が異なります。
    仕組みは不明ですが、変更時は必ずプレビューでの確認が必要です。
  • 「ある数値」・・・「150~600 px」までは比例して拡大されますが、600を超えると表示制限が働くようです。
  • .利用用途にもよるでしょうが、サムネイルの拡大の必要性はないと考えます。

1-2.☑サムネイルを実寸法にトリミング…(通常……)

  • サムネイルを実寸法にトリミングする(通常は相対的な縮小によりサムネイルを作ります)

この文言の意味と☑あり、✔なしの違いを理解するには、デフォルト設定のみの実証分析では理解するには至りません。

そこで、画像サイズと形(正方形、長方形)について、色々なサイズでの実証分析の結果から下表の様にサイズを分類し実証データを作成しました。

画像をクリックすると拡大!
実証データ【1】サムネイルのサイズの「1-3」項について実証した結果、☑あり、✔なしの違いが理解できました。
言葉で説明するより画像を見てもらえば納得できると思います。
[画像1-3](☑あり、✔なし共に表示は同じ結果です) 画像をクリックすると拡大!
 
[画像1-3’]☑あり時の表示結果です) 画像をクリックすると拡大!
[画像1-3’’]✔なし時の表示結果です) 画像をクリックすると拡大!

実証結果・Ⅲ-1-2

  • [画像1-3’]は、☑ありで「画像サイズ」をF→Sに変更したものです。
    「サムネイルのサイズ」の設定値に従い[幅150] [高さ150]の表示になります。
  • [画像1-3’’]は、✔なしで「画像サイズ」をF→Sに変更したものです。
    通常の相対的な縮小によりサムネイルが作られます。
  • ・・・Fはフルサイズ、Sはサムネイルの略

❖補足及び分析・Ⅲ-1-2

  • ☑ありの場合、F→Sにサイズ変更すると長方形のオリジナル画像が中央でトリミングされ、[幅150] [高さ150]の正方形になるので見栄えの問題があります。
  • ☑ありにするか✔なしにするかは、サムネイルの用途にもよりますが、オリジナル画像を作成するときに考慮する必要があります。
  • ・・・Fはフルサイズ、Sはサムネイルの略

2.「中サイズ」のデフォルト設定値

  • 「中サイズ」のデフォルト設定値[幅の上限300] [高さの上限300]
👀「虎の画像」 300×300 px     画像をクリックすると拡大!

実証結果・Ⅲ-2

  • 「画像サイズ」を[F→中]に変更しても「画像の寸法」に反映される数値は同じです。
    「中サイズ」の設定に従い「幅300]×[高さ300]の表示になります。
  • [F→S]に変更すると「サムネイルのサイズ」の設定値に従い[幅150] [高さ150]の表示になります。
  • ・・・Fはフルサイズ、Sはサムネイルの略

❖補足及び分析・Ⅲ-2

❖補足及び分析・Ⅲ-1と同じです。

3.「大サイズ」のデフォルト設定値

  • 「大サイズ」のデフォルト設定値[幅の上限1024] [高さの上限1024]
👀「虎の画像」 1024×1024 px     画像をクリックすると拡大!

実証結果・Ⅲ-3

  • 「画像サイズ」を[大→F]に変更しても「画像の寸法」に反映される数値は同じです。
    「大サイズ」の設定に従い「幅1024]×[高さ1024]の表示になります。
  • [大→中]に変更すると「中サイズ」の設定に従い[幅300] [高さ300]の表示になります。
  • [大→S]に変更すると「サムネイルのサイズ」の設定値に従い[幅150] [高さ150]の表示になります。
  • ・・・Fはフルサイズ、Sはサムネイルの略

❖補足及び分析・Ⅲ-3

❖補足及び分析・Ⅲ-1と同じです。

Ⅳ.実証分析まとめ

❖前述のⅢ.「メディア設定」のデフォルト値の実証分析の結果から概ね
 理解はできたと思います。
 しかし、疑問が全て解消されたわけではありません。

❖疑問を解消するには、様々な画像について実証分析を行う必要があるた
 め、デフォルト設定値以外の画像サイズ(以上以下、未満、超える、
 特大ど、様々なサイズで実証分析を試み、下表の「実証データ」
 【1】~【4】にまとめました。
❖表だけでも概ね理解はできると思いますが、実証を行う中で気づいたこ
 とを補足及び分析しました。 
画像をクリックすると拡大!

実証データ【1】の補足及び分析

  • 項1、1-3、1-4については、前述のⅢ-1及びⅢ-1-2で実証分析しました。
  • 項1-1、1-2は、[幅 150、高さ 150]の両方及びいづれか一方がデフォルト設定値未満の場合にどうなるかを実証分析したものです。
    この場合は、「画像サイズ」は表示されないため、表示サイズの変更は「画像の寸法」の「数値及び%」で拡縮を行います。
画像をクリックすると拡大!

実証データ【2】の補足及び分析

  • 「中サイズ」のデフォルト設定値を中心に、3種類の画像サイズの実証分析を行いましたが、特に動作異常や疑問な点は見つかりませんでした。
画像をクリックすると拡大!

実証データ【3】の補足及び分析

  • 大サイズ+特大サイズの実証分析では、どこまで大きなサイズがアップロードできるのかを実証分析しました。
  • 幅2560 px、高さ2560 pxを堺に表示サイズを制限していることが解りました。
  • 3-5項では、1pxのサイズ差で結果が異なる現象が発生しました。
    ロジック的には同じ結果であるべきですが、何回試しても実証結果は同じでした。

「メディア設定」に無い「フルサイズ」って何なの?

実証データを分析したところ「メディア設定」の「サムネイルのサイズ」
の[幅 150] [高さ 150]以上の画像をアップロードした時に「画像サイズ」
でフルサイズの選択が可能になることが解りました。

しかし、「フルサイズ」の設定はデフォルトの「メディア設定」にはありません。

  • 「フルサイズ」というのは英訳すると「原寸大」、「実物大」というような意味がありますが、「メディア設定」でいう「フルサイズ」は「原寸大(オリジナルサイズ)」の表示の場合もあれば、サイズを制限して表示させる場合もあります。

さらに分析してみると、どのサイズで区分しているか?が解りました。

【区分1】幅、高さ共に150以上で幅、高さの一方が「1024以下」の
       画像の場合、「画像サイズ」の初期表示サイズが「フル
       イズ」になります。
❖結果:最大表示サイズは「原寸大(オリジナルサイズ)」になります。
【区分2】幅、高さともに1024以上で2560未満の画像の場合、
      「画像サイズ」の初期表示サイズが「大」です。
❖結果:最大表示サイズは「原寸大(オリジナルサイズ)」になります。
【区分3】幅、高さともに2560以上の画像の場合、「画像サイズ」の
      初期表示サイズが「大」です。
❖結果:最大表示サイズは、幅、高さのどちらか大きい方が2560に制限
    され、相対的縮小となります。 

結論としては

❖実証分析を繰り返し「メディア設定」と「画像設定」の基本的な考え方
 が解りました。

❖趣味でブログを書くうえでは、難しいロジックまで究明する必要はあり
 ませんので、初心者感覚でやってみて肌で感じて納得できました。

❖いろいろなサイズで実証分析をしてきましたが、用途に応じて画像をど
 のように見せるかが一番の目的であり、1024 pxを超えるような大きな
 画像の必要性はないかと思います。

❖2560 pxを超える画像の実証では、アップロードに要する時間が10秒以上
 かかったことから、記事の表示速度に影響がでることも考えられます。

❖この手の様々な投稿で大きな画像サイズのデメリット等が指摘されてお
 りますので、「メディア設定」はデフォルトで問題ないと思います。

❖デフォルト設定値を替えて自分に合った形にするのもよいと思います。

Ⅴ.「メディア設定」とEasy FancyBox

Easy FancyBoxは、画像や文章などを拡大表示してくれるプラグインです。

私の場合は、当該画像をクリックするだけで拡大表示させる機能だけを利用しています。

❖このプラグインをインストールして有効化するだけで、デフォルト設定
 のままで利用可能です。
❖「Easy FancyBox」の設定は、「メディア設定」に追加されます。
  [画像-4]参照
[画像-4]    画像をクリックすると拡大!
画像を拡大させる方法[画像-5]  参照

 画像ブロックの設定アイコン「リンクを挿入」「メディアファイル」
 を選択するだけです。
  あとは当該画像をクリックするだけで表示が拡大されます。

❖拡大の状態はプレビュー画面で確認してください。

❖拡大させた画像を元に戻すには、画像の右上のⓧをクリックします。
[画像-5]     画像をクリックすると拡大!

▪「会話形式の吹き出し」プラグインの使い勝手を実証分析 

「会話形式の(吹き出し)」を使ってみたいと思いませんか!?

ワードプレスの公式無料プラグイン「LIQUID SPEECH BALLOON」をインストールすれば簡単に使えますよ!

CSSやらHTML言語やらを使ってデザインするなんて、スキルが無い人には敷居が高過ぎてお手上げですよね!

このプラグインなら使い方はとても簡単!難しいスキルは不要です。

しかし、Default(デフォルト)のアバターでは味気ないので、自分で好みのアバターを作成してみてください。

Default(デフォルト)のアバター

アバターを作成するのに試行錯誤した経験を基にブログを書きました。

失敗は成功の基ですので色々試してみるのも面白いですよ!

プラグインのインストールからアバター作成~設定まで一連の作業を初心者感覚で時間を掛けて実証分析したのでご参考に!

Ⅰ.作成したアバターたちを紹介!

プラグインの[Avatar and name settings]で設定したアバターたちです!
●標準 黒やん69[画像サイズ150×146]
●01 帰るくん(楕円・メダル) [画像サイズ150×97]
●02 モモ(楕円・メダル)[画像サイズ200×163]
●03 黒やん69(背景色・黒)[画像サイズ240×240]
●04 黒やん69(背景色・白) [画像サイズ240×240]
●05 黒やん69(面取り楕円・黒)[画像サイズ240×240]
●06 黒やん69(背景の透明化)[画像サイズ260×260]
●07 トラ娘-150[画像サイズ150×150]
●08 トラ娘-300[画像サイズ300×300]
●09 トラ娘-1024[画像サイズ1024×1024]

[Avatar and name settings]    画像をクリックすると拡大!

画像サイズって何なの?

アバターの元になる画像のサイズによって、実際にアバターがどのような大きさで表示されるのか実証する目的で数種類のサイズを試してみたわけ!?
結果はアバターの作成のところで説明するね!

どんなプラグインなの?初心者でも簡単に使えるの?

もちろん、黒やん69にもきるのだから心配いらないよ!
分かりやすく解説するので最後までガンバローね!

『黒やん69のブログ』の作成環境は以下の通りだよ!
●Windows OS Windows 11 Homeバージョン21H2
●WordPress 5.9.3 (Twenty Sixteen テーマ)

[LIQUID SPEECH BALLOON]のWordPressの対応する最新バージョンは5.9.3ということなので、自分のWordPressバージョンを確認してみてね!

ここまではOKよ!次に進みましょう。

Ⅱ.プラグインのインストール

インストールする方法は2通りあるけど、基本的なプラグインのインストール方法を覚えようね!

もう一つのやり方も知りたいなぁー?

それじゃあ簡単に説明するね!

●ワードプレスにログインして、まずは管理画面から[投稿]➡[新規追加]で投稿画面を開いてね!
●次に画面左上の[マーク]「ブロック挿入ツールを切り替え」をクリックすると左サイドバーにブロックパターンが表示されるよ!
●そしたら一番上の[検索窓]「speech 」と入力をするとブロックパターンに下記の[画像-A]の様に [SPEECH BALLOON]が表示されるよ!
●下記の[画像-A] をクリックするとインストールが完了するよ!

[画像-A]  画像をクリックすると拡大!

簡単にインストールできるんだね!

基本的なインストール方法はしっかり覚えておくことが肝心だよ!
どちらの方法も自分で試してみて確実に覚えてね!

下記の「LIQUID SPEECH BALLOONプラグインのインストール手順」[画像-1][画像-4]を参考にインストールしてみてね!

LIQUID SPEECH BALLOONプラグインのインストール手順
[画像-1]参照 ワードプレス管理画面[プラグイン][新規追加]検索窓に[speech]と入力します。検索されたら[今すぐインストール]をクリック

[画像-2]参照 インストールしたら[有効化]をクリック

[画像-3]参照 [有効化が青色に反転]しプラグインが有効になりインストールが完了!

[画像-4]参照 [インストール済みプラグイン]でインストールが確認できるよ!

次の画像が小さくて見にくければ「画像をクリック」すると画像がビョーンと拡大するよ!

[画像-1]  ①~➃
[画像-2] 
[画像-3] 
[画像-4] 

お!デカくなった。いいね!これどうやってやるの?

🟡これはね、Easy FancyBoxプラグインを使うんだよ!

 簡単に紹介しているので後でゆっくり見てね! クリック 
  ▪ワードプレスのメディア設定と画像設定の関係性を実証分析

帰るくん、好奇心旺盛で頼もしいけど、プラグインのインストールに戻るよ!

基本的なインストール方法と比較するのも重要よね!

下の画像は[インストール済みプラグイン]「LIQUID SPEECH BALLOON」[詳細を表示]をクリックすると表示されるよ!
前の[画像-4]を参照!

「LIQUID SPEECH BALLOON」の詳細説明ですので、画像をクリックして拡大してみてね!

Ⅲ.ブロックツールバーのSpeech Settingsの説明

●投稿画面でSpeech Balloonブロックにカーソルをポイントしクリックするとブロックツールバーに[Speech Settings]が表示されるよ! [画像-B] [画像-C]を参照

●メニューが英語表記なので下記の「LIQUID SPEECH BALLOON 設定の説明」を参考にしてね!
(WP.ORGでは8言語に対応していると記載がありましたが、日本語に変更する設定が見つかりません?)
●特に難しい設定ではないので英語表記のままで進めます。

LIQUID SPEECH BALLOON 設定の説明
Avatar(アバター、名前)➡Default/[Avatar and name settings]でアバターの追加設定により、設定したアバターの選択可
Direction(吹き出しの方向)➡Left/ Rightの選択可
Design(吹き出しの種類)➡Default/Defaultを含み6 Typeの選択可
Size(文字のサイズ)➡Default/Defaultを含み3 Typeの選択可
Options(吹き出しの方向オプション)➡Default/Defaultを含み4 Typeの選択可
Color Settings(背景色、文字色)➡Background Color/Text Color

設定は難しいものではないので、何でもいいから触って試すことが早く慣れるコツだよ!

うん・・・自分で試してみることが肝心だってことだね!

注意:ブロックツールバーのColor Settingsなんだけど?

●この様に吹き出し内の文字と背景色が部分的に設定できないので他のプラグインも併用するといいよね!
●黒やん69は[advanced rich text tools for gutenberg]というプラグインを併用してるよ!

みんなここまでは簡単だったろう!
次のアバターの作成が最後だからもう少しカンバローね!

Ⅳ.アバターの作成とプラグインの設定

アバターの作成がちょっとめんどくさいけど、バッチリ解説するよ!
👀ここからは登場するアバターも変更になるよ!?

1.アバターの元になる画像の候補を探す

アバターは無料あるいは有料のものを利用するか、自分で撮った写真を利用するなどの方法があるよ!

●無料の素材を利用するなら、検索ワードを「無料素材」「無料イラスト」「無料スタンプ」「無料アバター」などで検索すると無料で利用できるサイトは沢山見つかるよ!

●ただし、この様なサイトは、ほとんどが「無料登録」をしないとダウンロードできなかったり、「1日のダンロード回数が制限」されたりするのがネックだね!

●お薦めは、「無料登録無し」でダウンロードできる「日本郵政のフリーイラスト集」やLINE、au無料スタンプがあるよ!

2.画像や写真を加工編集しアバターを作成する

🟡このアバターはスマホで撮影したものを『ペイント』『Officeのパワーポイント』の画像スタイル➡[面取り楕円・黒]で編集加工したものだよ!

●無料のソフトは沢山あるけど、何かと制約が多いので利用時は注意が必要だよ!?

●これだぁー!と思った無料画像編集ソフトを見つけたんだけど、インストールの前に『利用にあたり営利か非営利化』の選択が必要なんて出てきたので利用するのを躊躇!

●無料は諦めて、パソコンに付属のソフト『ペイント』、『ペイント3D』、『フォト』、『※Office』を使って加工編集することにしました。

『※Office』は有料ですがOffice付のパソコンを購入したので付いていました。(Word、Excel、PowerPointが利用できます)

🟡このアバターはスマホで撮った写真を『ペイント』でトリミングしてリサイズしただけだよ!

🟡このアバターは背景色を白にすれば四角の枠が消えると思って試してみたけど消えませんでした?
●キャンパスと同じ色じゃないとダメみたいです?

トラ娘-150は『日本郵便』の無料イラストで『ペイント』で150×150ピクセルにトリミングしただけよ!
●『トラ娘150~1024』の場合は『ペイント』でトリミングしただけで背景色がキャンパスと同じなので加工編集の必要なしよ!

🟡このアバターはスマホで撮影したものを『ペイント3D』を使って背景色を透明化したものです。
●上手く四角枠の背景を消すことができました。
●元の画像は「04 黒やん69(背景色:白)」

🟡トラ娘-300は『ペイント』で300×300ピクセルにトリミングしただけです。
●[09 トラ娘-1024]も同じ表示だよ! 画像サイズが違っても皆同じ表示になるのね!

3.作成した画像をメディアライブラリにアップロード及び画像URLを取得する

メディアライブラリにアバター用の画像をアップロードするのは、次の4.プラグインの設定[Avatar and name settings]で好みのアバターをセッティングしないとDefaultのアバターしか使えないからね!

メディアライブラリにアバター用の画像ファイルをアップロードし、アップロードした画像のURLを取得する手順
[画像-1]参照 ワードプレス管理画面で[メディア]にマウスをポイント➡[新規追加]をクリック 
[画像-2]参照 メディアのアップロード画面で[ファイルを選択]をクリック➡エクスプローラーが開くので作成保存した場所から目的のアバター用画像ファイルをクリックし、[開く]をクリック➡[選択した画像ファイル]がアップロードされる 
[画像-3]参照 管理画面の[ライブラリ]をクリック➡メディアライブラリ画面が表示される➡[画像]が保存されたことが確認できる 
[画像-4]参照 [画像]をクリックすると「添付ファイルの詳細」画面が表示される➡[URLをクリップボードにコピー]をクリック
 

[画像-1] ①~②    画像をクリックすると拡大!
[画像-2] ③~➃    画像をクリックすると拡大!
[画像-3] ⑤~⑥    画像をクリックすると拡大!
[画像-4]     画像をクリックすると拡大!

4.プラグインの設定[Avatar and name settings]

設定画面には以下のいづれかで移動できるよ!
●ワードプレス管理画面の[設定]にマウスをポイントし、メニューからLIQUID SPEECH BALLOONをクリック
●投稿画面でSPEECH BALLOONブロックをマウスでポイントしクリック➡ブロックツールバーの[Avatar and name settings]をクリック

下の設定画面が表示されるので⑧~⑩の説明通りに操作すれば設定完了だよ!

[Avatar and name settings]    画像をクリックすると拡大!

Ⅴ.最後にアバターの加工編集について

●基本的に水平、垂直の最大サイズを150,300,1024ピクセル内で数種類のサイズを試してみましたが、どれも見た目同じ大きさに表示できたので、このプラグインが自動的に画像サイズを調整しているのだと思います。

●一般的な『ペイント』や『フォト』でトリミングやリサイズ操作のみで作成した画像は簡単に取り込め何の問題もありませんでした。

●「特殊な加工編集した画像」が上手く表示できず試行錯誤しました。

『パワーポイント』の加工編集で画像スタイルを「楕円・メタル」で丸形にトリミングすると画像の大小に関わらずメディアライブラリの保存枠からはみ出してしまう状態が発生。

『ペイント3D』で『マジック選択』とキャンパスの透明化で加工編集した画像の表示が豆粒ほどの大きさに表示された。

・・・いづれも加工編集を何度かやり直して上手くいったので加工編集過程に問題が有ったと思われます。

👀加工編集の仕方については、別途手順を精査して別ページで投稿したいと思います。

帰るくん、モモちゃん、トラ娘ちゃん、皆さん最後まで付き合ってくれてお疲れさでした!

▪投稿のカテゴリーのみ変更で記事を整理できる理想のパーマリンク設定!

ワードプレスの設定で『パーマリンク』設定は重要な設定であることは、その手の色々な記事が物語っている通りだと思います。

『パーマリンク設定を途中で変更しないことをお薦めします』といった記事がたくさん投稿されています。

黒やん69のブログも、構築間もないころパーマリンク変更をしています。
その時は記事数も少なくアクセスも少なかったので問題は有りませんでした。

構築するスキルがありませんでしたので、デフォルトのパーマリンク設定をしておりましたが、記事の分類がしずらいので、調べた末に今のパーマリンク設定をしました。

結果的に、今のパーマリンク設定が理想的と感じています。

[1].お薦めのパーマリンク設定

変更したパーマリンク設定は以下の通りです。
この時は、記事数も少なかったので特に問題もなく変更できました。

👀参考記事👀必見!初心者のための初心者でも出来る初心者のブログ!

  • https://www.ドメイン名/%category%/%post_id%/
    👆この「カスタム構造」でタグを選択したパーマリンクがお薦めです。

基本的に投稿記事はカテゴリー分けして、post_idは自動生成するパーマリンクです。

カテゴリーは階層構造で作成できますので、記事を分類するのは好都合です。
カテゴリーを変更してもpost_idは前のまま引き継がれます。

ブログ開設して1年の駆け出し風情が、知ったかぶりで書くような内容の記事ではありませんが、『パーマリンク』を変更せずにサイトの記事を整理することは簡単です。

[2].カテゴリーを変更してもリンクなどに問題は発生しません。

難しいことは分かりませんが、以下のような心配していたことは何も起こらず、URLの変更ができました。

  • お探しのページは見つかりません?
  • 404エラーページが表示される?「NOT FOUND(404)」
  • 旧URLから新URLへ自動リダイレクトさせるためのプラグインが必要?

1️⃣.新しいカテゴリーを作成する!

カテゴリーの作成は以下の手順で簡単に作成できます。

  • 手順①.ワードプレス管理の「投稿」➡「カテゴリー」をクリックします。
  • 手順②.「新規カテゴリーを追加」で「名前」を入力します。
  • 手順➂.「スラッグ」を入力します。(英文字が望ましいです)
    (※)新たなカテゴリーを「いろいろブログ」としたのでスラッグは「zattablog」としました。
  • 備考:変更する投稿は「親カテゴリー」を設定していましたが、新たなカテゴリーは親カテゴリーなしです。
  • 手順④.「新規カテゴリーを追加」ボタンをクリックして作成完了です。

2️⃣.変更したい投稿の「クイック編集」を行う!

  • 手順①.ワードプレス管理画面の「投稿一覧」から変更したい投稿を探します。
  • 手順②.当該投稿の「クイック編集」をクリックします。
  • 手順➂.クイック編集画面で「スラッグ」のデータを新しいスラッグに変更します。
  • 手順④.カテゴリーの設定メニューから以前のカテゴリーを外して新しいカテゴリーにチェックを入れて「変更」ボタンをクリックして完了です。

3️⃣.URL変更後の確認手順について!

黒やん69は、下の様な管理表をエクセルで作成しておりますので、変更の確認の際に非常に便利です。

👆画像をクリックで拡大します。
  • 手順①.例として、上の管理表の左側(旧URL)と右側(新URL)の両方でアクセスできるか確認します。
  • 手順②.投稿の中に設定してある「内部リンク」や「外部リンク」がアクセスできるか確認します。
  • 手順➂.Search Connsoleの「URL検査(※)」で新URLを検査した後に、管理表の投稿のタイトルをGoogle の検索窓に貼り付けて、検索すると検索結果が一番上に表示されるか確認します。(稀に一番上に表示されない場合もあります)
    (※)下記の『4️⃣.Search ConnsoleでURL検査を行う!』を参照

4️⃣.Search ConsoleでURL検査を行う!

  • Googleにインデックスしてもらうため下記の画像の①の「URL検査」を行います。(※)インデックス登録リクエストをすると即インデックスされています。
    また、「URL検査」をしなくてもGoogleポットが巡回してくればインデック登録されますが時間が掛かります。

《URL検査手順》

下の画像を参照願います。

  • 手順①.Google Search Consoleにアクセスし、メニューの「URL検査」をクリックします。
  • 手順②.画像ので検査対象の新URLを入力してエンターを押すと、画像のの状態になり、その後画像のになります。
  • 手順➂.画像ので「インデックス登録をリクエスト」をクリックします。
  • 手順④.画像のの状態を経て画像のになったら「OK」をクリックして「URL検査」は終了です。
  • 手順⑤.最後は前項の3️⃣.の手順➂を行えば完了です。
    画像ののように検索結果が一番上に表示されます。
👆画像をクリックで拡大します。

[3].関連記事

▪必見!初心者のための初心者でも出来る初心者のブログ!

今回は、2度目のホームページ(ブログ)構築になりますが、新たな出費がないので気楽にチャレンジしてみました。

『お名前.comのレンタルサーバーRSプラン+独自ドメイン+ワードプレス』の3点セットで構築した環境に『サブドメインのWebサイト』を追加構築します。

~はじめに~

既存の『黒やん69のブログ』を一年程前から構築し始めた時は、右も左も分からない状態で、毎日4,5時間ブログ構築に没頭していました。

いまから思えば山あり谷ありの連続で結構大変でしたが、ここまでたどり着けたのは、いくつかの要因があったからです。

  • 新しい知識を得ることで生きがいを感じられたこと。
  • 苦しさより楽しいという感情が勝ったこと。
  • 目標を定めてチャレンジを続けられたこと。
  • 諦めず止まらずに続けられたこと。
  • 解らないことが解決したときの喜びを知ったこと。
  • ブログを書く楽しさを知ったこと。

常に新しい情報を取り入れて試して見たり、試行錯誤を繰り返しながら、常に見やすく分かりやすい情報を発信すべく鋭意努力中です。

『黒やん69のブログ』を立ち上げる時は無我夢中でしたが、今回は余裕で色々試しながらサブドメインのWebサイト構築をしました。

失敗の経験を生かして、さらなるスキルアップとブラッシュアップを兼ねてドキメントに纏めましたの参考になれば幸いです。

[1]既存ドメインのWebサイトの構築環境!

  • レンタルサーバー➡お名前.com RSプラン
    ディスク容量:250GB(現在の使用量2%)
    データーベース (MySQL) ➡1,024MB (現在の使用量3%)
    セキュリティ
     ①.SSL証明(無料)➡使用中
     ②.WAF(無料)➡使用中
     ➂.アクセス制限(無料)➡未使用
     ④.SiteLock(有料)➡未利用
  • ドメイン➡ kuroyan69.com (お名前.comで取得) 
  • WordPress(テーマ:Twenty Sixteen)

関連記事

[2]サブドメインのWebサイト構築計画!

一つのドメインで複数のサイトを運営するには、以下の二つの方法があります。

  • サブドメインを作成する
  • サブディレクトリを作成する

どちらの方法をとるか、あるいは両方を混在させるかは、サイトのコンテンツによって使い分けが必要です。黒やん69は、サブドメインでWebサイトを作成してみました。

サブドメイン/サブディレクトリの使い分けについては、初心者でも分かる解説が乗っているサイトを参考にしました。👀参考サイト👀THE・ATSUSHI

《構築のための作業項目》

  • ①. レンタルサーバーでサブドメインを追加作成!
  • ②.サブドメインにワードプレスをインストール!
  • ➂.ワードプレスの設定!
  • ④.SSL証明を導入!
  • ⑤.テーマの選定とインストール!
  • ⑥.プラグインをインストール!
  • ⑦.プライバシーポリシーを作成!
  • ⑧.パーマリンクの設定を検討し決定!
  • ⑨.Google AnalyticsとSeach Consoleの導入!
  • ⑩.サイトマップの作成と送信!

[3]サブドメインの作成!

『黒やん69のブログ』のドメイン名『kuroyan69.com』のサブドメインの作成手順になります。サブドメイン名を『ikuto.kuroyan69.com』で作成します。

画像に基づき手順①〜⑨の順に説明します。

  • 手順①.レンタルサーバーのコントロールパネルにログインします。
  • 手順②.『ドメイン』をクリックします。
  • 手順➂.赤枠のドメインkuroyan69.comの『+サブドメイン』をクリックします。
👆画像をクリックで拡大
  • 手順④.サブドメイン名『ikuto』を入力して、『確認する』をクリックします。
👆画像をクリックで拡大
  • 手順⑤.サブドメイン名が間違いないかを確認して『追加する』をクリックします。
👆画像をクリックで拡大
  • 手順⑥.サブドメインの追加が完了しました!、『一覧に戻る』をクリックします。
👆画像をクリックで拡大
  • 手順⑦.ホーム画面の『ドメイン』をクリックします。
  • 手順⑧.赤枠内のドメイン『kuroyan69.com』をクリックします。
  • 手順⑨.サブドメイン『ikuto.kuroyan69.com』が追加されたことを確認します。
👆画像をクリックで拡大

[4]サブドメインにワードプレスをインストール!

画像に基づき手順①〜⑪の順に説明します。

  • 手順①.レンタルサーバーのコントロールパネルにログイン します。
  • 手順②.ホーム画面の左メニューの『基本設定』をクリックします。
  • 手順➂.『選択中のドメイン』横の『切替』ボタンからWordPressをインストールしたいドメインを選択し、WordPress一覧の右の『+WordPressを追加』をクリック します。
👆画像をクリックで拡大
  • 手順④.『新規作成』を選択して、『情報入力する』をクリック
👆画像をクリックで拡大
  • 手順⑤.選択中のドメインは『ikuto.kuroyan69.com』を確認します。
  • 手順⑥.URLに「WWW」追加をチェック➡任意ですが、ここではチェックします。
  • 手順⑦.ドメインのうしろに文字列を追加➡ここでは空白にします。
    ⚠注意ドメインのうしろに文字列(例の「blog」)を入力したことで、  Adsense申請でサイトにアクセスできず、解決に時間が掛かった経験を踏まえて空白にします。
  • 手順⑧.『情報入力する』をクリックします。

👀参考記事👀WordPressインストール時の設定・情報入力について重要...

👆画像をクリックで拡大
  • 手順⑨.ホームページのタイトル、メールアドレス等を入力して『確認する』をクリックします。
  • ⚠注意ユーザー名だけは、あとで変更できませんので熟慮のこと。
    (実名の必要はありませんので、よく考えて決めて下さい)
  • ▢データーベースを指定して作成する➡ここではチェック不要にします。
  • 「ユーザー名またはメールアドレス」と「パスワード」は、ワードプレスの管理画面へのログインに使用しますので忘れないよに覚えておくこと!  
👆画像をクリックで拡大
  • 手順⑩.入力した情報を確認して正しければ『完了する』をクリック
👆画像をクリックで拡大
  • 手順⑪.『ホームページを作成しました!』が表示されたら完了 です。
    ⚠注意➡こちらのパスワードは後から確認できないので、必ず控えること。
👆画像をクリックで拡大

[5]ワードプレスの設定!

ワードプレスの『設定』項目は以下の7項目があります。

  • 1️⃣一般
  • 2️⃣投稿設定
  • 3️⃣表示設定
  • 4️⃣ディスカッション
  • 5️⃣メディア
  • 6️⃣パーマリンク設定
  • 7️⃣プライバシー

7項目の設定のうち 1️⃣一般設定、 6️⃣パーマリンク設定、7️⃣プライバシー設定について、過去の失敗経験などを交えて説明します。

[5-1]設定項目の1️⃣一般設定 について!

下記の一般設定の画像を基に説明します。

  • 一般設定の「WordPressアドレス(URL)」「サイトアドレス(URL)」は重要な情報です。
    [4]サブドメインにワードプレスをインストール!手順⑦のドメインのうしろに文字列を追加で設定したURLが反映されます。
  • 「WordPressアドレス(URL)」は、ワードプレスをインストールしたアドレスであり、「サイトアドレス(URL)」は、ホームページ のURLです。
  • ⚠注意
  • 「WordPressアドレス(URL)」 を変更するとワードプレス管理画面にログインできなくなります。(間違えると復旧が大変なので注意して下さい!
  • 「サイトアドレス(URL)」を変更すると ホームページにアクセスできなくなります。(サーバーのindex.phpファイルの修正が必要なります。
  • ➂及び④のURLがhttp://になっていたらhttps://に変更します。(SSL証明を導入するため)
👆画像をクリックで拡大

[5-2]設定項目の6️⃣ パーマリンク設定について!

『黒やん69のブログ』を構築した時は、どのようなコンテンツ(記事)を書くか定まっていなかったので、パーマリンク設定も人まねで作成しました。

まだ、投稿記事数や外部リンクなどが少なかったり、アクセス数が少ないうちなら、SEOに大きな影響を及ぼすこともないので変更も可能です。

じっくり考えて作成することが望ましいと思いますが、正直ある程度記事を書いてみないと、その辺のことは理解できないと思います。

『黒やん69のブログ』はカテコリー階層を基本に作っていますが、一度パーマリンクを変更しました。

現在の『黒やん69のブログ』のパーマリンク設定を例に説明します。青塗り部分がパーマリンクです。

https://www.kuroyan69.com/%category/%post_id%/

1️⃣.設定の手順

  • 手順①.ワードプレス管理画面『設定』➡『パーマリンク設定』をクリックします。
  • 手順②.『カスタム構造』を選択します。
  • 手順➂.『利用可能なタグ』から①、②のタグを選択すると『カスタム構造』のURLにタグが挿入される。
  • 手順④.設定したら『変更を保存』をクリックして完了です。
👆画像をクリックで拡大

2️⃣.記事のURLとパーマリンクの関係

パーマリンクの変更をした時に、あとで分るように、 記事のURLとパーマリンクの関係をエクセルで管理するようにしました。

下表は『黒やん69のブログ』の記事のURLを管理している一部を抜粋したものです。

  • 一部の実例ですが、パーマリンクの/%category%/は親category、子categoryの部分になります。
  • /%post_id%/の部分はの2911というid(番号)が自動生成されます。
👆画像をクリックで拡大

[5-3]設定項目の7️⃣ プライバシーについて!

設定の前に『プライバシーポリシー』を作成しておく必要があります。

「作成操作概要」:ドメインのプライバシーポリシーをエクスポート➡サブドメインにインポートする操作で簡単に作成出来ます。

1️⃣.ライバシーポリシーをエクスポート

ドメインの『黒やん69のブログ』の固定ページで作成した『プライバシーポリシー』をエクスポートします。

  • 手順①.ワードプレス管理画面の「ツール」➡「エクスポート」を選択すると、エクスポートの初期画面が表示されます。
  • 手順②.エクスポートの初期画面で「固定ページ」を選択すると、の設定が追加されます。
  • 手順➂.追加された「投稿者/開始日時/終了日時/ステータス」を設定します。
    ▢投稿者:デフォルトの「すべて」のままで問題有りません。
    ▢開始日時/終了日時:プライバシーポリシーの公開年月を選択します。
    (例.6月2020年➡プライバシーポリシーの公開年月を選択)
    ▢ステータス:「公開済み」を選択します。
  • 手順④.「エクスポートファイルをダウンロード」をクリックします。
    ★パソコンの『ダウンロード』にXMLドキュメントがダウンロードされます。
    例)ダウンロードファイル名:WordPress.2020-03-17.xml

2️⃣.プライバシーポリシーをインポート

サブドメインの『固定ページ』に前項の手順④でダウンロードしたXMLファイル(例.WordPress.2020-03-17.xml)をインポートします。

  • 手順①.ワードプレス管理画面の「ツール」➡「インポート」を選択すると、下記のインポート画面が表示されます。
  • 手順②.インポート画面で「WordPress 今すぐインストール」をクリックします。
  • )この操作で、「WordPressインポートツール」というプラグインが自動でインストールされ有効化されます。
  • 手順➂.インストールが完了すると『インポーターの実行』が可能になり、今後のインポート操作は下記の様に「WordPress インポーターの実行』に替わります。
  • 手順④.「WordPress インポーターの実行」をクリックすると「WordPressのインポート」画面に替わります。
  • 手順⑤.「ファイルを選択」をクリックし、先にダウンロードしたファイル選択します。(ダウンロードしたファイル例.WordPress.2020-03-17
  • 手順⑥.「ファイルをアップロードしてインポート」をクリックします。
  • 手順⑦.この画面では、なにも設定せず「実行」をクリックします。
  • 手順⑧.「すべて完了しました。」でインポートは完了です。
  • 手順⑨.固定ページ一覧で「プライバシーポリシー」がインポートされたことを確認し、サブドメイン用のプライバシーポリシーを作成して下さい。

3️⃣.プライバシーポリシーの設定

  • 手順①.ワードプレス管理画面の『設定』➡『プライバシー』をクリックして、下記のプライバシー設定画面の通り、既にプライバシーポリシーがある場合は、以下から選択して『このページを使う』をクリックします。

[6]SSL証明の導入!

契約している『お名前.comのレンタルサーバー RSプラン』で設定します。
👀参考サイト👀https://www.onamae.com/server/rs/ssl/

[6-1]SSLの重要性!

  • 乗っ取り・盗聴を防止!サイト運営者も閲覧者も安心!
    SSLを導入することで、悪意のある第三者による通信の盗聴を防ぐことが可能になります。
  • GoogleがSSL化を推奨。SEOにもオススメ!
    Googleは、ウェブサイトにおけるHTTPSの有無を、検索順位の評価対象にすると発表しました。
  • 急速に進む、常時SSL化の流れ
    ログインページをSSL化しただけでは、それ以降のページにアクセスした際に、Cookieを盗聴される可能性があります。盗聴を防ぐためにも、世の中では常時SSL化の流れが急速に進んでいます

[6-2]お名前.comのSSLの種類!

  • 無料SSL
    独自ドメインがあれば、誰でも無料で使える、SSLサーバー証明書です。最大256bitの強固な暗号化通信を行いますので、どなたでも安心してご利用いただけます。
  • クイック認証SSL(有料 24,000円/年 )
  • ▢企業認証SSL(有料 54,000円/年 )

[6-3]無料SSLの設定!

お名前.comの『レンタルサーバーご利用ガイド』のSSLの利用手順をご参照下さい。
👀参考サイト👀https://www.onamae-server.com/guide/rs/p/11

下の画像は、SSL設定が完了し有効状態になっています。

👆画像をクリックで拡大

[7]テーマの選定とインストール !

『黒やん69のブログ』のテーマは、ワードプレスのデフォルトテーマ『Twenty Sixteen』です。

  • 選定した理由はいくつかあります。
    ①.ワードプレスのデフォルトテーマである。
    ②.発表されてから時間も経っているが人気を継続している。
    ➂.レイアウトもシンプルな2カラムを採用している。
    ④.ブログとウェブサイト用に完全に動作する。
    ⑤.レスポンシブ対応のテーマである 。

[7-1]テーマの選定!

最初は記事をあさって情報だけで試さずにテーマ選定してしまいましたが、今回は余裕があるので、色々試して決めました。

初めての時は余裕もなく深く考えずに決めましたが、ワードプレスをインストール直後なら、いろいろ試すチャンスです。

使い勝手から、 ドメインと同じ『Twenty Sixteen』と思いましたが、同じではつまらないので、シリーズのデフォルトテーマを いくつか試してみました。

試した結果、ワードプレスのデフォルトテーマ『Twenty Seventeen』に決定!

ワードプレスは毎年無料のデフォルトテーマを提供していますが、決め手となったのは『Twenty Sixteen』と同じ2カラムのレイアウトであり、ヘッダー画像とアニメーションが気に入りました。

使い勝手も『Twenty Sixteen』と変わらないし、シリーズのデフォルトテーマの中では、一番よさそうに思います。

2019年版『Twenty Nineteen 』は、1カラムのレイアウトでウィジェットが馬鹿でかいので除外しました。

2020年版『Twenty Twenty』は2カラムで、ウィジェット位置が『Twenty Sixteen』と左右逆なだけですが、タイトルやウィジェットの文字が大きいのと、まだ新しいので除外しました。

下の画像はパソコンイメージのプレビューです。

👆画像をクリックで拡大

下の画像はスマホイメージのプレビューです。

[7-2]テーマのプレビューを確認する方法

  • 下の画像の手順通りで確認することが出来ます。
👆画像をクリックで拡大

[8]プラグインをドメインからサブドメインにコピー !

お名前.comレンタルサーバーRSプランでは、ワードプレスをインストールするといくつかのお薦めプラグインが自動でインストールされます。

ドメインのワードプレスにインストールしたプラグインをサブドメインのワードプレスに各々インストールするのは時間が掛かります。

そこで、投稿やプラグインをエクスポート/インポートできるプラグインを探して試してみました。

[8-1]エクスポート/インポートできるプラグイン!

プラグインを指定してエクスポートしたら、容量制限でエクスポートできません。

ちなみに、そのプラグインは『All in WP Migration』です。

有料版ならできるようですが、無料版では容量制限があるようです。但し、容量が少なければ出来ると思います。

試しに、固定ページの『プライバシーポリシー』をエクスポート/インポートしてみたら出来ました。

細かい選択ができれば、使えるプラグインなのですが、残念ながらプラグインの場合はプラグイン全体しか指定できません。任意に複数を選択する機能がありません。

このプラグインは不採用にしました。

[8-2]サーバーのファイルマネージャーを使用してプラグインを移行する方法!

ドメインのWebサイト構築で、トラブった時に習得したサーバーのファイルマネージャーを使ってみたら上手くいったので、操作手順を以下にまとめました。

  • 「操作概要」
    ドメインの「Pluginsフォルダ」の各プラグインファイルをサブドメインの「Pluginsフォルダ」にコピー・アンド・ペーストします。
  • 手順①.お名前.comレンタルサーバーのコントロールパネルにログインする。
  • 手順②.おすすめメニューから「ファイルマネージャー」を選択する。
  • 手順➂.ドメイン側の「Plugins」フォルダを探す。
  • 手順④.必要なプラグインファイルをコピーして、サブドメイン側の「Plugins」フォルダにペーストする。
  • ⚠注意 サブドメイン側へコピー・アンド・ペーストしたプラグインで設定が有るプラグインは設定の見直しが必要です。
👆画像をクリックで拡大

[8-3]使用中のプラグインの確認!

  • ワードプレス管理画面➡「ツール」➡「サイトヘルス」➡「情報」➡「使用中のプラグイン」の順にクリックしていくと、以下の画面が表示されます。
  • )サイトヘルスは、自分のサイトが問題なく動作しているか?常にサイトを監視してチェックをしてくれる「サイトの健康診断ツール」です。

[9]サブドメインにGoogle Analyticsを導入する方法!

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービスです。

ドメインのWebサイトで導入しておりますので、Googleアカウントから作成する必要はありません。

プロパティを追加するだけでサブドメインのWebサイトも解析をすることが可能になります。

[9-1]プロパティを追加する手順

  • まず、Google Analyticsにアクセスします。
  • 手順①.ホーム画面の『管理』をクリックする。
  • 手順②.管理画面の『+プロパティを追加』をクリックする。
  • 手順➂.プロパティの作成画面で『測定の対象を指定します』で『ウェブ』を指定して『続行』をクリックします。
👆画像をクリックで拡大
  • 手順④.プロパティの作成画面でプロパティの設定を行います。
  • 『ウェブサイト名前』、『ウェブサイトのURL』、『業種』、『レポートのタイムゾーン』を設定し、『作成』をクリックする。
  • http://とhttps://の選択も忘れずに! https://を選択のこと
👆画像をクリックで拡大
  • 手順⑤.プロパティの作成が成功すると、以下の画面が表示され、「トラッキングID」「トラッキングコード」が取得されます。
  • これをWebサイトに反映させ解析を可能にさせるためには、「トラッキングコード」をサイトの全てのページに貼り付ける必要が」あります。
  • しかし、HTMLやPHPなどのプログラミングスキルが無いと難しいので、プラグインを使う方法を事項の[9-2]で説明します。
👆画像をクリックで拡大

[9-2]All in one SEO packプラグインで解析を可能にさせる方法 !

「トラッキングID」をサイトに反映させるAll in one SEO packプラグインの設定方法を以下に記載します。

  • 手順①.ワードプレス管理画面で「All in one SEO」➡「一般設定」の順にクリックして、下にスクロールして『Googleアナリティクス』の設定を行います。
  • 手順②.「GoogleアナリティクスID」[9-1]手順⑤.で取得したトラッキンギID「UA-xxxxxxxxx-x」を入力します。
  • 手順➂.「高度な分析オプション」が「有効」になっていることを確認します。
  • 手順④.トラッキングからユーザを除外する」➡ここは、アナリティクスの解析対象から自分や、その他の権限者を除外するかの設定なので、自分以外のユーザー権限の設定が無ければ「Administrator」にチェックを入れておけば問題ありません。
  • 最後に『変更の更新』をクリックして設定完了です。

[9-3]正しく解析をするための設定すべき項目!

  • 前項の『トラッキングからユーザーを除外する』の設定は、ワードプレス管理画面にログイン中のアクセスを除外するための設定です。
  • 従って、ログイン中でない時に、プライベートネットワークから自分のサイトをアクセスするとアナリティクスが解析対象としてアクセスをカウントしてしまいます。

1️⃣.Analyticsのフィルターの除外設定の方法

  • 自分自身のアクセスを除外するためには、Google Analyticsの「管理」の『フィルター』の除外設定)をする必要があります。
    )プライベートネットワーク内の端末(PCやスマホ等)からサイトへのアクセスを除外する設定です!
  • 手順①.Google Analyticsのホーム画面の『管理』をクリックします。
  • 手順②.『フィルタ』をクリックします。
  • 手順➂.『フィルタの追加』をクリックします。
  • 手順④.『新しいフィルタを作成』がチェックされていることを確認します。
  • 手順⑤.『フィルタ名』を入力します。(入力例.自分の端末Gの除外)
  • 手順⑥.フィルタの種類で『定義済み』が選択されていることを確認します。
  • 手順⑦.『フィルタの種類を選択』▼から『除外』を選択します。
  • 手順⑧.『参照元からリンク先を選択します』▼から『IPアドレスからのトラフィック』を選択します。(IPアドレス入力ボックスが追加されます)
  • 手順⑨.『式を選択します』▼から『等しい』を選択します。
  • 手順⑩.『IPアドレス 』にグローバルIPアドレスを入力し、『保存』をクリックします。
  • 自分の端末のグローバルIPアドレスを調べるには、以下のサイトにアクセスすると確認できます。
  • アクセス管理(使用中のIPアドレス確認):CMAN 株式会社提供
  • 手順⑪.設定が完了すると下の画面表示されます。

2️⃣.analyticsの『ボットのフィルタリング 』設定

Webサイトには、人間以外にもクローラーやスパイダーと呼ばれるロボットもアクセスします。一般的に認知されているロボットは、検索エンジンのクローラーです。

Google Search ConsoleのURL検査を頻繁に行っていた時に、大量のアクセスがカウントされてしまい、突然変なアクセスがあったので心配しました。

原因を調べていて、Analyticsのアクティブユーザーのリアルタイムを見ていたら、必ず一回のURL検査を実行すると2ユーザーがアクティブになることが分かりました。

原因はロボットからのアクセスと分かりました。これを除外する設定が『ポットのフィルタリング』です。

  • 手順①. Analyticsのホーム画面の『管理』➡管理画面の『ビュー設定』をクリックします。
  • 手順②.『ポットのフィルタリング』にチェックを入れて『保存』をクリックします。

3️⃣.Analyticsに追加したプロパティの確認

  • 手順①.ホーム画面の『管理』をクリック➡管理画面の『+プロパティを作成』の下にある『▼マーク』でプロパティを選択します。
  • 手順②.『ホームマークをクリック』してホーム画面に戻ります。
  • 手順➂.選択したウェブサイトのホーム画面で追加したプロハティの解析データが表示されることを確認します。

[10]Google Search Consoleの導入 !

既存のドメインで導入済みですので、新たに導入する必要はありません。

「ドメインプロパティ」に「サブドメインのプロパティ」を追加することで、サブドメインのWebページの「検索パフォーマンス」を確認出来ます。

[10-1]サブドメインのプロパティの追加手順!

  • 手順①.Search Consoleにアクセスして、ドメインプロパティの「▼」をクリック
    します。
  • 手順②.ドメインプロパティの画面に替わりますので、「+プロパティを追加」をクリックします。
  • 手順➂.プロパティタイプの選択画面で、「URLプレフィックス」を選択して、URLを入力後に「続行」をクリックします。
    )URLはサブドメインのアドレスを入力します。
  • 手順④.「所有権が確認されました」の画面が表示されます。
    「プロパティに移動」をクリックすると、「プロパティの設定>所有者の確認」画面に移動します。
  • 手順⑤.「所有者の確認」画面の「ドメイン名プロバイダ 確認が完了しました」が確認できます。
  • ②、➂は、「HTMLファイル」、「Google Analytics」で所有権の確認を追加したものです。[10-2]所有権の複数確認方法!で追加方法を説明します。
👆画像をクリックで拡大

[10-2]所有権の複数確認方法!

追加したプロパテの所有権は自動認識されましたが、「確認状態を維持するためには、複数の確認方法を追加しておくことをお勧めします」とGoogleは言っております。

複数の確認方法は、以下の画面のように4つありますが、全てを追加する必要はありません。簡単にできる方法として「HTMLファイル」と「Google Analytics」の方法を説明します。

👆画像をクリックで拡大

1️⃣.Google Analyticsで所有権の確認をする

  • 手順①.[9-2]でGoogleアナリティクスIDにトラッキングID「UA-xxxxxxxxx-x」を設定済みであること。
  • 手順②.以下の画面で、「Google Analytics」をクリックと赤枠の手順が開きますので「確認」をクリックすれば「確認を完了しました」になります。
👆画像をクリックで拡大

2️⃣.HTMLファイルで所有権の確認をする

  • 手順①.下の画面の「HTMLファイル」をクリックすると、手順が開きます。
  • 手順②.赤枠の「ファイルをダウンロード」をクリックします。
  • 手順➂.パソコンのダウンロードに「google27a05317f6793bfa.html」がダウンロードされます。
    ⚠注意:「確認」はまだクリックしないこと➡手順⑦でクリックします。
  • 手順④.レンタルサーバーのコントロールパネルを開きます。
  • 手順⑤.下の画面のファイルマネージャーを開き、「public_html」の「ikuto.kuroyan69.com」を開きます。
  • 手順⑥.アップロードアイコンをクリックすると、ファイルの選択画面が開きますので、ダウンロードした「google27a05317f6793bfa.html」ファイルを選択してアップロードします。【下の画面のがアップローどされたファイルです】
  • 手順⑦.前の画面の「確認」をクリックすると確認を完了しました」になります。
👆画像をクリックで拡大

[11]サイトマップ作成とGoogleへの送信 !

サイトマップとは、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。

Google などの検索エンジンは、このファイルを読み込んで、より高度なクロールを行います。

サイトマップはサイト内のどのファイルが重要かを Google に伝えるだけでなく、重要なファイルについての貴重な情報(ページの最終更新日、ページの変更回数、すべての代替言語ページなど)も提供します。

Google support.com/

[11-1]All in one SEO Packプラグインによる作成!

  • 手順①.ワードプレス管理画面の「All in one SEO」➡「機能管理」➡「XMLサイトマップのActivate」の順にをクリックします。
  • 手順②.「XMLサイトマップ」が追加され、「のマーク」が青に変わり、「Activate」が「Deactivate」に変わります。
  • 手順➂.サイトマップ設定項目は5つありますが、「XMLサイトマップ」のみ下の画像の様に設定し「サイトマップの更新」をクリックすれば設定完了です。
  • 「更新の予約」はサイトの更新頻度に合せて任意に設定します。
  • 手順④.下の画像は設定完了後の画像です。が追加されます。
  • [⚠注意1]はXMLサイトマップをActivateにした時点で作成されます。は設定完了後に作成されます。
  • [⚠注意2]通常、各々の設定項目は上記の手順➂のように開いています。「ヘルプ」➂の▼マークを押すごとに設定項目を開閉します。
  • [⚠注意3]の「XMLサイトマップ」以外の他の4つの設定はデフォルトのままで問題ありません。

[11-2]サイトマップをGoogleへ送信!

All in one SEO packプラグインで作成したサイトマップをSearch Consoleの「新しいサイトマップの追加」で送信する手順です。

  • 手順①.Search Consoleにアクセスして、追加する「プロパティ」を選択し、「サイトマップ」をクリックします。
  • 手順②.「新しいサイトマップの追加」でにURLを入力し、「送信」をクリックします。(URLの入力例)[sitemap.xml]、同じように[sitemap.rss]を入力し「送信」します。
👆画像をクリックで拡大
  • 「サイトマップを送信しました」BOXが表示されます。
  • 下の画像は[sitemap.xml]と[sitemap.rss]を追加して送信が成功した画面です。
👆画像をクリックで拡大

~まとめ~

最後まで見ていただきお疲れさまでした。

私も今回のWebサイトを作る過程で、いままで不確かだったことも再勉強できて理解を深めることが出来ました。

ブログを始めてから1年も経っていないのに、更新がまめにあるので、サイトのメンテナンスは「サイトヘルス」で常に監視し、サイトを安全に保つことを心掛けています。

ワードプレスやプラグイン、Google提供のツールなど時々刻々と新しい更新が有り、使い勝手は改善されて、簡単になっているように感じました。

更新のあと最初は戸惑いますが、使いこなしているうちに良くなったと実感できます。

情報はすぐに陳腐化してしまいますが、作ることでスキルアップが図れると思いますので、これからも新しいことにチャレンジして、見てもれえるサイト作りに邁進したいと思う次第です。

▪ワードプレスの「外観・メニューとウィジェット」の機能重複の見直し!

投稿日:2020-03-03 更新日:2020-04-02

まだまだ勉強が足りず未熟なサイトですが、後退はしたくないので改善するための努力は惜しまない黒やん69です。

自分では少しずつ改善は進んでいると思っていますが課題はつきません。

投稿ページのサイドバーやコンテンツ下のエリアに「ウィジェット」を採用していますが、メニューやウィジェット同士で機能重複があるため改善を試みました。

1.ウィジェットの取捨選択!

採用したウィジェットの機能・役割は何か??ユーザー、ASP、広告主、投稿者にとって必要なのかどうかを検討してみました。

下記の画像の①〜⑨は現在の「ウィジェット」です。ちなみにテーマは「Twenty Sixteen」バージョン2.0です。

画像をクリックで拡大

検討結果、下記のウィジェットについて、「〇:必要」、「△:設定見直し、または邪魔にならないので残す」、「✖:不要のため削除」で判定しました。

  • ①.カレンダー➡月毎の投稿記事の公開日が表示されるのと、月を切り替えて表示できるシンプルなカレンダーで、公開日をクリックすると投稿記事にリンクする。
    △:他に投稿記事にリンクするウィジェットはあるのでユーザビリティの面では必要性は少ないと思うが、投稿者のモチベーションを維持するには有効と判断。
  • ②.検索➡ 投稿記事をキーワードで検索できる。
    〇:投稿記事が多くなればメリットはあると判断。
  • ➂.最近の投稿➡直近に公開した記事の一覧を表示しリンクする。
    〇:ユーザビリティが一番高いので 必要である。「表示する投稿数」の調整をすることでユーザビリティがさらに向上すると判断。
  • ④.最近のコメント➡ ユーザーがコメントした記事の一覧を表示しリンクする。
    △:特に削除する必要はないし、邪魔にはならないと判断。
  • ⑤.カテゴリー➡投稿記事のカテゴリーの一覧を表示しリンクする。
    △:メニューとも重複するので削除してもいいが、設定変更すればデメリットはないと判断。(ドロップダウン表示に変更)
  • ⑥.アーカイブ➡過去の投稿記事を月別で一覧表示しリンクする。
    △:メニューやカテゴリーとも重複するので削除してもいいが、設定変更すればデメリットはないと判断。(ドロップダウン表示に変更)
  • ⑦.ブロックしたスパム➡Akismet Anti-Spamプラグインで検出したスパムを表示する。
    〇:ブログが安全であることをアピールする機能なので必要と判断。
  • ⑧.SNSフォロー➡ AddToAny Share Buttons プラグインを導入してシェアボタンを設置している。
    〇:記事の拡散が狙いであるので必要。
  • ⑨.固定ページ✖:固定ページの投稿一覧は、メニューと重複するので不要。

ちょっと前にメニューを改善して、だいぶ良くなったと思っていましたが、折角改善したメニューを「ウィジェット」が邪魔しているようです。

2.メニュー改善のメリットを生かすウィジェットの改善!

改善前のメニューは、カテゴリー階層でメニューを作成していました。

メニューからカテゴリー内の記事を表示させると、そのカテゴリーの全記事が全文表示されてしまうためカテゴリー内にどんな記事があるのか把握することが面倒でした。

「ウィジェット」もカテゴリーベースで作成しているので、カテゴリー内の記事が多いと把握するのが面倒です。

Shortcodes Ultimate プラグインのショートコードの「投稿」を使い、ブログ全体の構成とコンテンツが素早く把握できる「新しいメニュー」を作成することが可能になりました。

最大のメリットは、メニューから記事の構成と概要一覧をみられることで、探したい記事が素早く探せることです。

ところが、「ウィジェット」を考慮するのを怠り、折角改善した「メニュー」を「ウィジェット」が邪魔しているのに気づき見直しを図りました。

3.外観・ウィジェットの変更!

ウィジェットの削除、設定変更は「ワードプレス管理画面」➡「外観」➡「ウィジェット」の順にクリック➡以下の画面になります。

各ウィジェットの▼マークをクリックすると設定項目が表示されます。項目を選択し「保存」をクリックし、「保存しました」になれば完了です。

画像をクリックで拡大

▪WordPressインストール時の設定・情報入力について重要な注意点!?

投稿日:2020-02-12 更新日:2020-04-02

当サイト『黒やん69のブログ』は、お名前.comのレンタルサーバー(RSプラン)を使用しています。

お名前.comでは、WordPressを簡単にインストールできる機能が用意されています。

初心者でも簡単にインストールできます。但し、インストールで設定する情報を事前によく理解し検討しておく必要があると思います。

しかし初心者向けに作成されているので、理解ができていなくても手順通りにやれば簡単にインストールできてしまいます。

黒やん69は、それなりに注意を払って、インストールし問題なくインストールできました。(この時点ではそう思っていました)

しかし、後で大変苦労することになった問題が起きるとは予想もできませんでした。落とし穴に落ちてしまった感じです。

同様の記事は多々あります。素人の経験が参考になることもあると思い、記事に残すことにしましたので参考になれば幸いです。

1.お名前.com『ワードプレスインストール機能でかんたんインストール』の手順概要

前提:ドメインもお名前.comで同時に入手したので、ドメインの設定は完了しています。

  • 手順作成方法の選択(新規か追加かを選択)
    ドメインを選択し新規作成を選択する。
  • 手順2.設定・情報入力
    ホームページのURLを設定
    ▢ホームページのタイトル ▢メールアドレス ユーザー名 ▢パスワード
  • 手順3.入力情報の確認➡完了

あとで問題になったのは、手順2.「設定・情報入力」印の2箇所です。

2.ホームページのURLの設定が原因でアドセンスの申請が不合格になりました!?

「ホームページのURLを設定」では例にならってドメインの後ろにblog/を追加しました。

この設定はワードプレスをインストールする場所であり、サイトアドレスにもなるとは知りませんでした。

普通に問題なくサイトは検索されていましたので、恐らくアドセンスの申請をしなければ気づかなかったと思います 。

申請時の手順でアドセンス広告コードを貼りチェックをした時点で「お客様のサイトにリーチできません」のエラーが発生しました。

結論をいうと、ホームページのURL設定時に、ドメインの後ろにblog/というディレクトリを作成したことが原因でした。[https://www.kuroyan69.com/blog/]

たった4文字(blog/)を追加してしまったことが数週間にわたる時間の浪費になりました。

☆関連記事

Adsenseで「お客様のサイトにリーチできません」の原因が判明!?🥰合格通知🥰を見て下さい。

3.ユーザー名を「ローマ字の実名」にしたらブログの投稿に表示されてしまった!?

ユーザー名は、初心者では実名を設定する人が多いと思います。
ハンドルネームでもニックネームでも何でも設定可能なことを知りませんでした。

どのようなユーザー名を設定しても問題はありませんが、ワードプレスのプロフィールの「ブログ上の表示名」に反映されてしまいます。

ブログの投稿を開いた時に実名が表示されたので、ちょっと驚きました。

セキュリティの問題もあるだろうし、実名では差しさわりがあるのでニックネームに変更しました。

いろいろ情報を探して、短時間で対処出来ましたので事なきを得ましたが、重要な情報だと思います。(ユーザー名は後で変更できません)

下の画像のように、「プロフィール画像」の下は「ブログ上の表示名」ですが、「ニックネーム」のkuroyan69に変更しました。

画像を拡大するなら⇧画像をクリック!

☆「ブログ上の表示名」の変更の方法

  • 手順1.ワードプレスの管理画面➡ユーザーをクリックする
  • 手順2.【画像A】の青枠のエリアにカーソルを合わせると、赤枠の「編集と表示」が表示されます。
  • 手順3.編集をクリックすると【画像B】のプロフィール画面になりますので、「ニックネーム」を設定して「ブログ上の表示名」もニックネームにします。

▪ブログ全体の構成とコンテンツを素早くデザインできるプラグイン!

投稿日:2020-02-10 更新日:2020-04-02

黒やん69はプログラミングのスキルが無いのでプラグインが頼みの綱です。

探していた理想のプラグインをようやく見つけて、いろいろ試してみたところ、懸案だった問題を解決することが出来ました。

当サイト『黒やん69のブログ』では14個のプラグインを使用中でしたが、欲しかったプラグインを2個追加して16個となりました。

ここでは下の赤枠『Shortcodes Ultimateプラグイン』を紹介しますので、是非試して見て下さい。

画像を拡大するなら⇧画像をクリック!

1.《Shortcodes Ultimateのお薦め機能》

このプラグインの『投稿』のショートコードを使い、ブログ全体の構成とコンテンツが素早く把握できる外観・メニューを作成することが可能です。

多彩な装飾ができるショートコードが50以上ありますが、今回は一押しの『投稿』のショートコードを紹介します。

数あるショートコードの中で『投稿』のショートコードは同一カテゴリーの『コンテンツ概要一覧』を簡単に作成できます。

当サイトは、カテゴリー階層でメニューを作成していましたが、同一カテゴリーのコンテンツが全文表示されるので、コンテンツの把握に時間が掛かりました。

このプラグインを導入し問題が解消しました。

このプラグインは、固定ページにメニューを作成し『投稿』のショートコードを挿入すれば簡単に『コンテンツの概要一覧』が作成できます。

2.《 Shortcodes Ultimateの説明》

上のプラグイン詳細画面の赤枠内の説明文をGoogle翻訳
Shortcodes Ultimateは、さまざまな視覚的および機能的要素の包括的なコレクションであり、ポストエディター、テキストウィジェット、またはテンプレートファイルでも使用できます。 Shortcodes Ultimateを使用すると、タブ、ボタン、ボックス、スライダー、カルーセル、レスポンシブビデオなどを簡単に作成できます。

蛇足ですが、上の段落ブロックの装飾は本プラグインの「ボックス」のショートコードで作成したものです。(使い方は簡単でした!

3.《 Shortcodes Ultimateのインストール》

まず最初に Shortcodes Ultimateプラグインをインストールして有効化して下さい。有効化すると管理画面に『【 】ショートコード』が追加されます。【画像A】

メニューに「設定」がありますが、初期設定のままで問題ありません。(但し、『投稿」」と『ボックス』のショートコードでしか確認しておりません。)

4.《『投稿』のショートコードを挿入する手順》

全体的には【画像B】の「メニュー構造のイメージ」のように作成しますが、ここでは「黒やん69のダイアリー」の部分の作成手順を説明します。

  • 手順1.最初にトップページのメニューのイメージを描きます。➡【画像B】は「黒やん69のブログ」で実際に作成したものです。
  • 手順2.イメージしたメニューを固定ページで作成します。
    2-1.【画像B】の「黒やん69ダイアリー」を作成します。➡【画像C】がブレビューです。
    2-2.【画像B】の 「2019年の日記」を作成します。
    (「2020年の日記」)も同様に作成します。➡ 【画像D】【画像E】の記載手順を参考に して下さい。
  • 手順3.段落ブロックの書式ツールバーで「【 】ショートコード挿入」をクリックと利用可能なショートコードの一覧が表示されます。➡【画像E】
  • 手順4.『投稿』のショートコードを挿入します。
    4-1.【画像E】『投稿』をクリックします。
    4-2.【画像F-1、2】の設定画面が表示されます。➡画像を参考に設定したら、最後に『ショートコードを挿入』ボタンをクリックすれば終了です。
    ・「プレビュー」をして確認して下さい。➡【画像G】
画像を拡大するなら⇧画像をクリック!

【画像B】の補足➡URLスラッグを決めて設定して下さい。

画像を拡大するなら⇧画像をクリック!
画像を拡大するなら⇧画像をクリック!

【注意】書式ツールバーは、段落ブロックに一文字でも入力しておかないと表示されません。入力した文字の後ろからでもショートコードは挿入できますが、不要であれば削除してください。

画像を拡大するなら⇧画像をクリック!
画像を拡大するなら⇧画像をクリック!
画像を拡大するなら⇧画像をクリック!

5.《ブログのトップメニューの作成手順》

  • 手順1.ワードプレスの管理画面の外観・メニューを表示させる。 【画像H 】を参照して下さい。
  • 手順2.固定ページで作成した3つのメニューを選択して「メニューに追加」をクリックする。
  • 手順3.選択したメニューが右側のメニュー構造に入るので、図のように親メニューと子メニューの階層構造を作る。
  • 手順4.「設定の保存」ボタンをクリックするれば完了です。
  • 手順5.ブログを開いてメニューを確認➡【画像I】のトップメニューができればOKです。
  • 最後に各々のメニューをクリックして、イメージ通りのコンテンツ一覧が表示されることを確認して下さい。
画像を拡大するなら⇧画像をクリック!

【画像H】がトップメニューです。

画像を拡大するなら⇧画像をクリック!

6.👀関連記事👀

ブログの文字と背景の色設定が超簡単!見映えを格段に向上させるプラグイン!

▪ブログの文字と背景の色設定が超簡単!見映えを格段に向上させるプラグイン!

投稿日:2020-02-04 更新日:2020-04-02

黒やん69はプログラミングは出来ないのでプラグインが頼みの綱ですが、欲しかった機能が手に入るプラグインを見つけて導入してみました。

当サイト『黒やん69のブログ』では14個のプラグインを使用中でしたが、直近で欲しかった機能のプラグインを2個追加しました。

1.推奨プラグイン

下の赤枠で囲んだプラグインです!

パソコンの場合は、⇧画像をクリックすると画像が拡大します。
スマホの場合は、通常の拡大縮小機能で拡大します。

2.Advanced Rich Text Tools for Gutenbergプラグイン

☆機能説明

パソコンの場合は、⇧画像をクリックすると画像が拡大します。
スマホの場合は、通常の拡大縮小機能で拡大します。

☆サイドバーに追加された設定パネル

☆Gutenbergテキストエディターの色設定

ードプレス5.0からリリースされたGutenbergテキストエディターは、文字色や背景色の変更がブロック単位でしかできず大変不便でした。

  • 設定できるブロックの背景色、文字色共にブロック単位でしか設定できません。 (文字単位で設定できない)
  • 背景色も文字色も設定できるブロックタイプは、「段落」のみです。
  • 見出しブロックは文字色の設定はできるが、背景色の設定はできません。
  • タイトルやリストには設定できません。

Advanced Rich Text Tools for GUtenberg の色設定

  • 設定できるブロックのInline Text ColourもInline Background Colourも文字単位で設定できます。(文字単位で設定ができる)
  • タイトル以外のブロックは全て設定できます。

☆インストール➡有効化➡設定なしですぐに使用可能!

使い方は簡単で、インストールして有効化するだけで設定はありません。

インストールは、「プラグインの追加」をクリック➡キーワード枠内にプラグイン名(Advanced Rich Text Tools for Gutenberg)を入力➡検索結果が下記の画像になります。

パソコンの場合は、⇧画像をクリックすると画像が拡大します。
スマホの場合は、通常の拡大縮小機能で拡大します。

☆使用上の注意!

試しに使ってみたら、とても便利なのですが、現在 使用中の WordPress バージョン5.3.2で未検証です。ご使用される場合は、自己責任でお願いします。

試してみて問題なさそうなので、過去の投稿を全て見直して修正をしました。
見映えが格段に向上して大満足しています。

3.👀関連記事👀

ブログ全体の構成とコンテンツを素早くデザインできるプラグイン!

▪スマホで見ると表示が行ずれ?レスポンシブ対応テーマなのになぜなの?

恥ずかしながら、自分のスマホでブログを見たら、やたらと行ずれが多かったりして見映えが悪いこと甚だしい限りでした。

原因はワードプレスの『投稿の編集』で文章の『改行の入れ方』や『ブロックタイプ』の使い方などの工夫が足りなかったからです。

『レスポンシブ対応のテーマ』だということで、すべてお任せでいいかと思っていたのが間違いでした。

[1].レスポンシブ対応は重要と思いますがAdsense申請には影響が出なかった?

いろいろ調べてるなかで、いくつかの改善点と新たな発見がありました。

原因を突き止めるまで色々試みたことや、改善点など参考になればと思い記事にしました。

スマホの文字の表示を「小⇨デフォルト⇨大⇨特大」と表示サイズを変更してみても行ずれは発生します。

スマホもメーカーで液晶画面の大きさが違いますが、ハードの関係ではないように思います。

黒やん69はWordpressでブログを始めてから、もうすぐ6ヶ月になります。

Adsenseの申請をすべく、別の問題の原因を突き止めて再申請をするところまできていましたので、スマホ表示を改善しないままAdsenseを申請してしまいました。

『レスポンシブ対応』もAdsenseには重要だと書いてありましたが、2019年9月18日に『合格通知』が届きました。

今になって驚くとともに不思議だなぁーと思っています。

Adsenseの審査はパソコンでしか見ていないということなのでしょうか?

[2].誤った知識が解決を遅らせた

以下のようにいいと思ってやったことが、実は悪い状態を作っていました。

  1. パソコンでの見映えばかり考えて文章を書いてしまった。
  2. テーマ(Twenty Sixteen)➡レスポンシブ対応しているのに行ずれが直らないため、スマホ対応のプラグインを導入しました。
  3. プラグインを導入しても解決しなかったので削除しました。
  4. 文書ブロックの最後の桁には、あえて改行を入れていました。
  5. 箇条書きは自分で作り行を調整していました。
  6. 見映えをよくするためにブロックタイプに「メディアと文章」を使用していました。

[3].行ずれや見映えが悪いブロックの使い方などを工夫しスマホ表示が改善

投稿した記事のうち30記事以上で自分のスマホでの表示が行ずれしていたり、見映えが悪いことを確認し、一つ一つ不具合を改善しました。

自分のスマホで記事を開き、パソコンで「投稿の編集」と突き合わせしながら改善を図りました。

  • 行ずれしている箇所が、すべてブロックの最終桁の後に改行が入っていたので改行を無くしました。
  • 自分で箇条書きを作った箇所の見映えが悪いので、ブロックタイプを「段落」から「箇条書きリスト」または、「順序付きリスト」に変更しました。
  • ブロックタイプに「メディアと文章」を使用したブロックはタイプを「 画像」と「段落」に分離しました。

上記の3点を修正することで、スマホでも何とか見られる状態に改善できました。

何とかみられる状態にはなりましたが、一つのブロックで2行以上の長い文章を書くと、スマホで見た時に行数が多くなってしまいます。

2行以内に収めるように文章を調整する努力が必要です。

[4].ワードプレスの管理画面の「外観」➡「カスタマイズ」メニューが便利!

「カスタマイズ」メニューで投稿記事をパソコン/タブレット/スマホの3種類のプレビューが確認できるので非常に便利です。

これで、スマホで見たときの行ずれが確認できます。

・プレビューの確認の手順

「投稿の編集」画面の赤のアンダーラインの最後の文字の後に「改行」が入っています。パソコンで見る場合は全く問題ありません。

  • .画面右上の「プレビュー」をクリックするすると「プレビュー」画面に移ります。
👆画像をクリックすると拡大します。
  • .「投稿のプレビュー」画面で一番上の「カスタマイズ」をクリックすると「カス
    タマイズ」画面に移ります。
👆画像をクリックすると拡大します。

.「カスタマイズ」画面の一番下のパソコン/タブレット/スマホのアイコンでそれぞれのプレビューが確認できます。

👆画像をクリックすると拡大します。

画像内のコメントで分るように、スマホでプレビューすると、赤のアンダーラインの最後の文字のところで改行しています。

これは投稿の編集画面で「改行」が入っているからです。

[5].Adsense関連記事