WordPres 記事の装飾は追加CSSがおすすめです

CSSで文字サイズを変える方法 色々

投稿の文字サイズはどうやって変えていますか?

  1. テーマに付いてきたツール
  2. 装飾系のプラグイン
  3. 手動で追加したCSS

色々方法はあると思いますが、できれば基本は「3」手動で追加するのが一番スッキリいくかと思います。

テーマ独自のCSSやショートコードだと後々面倒!?の場合も

THE THORであらかじめ用意されているCSS↓

テーマであらかじめ用意されているCSS

テーマの機能や、プラグイン(文字装飾系のTinyMCE Advancedなど)はとっても便利です。
ですが、テーマやプラグインを変えたい時、サポートされなくなった時、記事に不要なショートコードやCSSの残骸など残ったりするので、すべて記事をチェックすることになる可能性があります。

私も前のテーマに変えたときは使える機能があるぞと一瞬喜びましたが、テーマを変えたときに見苦しい記事になる場合があるので要注意です。

WordPressテーマSTORK入れてみた&アドセンス申請

なので、文字装飾系のプラグインやテーマのツールを使う場合、テーマやプラグインをやめる時にリライトすることになることは考慮しておきましょう。

一か所直せばすべてに反映されるタイプの設定なら(例えば広告やアクセス解析のタグの設定やトップページの設定など)テーマの機能を何も考えずに使えば良いと思いますが、投稿や固定ページの数だけ修正が発生するものは要注意です!

普通の文字の装飾だったら「追加CSS」がおすすめです

THE THORの場合はここです。

ここに入れているCSSがこんな感じです。

/* === 文字装飾 === */
/* 蛍光ペン */
.marker_yellow {background: linear-gradient(transparent 60%, #ffff00 0%);}.marker_pink {background: linear-gradient(transparent 60%, #ff99cc 0%);}/* 文字サイズ */.f90{font-size:90%;}.f110{font-size:110%;}.f120{font-size:120%;}.f130{font-size:130%;}.f140{font-size:140%;}
/* === 動画 === */
/*YouTubeレスポンシブサイズ*/
.youtube {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}.youtube iframe {position: absolute;top: 0;right: 0;width: 100%;height: 100%;}.bottomFooter__link {font-size: 300%;color: aqua;}
/* === CTA === */
#CTA {border-bottom: solid 3px #cce4ff;position: relative;font-weight:bold;font-size:120%;}#CTA:after {position: absolute;content: " ";display: block;border-bottom: solid 3px #5472cd;bottom: -3px;width: 20%;}
/* === 要素再定義 === */
pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;white-space:-pre-wrap;word-wrap:break-word;}

偉そうにだすほどじゃないですね・・。
文字サイズ数パターンと蛍光線とあと少々。
ここに文字色くらいいれてもいいですね。

マイCSSとしてパソコンで保存しておき常にWordPressと同期しておいても良いですね。
AddQuicktagでよく使うタグは登録しておいても良いかもしれません。

テーマを変えても常に同じものを使えるのは後々を考えると楽です。
(準備段階だけ面倒)

  • テーマやプラグインを変えても1記事ずつリライトなどの面倒もない。
  • いつも慣れたコードを使える。

cssは検索すれば色々なサイトが教えてくれますが、気を付けたいのが、
意味わからず貼り付けないこと。
とりあえず、ざっくりでも理解してから使わせてもらいましょう。
じゃないとあとで原因不明の不具合とか、ソースコードグチャグチャとか面倒なことになってしまうので・・・。

まとめ

ということで、WordPressの仕様に少し慣れて来てこう使うと便利だったよね!と過去の自分に言いたいところを記事にしました。

投稿者プロフィール

memocco
WordPress、マーケティングを勉強中の事務員&Web担当の保育園児ママです。

SNSやブログで知り合った方とも
情報共有できたり楽しくコミュニケーション取れたりできればうれしいです!!
このブログはTHE THOR(有料テーマ)を使っています

基本設定だけでもOKです!
初心者の方でも扱いやすいWordPressのテーマです。

文字の装飾
最新情報をチェックしよう!