WordPressの管理画面の使い方からカスタマイズ・ドメイン設定などをサポートします
WordPressの使い方

CSSの書き方

WordPress個別サポート
サイトを高速化するならエックスサーバー(無料お試し可)

WordPressの編集画面で使える便利なCSS(センタリング・余白・枠線)

WordPressの編集画面にコピーペーストして使える便利なCSSを紹介します。活用する場面は、少しだけデザインを調整したいときです。たとえば、申し込みボタンをセンタリングしたり、画像の下に余白を入れたり、一部の文章を枠線で囲みたいときです。

CSSで画像に文字を重ねる方法

CSSを使って画像の上に文字を重ねる方法を紹介します。難しそうですが、ポイントだけおさえれば、普通にdivブロックを作るのと変わりません。参考にしてください。仕上がりイメージは次のようになります。 CSSで重ねる画像と文字を準備 まずは、後で重ねる画像と文字を準備します。 この時点では、単に画像と文 ...

CSSでリンクの下線を消したり点線にする方法

リンクには下線が付くのが一般的ですが、リンクの下線を消したり、文字と下線の間に余白を入れたり、下線を点線にしたいこともあります。 ここでは、CSSを使って下線をいろいろと設定する方法を紹介します。 リンクの下線を消す 下線を消すにはCSSで「text-decoration: none;」を指定します ...

CSSを使って画像に額縁風の枠線を付ける方法

CSSを使って画像に枠線を付けたい場合もあります。たとえば、次のような太い枠線を表示して額縁風に見せたいという要望も多いです。 ここでは、CSSを使って画像の枠線を表示する方法を紹介します。 CSSで画像に枠線を付ける「border」 CSSの「border」を使うと画像などに枠線を付けることができ ...

シンプルなテーマのヘッダーにロゴ画像を表示する方法(CSSで)

ヘッダーにロゴ画像を表示できるテーマも少なくありませんが、Twenty Sixteenなどのシンプルなテーマでは「ロゴをアップロードする」のようなメニューはありません。そこで、シンプルなテーマでヘッダーにロゴ画像を表示する方法を紹介します。

WordPressでカテゴリーを色分けする(Stingerを例に)

WordPressで記事の下などに表示されるカテゴリーページのリンクを色分けする方法を紹介します。一般的にはシンプルなリンクになっているカテゴリーリンクですが、CSSを使って色分けすることができます。

タグクラウドのカスタマイズ(フォントサイズ統一・枠線・背景色・縦表示)

よく使われるタグのサイズが大きくなるタグクラウドのリンクもCSSでカスタマイズできます。ここでは、すべてのタグを同じフォントサイズにしたり、枠線で囲んだり、背景色を設定する例を紹介します。

グローバルメニューの2行目に英語表記やアイコンを追加する

グローバルメニューの下に英語表記を追加したくなることはありませんか?「1行目が日本語、2行目が英語」のメニューです。難しそうですがPHPを修正せずにCSSで実現できます。Font Awesomeを使ってアイコンを表示する方法と合わせて紹介します。

CSSでページごとに別のスタイルを設定したいときはbodyタグをチェック!

WordPressで作成中のサイトで「トップページだけタイトルを消したい」とか、「固定ページのサイドバーを消したい」など、ページごとにデザインやレイアウトを変えたいことはありませんか? そんなときはページのbodyタグを見てみましょう。 ブラウザ上で右クリックして「ページのソースを表示」メニューから ...

CSSで空のセルにスタイルを指定できる「:empty擬似クラス」の活用例

CSSの:empty擬似クラスを使って空のセルだけにスタイルを設定する方法を紹介します。入力し忘れた項目のチェックや、予約が入っていない日時をハイライトしたいときなどに活用することができます。

1 2 »
WordPress個別サポート
スポンサーリンク
スポンサーリンク

西沢直木の電子書籍【読み放題対応】

その他の記事を読む
(記事総数:480本)
  • twitter

こちらもどうぞ

【多言語対応】WPMLプラグイン
【拡張デザイン】BizVektor Attract
【グリッド表示】BizVektor Grid Unit
【サイトの高速化】エックスサーバー
【便利です】Lightning Variety
【SEOに強いと評判の】賢威7

WordPress講座のおすすめコース

ホームページ作成講座 WordPress個別サポート BizVektorカスタマイズ講座
西沢直木のIT講座
wordpress講座受講予約
PAGETOP
Copyright © 西沢直木のIT講座 All Rights Reserved.
画像提供: 写真AC足成無料素材倶楽部ペイレスイメージズ