Bootstrapを使用したwordpressのテーマはいろいろあります。WP Bootstrap Starterを使用していましたが、公式サイトが長い事真っ白画面のままなので、初心者にはとっつきにくいUnderstra…
タグ: デザイン
[CSS] ラインマーカーを引いてみる
CSSを使って、ラインマーカーで線を引いたようなデザインにしてみようと思います。文中のちょっと目立たせたい箇所に引けば、そこだけ文字自体に色を付けるよりも見た目にも良く、注意を引く事が出来ます。一般的なタイプと太さが調節…
[wordpress] 管理画面 メニュー カスタマイズ
ダッシュボードのメニューを使いやすくカスタマイズする方法を数種類ご紹介します。プラグインで手軽に済ませるのも良いですが、出来るだけプラグインを使用せず、function.phpに追記する事でカスタマイズします。欲しいメニ…
[CSS] 背景を斜めにカット (レスポンシブ）
背景色や画像を斜めに切り貼りした感じの企業のキャンペーンページなどでよく見かけるアレです。ちょっとカッコよく、動きがある感じのランディングページにする事が出来ます。レスポンシブにも対応したCSSで三角を作る方法を使った応…
[CSS] Animate.css v4 スクロールで動かす (初心者も）
Animate.cssのバージョンが4になり、思いっきり変更がありました。以前のままの状態でアニメーションが追加出来ないのでやり直しが必要です。スクロールするとアニメーションが始まる様にするには、wow.jsとの組み合わ…
[CSS] :before 擬似要素で番号表示
以前、[CSS]:befor や :after 擬似要素を活用する をご紹介しました。今回は、<ol> でなくても番号表示をCSSのcounter-increment: title;で振る方法を紹介します。 …
カルーセル Slick.js 小さなデバイスへの対応
Slick.jsとは、カルーセル（スライダー）を設置するプラグインです。[カルーセル Slick.js に文字を重ねる] で、画像文字を重ねた後の状態からの説明です。応用編として、小さなデバイスでもSlickスライダーの…
カルーセル Slick.js に文字を重ねる
レスポンシブ対応のスライダーSlick.js の応用編です。[カルーセル Slick.js 基本の設置方法] で設置したスライドに文字を重ねようと思います。 完成のイメージ CSSで文字のカスタマイズが必要ですが、この様…
カルーセル Slick.js 基本の設置方法
サイト内にSlick.js を使用した、レスポンシブ対応のスライダーを設置する方法をご紹介します。サンプルは、Slick に掲載されています。 私の場合は、WordpressでBootstrapを使用したテーマに設置しま…
カラー(色)選びに迷ったら 参考になるサイト
改定！色選びに悩んだ時にお世話になっているサイトをご紹介します。 「Web制作で、微妙な色合いで悩んでも無駄だよ。環境で違うんだから」と良く言われます。(笑）印刷でも、インクに左右されるので理想通りにはならないですけど、…