WordPressを始めて2日間でやったことまとめ【ブログ初心者】

WordPress難しいんですけど。。
解説ページを読んでみるも、旧エディタでの紹介がほとんどで新エディタのGutenbergでは使えないものも多く、けっこう苦戦しました。
悩みつつ、旧エディタには戻さずGutenbergでのブログづくりを想定して進めます。
30代になってもCSS使うならもっと勉強しておけばよかった！

やったこと
そのうちやりたいこと
1. タイトルとウィジェットのデザインを変更したい

やったこと

WordPressの無料テーマCocoonをインストールした

【2020年】タイプ別WordPressおすすめ無料テーマ【厳選8選】 | WEBST8のブログ

WordPress(ワードプレス)は無料テーマだけでも数千以上がリリースされています。たくさんありすぎてどれが良いのか迷う方も多いのではないでしょうか。本記事では、WordPressの無料テーマ・有料テーマの比較、およびおすすめのWordPress無料テーマを8選に絞ってご紹介していきます。

WordPressのテーマ(テンプレート)って一体どれくらい

まずはデフォルトのデザインを変えようと思い、外観→テーマを変えようと試みます。
「WordPress　テーマ　おすすめ」で検索して、なんとなく無料での人気テーマを探る。
このテーマにすればいいんだな、とテーマ検索画面で「Cocoon」と入力して検索しても「そんなテーマはありません」と返される・・・なんでだ！（そりゃそうだ）
試行錯誤して、テーマは自分でアップロードしないといけないんだとようやく気づく。うーんさすが初心者。
zipフォルダでダウンロードしたら解凍するもんでしょ！と速攻で解凍したら全然アップロードできない。
そうなのいまどきは（？）zipでアップロードできるんだ便利だね・・・。
ということでなんとかテーマをアップロード（子テーマも）して変更できました。

Cocoonテーマをインストールする方法

WordPressにCocoon親テーマと子テーマをインストールして利用するおすすめのインストール方法です。

ありがとうございます！！

固定ページをつくった

昔々、はてなブログからWordPressに移行しようとして挫折して止めたことがあるので、なんとなく固定ページがつくれるということは知っていましたが・・・なんとなくではまったく分からん！
常々分かりやすく親切なユーザインターフェイスに甘えて生きていることを実感。。（WordPressも十分親切だと思います）
きっと慣れると使いやすさと機能の便利さがちょうどいいのでしょう。
初心者用ページも渡り歩いて、ダッシュボード→固定ページからページは作成してみました。
これです。

MRKM家について

MRKM家の家族構成パパ　30代　働き方改革のため絶賛残業代0ママ　30代　中小企業でフルタイム共働き。もちろん残業なし（6月から産休予定）子1　もうすぐ3歳　天真爛漫わがまま王子子2　胎内ですくすく成長中MRKM家の共働き事情両家親ともに遠方でサポートなしの難易度高めな共...

作成したはいいが、今度はこれをサイトに表示させる方法がわからない・・・ザ・初心者っぽい悩みですね！
WordPressの解説記事がとっても充実している分、お目当ての解説を見つけるのも一苦労です。
ちなみにここくらいまでスマホのアプリorWeb管理画面で操作していたのですが、サイドメニューが表示されなかったりするのでこりゃ無理だと諦めました。

WordPressの固定ページをメニューに設置する方法

WordPressで作成した固定ページを、メニュー（ナビゲーション）としてサイト上に設置する方法をご紹介します。

ウィジェットを設定した

ウィジェットの操作ってどこでするんだったっけ、、と外観→ウィジェットのメニューを見つけるのにもひと手間かかりました。こんなんで大丈夫か。
一抹の先行き不安に襲われますが・・・とりあえずチャレンジチャレンジ

Gutenbergでブログカードのリンク挿入方法を学んだ

こういうやつです

ブロックエディターで手っ取り早くブログカードを作成する方法

ブロックエディターでのブログカードの使い方。

Gutenbergのブロックをいちいち埋め込み→WordPressに指定していましたが、段落ブロックにURLをそのまま記述しても自動的に埋め込み機能が適応されるようす。
「https://」のアドレスだと「このコンテンツは埋め込むことができません」との表示になってしまいますが、投稿後の実際の画面にはきちんとブログカードとして反映されています。

但し、この画面ではブログカードにキャプションをつけることができません。
「https://」のsを削除し「http://」に修正すると通常の埋め込み画面となり、キャプションをつけることができます（「http://」に変換してもリンクは有効です）。
うーん、便利なような、面倒なような・・・

アイキャッチ画像を著作権フリーの画像から挿入しようとしたけどGutenbergでPixabay Imagesが使えなかった

ブログカードに表示される画像、みんな設定していますよね。
最初は、著作権フリーの画像をWebサイトで探してローカルにダウンロード→名前を付けて保存してWordPressにアップロードして画像挿入するのか・・・めんどくさいな！と超消極的でした。
できればアイキャッチ画像を設定したくない。昔のブログみたいに文字だけで記事を書きたい。
そう思って調べてみても・・・アイキャッチ画像を非表示設定する方法は皆無でした。なんですと。。
非表示設定にするどころか「アイキャッチ画像は絶対に使うべき！」みたいな記事が多く、基本的にWordPressでブログを書いている人はアイキャッチ画像を使っている様子。
だったらもっと便利な方法があるのでは・・・？と調べてみたら、WordPressのプラグイン（そもそもプラグインとはなんぞや）で直接著作権フリーの画像を挿入できるらしい。そりゃ便利だ。

Pixabay ImagesプラグインでWordPress記事を書きながらフリー画像を簡単挿入！

WordPressでブログ記事書くのに文章だけではなくて挿し絵を入れたりする場合ってけっこう苦労したりしていませんか？こんばんは！りょうへい(@ryoheihobozero) です。りょうへいの場合はけっこう ...

なるほどだからみんな画像使ってるんだな～と思いつつ、言われるがままに「Pixabay Images」をインストール・有効化してみるも・・・全然使い方が分からない！

なんと現在のWordPressエディタ（Gutenberg）ではPixabay Imagesは使えないらしい

そもそも、この時点で「Gutenberg」とはなんぞや？という状態。
どうやら最近WordPressのエディタが大幅にバージョンアップされたらしい、ということを知ります。
ほとんどの解説記事は旧エディタでPixabay Imagesを使用して紹介しているので、使えない、何かおかしい、、、というところからエディタの違いに気づくのもタイムラグがありました。初心者。

WordPressを更新したら pixabayボタンが表示されなくなった時の対処法

Photo by pixelcreatures on PixabayWordpressの投稿編集UIが、いつしか大きく変わりました。ブロックエディタ「Gutenberg」です。プラグイン「Pixabay Images」は古くなって動作不安定

GutenbergではWPC Pixabayというプラグインだと使えるらしいという情報にようやくたどり着き、インストールしてさあ使うぞ！と意気込んでみました。が。

GutenbergでPixabay Imagesの代替プラグインであるWPC Pixabayもうまく動かなかった

なぜか私のWordPressのGutenbergでWPC Pixabayがうまく使えませんでした。

具体的にはWPC Pixabayでアイキャッチ画像に画像を設定する機能（featured）を選択すると、なぜかWordPressそのものがフリーズしてしまってうんともすんとも言わなくなりました。
WPC PixabayはWordPressのメディアやローカルに画像をダウンロードする機能は有料版のもので、アイキャッチ画像にするにはfeaturedボタンを選択して設定するしかない。にもかかわらず、どの写真を選んでも必ずフリーズしてしまう。
こればっかりは類似例の記事もないし本家のQ&Aにもないしで全くのお手上げ。
WPC Pixabayを利用することを諦めて別の方法を探すことにしました。
誰か解決策が分かったら教えて下さい・・・

【結論】Gutenbergアイキャッチ画像を著作権フリーの画像から挿入するためにプラグイン：Pexels Photosを追加した

と、いうことで当面の方法としてPexels Photosというプラグインを利用することにしました。
このプラグインはダッシュボードのメディアから利用するもので、ダッシュボード上で著作権フリー画像を検索してWordPressのメディアのライブラリに直接ダウンロードできるというもの。これだけでもかなり便利です。

ライブラリにダウンロードしてしまえば投稿画面で記事に挿入することもアイキャッチ画像に設定することも自由にできるので、Pexels Photosを利用することに決めました。
もし同じようにWPC Pixabayでフリーズしてしまう人がいたらお試しください。

見出しのデザインをCSSで変更した

Cocoonやスキンのデザインは秀逸なのですが、細かいところで自分好みにしたくなるもの。
慣れてくるとそんな欲が出てきます。この時点でまだ少しも記事を書いていません。
とりあえず、見出しのデザインに手を加えられないかなーとCocoon設定を覗いてみるも何か違う。
例のごとくインターネット検索をして、分かりやすく解説してくれる記事を見つけました。

【cocoon】初心者向け見出しカスタマイズ！コピペだけで簡単にできるよ | 吉田あみ公式ブログ

cocoonはワードプレスの無料テーマの中で、無料テーマで1番使いやすい！！これ以上の無料テーマはない！！！とわたしが敬愛してやまないテーマです。きょうはコピペだけで簡単にcocoonの見出しカスタマイズをする方法をお伝えしまーす！ cocoonデフォルトの見出し cocoonのデフォルトの見出しはこんな感じ。 ...

WordPressのテーマやスキンを利用していても、細かいところは自分でCSSを設定して変更できるようす。
CSSか・・・！と一人で結構な衝撃を受けていました。昔々、HTMLのタグを直打ちしていた時代から触ったり触らなかったりをしていたCSS。あれから○十年がたって、今時のWebサイトはきっと新しい言語でよく分からないプログラミングをしているんだろうなとなんとなく思っていたのですが・・・時代が変わっても使っているのはCSSなのか。
知っている人からすれば当たり前なことなのでしょうが、無知は恐ろしいですね。
こんなことなら昔々からもっと勉強しておけば良かったなあと反省。

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

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

といことで、見出しのCSSでサンプルを探してきて変更してみました。
Cocoonのスキンでtecurio mangoを利用しているのですが、このh2の見出しで下線部のラインがクリアできなくて困っていたところ、製作者様の記事のコメント欄で解決策が提示されていました。
ありがたやありがたや。

WordPressテーマ『Cocoon』のスキン『tecurio』を作りました！

僕が好きで愛用させてもらっているワードプレステーマの１つに『Cocoon』があります。そして今回、Cocoon好きが高じてスキンを自作してしまいました。はじめは完全に自分用に作っていたのですが、グラデーション選びの楽しさにハマり、自分がほぼ

目次の表示/非表示を自分でコントロールできるようにした

Cocoonでは目次が自動で挿入されるようになっているのですが、大したことを書いていない記事にも目次が設定されるのは読み辛いなあと感じていたところ。
目次の表示/非表示はCocoon設定で変更ができるようなので非表示にしてみましたが、一方でこういう無駄に長くなった記事には目次があった方が見やすい。うーん、困った。
ということで、デフォルトでは非表示に設定しておき、表示させたい記事にだけコードを挿入して表示するように設定しました。