スタイルシートの活用を考えてみる

この記事を読むのに必要な時間は約 5 分です。

スタイルシートとは?

HTMLだけでは、ホームページのデザインを細かく指定することができません。これからは、CSSと言うものを使ってホームページを作ることが推奨されています。
CSSは Cascading Style Sheet (カスケーディング・スタイルシート)の略で、これを使うとホームページの見栄えを細かく指定することができます。

 

スタイルシートの書き方パターン

外部ファイルを作成して読み込む

外部スタイルシート

WordPressやアメブロなどではテーマごとにあらかじめ外部ファイルが作成されています。

ヘッダーに読み込むスタイルシートファイルを読み込む記述をしておきます。

 

HTMLヘッダーに定義する

ヘッダー内スタイルシート

ヘッダー部分に直接スタイルシートを定義する方法もありますね。

よく使うスタイルシートを定義しておくと便利です。

 

HTMLに直接埋め込む

style属性でのスタイルシート

その場でどうしても使用したい場合などに使います。

アメブロやFC2・はてな・livedoorなどのブログでの装飾によく使われているケースが多いです。

 

 

WordPressでのスタイルシート

WordPressの中では基本的にテーマファイルの中で指定されているので基本的には外部ファイルになります。

それ以外については直接記述することが多いのですが・・・

追加CSS

管理画面メニューより外観→カスタマイズ→追加CSSで上記の画面なのですが・・・

見出しタグなどでよく使うものとかここに記述しておく方法もありますね。

そういった場合にid=””とかclass=””などという感じでHTMLタグの中に記述することになります。

この方法を使った場合にビジュアルでは表示してくれないので確認のためにプレビューをよく使うことにはなりますが・・・

WordPressなどではAddQuicktagというプラグインを使うとid指定タグやclass指定タグなどを登録できるので便利ですね。

見出しや囲み枠・表・ボタンなど登録しておくと記事作成時にかなり便利です。

くまはちのように業務で作成したりする場合などでも時短につながって重宝しています。

作業する際にブラウザをChromeにしておくとかなり編集作業が便利になります。

Chromeの拡張機能を使いながら作成時間を短縮することも可能になります。

アメブロと併用されている方は、アメケアを使って時短できますよ。

アメブロにログインした状態であればWordPress上でアメケアが使えたりします。

それだけでなく事前に登録しておくだけで簡単に文字やタグなどを追加できるInsert Textやページ全体のキャプチャーが簡単に作成可能なFire Shotなど便利な拡張機能が多くあります。

タグに埋め込んで使うCSSなどは、アメケアやInsert Textに登録しておくと右クリックで使えるようになるのでかなり重宝します。

スタイルシートの活用

スタイルシートの活用は、実際にコードなんて知らなくてもいい
どう使えば効果的に見せられるのか?
その方法を覚えるだけである
では、実際にどういう方法なのか解説します。
WordPressの中では一部でプラグインを使ってスタイルシートとHTMLの部分を補足する方法があったりサンプルコードをInsert Textやアメケアなどに登録して使うなどといった方法がかなり簡単です。
いろんなサイトでサンプルコードが紹介されています。

おしゃれなボックスデザイン(囲み枠)のサンプル30
おしゃれなボックスデザイン(囲み枠)のサンプル30
参考になるコードが多いですね。このページ以外にもサンプル多いです。

 

アメブロ かわいい囲み枠の作り方
アメブロ かわいい囲み枠の作り方
女性におすすめの囲み枠などに関するスタイルシートなどが多いですね。

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ

この記事が気に入ったらいいね!
お願いします!

The following two tabs change content below.
くまはちLAB
神戸市にて事務所を構えSNSを活用したWordPressの活用法をメインにリスト化を初心者の方でもできるパッケージの開発等を手がける。 オーナーくまはちは、パソコン歴30年ホームページ制作歴20年。 お問い合わせは、FacebookメッセージからでもOKですよ。
くまはちLAB

最新記事 by くまはちLAB (全て見る)