WordPress難しいんですけど。。
解説ページを読んでみるも、旧エディタでの紹介がほとんどで新エディタのGutenbergでは使えないものも多く、けっこう苦戦しました。
悩みつつ、旧エディタには戻さずGutenbergでのブログづくりを想定して進めます。
30代になってもCSS使うならもっと勉強しておけばよかった!
- やったこと
- WordPressの無料テーマCocoonをインストールした
- 固定ページをつくった
- ウィジェットを設定した
- Gutenbergでブログカードのリンク挿入方法を学んだ
- アイキャッチ画像を著作権フリーの画像から挿入しようとしたけどGutenbergでPixabay Imagesが使えなかった
- GutenbergでPixabay Imagesの代替プラグインであるWPC Pixabayもうまく動かなかった
- 【結論】Gutenbergアイキャッチ画像を著作権フリーの画像から挿入するためにプラグイン:Pexels Photosを追加した
- 見出しのデザインをCSSで変更した
- 目次の表示/非表示を自分でコントロールできるようにした
- Gutenbergの再利用ブロックを使った蛍光ペンマーカーで文字強調を導入した
- そのうちやりたいこと
やったこと
WordPressの無料テーマCocoonをインストールした


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

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

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

ウィジェットを設定した
ウィジェットの操作ってどこでするんだったっけ、、と外観→ウィジェットのメニューを見つけるのにもひと手間かかりました。こんなんで大丈夫か。
一抹の先行き不安に襲われますが・・・とりあえずチャレンジチャレンジ
Gutenbergでブログカードのリンク挿入方法を学んだ
こういうやつです

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

但し、この画面ではブログカードにキャプションをつけることができません。
「https://」のsを削除し「http://」に修正すると通常の埋め込み画面となり、キャプションをつけることができます(「http://」に変換してもリンクは有効です)。
うーん、便利なような、面倒なような・・・
アイキャッチ画像を著作権フリーの画像から挿入しようとしたけどGutenbergでPixabay Imagesが使えなかった
ブログカードに表示される画像、みんな設定していますよね。
最初は、著作権フリーの画像をWebサイトで探してローカルにダウンロード→名前を付けて保存してWordPressにアップロードして画像挿入するのか・・・めんどくさいな!と超消極的でした。
できればアイキャッチ画像を設定したくない。昔のブログみたいに文字だけで記事を書きたい。
そう思って調べてみても・・・アイキャッチ画像を非表示設定する方法は皆無でした。なんですと。。
非表示設定にするどころか「アイキャッチ画像は絶対に使うべき!」みたいな記事が多く、基本的にWordPressでブログを書いている人はアイキャッチ画像を使っている様子。
だったらもっと便利な方法があるのでは・・・?と調べてみたら、WordPressのプラグイン(そもそもプラグインとはなんぞや)で直接著作権フリーの画像を挿入できるらしい。そりゃ便利だ。

なるほどだからみんな画像使ってるんだな~と思いつつ、言われるがままに「Pixabay Images」をインストール・有効化してみるも・・・全然使い方が分からない!
そもそも、この時点で「Gutenberg」とはなんぞや?という状態。
どうやら最近WordPressのエディタが大幅にバージョンアップされたらしい、ということを知ります。
ほとんどの解説記事は旧エディタで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設定を覗いてみるも何か違う。
例のごとくインターネット検索をして、分かりやすく解説してくれる記事を見つけました。

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

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

目次の表示/非表示を自分でコントロールできるようにした
Cocoonでは目次が自動で挿入されるようになっているのですが、大したことを書いていない記事にも目次が設定されるのは読み辛いなあと感じていたところ。
目次の表示/非表示はCocoon設定で変更ができるようなので非表示にしてみましたが、一方でこういう無駄に長くなった記事には目次があった方が見やすい。うーん、困った。
ということで、デフォルトでは非表示に設定しておき、表示させたい記事にだけコードを挿入して表示するように設定しました。
[toc]
これを挿入すればどこでも目次が表示されるらしい。これは便利。
Gutenbergの再利用ブロックを使った蛍光ペンマーカーで文字強調を導入した
こういうやつ見出しのデザイン変更からさらに欲が出てきて、今度は他のブログ記事でも多用されてていいな~と思っていた、蛍光ペンを引いたような強調文字のデザインについて調べてみました。
そうですよね、こういうのはデフォルト設定じゃなくてCSSいじって機能搭載するんですよね。なんとなくわかってきたぞ。
折角なのでGutenbergならではの機能として再利用可能ブロックを使ってみることに。
設定はうまくいったのですが、再利用可能ブロックを使用したあと通常のブロックに変換してから文字を編集する、というところにつまづきました。
これですね。

そのうちやりたいこと
タイトルとウィジェットのデザインを変更したい
CSSいじるのは手間がかかりますが、細かいところに手が届くのは気持ちが良いですね!
時間があればタイトルとウィジェットのデザインもいじりたい。
個人的に文字は影をつけずにのっぺりしたものが好きなので、そのうち変えます。
最後までお読みいただきありがとうございました(*^^*)
少しでもお役に立てましたなら、ぽちっとしていただけるととっても嬉しいです。
みなさまのひとぽちがブログを書く励みになりますm(__)m



コメント