Simple CSSの使い方【WordPressデザインプラグイン】

ASK

どうも、WEBデザイナーのASK(@ASK84032731)です。

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

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

そもそもCSSって？

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

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

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

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

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

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

https://saruwakakun.com/

ASK

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

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

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

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

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

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

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

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

ASK

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

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

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

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

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

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

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

これで準備完了です！

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

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

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

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

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

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

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

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

【Simple CSS】の使い方

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

僕が前回書いた記事

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

みなさんはパンくずリストというものをご存じですか？今どこにいるかを読者に伝えるために表示する、サイトの案内板のようなものです。設置することでユーザビリティの向上(ユーザーにとって見やすく、使いやすいサイトのこと)やSEOにも効果があります。

hazideza.com

2020.08.25

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

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

管理画面 ⇒ 外観 ⇒ Simple CSS

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

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

💻 Webデザインスキルを本格的に学びたい方へ

HTML/CSS・レイアウト・WordPressなど、Webデザインの実務スキルは独学では遠回りになりがちです。デジLIG（旧LIG）なら現役Webデザイナーに教わりながら実践的スキルを最短習得。補助金を活用すれば、費用の最大70%が還付されます。

▶ 【無料】デジLIG カウンセリングを予約する（補助金確認OK）

※完全無料・オンライン可・強引な勧誘なし

まとめ

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

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

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

Photoshopなどのデザインスキルを本格的に仕事にしたい方は、デジLIG（デジタルハリウッドSTUDIO by LIG）の評判・料金・補助金解説もあわせてご覧ください。

よくある質問