ブログ記事にCSSだけで挿絵を作って入れる方法をシェアします!

テスト記事を作成しています。本文に挿絵を入れるのに、文字で作ったらどうなんだろうか?
この記事を作るにあたっては、以下のリンクページの記事を参考にさせて頂きました。

参考 ブログの挿絵はCSSで作る時代?ワンクリックで挿絵を足して離脱率を下げる! | ぽんひろ.comぽんひろ.com
けいしゅけ

ありがとうございます!!

タコちゅけ

本当にありがとうございまちゅ!!

挿絵を使って記事を書くことで読者を飽きさせない!

我が主張

挿絵を使う事で、読者が飽きないようにすることができるっぽいです。統計的な証明なんかがあるわけではないので、あくまで主観的なものです。

僕のブログは文字数が多いので、アクセントとなるように挿絵が使えたらいいなぁって思ってました。記事にリズムが出るのが楽しいなぁって。

でも…

挿絵を画像サイトから毎回とってくるのが億劫だ!

ブログ記事に画像を挿し込むってなんやかんやで、ハードル高いって思いません?

僕が感じるハードル

  • 画像を取得する手間がかかる(好みの画像・記事に合う画像を探すのってなかなか億劫)
  • 挿絵画像で表示スピードが下がらんように、画像データを軽くする処理がけっこう手間(これも億劫や)
  • 挿絵のテイストがバラバラやと、ブログ全体の統一感が無くなっちゃう
  • 結果的に、記事の文章よりも画像に書ける時間が膨大

 

タコちゅけ

つまり、『めんどくさい』って意味やん…。

けいしゅけ

あんまりストレートに「毎回挿絵を入れるのんってめんどくさいねん!」とは言い難いわ…。

ともすれば、なかなか挿絵をすべての記事に入れ込むのは骨が折れる作業という事になるんよね💦

ということで、まず主張したいのは…。

挿絵を入れるのは、
めんどくさい

CSSカスタマイズ&HTMLだけで挿絵が入れられるなんて素敵やん?

うれしい

イラストはFontAwsomeからとってくるだけで、あとは自分で言いたいメッセージを添えることで挿絵にできる…。

素晴らしすぎひん?

いや、コレは事件やで、事件。

その挿絵、どうやって作ってるん?って方に説明します

STEP.1
ぽんひろさんのブログ記事へアクセス

まずはCSSをぽんひろさんの記事から頂く

STEP.2
AddQuickタグにHTMLを登録
同じく、HTMLをぽんひろさんの記事から頂き、プラグインAddQuickタグに登録する
STEP.3
記事を書く
挿絵を入れるにも記事が無ければ始まらへんからね
STEP.4
AddQuickタグから登録HTMLを呼び出す
記事の中で使いましょう☆

ちなみに、僕の場合は見出しの下には『質感のある』挿絵を使って見出しが目立つようにして、次の大見出し前に『3Dな』挿絵を使うようにしてみました。

STEP.5
必要に応じて、Font Awsomeのアイコンをイラストとして使う
Font Awsomeのアイコンを入れるだけでも十分に挿絵として記事にアクセントをつけることができます☆

使ってみると…

エエ感じ

スマホ対応用にちょっとだけCSSをいじりました

人の褌で相撲を取るようですんごい恐縮なのですが、スマホ表示が崩れてしまう事が気になりました。

少しいじってみたコードを紹介します。

カスタマイズしたのは2点

  • 文字の大きさをPC表示で64px、スマホ表示で36pxにしました
  • 表示される挿絵の文字周りの余白を上下50pxに設定することで、スマホ表示でも挿絵っぽさを強調しました

カスタマイズ

カスタマイズCSSコード
/*----------------------------
  CSSテキスト挿絵 ikaga-6
-----------------------------*/
.ikaga-6 {
	background: #11a9e2;
	width: 100%;
	margin: 0 auto;
	padding : 50px 40px 50px 40px ;
	text-align: center;
}
@media screen and (min-width: 769px) {
.ikaga-6 p {
	font-size: 64px;
	color: #fff;
	margin: 0;
	font-weight: bold;
	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}}
@media screen and (max-width: 768px) {
	.ikaga-6 p {
	font-size: 36px;
	color: #fff;
	margin: 0;
	font-weight: bold;
	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}}

カスタマイズ

カスタマイズCSSコード
/*----------------------------
  CSSテキスト挿絵 ikaga-7
-----------------------------*/
.ikaga-7 {
	width: 100%;
	text-align: center;
	margin:0 auto;
	padding : 50px 40px 50px 40px ;
	background: linear-gradient(to bottom, #ece4d9 0%, #e9dfd1 100%);
}
@media screen and (min-width: 769px) {
.ikaga-7 p {
	display: block;
	font-size: 64px;
	color: #f1ebe5;
	text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
	font-weight: bold;
	margin: 0;
}}
@media screen and (max-width: 768px) {
	.ikaga-7 p {
	display: block;
	font-size: 36px;
	color: #f1ebe5;
	text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
	font-weight: bold;
	margin: 0;
}}

挿絵を使ってブログを書くのが楽しくなるのが僕にとっては大事

楽しく書く

ともかく、挿絵は脱力しながらも出来れば入れたい…。僕のワガママな願いが叶いそうです。

  • 記事の離脱率が下がるかも知れない
  • 挿絵を使った方がSEO的にいいかも

挿絵を使う理由は個々人ちがってると思います。

けれど、僕は『記事にリズムが出せて、書くのが楽しくなるって書きたいから使う』ことを重視してます。

もしもこの記事を読んで、挿絵で記事にリズムが付けられるようになって楽しくなった!と思う方がいたら良いなぁって思いつつ、この記事を終わりにしたいと思います。

おしまい


今回の記事はここまでや☆

最後まで読んでくださってホンマおおきにっ!!お時間を使って読んでくださったことに心から感謝申し上げます!

けいしゅけ

”この記事の感想をコメントしていただけるとメッチャうれしいです!!

ご意見&ご質問も遠慮なく書いてください☆皆さんとの対話を楽しみにしています☆

下のボタンを押すとコメント記入欄へジャンプできますよ~!!

タコちゅけ

もしよければ、下のボタンを押してけいしゅけをフォローして欲しいでちゅ🍀

よろしくお願い致しましゅ~☆

けいしゅけのTwitterアカウントをフォローする Twitterでけいしゅけをフォロー
けいしゅけのFacebookページもフォロー&いいねする Facebookフォロー&いいね

↓↓ひとこと書く↓↓|けいしゅけに記事の感想を教えてください☆