MENU
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
あらゆるモノにHackする、探究者の読み物。
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
  1. ホーム
  2. ワードプレス
  3. CSS
  4. 【初心者向け】ワードプレスのCSSを編集/追加/調整する方法

【初心者向け】ワードプレスのCSSを編集/追加/調整する方法

2020 7/22
CSS
2019-05-012020-07-22
【初心者向け】ワードプレスのCSSを編集/追加/調整する方法

[char no=”1″ char=”かつをくん”]この記事ではワードプレス初心者の方向けにCSSで、サイトの見た目を装飾する方法を解説していくで[/char]

[char no=”2″ char=”わかめちゃん”]初のキャラクター記事だな[/char]

目次

CSSとは?

ワードプレスを使い始めて間もない方は「そもそもCSSって何?」って方も多いと思います。

簡単に説明させていただくと、CSSと言うのは、[text type=marker color=blue]Webサイトの見た目を整えるための指示書[/text]です。

[char no=”1″ char=”かつをくん”]CSSはサイトの記事やレイアウトを整えるためのマークアップ言語やね[/char]

[char no=”2″ char=”わかめちゃん”]HTMLって言葉もよく聞くけど、あれは何なの?[/char]

[char no=”1″ char=”かつをくん”]CSSに対してHTMLは、どちらかと言うと文章やパーツの意味を示すためのマークアップなんよね[/char]

CSSの基本的な使い方

CSSはHTMLとセットで記述して、訪問者のWebブラウザに「こんな風に表示してね」ということを伝えていきます。

HTMLで文章の意味を示して、”クラス”という名前付けをします。CSSはこの”クラス”に対して適用していきます。例を見ていきましょう。

<span class="red">文字を赤く</span>
.red{
   color: red;
}

ブラウザでの表示

文字を赤く

[char no=”2″ char=”わかめちゃん”]おおっ!まじか。赤くなったぞ[/char]

[char no=”1″ char=”かつをくん”]文字の色以外にも色んな表現ができるよ[/char]

CSSの記述ルール

CSSは指定したセレクタ”全て”に適用されるので”red”というクラスを振ったHTMLタグの文字は全て赤くなります。

上の例では”クラス”を振りましたが、CSSのセレクタは、タグを直接指定する事もできますし、”id”と言うページ内で固有の名前を振る事も可能です。

CSSの記述方法は以下の通り。

  • タグの指定は記号なし。
  • クラスの指定はクラス名の前に”.”[ドット]を入れる
  • idの指定はid名の前に”#”[シャープ]を入れる

これらのルールを組み合わせ、応用して、かなり複雑な位置でもCSSを指定していくことが可能になります。

<span class="bold">文字を太く</span>

<span id="big" class="bold">文字を太く大きく</span>
.bold{
   font-weight: bold;
}
#big{
   font-size: xx-large;
}

ブラウザでの表示

文字を太く
文字を太く大きく

[char no=”2″ char=”わかめちゃん”]いきなり下ネタ、ブッ込んで来たな、コイツ[/char]

[char no=”1″ char=”かつをくん”]ちょっと黙ろうか[/char]

CSSの適用範囲の広さ

タグ指定 > クラス指定 > id指定

ワードプレスのCSSを編集

ワードプレスでCSSを編集する方法はいくつかありますが、一番簡単なのは管理画面のタブから直接編集する方法です。WordPress5.1.1を例に編集方法を紹介します。

ワードプレス管理画面の「外観 → テーマエディタ」を選択。

更に表示された画面の右側に編集するファイルを選択する窓がありますので[style.css]を選択します。

[char no=”2″ char=”わかめちゃん”]結構簡単に編集できるんだな[/char]

[char no=”1″ char=”かつをくん”]この他にも手持ちのテキストエディタで編集して、FTPでアップロードする方法もあるんやで[/char]

[char no=”2″ char=”わかめちゃん”]編集失敗したらヤバいんじゃねーの?これ?[/char]

[char no=”1″ char=”かつをくん”]CSSを追記する分には、いきなりサイトの表示がされなくなったりすることはないと思うよ。元々ある記述を変更する場合なんかはバックアップを取っておいた方が無難かな。[/char]

CSSの場合はこの画面で編集しても問題が起きることは少ないと思いますが、拡張子がphpのファイルの編集はこの画面から行わないようにしましょう。少しでも記述を失敗するとサイト自体が表示されなくなり、管理画面にすら戻れなくなります。

まとめ

サイトの見た目を少し変えたいなー、と言う場合はCSSを編集することになると思います。使用者の多いテンプレートは見た目が被ってしまうのでイヤと言う人もCSSを覚えれば差別化を図れるので挑戦してみるのもアリですね。

リンク
Let's Hack Tech
CSS | Let's Hack Tech CSSの関連記事
CSS
CSS ワードプレス
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
人気記事
  • IQテストいくつか受けてみました
    ネット上で信憑性がありそうなIQテスト、5種類まとめて受けた結果…
  • hayate
    メルカリの商品を世界最速で購入するためだけのアラートツール
  • 【Python】BeautifulSoupの使い方・基本メソッド一覧|スクレイピング
  • Pythonファイルのexe化
    【悲報】PyInstallerさん、300MBのexeファイルを吐き出すようになる
  • Amazon Echo アレクサのコマンドまとめ
    AmazonEchoの使い方とできる事、アレクサへの指示コマンド一覧
最近の投稿
  • 正規表現処理の濁点でハマった話2024-12-12
  • 保護中: 疾風v2更新履歴2024-05-31
  • 【自営・経営者向け・税金も】クレジットカードガチ勢による最強クレカ解説2023-10-23
  • PyQt5 QListWidget の item削除でtextBoxのフォーカスが奪われる2023-03-05
  • WordPressからのメールが届かない時の調査と解決法2023-02-27
目次
目次