CSS

CSSで改行(brタグ)の高さを設定する方法！marginやpadding, heightで指定できる？

2025.02.10
CSS
改行（<br>タグ）に対して高さを変更したい（高さを設定したい）という場合があります。たとえば、サイトタイトルやブログの記事のタイトルに改行を使い、実際の表示ではその改行に高さを設定して見やすくする、みたいな使い方がありますね。ここではその <br>タグに高さを設定する方法をみてみますが、ブラウザの見え方を考...

リストから表を作るCSS！flexで2列3列4列nのレイアウトを作る方法

2025.02.10
CSS
ブログのデザインカスタマイズでは、ul, li を使ったリストに対してCSSを使って2列、3列などの表形式で表示したい！という場合がよくあります。table や gridプロパティを使えば簡単に表は出来ますが、ここでは flexを使って簡単に2列、3列、4列といった形にしてみましょう。もう驚くほど簡単ですね。...

CSSでリストから表を作る方法！2列3列4列のレイアウトはgridで簡単にできる！

2025.02.10
CSS
HTML、CSSのカスタマイズを多少でもする人はよく出くわすと思いますが、ul, li を使ったリストがあり、それをCSSを使って表形式にしたい場合が結構あります。tableプロパティでも実現できますが、今では grid や flex を使うと物凄く簡単にできますね。ここでは grid を使った場合の例をご紹...

広告（リンク画像）をセンタリングする方法！NGなやり方はペナルティの元

2023.02.01
CSS
ブログで収益化する場合、A8.netなどASPのリンク付き画像広告（バナー広告）を記事内に貼ることもありますね。ワードプレスのカスタムHTMLブロックを使って広告コードを入れますが、カスタムHTMLブロックはそれ自体センタリングの設定がない。でもレイアウト的に、画像広告を横方向にセンタリングしたい、という場合...

【CSS】次の要素ありなしで表示を変える方法

2022.05.25
CSS
以下のように「要素が1つだけ」の場合と「複数ある場合」とで表示を分けたい、ということがあります。たとえば記事の先頭によくある、カテゴリ、タグの表示などで、1つしか表示する要素がなければ、それだけを表示する。複数（つまり次の要素が）あれば、スラッシュ（ / ）で区切って表示するなんていう場合がありますよね。＜要...

【WordPress】画像に枠を付けるとぼやける？等倍で綺麗に表示する方法

2021.12.27
CSS
画像にフレームというか枠をCSSで付けると、画像が等倍で表示されず「ぼやける」「滲む」（にじんむ）場合があります。（特に画像に文字が入っていると気になったりしますよね）枠の分だけ画像が縮小されることが原因ですが、その場合CSSの設定はどうするのが良いか、ぼやける理由の詳細や、ぼやけない画像の基本、ワードプレス...

【WordPress】記事本文などの横幅、縦幅を簡単に調べる方法

2021.12.25
CSS
画像の横幅は最大どれほどが良いかなど見るときに、表示される領域（記事本文など）の横幅や縦幅を調べたい場合があります。ここではグーグルクロームの開発者ツール（デベロッパーツール）を使って簡単に横幅を調べる方法のご紹介。※）クローム以外でも同等の機能があると思いますので、探してみてくださいね。調べたい個所同じ方法...

【WordPress】管理画面や記事作成画面にCSSを反映させる方法！プラグインを使って簡単に行うには

2021.12.15
CSS
ワードプレスログイン後の管理画面（記事投稿一覧など）や記事編集画面（エディタ―）でCSSを追加・反映させる方法の解説。CSSを反映させる基本はテーマのための関数（functions.php）に関数追加して… となりこれは結構面倒。ここではプラグインを使って簡単に管理画面にCSSを追加する方法をご紹介。

【CSS】ふわふわドキドキ動くボタンの作り方！上下や拡大縮小アニメーション

2021.11.03
CSS
ふわふわ動くボタン、ドキドキ動くボタンの作り方をご紹介。上下にさり気なくフワフワしたり、拡大縮小を使って浮かび上がったり沈んだりと、CSSを使えば、ちょっと目を引くアニメーションボタンが簡単にできますね。【ドキドキ動くボタン１】【ポン！と動くボタン２】【ゆったりフワフワ浮遊ボタン】【ツンと動くボタン】【チョン...

【CSS】光るボタンアニメーションの作り方！カスタマイズまで手順を詳しく解説

2021.11.02
CSS
コクーン（cocoon）などのテーマで「キラッと光が横切るアニメーション付きのボタン」があったりしますが、何気にカッコいいし、目立ってクリック率も上がりそうですよね。ということで、ここではHTML, CSSを使って「自作で光るボタンの作り方」をご紹介。できあがりは、ほぼコクーンの光るボタンと同等になったと思い...

【CSS】投稿日、更新日がある時、更新日のみ表示する方法！1つ前の要素を非表示にすれば解決

2021.08.15
CSS
ブログのテーマ（外観デザインを決めるやつね）でよくあるのが、記事の投稿日と更新日の表示。例えば以下のように表示されたりしますが、投稿日：xxxx年xx月xx日　更新日：xxxx年xx月xx日この場合、投稿日がかなり古くなっていくと、何か記事が古く見られそうだし、そもそも新しく更新しているので投稿日を表示する必...

【WordPress】CSSやJavaScript,jQueryを簡単追加する方法！プラグインのおすすめ

2020.08.07
CSS
ワードプレスでカスタマイズをする、となると、必ず出て来るCSSやJavaScript, そして jQuery。ネットで検索するとサンプルコードは沢山出てきますが、実際にそれらのコードをワードプレスに反映させるにはどうするか？とそもそものところが難しい、という感じです。こうしたところはプラグインを使えば超簡単。...

ブログ記事一覧のサムネイル画像をマウスオーバーで拡大させる！CSSで簡単カスタマイズ

2020.08.06
CSS
ブログの記事一覧表示にアイキャッチ画像（サムネイル画像）を表示している場合が多いですが、その画像にカーソルを乗せる（マウスホバーさせる）と、「画像がふわっと拡大表示される」という場合がありますね。この「画像がふわっと拡大表示」は実はCSSを使って簡単に実現できますので、是非試してみてください。（私が使っている...

アドセンスの自動広告にラベルを付ける方法！スポンサーリンク、広告表示はどうすれば良い？

2020.07.17
CSS
アドセンスの自動広告は非常に便利ですが、記事の中でいろいろな個所に表示されると、読み手から見て分かりづらくない？ということで、広告ラベル（「スポンサーリンク」や「広告」といったラベル）を貼って本文とは明らかに区別したい、と思う場合があります。広告コードを取得してプラグインなどを使って広告を挿入する、という場合...

スクロール固定・追従するサイドバーウイジェット！cssだけで作る方法

2020.07.17
CSS
サイドバーに表示している広告や目次などで、画面をスクロールしても画面の上とかに固定されて追従してくるものってありますよね？ワードプレスで使うテーマによってはそうした動作をするサイドバー専用のウイジェットが用意されている場合もありますが、私が使っている賢威8にはないようです。そこでここではテーマにそうしたウイジ...