デザイン配布!アメブロをハロウィン仕様にカスタマイズしておしゃれに

 

こんにちは!AIイラストレーターのHanamiです🤣

 

ハロウィン🎃の足音がだんだん聞こえてきましたね!

 

毎年ハロウィンが近づくと、街中がオレンジとパープルに彩られて、なんだかワクワクしちゃいますよね!

 

 

AIイラスト

ブログもハロウィン仕様にしたいなぁ…!

 

 

せっかくアメブロを書くなら、季節やイベントに合わせてブログカスタマイズするのも、楽しみの一つです!

 

でも、アメブロの公式デザインって、なかなか自分好みのものがない…なんてお悩みの方も多いのではないでしょうか?

 

そんな悩みを解決するために、ブログのプロが考えたおしゃれなアメブロテンプレートと、ハロウィン仕様の可愛いアイコンをご用意しました!

 

あなたのブログが、もっともっと魅力的になりますように💖

 

 

 

ハロウィン気分を盛り上げる!レトロな雰囲気のデザイン素材

 

この記事は、今回配布するハロウィンテーマのHTMLを使って書いてみました!

 

いかがでしょうか?

 

レトロでちょっぴり懐かしい雰囲気のハロウィンデザインをテーマに、見出しや吹き出し、囲み枠に使うだけで、ブログ全体がグッとハロウィンムードに包まれますよ!

 

使い方

HTMLをコピーしてして、ご自身のブログ記事のHTML編集画面に貼り付けてください。

※質問には答える時間がないため、HTMLがわかる方向けです

著作権は放棄していませんが、商用利用OKなので、どんどん使ってくださいね!

 

 

ハロウィンのカラーパレット

このテンプレートは、下記のカラーコードを使っています。

 

文字の色を変える場合は、カラーパレットにカラーコードを指定して使うと統一感が出ます。

  • オレンジ: #F39C12
  • パープル: #7D3C98
  • ブラック: #292B2F
  • イエロー: #F7DC6F

 

いますぐ使える!HTMLテンプレート

Hanamiが普段使っているテンプレートを、ハロウィン仕様にアレンジしました!

🎃見出しデザイン

 

H2/大見出し

<h2 style="color:#F39C12; font-size:20px; font-weight:bold;">テキストを入力</h2>

 

H2/中見出し

<h3 style="color:#292B2F; font-size:18px; font-weight:bold;"><span style="color:#7D3C98; margin-right:8px;">▶</span>テキストを入力</h3>

 

吹き出し・囲み枠・区切り線

🎃吹き出しデザイン

 

AIイラスト

吹き出し見本

 
<div style="display:flex; align-items:flex-start; margin-bottom:1em;"><div style="flex-shrink:0; margin-right:10px;"><img alt="AIイラスト" data-ai-alt="true" height="50" src=" ここにアイコン画像のURLを貼り付け" style="border-radius:50%;" width="50"></div><div style="background-color:#7D3C98; padding:10px 15px; border-radius:15px; position:relative; margin-top:5px;"><p style="margin:0; font-size:15px; line-height:1.6; color:#ffffff;">ここに会話のテキストを入力してください。</p><div style="position:absolute; top:10px; left:-5px; width:0; height:0; border-style:solid; border-width:8px 8px 8px 0; border-color:transparent #7D3C98 transparent;">&nbsp;</div></div></div>

 

🎃囲み枠デザイン

 ↓この枠です

<div style="border:2px solid #F39C12; padding:10px; border-radius:5px;">ここに飾り枠で囲みたい文章を入力してください。</div>

 

🎃区切り線デザイン

 

<hr style="border:none; border-top:1px dotted #7D3C98; width:100%; margin:20px 0;">

 

 ↓この線です


[PR] 人気アイテム


 

 

 

吹き出しアイコン素材ハロウィン

イラストはダウンロードして使ってね。

 

ハロウィンイラスト・かぼちゃ・魔女

 

AIイラスト

吹き出し見本

 

 

ハロウィンイラスト・かぼちゃと男性

 

ハロウィンイラスト・かぼちゃ・二人

 

ハロウィンイラストの魔女とかぼちゃ提灯

 

Ameba ブログ for ビジネスの記事に最近、小さな付箋が貼ってあるじゃないですか!

ちょっと気になったので、HTMLをググった(笑)

↓これ!

 

<参考例>

 

・「料理やレシピ」に関するブログ記事を発信しているなら…

<div style="position:relative; background-color:#F7DC6F; padding:25px 20px 20px; margin:25px auto 20px; max-width:90%; box-shadow:2px 2px 4px rgba(0,0,0,0.2);">
<div style="position:absolute; top:-15px; left:20px; background-color:#7D3C98; height:30px; width:15px; border-radius:3px; box-shadow:0px 1px 2px rgba(0,0,0,0.3);">&nbsp;</div>
<p><b style="font-weight:bold;"><参考例></b></p>
<p>&nbsp;</p>
<p>・「インテリア」に関するブログ記事を発信しているなら…</p></div>

 

ちょっと派手かな

 

<参考例>

 

・「料理やレシピ」に関するブログ記事を発信しているなら…

 

 

\ あわせて読みたい /

 

おしゃれなスマホイラスト素材

 

アメブロ用シンプルHTML(見出し・区切り線・飾り枠・吹き出し)

 

 

 

 

「こんなアイコンが欲しい!」というリクエストがあればリブログで教えてね!