WordPress初心者がサクサク記事を書くためにやるべき最初の設定

私もWordPressを使い始めてなんだかんだで２ヶ月経ちました。

これ最初にやっておくとすげー楽だったなあ、という設定をまとめておきます。

特に記事の中で使うタグなんかは、めんどくさいからやらない、となってしまうと勿体ないと思います。めんどくさくない形にしておけば済む話です。

ちょっとやればすぐ終わるので、ビビっときた人は是非やってみて下さい。

WordPressで最初にやっておけ一覧

タグの単語登録、CSSの設定

でかい文字

とか、

赤くてでかい文字

さらにデカイ文字

どこか違うページへのリンク

この辺を簡単に入力できれば、記事の作成が楽になります。私は「a href」 をよく「a herf」と打ち間違えて困っていました。

単語登録をしておけば、いちいち全部打たなくても簡単にタグが使えるので楽です。間違えないし。

私はこんな風に単語登録しています。

※単語登録はWindowsならツールバーの「あ」とか書いてあるところの右にある、レンチのアイコンをクリックすれば「単語登録」というのがあるのでそこから登録出来ます。Macは上の画面上のバーの「あ」を選べば、下の方に「ユーザー辞書を編集」というのがあります。

ヨッセンスさんのこの記事にはもっともっと深くて便利なことが書いてあります。是非参考にどうぞ。
⇨【保存版】文字入力オタクはここまでやっている!「単語登録」の必殺技6コンボ

単語登録一覧

内容	タグ	入力	CSS設定
見出し・ｈ２	＜h2＞＜/h2＞	ｈ２	ー
見出し・ｈ３	＜h3＞＜/h3＞	ｈ３	ー
見出し・ｈ４	＜h4＞＜/h4＞	ｈ４	ー
ただの太字	＜span class=”b”＞＜/span＞	ｂ	必要
強調	＜strong＞＜/strong＞	だい	ー
でかい文字	＜span class=”big”＞＜/span＞	だい	必要
でかい文字（赤）	＜span class=”bigr”＞＜/span＞	だい	必要
青い文字	＜span class=”blue”＞＜/span＞	あお	必要
赤い文字	＜span class=”red”＞＜/span＞	あか	必要
リスト	＜ul＞＜li＞＜/li＞＜/ul＞	りすと	ー
リスト	＜li＞＜/li＞	りすと	ー
リンク	＜a href=””＞＜/a＞	りんく	ー
中央寄せ	＜center＞＜/center＞	せんたー	ー
引用	＜blockquote＞＜/blockquote＞	いんよう	ー
引用もどき	＜div class=”inyoumodoki”＞＜/div＞	いんよう	必要

※＜＞は本当は<>です。きちんと半角で登録して下さい。

自分なりに入力しやすい形にアレンジするといいと思いますよ！

テキストエディターの上にボタンがあってそれをクリックすれば出てくるやつもありますが、いちいち上にいくのもめんどくさいです。それを端折るとだいぶ楽になります。

こうしておけば、ｈ２と打つだけで＜h2＞＜/h2＞が出てくるので、見出し打つのめんどくせー、という事態を回避出来ます。

カーソルを戻すのがめんどくさい方は、「ｈ２」で＜ｈ２＞、「っｈ２(ｈｈ２)」で＜/ｈ２＞と別々にした方が楽かもしれません。私は最近はこっちでやってます。

短縮するために登録する文字(「入力」のところ)も半角英数字にすると切り替えがめんどくさいので全部全角文字にしておくといいと思います。

ビジュアルリッチエディタを使うという手もありますけど、慣れてくるとかえってややこしい気がするので使っていません。
私は普通のテキストエディタの方で書いています。車のサスペンションは堅い方が運転しがいがあると思うタイプだからでしょうか。

ＣＳＳの設定

上の表で、ＣＳＳの設定が必要なものがあります。私はこんな感じでやってます。

.b {
　font-weight: bold;
  color: #000;
}
.blue {
  color:#235ec4;
}
.red {
  color:#ff0000;
}
.big {
  font-size: 150%;
  line-height: 150%;
  font-weight: bold;
  color: #000;
}

.bigr {
  font-size: 150%;
  line-height: 150%;
  font-weight: bold;
  color: #ff0000;
}

例えば、「.blue」は、{ color:#235ec4; }と設定しました。

これを記事の中で表現するには、

＜span class=”blue”＞青い文字＜/span＞と書かないといけません。(＜＞は<>)

このスパンのクラスはblueですよ。「.blue」に設定した内容を反映して下さいね。範囲は＜/span＞の前までですよ。

ということです。

CSSで「.なんとか」に色んな設定をして、spanやdivのclassで指定してあげれば、囲まれた部分はその設定に従います。

我々のような初心者が扱う範囲では、HTMLとCSSでやっていることは基本的に全部こういうことなんだ、という理解で良いと思います。

「ただの太字（ｂ）」は、見た目は＜strong＞と変わらないのですが、＜strong＞はひとつの記事にせいぜい３つまで。中には１つしかダメだという人もいます。記事の中で強調したい言葉に使うものですから、関係のない複数の言葉に＜strong＞がつくのはおかしいのです。

むやみやたらに文字をは太くするために使う訳ではないということです。普段はｂでここぞというときにstrong、という感じに使うのが本当、らしいです。

「引用もどき」は、とりあえず＜blockquote＞のCSSをまんまコピーしています。引用じゃないんだけど、なんか囲んで書きたいな、ってときに使えます。
※WordPressのテーマ「Stinger」ならはじめから設定されています。

div,pとspanの違い

div,pだと、囲まれたものは勝手に改行されてしまいます。spanだと改行されません。細かいことは置いておいて、そういうもんだと思っておけばいいんじゃないでしょうか。

画像のサイズ、圧縮

これも思い通りのサイズにならないとめんどくさいので最初にやっておくと楽です。私は途中で気づきました。

全部６００×４５０で良くね？

余程こだわりがない限り、画像サイズは６００×４５０で良いと思います。これぐらいが観やすい。あと、どうせスマホでばかり読まれるんですから、あまりにも縦に長いとちょっとうざいです。

管理画面の「設定」⇨「メディア」にいけば、設定出来ます。

サムネイル、中、大とあります。とりあえず中を６００×４５０にして、画像貼り付けのときに全部「中」にしてしまいましょう。

画像の圧縮

https://tinypng.com/

このページが楽です。ブックマークをお薦めします。

JPEGだろうが、PNGだろうが、グシャッと圧縮してくれます。ものによっては７０％圧縮出来たりします。一度圧縮した画像を更にもう一度圧縮することも出来ます。限界まで絞り取りたい人はやってみて下さい。

面倒臭がらずに、その都度やっておけば、結構な容量節約、ページ速度の向上につながります。

過去の画像は？

今まで何もしてこなかったよ、という人も救済処置があります。

昔の画像を圧縮するには、「ewww image optimizer」というプラグインで出来ます。

バズ部に詳しいことが書いてありますが、それほど複雑ではありません。インストールすると、管理画面の「メディア」のところに「Bulk Optimize」という項目が出来ているのでクリック。次の画面で「start optimaize」をクリック。これだけです。

まとめ

単語登録にある程度の長文を入れてしまうのもありだと思います。

「こんにちは、ラ・ニョイです」みたいな。
「申し遅れました。ハイパーブログ集客SEOマーケティングマスターの大日如来こと、ビシャモンテンです」みたいな。

だんだん、これいらなくね？と思い始める気がしますけど。

CSSは、やってりゃ色々覚えると思います。取り敢えず良さ気なページのソースを要素の検証を使ってこっそりコピペして、細部をいじっているうちに大枠を捉えられるようになるんじゃないでしょうか。

ブログで一番大事なのは記事を書くことです(だと思います)。余計なことで脚を引っ張られて、筆が進まないというのは勿体ないです。

まだやってない、という人はやってみて下さい。結構いいもんですよ。

最初にやるべき便利な設定は、他にもたくさんあると思います。これもあるよ、というのがあれば是非教えて頂きたいです。

こちらも合わせてどうぞ。
パーマリンク設定は、投稿名(/%postname%/)だけが一番無難です。