CSS・HTML– category –

SWELLのトップ画面メインビジュアルのフォントをカスタマイズして、おしゃれにしたい… SWELLのメインビジュアルにある文字は目立つので、フォントを変えたり、サイズを変更できたらさらにかっこよくなりますよね。 今回は、WordPress(ワードプレス)テーマ...

SWELLのトップ画面メインビジュアルのフォントをカスタマイズして、おしゃれにしたい… SWELLのメインビジュアルにある文字は目立つので、フォントを変えたり、サイズを変更できたらさらにかっこよくなりますよね。 今回は、WordPress(ワードプレス)テーマ...

背景や画像の角を少し丸くしたい… 今回は、WordPress(ワードプレス)テーマ：SWELLで背景や画像の角に丸みをつける方法をご紹介します。 CSSはテーマに関係なく使用できるますので、他テーマをご使用の方もぜひ参考にしてください。 【SWELL】背景や画像の...

追加CSSでカスタマイズしたいけれど、"CSSクラス"をどう設定したらいいのかわからない… 今回は、WordPress(ワードプレス)テーマ「SWELL」での"CSSクラス(CSS class)"の設定方法をご紹介させていただきます。 SWELLでのCSSクラス設定方法 STEPブロックを選...

おしゃれな見出しを作りたい・・・ サイトのデザインがおしゃれでも、見出しのデザインがかっこよく決まらない時がありますよね。 今回は、cssのみでできる見出しのおしゃれなカスタマイズを紹介させていただきます。 見出しデザイン 今回は、全て下記h1タ...

おしゃれなグラフをcssで作りたい・・・ サイト内にグラフを挿入したいときもありますよね！ 今回は、おしゃれなグラフの作り方をご紹介させていただきます。 棒グラフ 横向き棒グラフ シンプルな横向きの棒グラフです。棒グラフが左側から伸びるアニメー...

テキストの背景にテキストを表示したい・・・！ テキストの背景に数字や英文字があるとおしゃれに見えますよね！ 今回は、CSSのみで背景にテキストを表示するスタイリッシュなデザインの作り方をご紹介します。 背景にテキストを表示させる方法 CSSの「::a...

STEPボックスをかっこよく説明したい・・・ ユーザーに手順等を分かりやすく説明するために活用するのが「ステップボックス」ですよね。 今回は、シンプルでかっこいいステップボックスの作り方をご紹介します。 ブログやウェブサイトで使えるシンプルでス...

ヘッダーのロゴを真ん中に表示させたい… Wordpressテーマ「Arkhe（アルケー）」を使用したとき、ヘッダーロゴはヘッダーの左側に配置されます。 今回は、ヘッダーを画面中央に表示させる方法を紹介させていただきます。 【Arkhe】ヘッダーロゴを中央に CSS...

ヘッダーにSNSアイコンを追加したい… 今回は、Wordpressテーマ「Arkhe（アルケー）」での、ヘッダーにSNSアイコンを追加する方法を紹介します。 【Arkhe（アルケー）】アクションフックを活用 Arkheではアクションフックを活用することで、ヘッダーにアイ...

Wordpressテーマ「Arkhe（アルケー）」でヘッダーにボタンを設置する方法をご紹介します。 今回は、グローバルナビゲーションを下側に表示する場合に対応しております。「外観」＞「カスタマイズ」「ヘッダー」＞「グローバルナビゲーション」より変更可能...

Wordpressテーマ「Arkhe」で、ヘッダーメニューにホバーすると下線が引かれるようにするには、以下のCSSコードを追加してください。 必要に応じて適宜変更してください。 そのままコピペOK！ /* ナビゲーションメニューのメインテキストを強調 */ .c-gnav ...

ホバーしたときに矢印がおしゃれに動くようにしたい！ 今回は、WordPressでおしゃれなホバーアクションを付けるCSSコードをご紹介します。 ホバーで矢印を動かすCSSコード ホバーしてみてね！ ↑こちらのように、ホバーしたときに矢印を動かすことが出来る...