ブログ一覧

.l-content__top img { filter: blur(5px); /* 数値を変えるとぼかしの強さを調整可能 */ }

.c-headLogo__img { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } /* data-scrolled=true のとき表示 */ [data-scrolled="true"] .c-headLogo__img ...

お名前ドットコムサーバーでは、デフォルト設定ですと、ファイルは50MBまでしかアップロードできません…。 サイトデータを一括移行したいときや、大きいファイルをアップロードしたいときには少し足りませんよね。 今回は、お名前ドットコムサーバーで、フ...

.p-drawer{ background: #305f72 !important; }

.wp-block-group__inner-container { display: flex; height: 100%; flex-direction: column; } /* ↓ ここだけにしたい場合は親のグループなどに任意のクラスをつけて */ .class-name .wp-block-group__inner-container { display: flex; height: 100%; fl...

.reserve { position: fixed; bottom: 20vh; right: 0; writing-mode: vertical-lr; text-orientation: mixed; background-color: #AD3814; color: #fff; padding: 20px 10px; font-size: 20px; font-weight: bold; cursor: pointer; z-index: 999 !import...

.arkhe-svg-posted{ display: none; } .p-postList__body{ display: flex; align-items: center; } .p-postList__times time{ color: #c39e81 !important; font-size: 1rem; font-weight: bold; margin-right: 20px; } .p-postList .p-postList__title{ li...

.icon-posted::before { display: none; } .news-list .p-postList.-type-simple{ border-top:none; } .news-list .-type-simple .p-postList__link{ border-bottom:none; } .news-list .p-postList__body { display: flex; align-items: center; gap: 1em...

.single h2:not(.section-title2):not(.c-bottomSection__title) { padding: 1rem 2rem; border-top: 6px double #000; border-bottom: 6px double #000; } .single h3 { padding: 1rem 2rem; border-left: 4px solid #000; }

こんにちは！今回は、WordPressで有料記事を実現できるプラグイン「codoc（コードク）」を導入した際に起きたレイアウト崩れの解決方法についてシェアします。 有料記事の行間が詰まって見える問題が発生 実際に有料記事を書いてみると、購入者から見ると...

備忘録で、文字の左に横線をひくCSSを残します。 .left-line { position: relative; } .left-line::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20vh; /* 線の長さ */ height: 1px; bac...

Arkheのスライダーを画面いっぱいに表示されるようにしたい… .ark-block-slider.height .ark-block-slider__inner { height: 100vh; }

X (Twitter ) の投稿画像の表示される大きさを知りたい！ 今回は、X(旧:Twitter)の投稿画像の画像サイズ・表示サイズをご紹介させていただきます。 X ( Twitter )の投稿画像サイズ X ( Twitter )に画像を投稿する際は、投稿枚数によって投稿画面で表示され...

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

ヘッダーにお問い合わせボタン・予約ボタンを設置したい… 今回は、WordPress(ワードプレス)テーマ：SWELLでのヘッダーメニューへのボタン設置方法をご紹介します。 【PC版】ヘッダーメニューへのボタン設置方法 PC画面のヘッダーメニュー内に、上図のよう...

固定ページのデフォルトタイトルを非表示にしたい… 今回は、WordPress(ワードプレス)テーマ：SWELLで固定ページのタイトル(h1)を非表示にする方法をご紹介します。 【SWELL】 固定ページのタイトル(h1)を非表示にする方法 タイトル(h1)を非表示にする SWEL...

使用するフォントを変更したい… 今回は、WordPress(ワードプレス)テーマ：SWELLでフォントをGoogleフォントに変更する方法をご紹介します。 デフォルトのフォント変更 SWELLにはデフォルトでフォントが4種類用意されています。 「外観」＞「カスタマイズ」...

SWELLのヘッダーメニューの設置方法を知りたい… 今回は、WordPress(ワードプレス)テーマ：SWELLのヘッダーメニューの基本カスタマイズ方法をご紹介します！ 【SWELL】ヘッダメニューの設置は「外観」＞「メニュー」から まずは、ヘッダーメニューの設置方...

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

SWELLでヘッダーの上に表示されている色のバーを消したい… WordPress(ワードプレス)テーマ：SWELLでは、デフォルト設定でトップ画面ヘッダー上部にヘッダーバーが設置されます。 今回は、SWELLのヘッダーバーを非表示にする方法をご紹介します。 【SWELL】...

パンくずリストの表示をなくしたい… 今回は、WordPress(ワードプレス)テーマ：SWELLでパンくずリストを非表示にする方法をご紹介させていただきます。 パンくずリストとは SWELLでは固定ページのページ上部にパンくずリストが表示されるよう設定されていま...

文字を縦書きにしてみたい… 文字を縦書きにすると、英文字がおしゃれになったり、日本語が和風っぽくなったりしますよね。 カスタマイズ手順①で紹介 カスタマイズ手順②で紹介 今回は、WordPress(ワードプレス)テーマ：SWELLでCSSを使って文字を縦書きにす...

見出しのデザインを変更したい… 今回はWordPressテーマ：SWELLの、“見出し”のデザインの変更方法をご紹介させていただきます。 【SWELL】見出しのデザインカスタマイズ方法 WordPressテーマ：SWELLでは、ブロック“見出し”を選択することができます。 その...

SWELLでブロックにアニメーションをつけたい… 今回は、WordPress(ワードプレス)テーマ：SWELLでアニメーションをつけられるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」をご紹介します。 こんな方にオススメ！ SWELLなどのブロッ...