WEB MEMO 2015.12.11 2021.10.10 CSS テキストシャドウで文字を縁取る KOSAERU WEB MEMO CSS text-shadow: black 1px 1px 0px, black -1px 1px 0px,black 1px -1px 0px, black -1px -1px 0px; 影の色、横のずれ、下のずれ、ぼかし具合 WEB MEMO CSS Share Article :
横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』 2018.02.11 2021.10.10 最近のサイト制作において、特にスマホサイトからのアクセス数を意識している方からのオーダーとしてドロワーメニューを採用して欲しいというリクエストが多い。 方法は色々あるが、最近よく使っているのが『Drawer』。 理由は簡単!設置とカスタマイズが簡単だからだ。あと動きもスマ…
CSSのみでモーダルウィンドウを作ってみた! 2016.02.23 2021.10.10 このブログのスマホ用テンプレートで採用してみたモーダルウィンドウ。 スマホではメニューや検索フォームを隠して、ファーストビューをすっきりさせたかったので採用してみました。 あと、今どきっぽくてカッコ良いかと思ったので。 ▼モーダルウィンドウを…
CSS/フォントサイズ「px、em、rem」の違いと変換表 2021.02.09 2023.06.22 px 絶対指定 1pxは1ドット em 相対指定 親要素のfont-sizeを基準 [crayon-67ed1658016d2154084273/] 変換表 親要素のfont-sizeが16pxの場合 px em em 1…
CSSだけで結構使えるシンプルアイコンが書けるサイト 2016.10.18 2021.10.10 https://www.youtube.com/watch?v=ZOiRwXOIsx4&feature=youtu.be https://twitter.com/webcreatorbox/status/788175303835262976 ▼CSS ICON -- …
CSSのfont-familyで割と綺麗な明朝体を指定することがでけた! 2016.05.17 2021.10.10 これまで明朝体を使う時は画像を使っていたけど以下のように、CSSのfont-family指定で割と綺麗なカンジで使えたので、今後は画像を使わなくても良いかも。 と、いうことでメモメモ ((φ(-ω-)カキカキ [crayon-67ed16580173905…
CSSで作る押したった感のあるボタン風リンク 2021.01.24 2023.06.22 GIRL リンクをテキストリンクではなくボタン風にしたい! GIRL それだけでなくボタンを押したような動きが欲しい! ME そんな時はCSS使えば、押した時(クリックした時)にポチって沈むような動きを…
Bootstrap メディアクエリの覚書 2015.11.04 2021.10.10 ▼min-width - 指定したところから @media (min-width: 768px) {/*幅768px以上で適用されるスタイル*/} @media (min-width: 992px) {/*幅992px以上で適用されるスタイル*/} @media (…
CSSのfont-familyで割と綺麗な明朝体を指定することがでけた! 2016.05.17 2021.10.10 これまで明朝体を使う時は画像を使っていたけど以下のように、CSSのfont-family指定で割と綺麗なカンジで使えたので、今後は画像を使わなくても良いかも。 と、いうことでメモメモ ((φ(-ω-)カキカキ [crayon-67ed16580173905…
WordPress 固定ページを検索対象から除外 2016.06.04 2023.06.22 検索結果に固定ページ&カスタム投稿を表示させたくなかったのでカスタマイズする。 とりあえず固定ページをフィルタリングしたら理想通りの結果となった。 [crayon-67ed1658035fb471183889/] …
ソースコードを綺麗に表示するhighlight.jsの簡単設置方法 2016.02.18 2021.10.10 ▼フッターに以下のコードを書く [crayon-67ed16580366b796383633/] ▼表示方法 ハイライトさせたいソースコードを以下のタグで囲む。 <pre><code>ソースコード</code></pre> …
CSSだけで結構使えるシンプルアイコンが書けるサイト 2016.10.18 2021.10.10 https://www.youtube.com/watch?v=ZOiRwXOIsx4&feature=youtu.be https://twitter.com/webcreatorbox/status/788175303835262976 ▼CSS ICON -- …
Advanced Custom Fields テキストの出力 2015.12.11 2021.10.10 WordPressのカスタムフィールドを使いやすくしてくれるプラグイン「Advanced Custom Fields」。 設定したフィールドをフロント画面に表示する方法として基本となる「テキスト」の出力方法を記します。 ▼何も考えずに出力する [crayon-67ed1…