ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【Manablog Copy(WordPressテーマ)】記事冒頭にイラスト付きのリード文を挿入する方法

外観デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、記事冒頭にイラスト付きのリード文を挿入する方法を紹介します。

冒頭のイラスト付きリードと言えば、本家manablogの方で使われているお馴染みの手法です。


今回は、アップデートされたWordPress5.3グーテンベルグの機能を使って、この表現を再現します。

【マナブログコピー】記事冒頭にイラスト付きのリード文を挿入する方法

投稿画面でメニューをクリックし、レイアウト要素カラムを選択します。


左側が狭いカラムパターンを選択します。


右側のカラム設定のスライダを変更すると左右のカラム幅の比率を変更することができます。

左側のカラムのボタンをクリックします。


画像を挿入したいので、メニューから画像を選択します。
ちなみに、色んなブログでよく見る画像は以下のサイトから無料ダウンロードできます。

公式かわいいイラストフリー素材 いらすとや


左側にイラストを挿入したら次は右カラムの設定です。
右側のボタンを押して、段落を選択します。


それっぽい文章を入れてみましょう。


プレビューを確認してみると、バランスが悪いですね…。


バランスを修正するためにCSSの設定をします。
手順としては、以下です。

①画像をクリックする
②右下のメニューでCSSクラスを設定する


ひとまずは、CSSクラスはIllust-leadと設定してください。


下書きとして保存をクリックして、プレビュー画面へ遷移します。

続けて、カスタマイザー追加CSSをクリックして以下のCSSコードを追加します。

.Illust-lead img{
	margin-left:50px;	
}


設定後のプレビューは以下になります▼

マナブログコピーが気になるブログ初心者
「マナブログコピーが気になる
「マナブログコピーを使ってみたい
「マナブログコピーって難しいの?
こうした疑問を解決します。


こちらの記事では、再利用ブロックを使った別の方法もご紹介しています。

画像提供:Freepik – jp.freepik.com によって作成された background ベクトル



\将来につながるプログラミング/

エンジニアとして活躍したい人
プログラミング未経験でも安心
WordPressにもっと詳しくなれる
無料体験レッスン受講後に受講料が1万円引に!




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定