ブログ一覧
-
【Bogo】言語切り替えボタンのカスタマイズ
Bogoの言語切り替えボタンをおしゃれにしたい… 今回は、言語切り替えプラグイン「Bogo」での言語切り替えボタンのCSSカスタマイズを紹介します。 【Bogo】CSSカスタマイズ 上記のようなおしゃれなボタンにするには、下記のコードを使います。 （今回は、英... -
【Arkhe】テーブルの角を丸くする
.access_table th, .access_table td{ vertical-align: middle; } .access_table table{ border-collapse: separate; border-spacing: 0; border: none; } /* セルの上と左に線を引き、各行の最後などは右と下にも線を引く */ .access_table tbody th, .ac... -
【Arkhe】スライダー下部に文字を入れて、上下の差を付けたい
/* セクションにoverflow hidden 入れないと崩れそう 内部で visibleにした分こっちをhidden*/ .ark-block-slider.point-slide { overflow: hidden; /* 見切れは高さと上下paddingで調整 */ padding: 3vw 0 5vw; height: 36vw; } /* 元々あるスライドのhid... -
【Arkhe】ボタンのアイコンの位置を揃えたい
.ark-block-button .ark-block-button__link[data-has-icon] svg { position: absolute; right: 16px; } -
CSSで作るポイントボックス
タイトルタイトル テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト .border-box{ position: relative; border: solid 3px #333; background-color: #fff; pa... -
【Arkhe】トップタイトルエリアにブラーをかけたい
.l-content__top img { filter: blur(5px); /* 数値を変えるとぼかしの強さを調整可能 */ } -
【Arkhe】ヘッダーロゴを非表示にして、スクロールで表示されるようにしたい
.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までしかアップロードできません…。 サイトデータを一括移行したいときや、大きいファイルをアップロードしたいときには少し足りませんよね。 今回は、お名前ドットコムサーバーで、フ... -
【Arkhe】ドロワーメニューの背景色を変えたい
.p-drawer{ background: #305f72 !important; } -
【Arkhe】ブロック内のボタンの位置を下部に揃えたい
.wp-block-group__inner-container { display: flex; height: 100%; flex-direction: column; } /* ↓ ここだけにしたい場合は親のグループなどに任意のクラスをつけて */ .class-name .wp-block-group__inner-container { display: flex; height: 100%; fl... -
【CSS/JAVA】予約ボタンを表示させたい
.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】投稿リストの日付を横並びにしたい
.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...
