ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固
WordPress：カテゴリー周りをカスタマイズする際の備忘録 - NxWorld
記事でいうアイキャッチのようなカテゴリーイメージを設定できるようにしたり、説明文を自由に装飾できるようエディタを実装したりなど、WordPressのカテゴリー周りのカスタマイズでよく利用するコードやプラグインの備忘録です。 カテゴリーのカスタマイズと言っても表示カテゴリーのID指定とか特定のカテゴリーの記事を出したいとかそういう系の内容ではなく、主に管理画面の入力周りを変更といったもの中心です。 紹介している内容やキャプチャなどは、WordPress Ver 4.5.2で検証・使用した際のものになります。 カテゴリー説明を表示する際に付加される<p>を消去する カテゴリー説明はそのまま項目名にもあるように「説明」という部分へ表示したい文字を入力するのですが、デフォルトでは入力したものがp要素で括られた状態で表示されます。 これが不要な場合はfunctions.phpに下記を記述することで無
WordPress：更新・公開された日付をもとに記事へ「New」を付ける方法 - NxWorld
普段から案件などでかなりの頻度で使う、WordPressを使ったサイトで最近の記事に対して「New」を付ける方法の備忘録です。 一般的によく使うのは「記事が公開されてから～」というものだと思いますが、「記事が更新されてから～」という場合のコードや非常に参考になるエントリーも併せて書き残しておこうと思います。 記事を公開してから○日間「New」を表示 表示させたい所に下記を記述し、「New」が表示される日数に関してはサンプルコード上部のハイライト部分にある$days = 3;を任意で変更してください。 また、表示されるタグや文言を変更したい場合はサンプルコード下部のハイライト部分にあるechoに任意で指定してください。 下記のコードをそのまま使用した場合は、記事を公開してから3日間は<span class="new">New</span>が表示されるというものになります。 $days = 3
ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル - NxWorld
ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }
WordPress：カスタマイズするなら覚えておきたい条件分岐について - NxWorld
WordPressを使ってサイトやブログを構築する際、例えば「一覧と詳細でサイドコンテンツを変えたい」とか「カテゴリーによって表示内容をガラッと変えたい」のように「○○の時に○○する」といったことをしたい場合に用いるのが条件分岐です。 WordPressには便利な条件分岐タグが沢山用意されており、それらを用いることで様々なことができるので、先述したように特定の条件で何か処理を行うカスタマイズをしたい方は参考にしてみてください。 条件分岐の使い方 条件分岐とは、簡単に説明すると「指定された条件に合うか・合わないかを判断し、判断に応じて処理を行う」というものになり、例えばWordPressの場合であればこれを利用することによって、同じテンプレートを使用していても条件に応じて全く違う見栄えにしたり、処理を行うといったことが可能です。 条件分岐にはswitch文というものもありますが、ここで紹介し
WordPress：お気に入り登録機能を実装できるプラグイン「WP Favorite Posts」 - NxWorld
「WP Favorite Posts」は、サイト独自のお気に入り機能を実装できるプラグインで、ECや不動産などの会員を絡めるようなサイトをWordPress使って作る際に便利なプラグインのひとつだと思います。 以前から気になっていたので少し触ってみたら良い感じだったので、その時の備忘録も兼ねて使い方など簡単に紹介します。 きっかけはかちびと.netさんの「「この記事をお気に入りに追加」を実装できるWordPressプラグイン・WP Favorite Posts」というエントリーで知ったんですが、このエントリーでも紹介されているようにECサイトであれば「気になる商品一覧」とか不動産サイトであれば「気になる物件一覧」みたいな会員サイトとかでよく見かけるお気に入り登録機能のようなものを簡単に実装できます。 お気に入り登録したい際のデータは、ログインユーザーに関してはデータベースに保存、そうでない
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
