はじめに
今回Docker を使って、wordpress を立ち上げてみました。Docker を使うこと自体はいいのですが
肝心のWordpress のコンテンツはどうしよう。。。ということになりました。
WordPress を立ち上げるにあたって、私の好きなブログであるガジェマガのデザインを
参考にさせていただきました。その際の初期設定をまずは皆さんにここでご紹介したいと思います
見出しをかっこよくする
Table of Contents がそもそも地味だから、色を変えたほうがいいとおもいました。なんか灰色って地味ですよね。
下記のように、ガジェマガの、ほうがわかりやすい、日本語で書いてあるし、「クリックでジャンプ」という
説明もついている
早速変更してみようとおもいます。 Easy Table of Contents というプラグインはインストールしてあるので
設定をクリック
設定をライトブルーにしてみました
そして、見出しを変えます
わかりやすくなりましたね。
フォントも変えてみましょう、追加CSSで追加できます。
テーマ 「カスタマイズ」から追加CSSの設定があるので移動しましょう。
追加CSSに 下記のCSSを張り付けて保存すると
.ez-toc-list li a {
font-family: 'Noto Sans JP', sans-serif; /* 日本語対応のフォント */
font-size: 18px; /* フォントサイズを調整 */
color: #333333; /* フォントカラーを指定 */
font-weight: 400; /* 太字に近いスタイル */
text-decoration: none; /* 下線を削除 */
}
/* ホバー時のスタイル */
.ez-toc-list li a:hover {
color: #000000; /* ホバー時の文字色 */
}下記のように、いい感じになりましたね、文字の濃さとか大きさはCSSで調整すれば問題ないと思います。
アイキャッチ画像の作り方を工夫する
ガジェマガを参考にしてみます。右のほうのアイキャッチ画像は結構人目を惹きますね。なんだかクリックしたくなります
マウスオーバーしてみるとどうやらカテゴリーを表示しているので、カテゴリーを表示させて、それに対して、魅力的なアイキャッチ画像を当てはめてあげればよさそうです
【Canva】ブログのアイキャッチ画像の作り方講座！【知識ゼロでも簡単でオシャレに作成可能】｜hitodeblog（ヒトデブログ）
を参考にさせていただいたのですが、Canva を使うのが一番よさそうです。（無料ですしね）
説明は上記リンクに書いてあるので割愛させていただきますが、下記のようなシンプルな
アイキャッチ画像が３分以内に作成できました
これを追加してみたいと思います「ウィジェット」から「Main Sidebar」
から「ブロックを追加」をクリックして「メディア」から「画像」をクリック
画像をアップロードします
画像がアップロードされますので「上に移動」で一番上までもっていきます
こんな感じになりました。いい感じですね。アイキャッチ画像の文字の大きさが微妙ですが
これは調整が必要だと思います。画像をクリックしてクリップマークを追加すれば、リンクを追加できます
各記事はwordpress 管理画面の「カテゴリ」から検索することができます
「投稿」 ＞＞「カテゴリ」 へ 移動して
「表示」をクリックしてください。そうするとカテゴリーのページに飛びます
そこで表示されるURLをリンクに入力すれば、アイキャッチ画像付きのリンクが完成です。
アイキャッチ画像がわかりやすいですよね。がじぇまがには遠く及びませんが、現時点では私のブログはこの程度で十分だと思いました
エディターをSnow Monkey Editorでパワーアップ
最初っからこれにすればよかったと思います。。。。。
Snow Monkey Editor をインストールしてしまえば、画面上部にこんな素敵なツールが表示されます
蛍光ペン
背景色を変更
さらにこんなにたくさん・・・・・
本当にインストールしてよかった。。。作成者に感謝です
カスタムHTML
結局はHTMLを使うことが一番多いと思います例えば下記のようにポイントを列挙して作成する場合には、HTMLを使ってテンプレートとして取っておくのがよいでしょう。
例えば、
というようなポイントを列挙して強調したいのでしたら、下記の手順でHTMLをコピペするのがいいと思います
下記のようにコードを張り付けるだけでOK
上記のコードは下記に貼り付けましたので、ご自由にお使いください
<div>
<div style="height: 15px;">
<span style="background: #add8e6; padding: 10px 10px; border-radius: 10px; color: #ffffff; font-weight: bold; margin-left: 10px;">この記事のポイント</span>
</div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #add8e6; background: linear-gradient(white 49px, transparent 50px), linear-gradient(90deg, white 49px, transparent 50px), #ffffff; background-size: 50px 50px;">
<p><span style="font-size: 16px;">
ポイント１<BR>
ポイント２<BR>
ポイント３<BR>
</span></p>
</div>
</div>最後に
まだブログを始めたばかりですので、こんなところにしておきます。ブロックエディターの使い方は慣れるしかありませんね。
結構苦戦しているのでこれはまた記事にすると思います.
