WordPress

WordPressでMarkdown記述を行う(Gutenberg版)

おはようございます、としあきです。 今回はGutenbergエディタでどうすればいいかをまとめました。 Markdown記述方法 Gutenbergの場合、最初からMarkdown記述をサポートしています。 特に準備は要らず、とても簡単に利用できます。 別のエディタ(Notionなど)で記載しておいて、コピー貼り付けでそのままMarkdownとして貼り付けできるのでとても便利です。 見出しは1段階 […]

Gutenbergで再利用ブロックを利用する

Gutenmorgen、としあきです。 WordPressのGutenbergエディタを使っています。 段落や画像、コードなどをブロック単位で編集するエディタになっています。 ワープロソフトなどとは違う独自の使い勝手だと思います。 このエディタには再利用ブロックという機能があります。 単なるテンプレート機能ではなく、配置されている再利用ブロックの内容をまとめて更新することもでき、うまく活用すればサ […]

サイトロゴを作成する

グッモーニン、としあきです。 サイトアイコンの登録に続いてサイトロゴを作成します。 サイトロゴは各ページの左上、指定がない場合サイトのタイトルが入っている場所に表示する画像のことです。 画像サイズはテーマごとに変わってくると思います。 [Thor]の場合、標準ではスマホサイズで高さ20ピクセル、PCサイズで高さ30ピクセルに調整されます。 画像の作成 高解像度のデバイスも考慮して、画像のサイズはそ […]

サイトアイコン(favicon)を作成する

グッドモーニン、としあきです。 サイトアイコン(favicon)を作成してみます。Chromeなどのブラウザでタブの左側に表示される小さなアイコンのことです。 通常は.ico形式とかなり特殊な画像に変換してサイト直下に配置してやらないといけないのですが、WordPressの場合、管理画面で変換や配置も勝手にやってくれます。 サイトアイコンの作成 WordPressでサイトアイコンを作成するときの推 […]

WordPressでハイライトされたコードを表示する(prism.js使用)

こんにちは、としあきです。 プログラミング言語を使う人であれば、WordPress上でコードを書くこともあるでしょう。 開発中のエディタ表示と同様に、WordPress上でも見栄えの良いコードの方が理解しやすいので、今回は設定方法、使用方法を書きます。ご使用のエディタがGutenbergの場合です。 設定手順 手順は以下の通りです。 prism.jsを導入する [Highlighting Code […]

WordPressにはクラシックエディタとGutenbergエディタ２種類がある

こんにちは。としあきです。 2021年5月にWordPressを始めてみて、何に戸惑ったかというと、標準で使えるエディタが2種類存在していることです。 今WordPressを始める前に必要な知識として知っておいた方が良いと思います。 今回はWordPress初心者である私が、この2つのエディタの違いと私の見解をあげてみます。 最初に結論を述べます。 POINT テーマを選択する際は、Gutenbe […]

Gutenbergで見栄えの良いブロックを使う

Gutenmorgen! としあきです。 WordPressに限らずですが、ただ文章を書くだけだと注目してほしい段落がわかりにくいと思います。 枠線などを付けることで文章の区分を分けることができます。 今回は見栄えの良いブロック表示を作成してみます。 HTMLタグ入力版 HTMLタグの記載 HTMLのデザインでは、見た目はCSSファイルに記載して要素のclass属性を追加して適用するのが定番です。 […]

Gutenbergで吹き出しを使う

Gutenmorgen! としあきです。 ブログでよくある吹き出しによる顔アイコンとセリフの表現。親しみやすさとメリハリを付けるのに効果的だと思います。これを入力できるようにしたいと思い調べてみました。 フキダシの作成方法 方法としては以下があります。 テーマに吹き出し機能がついている 吹き出し機能のプラグインを登録する 手動で吹き出しを入力する 3はあまり現実的でありません。 1はテーマが対応し […]

Lightsail上のWordPressサーバーでSSL/TLS接続する(Bitnamiスタックから)

ハイ！としあきです。 前回はAWSの登録からDNS登録してドメイン名でWordPressサーバーにアクセスするまでを書きました。 今回はSSL/TLS接続する方法です。 1. なぜSSL/TLS接続対応するのか？ URLがhttp://で始まるhttp通信は暗号化されていません。Google Chromeさんからは信頼できないサイト扱いされます。別のサーバーにアクセスする時も安全性が保証されません […]

AWSのLightsailでWordPressを始める

ハイ！としあきです。 WordPressを立ち上げるのはAWSのLightsailでやることにしました。LightsailだとSSD上にサーバーを作成し、新規開設するには十分な転送量でサーバー1台3.5$/月と、お手軽です。 どのように導入したか書いていきます。 AWSアカウントを新規登録する Lightsailでサーバーを新規追加する 静的IPを作成してサーバーと関連づける Zone53(AWS […]