WordPressのアイキャッチ画像を背景にしてタイトルを表示させる

この記事はプロモーションが含まれています。
WordPressのアイキャッチ画像を背景にしてタイトルを表示させる

WordPressの使い方

WordPressのアイキャッチ画像を背景にしてタイトルを表示

アイキャッチ画像はアーカイブページや投稿の先頭部に表示されることが多いのですが、投稿の先頭に画像(写真)だけを表示させると装飾的になってしまいがちです。画像に文字入れをしてしまうと今度は、アーカイブページに文字付でわかりずらいものになってしまいます。

それに、文字入れ作業も時間をとられます。そこで、WordPressブロックエディタのメディアにある「カバー」を使うと、アイキャッチを背景にしてタイトルや抜粋を背景画像の上に表示させることができるようになります。

「カバー」でアイキャッチを背景画像にする

「カバー」でアイキャッチを背景画像にするには、ブロックエディタ編集画面で 画面左上の「+」をクリックします。メニューが表示されたら下にスクロールして 「メディア」 から 「カバー」を選択します。

編集エリアに 「カバー」 が表示されるので背景画像にしたいメディアを 「アップロード」するか 「メディアライブラリ」から選ぶ、 「アイキャッチ画像を使用」から選びます。

次にタイトルの入力が促されタイトルを入力できます。アイキャッチとして利用したい場合は、タイトルを入力しないで、「カバー」内をクリックして 「+」を表示させ、画面左のメニュー 「テーマ」から 「タイトル」を選択します。

「カバー」 画像の上にページのタイトルが表示されます。投稿の「抜粋」が記述されているのなら抜粋を表示させることができます。もちろん他のテキストを段落で入力させることもでき、リンクを設置することもできるのでサイト内の他のページへの移動を誘導することもできます。

※「タイトル」や 「抜粋」等はテーマによって異なる場合もあるので適時対応してください。

WordPressの使い方

WordPressブロックエディター(Gutenberg)のレスポンシブ対応カラムデザインの書き方

CSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。tableを使ったデザインは比較的容易に作ることができますが、レスポンシブに対応させるには知識も要求されます。

WordPressのブロックエディタ(Gutenberg)でブログカードを表示させる

WordPressはデフォルトでサイト内のページをブログカードとして表示することができるようになっています。関連する記事などをURLを記述することで、カード形式で表示してくれます。

WordPress【Gutenberg】のブロック要素の使い方を解説

WordPress サイトの構築および発行におけるまったく新しいパラダイムのコードネームです。グーテンベルクが印刷業界に起こしたのと同じ大規模な革命をパブリッシング体験全体に起こすことを目的としています。

WordPressのGutenbergのページ設定の使い方【公開・アイキャッチ画像】

「専門知識がなくてもコンテンツを作成できるようにする」、「インターフェースを改善する」、「コンテンツの作成方法を統一する」ことを目的に開発されました。

WordPressの子テーマの使い方とメリットやデメリット

子テーマを作成するのはテーマを直接カスタマイズしてしまうと、テーマのバージョンアップによって変更した内容が上書きされてしまい、せっかくカスタマイズしたものが標準に戻ってしまうためです。子テーマを使うメリットは、テーマを更新させても自分の変更内容を保持できるというメリットがあります。

WordPress【Gutenberg】のコードエディタの使い方

Gutenberg は、 ブロックエディタとも呼ばれ、段落(文章)や画像、見出し等をブロック単位でHTMLやCSSの知識を必要としない、編集方法になっています。また旧ビジュアルエディタよりさらに機能が追加されテーマのデフォルト装飾に依存することなく装飾をすることも可能になっています。