「 CSS 」一覧

simplicityでヘッダータイトルの横にナビメニューを表示する方法

simplicityでヘッダータイトルの横にナビメニューを表示する方法

ヘッダーの空きスペースが無駄なのでナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いと思いますが、simplicityのカスタマイズ画面ではそのような設定はありません。しかし設定は無くてもテーマのCSSなどを少しだけ編集するだけでそのようなカスタマイズは可能です。ここではヘッダーのタイトルやサイト概要横にナビメニューを表示する方法を解説します。

WordPressで見出し横にアイコン画像を表示する方法

WordPressで見出し横にアイコン画像を表示する方法

チェック項目などを複数の見出しに分けて書くとき、見出しの横にチェックマークなどのアイコンが表示されていると読者にとってこれがチェック項目だと分かりやすくなります。そこでここではWordPressでh2やh3などのタイトル横に画像を表示する方法を解説します。

WordPress Popular Postsで順位番号をアイキャッチ内に表示する方法

WordPress Popular Postsで順位番号をアイキャッチ内に表示する方法

Popular Postsプラグインには順位番号を表示するオプションがありません。そこでここでは人気記事ウィジェットのアイキャッチ内に小さく順位番号を表示する手順について解説していきます。手順通りにやればそれほど難しくないので人気記事をもっとオシャレに表示したいという人は試してみてください。

WordPressでキャラ同士が話す会話形式の記事を作る方法

WordPressでキャラ同士が話す会話形式の記事を作る方法

ブログで読者に記事の内容を分かりやすく伝えるための手段の1つが二人以上のキャラ同士が話し合うような会話形式の記事にすることです。会話形式にすると記事の内容に興味を持ってもらいやすくなり、読者が疑問に思っていることをキャラに喋らせることで共感を得やすくなります。ここではWordPressでそのようなキャラ同士が話し合う会話形式の記事を書く手順を解説します。

simplicityでヘッダー内に検索ボックスなどのウィジェットを設置する方法

simplicityでヘッダー内に検索ボックスなどのウィジェットを設置する方法

WordPressのテーマのsimplictyは人気記事やフォローボタンなどウィジェット機能が豊富です。ただヘッダーがウィジェットエリアに対応していないのでヘッダー内にウィジェットを置くということができません。そこでここではsimplicityでヘッダーをウィジェットエリアに追加し、そこに検索ボックスなどのウィジェットを設置する方法について解説します。

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

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

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

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

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

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