★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

「 CSS 」一覧

【WordPress】ol要素のリスト横の数字を①、②のような丸数字に変える方法

【WordPress】ol要素のリスト横の数字を①、②のような丸数字に変える方法

ol要素で作られるリスト項目の横には「1.」や「2.」などの数字が表示されます。この数字部分に直接文字として「①」や「②」などの丸数字を指定することはできませんが、少しスタイルを変えるだけで丸数字にすることは可能です。そこでここではol要素に対してカスタムCSSを追加して左側の数字を丸数字にする方法について解説します。

ただのリンクをボタン風にしてクリック率を上げる方法

ただのリンクをボタン風にしてクリック率を上げる方法

リンクをただ設置するだけだとクリック率は低いですが、CSSでボタン風にすると読者の目を引きやすくなりクリックされる確率が高まります。さらにボタンを押したときに凹むようなアニメーションもCSSだけで実現できます。ここではCSSを使ってクリックしたくなるようなリンクボタンを作る方法を解説します。

ボーダーの枠線や区切り線にグラデーションをかける方法を解説

ボーダーの枠線や区切り線にグラデーションをかける方法を解説

今まで要素にグラデーションをかける場合はbackground-imageなどにグラデーションさせた画像を指定する必要がありましたが、CSS3では画像を指定できる全てのプロパティにlinear-gradientなどの関数を渡してグラデーションさせることができるようになりました。ここでは枠線や区切り線にグラデーションをかける方法を解説します。

リストをフレックスボックスを使って横並びのメニューにするには

リストをフレックスボックスを使って横並びのメニューにするには

リストを横並びにするのはメニューを作りたい場合によく使われる方法です。ただulタグなどで作られるリストは項目が縦に表示されるので横並びリストを作る場合は少し工夫が必要です。要素を横並びにさせる手法はいくつかありますが、ここでは横並びがしやすいフレックスボックスを使ってリストを横並びメニューにさせる方法を解説します。

simplicityでヘッダー部分を画面上に固定表示する方法

simplicityでヘッダー部分を画面上に固定表示する方法

「simplicity」は内部SEO対策が簡単でレスポンシブに対応しているので人気のあるテーマですが、ヘッダーを固定したい場合そのような設定はsimplicityのカスタマイズ画面にはないので独自にカスタマイズする必要があります。そこでここではsimplicityで上部に表示されるヘッダーを固定し、スクロールしたときに常に画面上部に表示され続けるようにする方法について解説します

WordPressでグラデーション背景を設定する2つの方法

WordPressでグラデーション背景を設定する2つの方法

サイトの背景は常に表示されるのでこれを変えるだけでサイト全体の印象を変えることができます。特に背景を美しく表示するためによく使われるのはグラデーションです。WordPressでは背景を変更する2つの方法があります。それぞれ長所と短所があるのでそれもあわせて2つの方法で背景のグラデーションさせ方について解説します。

クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。

jQueryで画像のフェードインとスライドダウンを同時に行う方法

jQueryで画像のフェードインとスライドダウンを同時に行う方法

jQueryを使うと画像などの要素をフェードインで徐々に浮かび上がらせて表示させたり、スライドダウンで上から下にスライドして表示させるなどのアニメーション効果をつけることができます。ただし同時に2つの効果をつけたい場合は少し工夫が必要です。ここでは画像をフェードインしつつスライドダウンさせて表示する方法を解説します。