simplicityでヘッダー内に検索ボックスなどのウィジェットを設置する方法
WordPressのテーマのsimplictyは人気記事やフォローボタンなどウィジェット機能が豊富です。ただヘッダーがウィジェットエリアに対応していないのでヘッダー内にウィジェットを置くということができません。そこでここではsimplicityでヘッダーをウィジェットエリアに追加し、そこに検索ボックスなどのウィジェットを設置する方法について解説します。
「 CSS 」一覧
【WordPress】ol要素のリスト横の数字を①、②のような丸数字に変える方法
ol要素で作られるリスト項目の横には「1.」や「2.」などの数字が表示されます。この数字部分に直接文字として「①」や「②」などの丸数字を指定することはできませんが、少しスタイルを変えるだけで丸数字にすることは可能です。そこでここではol要素に対してカスタムCSSを追加して左側の数字を丸数字にする方法について解説します。
WordPressでCSSが反映されないときに確認したい３つのこと
独自のCSSをWordPressに追加したとき、文法的には間違っていないにも関わらず正しく反映されない場合があります。ここではWordPressでCSSが効かない・反映されないときに確認したい３つのこととその解決策について紹介します。
ただのリンクをボタン風にしてクリック率を上げる方法
リンクをただ設置するだけだとクリック率は低いですが、CSSでボタン風にすると読者の目を引きやすくなりクリックされる確率が高まります。さらにボタンを押したときに凹むようなアニメーションもCSSだけで実現できます。ここではCSSを使ってクリックしたくなるようなリンクボタンを作る方法を解説します。
simplicity上部のサイトタイトルとアイキャッチをCSSで装飾する方法
WordPressのテーマが上部に表示するサイトタイトルやサイトの概要などはCSSを使って自由にデザインを変えることが可能です。ここではWordPressのテーマによく使われるsimplicity限定で上部のサイトタイトルに対してCSSでスタイルを適用する方法を解説します。
ボーダーの枠線や区切り線にグラデーションをかける方法を解説
今まで要素にグラデーションをかける場合はbackground-imageなどにグラデーションさせた画像を指定する必要がありましたが、CSS3では画像を指定できる全てのプロパティにlinear-gradientなどの関数を渡してグラデーションさせることができるようになりました。ここでは枠線や区切り線にグラデーションをかける方法を解説します。
リストをフレックスボックスを使って横並びのメニューにするには
リストを横並びにするのはメニューを作りたい場合によく使われる方法です。ただulタグなどで作られるリストは項目が縦に表示されるので横並びリストを作る場合は少し工夫が必要です。要素を横並びにさせる手法はいくつかありますが、ここでは横並びがしやすいフレックスボックスを使ってリストを横並びメニューにさせる方法を解説します。
simplicityでヘッダー部分を画面上に固定表示する方法
「simplicity」は内部SEO対策が簡単でレスポンシブに対応しているので人気のあるテーマですが、ヘッダーを固定したい場合そのような設定はsimplicityのカスタマイズ画面にはないので独自にカスタマイズする必要があります。そこでここではsimplicityで上部に表示されるヘッダーを固定し、スクロールしたときに常に画面上部に表示され続けるようにする方法について解説します
WordPressでグラデーション背景を設定する２つの方法
サイトの背景は常に表示されるのでこれを変えるだけでサイト全体の印象を変えることができます。特に背景を美しく表示するためによく使われるのはグラデーションです。WordPressでは背景を変更する２つの方法があります。それぞれ長所と短所があるのでそれもあわせて２つの方法で背景のグラデーションさせ方について解説します。
クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】
インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。