ブログ

記事にCSSでデザインする方法[WordPress]

スポンサーリンク

この記事を読んで欲しい人

僕は自分の書いた記事にCSSを付与する方法が分からずインターネットで何回も調べましたが自分のほしい答えがなかなか得れなくてやっと分かったので話します。

 

ネットで「WordpressにCSSの付け方」などと検索してもその多くはテーマの編集の仕方でした。

 

この記事はテーマではなく自分の書いた記事にCSSを適用する方法を話します。

 

1,HTMLにCSSを組み込む 

HTMLにCSSを組み込むというのは文字通りHTML内にCSSを書き込むということです。ただこの方法は難しいのであまりオススメはできません

 

例を紹介していきます。下のコードを打つとこのような装飾を施すことができます。

 

 

 

<h1 style="border-left: solid 10px #00BFFF;"><span style="font-family: arial, helvetica, sans-serif;">
</span></h1>

 

2,wordpressにCSSを書き込む

 

 

wordpress内の「外観」⇒「テーマエディター」⇒「style.css」を開いて分かりやすいように一番したに追加したいCSSを書いてください。

 

ボタンを表示させたかったらボタンを表示するCSSを打ち込み、「ファイルを更新」を押してください

プラグインでより簡単に設定する

 

プラグインを使うと様々なデザインを素早く呼び出すことができとても便利です。

「Quicktags」というプラグインはとても使いやすくオススメです。一度設定すると後はボタン一つで装飾することが出来ます

まずはこのプラグインをインストールして有効化してください。

そうしたらwebパーツ屋などのCSSのコードが書いているところからCSSをコピーしてwordpress内のstyleシートに貼り付けてください。

 

そうしたら「設定」⇒「Quicktags」から始まりのタグと終わりのタグそしてチェックを入れてください。基本的にチェックは左3つで大丈夫です。

 

このようにボタンを追加することが出来ます、ボタンの中に文字を入れたいなど細かい設定はHTMLに変換し文字を打ち込むだけです。

 

-ブログ
-, ,