CSS・HTML– category –
-
「codoc（コードク）」導入時のレイアウト調整メモ
こんにちは！今回は、WordPressで有料記事を実現できるプラグイン「codoc（コードク）」を導入した際に起きたレイアウト崩れの解決方法についてシェアします。 有料記事の行間が詰まって見える問題が発生 実際に有料記事を書いてみると、購入者から見ると... -
【CSS】文字の左に横線を引く方法
備忘録で、文字の左に横線をひくCSSを残します。 .left-line { position: relative; } .left-line::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20vh; /* 線の長さ */ height: 1px; bac... -
【Arkhe】スライダーを画面いっぱいに表示するCSSカスタマイズ（アルケー）
Arkheのスライダーを画面いっぱいに表示されるようにしたい… .ark-block-slider.height .ark-block-slider__inner { height: 100vh; } -
【Arkhe】ヘッダーメニューにホバーすると白い下線が引かれるCSSカスタマイズ（アルケー）
ホバーで白い下線が引かれるようにしたい、、、 WordPressテーマ「Arkhe（アルケー）」では、デフォルト設定でヘッダーメニューにホバーするとテーマのメインカラーにフォントカラーが変更されるようになっています。 今回は、ヘッダーメニューにホバーす... -
【Arkheカスタマイズ】スマホメニュー上部にロゴ画像を表示させる方法【簡単PHPコード付き】
スマホ開閉メニューの上部に画像を入れてみたい・・・ WordPressテーマ「Arkhe（アルケー）」は、シンプルで使いやすく、カスタマイズ性にも優れています。今回は、スマホ用ドロワーメニューの上部に画像（例：ロゴ）を挿入する方法をご紹介します。 「メ... -
【CSS】ホバーで矢印が動くようにするCSSコード（WordPress）
ホバーしたときに矢印がおしゃれに動くようにしたい！ 今回は、WordPressでおしゃれなホバーアクションを付けるCSSコードをご紹介します。 ホバーで矢印を動かすCSSコード ホバーしてみてね！ ↑こちらのように、ホバーしたときに矢印を動かすことが出来る... -
【Arkhe】ヘッダーにSNSアイコンを追加する
ヘッダーにSNSアイコンを追加したい… 今回は、Wordpressテーマ「Arkhe（アルケー）」での、ヘッダーにSNSアイコンを追加する方法を紹介します。 【Arkhe（アルケー）】アクションフックを活用 Arkheではアクションフックを活用することで、ヘッダーにアイ... -
【Arkhe】ヘッダーにボタンを設置する方法
Wordpressテーマ「Arkhe（アルケー）」でヘッダーにボタンを設置する方法をご紹介します。 今回は、グローバルナビゲーションを下側に表示する場合に対応しております。「外観」＞「カスタマイズ」「ヘッダー」＞「グローバルナビゲーション」より変更可能... -
【Arkhe】メニューにホバーすると下線が引かれるカスタマイズCSS
Wordpressテーマ「Arkhe」で、ヘッダーメニューにホバーすると下線が引かれるようにするには、以下のCSSコードを追加してください。 必要に応じて適宜変更してください。 そのままコピペOK！ /* ナビゲーションメニューのメインテキストを強調 */ .c-gnav ... -
【Arkhe】ヘッダーロゴを中央にしたい
ヘッダーのロゴを真ん中に表示させたい… Wordpressテーマ「Arkhe（アルケー）」を使用したとき、ヘッダーロゴはヘッダーの左側に配置されます。 今回は、ヘッダーを画面中央に表示させる方法を紹介させていただきます。 【Arkhe】ヘッダーロゴを中央に CSS... -
【CSS】初心者でもできるかっこいいステップボックスの作り方
STEPボックスをかっこよく説明したい・・・ ユーザーに手順等を分かりやすく説明するために活用するのが「ステップボックス」ですよね。 今回は、シンプルでかっこいいステップボックスの作り方をご紹介します。 ブログやウェブサイトで使えるシンプルでス... -
【CSSで簡単！】背景にテキストを表示する方法
テキストの背景にテキストを表示したい・・・！ テキストの背景に数字や英文字があるとおしゃれに見えますよね！ 今回は、CSSのみで背景にテキストを表示するスタイリッシュなデザインの作り方をご紹介します。 背景にテキストを表示させる方法 CSSの「::a...
12
