【トール】CSSの超基本|トールへCSSを追加する方法

このサイトのデザインを気に入ってくださった方、ありがとうございます。
このブログは、テーマに【トール】を使っています!

CSSの超基本

CSSっていうのは、デザインをほにゃららするコードのことです。

新たに自分で書き加えることで、【トール】の標準のカスタマイズ機能からは変更できなかったパーツの、デザイン変更ができるようになります。

色を変えたり、サイズを変えたり、枠をつけたり、CSSコードを追加していくと、デザインで思いつくことのほとんどができるんです!

【トール】は元々がシンプルでかっこいいので、デフォルトデザインのまま使用されている方も多くいらっしゃいます。

デザインを差別化するという意味でも、CSSの追加はとっても有効ですよ!

CSSの追加方法

すでに【トール】をインストールして、ガチャガチャやってる皆さんはもうご存知だと思いますが、【トール】へのCSSの追加方法をご説明します。

二通りの方法があります。

ダッシュボードから追加

ワードプレスのダッシュボードメニューから、【外観】→【カスタマイズ】→【追加CSS】から行います。

こちらの方法は、デザインの変更を目視で確かめながら行えるので、おすすめです!

※ただし、バックアップの意味でも、別のファイルにも残しておいたほうが良いです。大幅に変更した後に、やっぱり元に戻そうとなると、大変ですから

FTPソフトで追加

上記の方法とは別に、FTPソフトを使って子テーマ(the-thor-child)にstyle-user.cssファイルをアップロードする方法も行えます。

ワードプレスでテーマを編集する際の一般的な方法になります。

ご自身でワードプレスのインストールから行っている方は、すでにFTPソフトを使っていらっしゃると思います。

最初からワードプレスが入っている、またはサーバー側の何かしらのサービスでワードプレスをインストールしているという方には、FTPソフトが分からないという方がいらっしゃるかもしれません。

FTPソフトは自分のPC(ローカル環境)とサーバーとでファイルをやり取りできるソフトです。

検索すればFTPソフトは有料無料でたくさん出てきますので、気に入ったものをご用意してお使いください。

シンプルなものから、サーバー側のファイルの容量がわかる機能がついているものなど、色々あります。

ご紹介しているCSS

私が追加しているCSSです。

記事を書いた後にまた編集したりしているので、現在と少し見た目が違うものもあります。

どんどん追加していくつもりですが、元々【トール】はデザインが良いので、今のところこのくらいです。

丸いメニューパネルのCSS
丸いサーチパネルのCSS

フッターのCSS
【続きを読む】ボタンのCSS
目次のCSS
パンくずのCSS
アイキャッチ画像のカテゴリーラベルのCSS
サイドメニューのカテゴリーのCSS

タグ管理機能の外枠を消す