ーーーボタンデザインサンプル01：シンプルなフラットボタンーーーーーー ボタンデザイン ✙ タップしてコードを見る HTML コードコピー <p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #3498db; color: #fff; border: none; border-radius: 4px; cur ...

吹き出しデザイン集 ここからは『吹き出し』のサンプルデザインを紹介していきます。 HTMLをコピペするだけで適用できるので、ぜひ活用してみてくださいね。 ＼吹き出しの背景色、枠色を自由にカスタマイズ／ 背景色：　枠色：   会話風の吹き出し   会話風の吹き出し（左） .会話風の吹き出しのサンプルです。ここに文章を記載してください。 . ✙ タップしてコードを見る HTML コードコピー <div style="display: flex; justify-content: le ...

「HTMLやCSSの知識がなくても、おしゃれなオリジナル装飾を設置したい」という人へ。 この記事では、コードをコピペするだけ、たった１分で設置できる おしゃれな装飾デザインをご紹介します。 HTML の知識がない人でも簡単に再現できるデザインを100種類用意したので、ぜひチェックしてみてください。   オリジナル囲み枠の設置手順 まずは、WordPressの記事に「オリジナルの装飾」を追加する方法をお伝えします。 プラグインは用いず、次に手順で進めるだけで、かんたんに適用できますよ。 WordP ...

「ブログ記事の見出しのデザインが気に入らない」 「もっとオシャレな見出しにしたいけど、CSSとかわからない...」 そんな人のために、プロのデザイナーが作ったような、オシャレな見出しデザインを用意しました。 すべてコピペで使えるので、初心者の方でも30秒で簡単に導入できますよ。 この記事で紹介する見出しサンプルを使えば、記事の完成度がぐんと高まるので、ぜひ参考にしてみてください！   オリジナル見出しの設置手順 まずは、WordPressの記事に「オリジナルの装飾」を追加する方法をお伝えします。 ...

この記事では、Web サイトで使えるおしゃれマーカー装飾 20個を紹介します。 すべてコピペで使えるので、WordPress初心者でも5秒で再現可能！ 「シンプルなマーカー」から「個性的なデザイン」まで幅広く揃えていますので、ぜひ活用してみてください。   オリジナルのマーカーを引く方法【プラグイン不要】 まずは、WordPressの記事内に5秒でマーカー装飾を適用する手順を紹介します。 WordPressの投稿画面で「コードエディター」を開く 本記事のサンプルコードをコピペする 「ビジュアルエ ...