WordPress Cocoonのカスタマイズ:66歳が挑戦してみた

この歳で新しいことに挑戦するのはちょっと億劫だったけど、一念発起して新規ブログを立ち上げようと、ConoHaWINGに申し込みWordPressをインストールした。

テーマは無料のCocoon。
基本的な設定をするところまでは、YouTubeでいろんな方が教えてくれてるので、必要なプラグインなどもインストールして、なんとかスムーズに行ったのよ。

スキンはシンプルな「one」を選択。
特にこだわらなければ、そのままで十分なんだけどね。
自分が思い描いてるイメージにしたいと思ってちょっと苦労したわ。

そこで、これから先突然何かが起こって見た目が崩れたなんてことになった時に慌てないように、悪戦苦闘した記録を残しておこうと思う。

あおいがやりたかったことは

  1. ブログタイトルを左上に設置する
  2. サイドバーのタイトルをもう少し小さく、太字にしたい
  3. サイドバータイトルの明朝体が嫌だ
  4. 検索窓やコメント送信ボタンの角を丸くしたい

以上の4つだった。

今やGoogle先生に聞くと、大体のことは先輩方が情報提供してくれている。ありがたい世の中だ。

1と2については「外観」→「カスタマイズ」→「追加CSS」に以下のタグを挿入した。

1 ロゴを左に配置する

.logo
{
text-align:left;
margin-left:45px;
}

これだとロゴが左に移動しただけなので、もうちょと上にしたいと思って margin-top:10px; とか付け加えてみたけど、これじゃダメなの…? 
全く反映しなかったので上に移動するのは諦めた。
(ご存知の方がおられましたら教えてくださると嬉しいです。)

2 サイドバーのタイトルを小さくして少し文字間をあける

.widget-sidebar-title
{
font-weight: bold;   (文字を太字に)
font-size: 0.95em;  (文字サイズを小さく)
letter-spacing: 0.14em;   (文字間を広く)
}

4の検索窓の角を丸くするのは

.search-edit, input[type="text"]
{
border-radius: 20px;  
outline: none;
}

あと、サイドバータイトルのフォントを変更する のと、送信ボタンの角を丸くするのはいろいろ参考にさせてもらって四苦八苦したけど反映されず、諦めかけた時、カスタマイズの スキン「one」の設定 を開いてみると

  • サイドバーの見出しを明朝体にする
  • ボタンなどの角の丸みをなくす

などの項目があるではないか。この項目のチェックを外すだけでよかったのだ。
やっと気分がスッキリした。

苦労したのはブロックエディタというやつ。さっぱりわけが分からない。

全く思い通りの体裁にできないのでイライラ。
最初の記事を書くのにものすごく時間がかかってしまった。

でも、こういうのは慣れるしかないものね。
今はなんとな〜く仕組みがわかって、慣れれば便利に使えそうだねという気分。

まだまだこれからいろんなことにぶち当たるような気がするけど、1歩1歩ゆっくり進んでいきます。
長ーい目で見てやってください。

【追記】
これ以後、カスタマイズを繰り返し、現在は当初のトップページとは別物になっています。
ブロックエディタは慣れればとても使いやすく、元のエディタには戻れない気がします。
2022.8.15

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
♪最後までお付き合いくださって、ありがとうございます♪
 ポチッと応援していただけると喜びます(*^_^*)
 ↓ ↓ ↓ ↓ ↓ ↓ ↓

にほんブログ村 シニア日記ブログ 女性シニアへ
にほんブログ村

コメント

タイトルとURLをコピーしました