cssファイルの開き方と編集方法

2016/08/18 14:04

あるWEB担当者

自分のブログ記事に「ふきだし」を追加したいと思いネットで調べたんです。
見つけたページには、CSSで作れるという内容がありCSSのサンプルが掲載されていました。
そして、サンプルのCSSを自サイトに追加してくださいと書いてあったのですが、どうやってCSSを追加していいのかが分かりません。
その追加方法について教えてもらえますか？

田中

なるほど、CSSの編集ですね。お使いのサイトはwordpressですか？

あるWEB担当者

はい、そうです。

田中

でしたら、編集するところも決まってますし簡単に追加できますよ。

あるWEB担当者

ありがとうございます！　あとアメブロもやってるのですがそれも教えてください。

田中

はい。ではやっていきましょう。
と！その前にCSSのおさらいと追加する時の注意などを簡単に確認していきましょう。

CSSとは

CSSとは Cascading Style Sheet （カスケーディング・スタイルシート）の略で、ウェブページのスタイルを指定するための言語です。

CSSの書き方

例えば以下のようなhtmlをCSSでスタイル決定すると以下のようなことができます。

元のhtmlを<p>タグで囲った単純なものとします

<p>サンプル文字です。</p>

cssを以下の通りに設定すると

p {
font-size : 20px;
}

↓
文字の大きさをが20ピクセルの大きさに変更されます。

cssを以下の通りに設定すると

p {
color : red;
}

↓
文字の色を赤に変更することができます。

CSSは文字を装飾するだけではなく、枠の線、画像の大きさ、背景色などの指定をすることができます。

CSSの３つの定義場所とその影響範囲

以下３つの方法がありますが１と２はhtml内に直接cssを書く方法です。

１、タグのインライン要素（そのタグ限定）
２、head要素内のstyle要素で指定（該当ページ限定）
３、cssを外部ファイル化する場合（サイト全体に影響）

１、htmlタグのインライン要素に書く場合（そのタグ限定）

該当のhtmlタグに「style="■"」を付けて、その中（■の部分）に直接CSSを記述してしまうタイプです。

【影響範囲】該当のタグ限定、ピンポイントで使いたい場合に利用します。

サンプルhtml

<p style="font-size : 20px;">サンプル文字です。</p>

２、html内のhead要素内にstyle要素で指定の書き方（該当ページ限定）

★図【影響範囲】を図解で

htmlのhead要素内に「<style type="text/css">■</style>」タグを書いてその中にCSSを記述していきます。

影響範囲は記述したhtml全体に効いてきます。

サンプルhtml

<head>
<style type="text/css">
p {color: red;}
span {color: blue; font-size: 15px;}
</style>
...

上記のように指定した場合html内に存在するすべての「p」タグと「span」タグに共通したスタイルを与えることが可能です。

３、cssを外部ファイル化する場合（サイト全体に影響）

CSSの記述をまとめて外部ファイルに記述し、htmlから参照する方法です。
ファイルは「style.css」など「.css」という拡張子を付けて保存します。
CSSはサイト内すべてのhtmlから参照する事によりCSSを１回編集する事でサイト全体に適用できる利点があります。

サンプルhtml

基本的なCSSは３の外部ファイルで作成し、補助的に２ページ毎や１タグ毎で修正するという使い方が一般的です。

つまり、ネット上にCSSをコピーして使ってくださいという記述があったら、ほとんどの場合３の「外部ファイル化したCSSを編集」するという意味になります。

ワードプレスでCSSを編集する方法

１、外観からテーマの編集を開きます。

２、CSSを追記して保存します。

（１）たいていの場合style.cssがデフォルトになっているはずです。なっていない場合は探してリンクを押します。
（２）編集領域の一番下に数行ほど改行を入れてコピーしたcssを挿入します。
（３）ファイルを更新します。

！注意！
ワードプレスの場合保存すると即座にファイルが更新されてしまうため、張り付け場所を間違えると修正が面倒になりますので、保存前に全コピーしてどこかに保存しておいたほうが良いでしょう。

アメブロでCSSファイルを編集する方法

１、ＰＣ版アメブロに適用する
（１）デザインの変更を押して
（２）cssの編集を押します。

！注意！
リンクが出ていない場合にはcssがカスタムできないデザインですので新cssがカスタム可能なデザインに変更してから行ってください。

２、スマホ版アメブロに適用する

アメブロの場合、ＰＣ版とスマホ版のCSSが別になっているため別々に対応する必要があります。
（2016年8月現在）

ＰＣ版の場合には管理画面からCSSを変更できて簡単なのですが、スマホ版の場合には、自前のレンタルサーバーにCSSファイルをアップして、そのアップしたcssをアメブロから呼び出しするという形をとります。

１、外部参照用のCSSファイルを作る。

２、アメブロの記事に以下のタグを追加する

このタグを毎回記事を書く度に挿入する作業が必要です。

スマホ版対応の詳細につきましては、いかのブログ記事を参考にさせていただきました。

朗報！アメブロのスマホ版CSSをカスタマイズする目からウロコな方法を試してみたョ！

通常のホームページでCSSファイルを編集する方法

１、ホームページに記載されているCSSファイルを特定します。
どのcssを直せばよいのか？についてですが以下のようにファイルを特定してください。

（１）自分のサイトをブラウザで開き右クリックをしてページのソースを開いてください。

（２）開いたソースを「.css」で検索してみてください（ctrl+f）で検索できます。

（３）検索で見つかったcssのURLを取得しておきます。
複数ある場合、基本的に自前のファイルであればどれでもよいのですが、いつもよく編集するファイルを選択するとよいと思います。

２、CSSファイルをFTPでダウンロードします。

（１）自前のサーバーなどすでに接続設定が完了しているサーバーに接続してください。
（２）ドラッグ＆ドロップしてデスクトップなどに保存します。

３、ダウンロードしたファイルをメモ帳などで開き、cssを追加します。

cssをメモ帳などで開き、一番最後の行に２～３の改行をいれて、コピーしたCSSを挿入します。

４、CSSファイルをFTPでアップロードします。

保存したCSSファイルをFTPソフトにドラッグ＆ドロップします。

最後に

今回の記事作成にあたり、アメブロのCSSをカスタマイズして、デキタ！と喜んでいたのですが、スマホで見てみたら全然効いてませんでした。

慌てて方法を探して解決したので良かったですが、気が付かなかったら、ずっとそのままだったかもしれません。

なので、アメブロに限らず、サイトを更新したらスマホでも確認する事をお勧めします。

ということで、サンプルのCSSをワードプレス、アメブロ、通常のホームページでCSSを編集する方法についてお伝えしました。

あと、こちらお勧めの記事になってますので是非みていってください。
画像と吹き出しで会話形式をサンプルhtmlとCSSで作る方法

cssファイルの開き方と編集方法