【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カスタマイズ】
みなさんはパンくずリストというものをご存じですか? 今どこにいるかを読者に伝えるために表示する、サイトの案内板のようなものです。 設置することでユーザビリティの向上(ユーザーにとって見やすく、使いやすいサイトのこと)やSEOにも...

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

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

管理画面 ⇒ 外観 ⇒ Simple CSS

Simple CSS画面

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

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

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

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

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

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

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

まとめ

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

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で

コメント