すべての記事
-
WordPressの自作ショートコード作成の基本
今回はWordPressの便利なショートコードを自作する方法の基本や、使い方を解説していきたいと思います。複雑な処理も短いコードで呼び出せるととても便利な機能です。ぜひまだ使ったことがない方はこれを機に覚えてください。 ショートコードとは？ ショー... -
WordPressのこれだけは覚えておきたい条件分岐タグ
WordPressを色々いじって行くと必ず「トップページではサイドバーなし」で、「固定ページや個別投稿ページではサイドバーを表示」と言った感じで現在のページに応じて処理を変えたくなってきます。そこで登場するのがWordPressの「条件分岐タグ」。 トップ... -
WordPressの公開日と最終更新日を表示する
公開日を表示しているサイトはよく見ますが、最終更新日を表示しているサイトはあまりないように思います。というのもWordPressのほとんどのテーマは公開日の表示機能はありますが、最終更新日も表示する機能はありません。 そこで今回はWordPressのテーマ... -
シンプル・スタイリッシュなデザインのサイト8選
私はWebサイト制作に携わる人間として、秀逸なデザインにたくさん触れるようにし、自身のデザインスキルを磨くべく日々精進しております。 Webサイト制作全般において、私は断然「いかに足すか」より「いかに引くか」を重視しております。そうすると思うの... -
【CSS】親要素からはみ出して子要素を画面いっぱいにする
親要素の幅がすでに決まっている場合に、「ここだけは画面いっぱいに表示したい」と思った時に皆さんはどうしますか？ 私は以前まではいちいち親要素から出すというコーディングをしていました。 自分でコーディングしているならそれで良いですが、CMSで決... -
Javascriptで画像にalt属性がない場合に自動で追加する方法
img要素におけるalt属性は、画像が表示できない場合に代替テキストを表示します。スクリーンリーダーで画像の内容を説明するためにも必要な属性です。 また、img要素に適切なalt属性を設定することで、検索エンジンの画像検索にヒットしやすくなり、SEO効... -
target=”_blank”の属性を持つaタグにだけCSSを指定する方法
aタグにCSSで下線を引いたり、文字の色を変えてリンクであることを示すのは王道のやり方ですが、aタグには新しいウィンドウでリンク先を開く属性のtarget=”_blank”があります。 ユーザビリティの観点から通常のリンクとは別であることを示すためにtarget=”... -
position:stickyの使い方と上手く機能しない場合の解決方法を解説
position:sticky;はスクロールしたときに、要素が指定した位置に来たところから固定させることができるとても便利なプロパティです。 position:fixed;と似ていますが、position:sticky;ならjavascriptも書かないとできなかった難しい指定がたった2行ででき... -
CSSのobject-fitの使い方を徹底解説！CSSで画像のトリミングができる！
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。 要は画像として配置しているのに、「background-size」と同じことができてしまい... -
Sassは絶対使った方が良いよ！使い方入門編
WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書いてみました。 この記事を書くにあたって... -
CSSだけで作るドロップダウンメニュー（多階層）
今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。 「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードです。「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。 細... -
jQueryとCSSで作るアコーディオンメニュー
先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きました。今回はjQueryとCSSで作るアコーディオンメニューもやっていきたいと思います。 どちらの方法でも問題はありませんが、テクニックの引き出しは多いに越したことはないですから...
