【Simple CSS】はブログデザインに必須なプラグイン!ダウンロードから使い方まで徹底解説します!

デザインノウハウ
この記事は約 2 分で読むことができます。
ASK
ASK
どうも、WEBデザイナーのASK(@ASK84032731)です。

初心者の方がブログを開設して最初に躓きやすいのがサイトのデザイン調整

それを助けてくれる素敵なプラグインを紹介します!

そもそもCSSって?

CSSとは、ウェブページのデザインやレイアウトなどの見栄えを変えていくためのコンピュータ言語です。CSSは「スタイルシート」とも呼ばれます。
出典:https://saruwakakun.com/

つまり、サイトの見た目に関することはすべてCSSコードによって決まるんです。

ネット上にはコピペするだけでかっこいいデザインにできるコードが沢山公開されているので専門的な知識がなくても大丈夫!

有名なのは「サルワカ」ですね!

サルワカはあらゆることをサルでも分かるように解説するメディアです。

その名に恥じない、様々なCSSコードがわかりやすく記載されています。

サルワカのTOP画像
https://saruwakakun.com/

ASK
ASK

当サイト「ハジデザ」でもCSSに関する記事を書いていますので、あわせてご覧ください!

参考【HTML&CSS】ブログの余白を細かく調整する方法!

参考パンくずリストの最後の項目を非表示にする方法【WorsPressカスタマイズ】

サイトデザインに必須なプラグイン【Simple CSS】

初心者の方がまず思うのは、CSSコードをどこに記載すればいいか分からない!

そんな疑問を解決するのがSimple CSS

このプラグインに入力すればサイト上のcssコードはすべて反映されます!

管理画面上で作業が完了するので初心者の方におすすめです!

ASK
ASK
今後cssコードを入力する必要が出てきた時も使えるのでDLしておいて損はないですよ!

【Simple CSS】のダウンロード方法

管理画面からダウンロード

個人的にはこの方法が簡単でおすすめです!

検索窓に「Simple CSS」と入力しましょう。

Simple CSSを検索

今すぐインストールのボタンをクリック!

しばらくすると有効化の青いボタンが出てくるのでもう一度クリックしましょう。

これで準備完了です!

公式サイトからダウンロード

公式サイトからダウンロードしてワードプレスにインストールすることもできます。

まずはこちらから「Simple CSS」をダウンロードしましょう!

そしたらWorsPressの管理画面に行き

プラグイン ⇒ 新規追加 ⇒ プラグインのアップロード

するとこの画面になると思います。

プラグインインストール

ファイルを選択ボタンに先ほどダウンロードした「Simple CSS」のzipファイルをドラッグすればインストール完了です!

プラグインを有効化するのも忘れずに!

【Simple CSS】の使い方

では早速使ってみましょう!

僕が前回書いた記事

パンくずリストの最後の項目を非表示にする方法【WorsPressカスタマイズ】

をもとにパンくずリストを非表示にしてみます。

「Simple CSS」を以下の手順で開きましょう。

管理画面 ⇒ 外観 ⇒ Simple CSS

Simple CSS画面

開いたらこのようにコードをコピペするだけ!

Save CSSボタンを押せばサイトに反映されます!

ここでワンポイントアドバイス!

CSSをいくつも書いていくと、どれが何のコードか分からなくなってしまいます。

そうならないためにメモを残しましょう!

/* この部分に好きな言葉を入れる */

/* */で囲むことでメモを書くことができます。

まとめ

今回は「Simple CSS」について紹介しました。

WorsPressのいいところは、便利なプラグインを使うことで初心者にも簡単にサイトをカスタマイズできることです!

今後もガンガン使っていきましょう!

デザイナーを目指すならスクールに通おう

当サイトでは、
本気でWebデザイナーになりたいならデザインスクールに通うことをおすすめしています。

なぜかというと、デザインの勉強は独学では難しいからです。

独学が難しい理由

  • モチベーション維持が難しい
  • 自分のデザインの良し悪しを判断できない
  • 無意識のうちに、好きなデザインばかりを作ってしまう
  • いくら勉強しても就職できるかは別問題

デザインというものは勉強すればするほど上達できるわけではありません。

プロに見てもらいながら、正しく勉強して初めて、デザインは上達するんです。

独学で無駄な時間を費やすくらいなら、多少お金はかかってもWebデザインスクールに通って最速でデザイナーになるべきです!

当サイトおすすめのWebデザインスクールについては下記リンクよりご覧ください!

おすすめWedデザインスクール17選!現役デザイナーが解説します!
デザインノウハウ ブログカスタマイズ

応援クリックをポチッとお願いします!
ブログランキング・にほんブログ村へ   

ハジデザ | 初めてのWebデザイナー転職

コメント