WordPress-導入直後にやるべき設定とCSSのカスタマイズ

ここではWordPressインストール直後にやったことをご紹介します。

サイトは当初無料テーマのTwenty Sixteenを使用していました。

wordpress導入後何やれば良いのか悩む方へ、ここを押さえておけば最低限の設定を理解することが出来ます

【超重要！】テーマの設定

ここで選択するテーマによってその後の労力が大きく変化します！！

このサイトは当初、公式のテーマTwenty Sixteenを使用していました。
公式なので安心なのかな、という安直な理由です。

デフォルトの設定で満足できればよかったのですが、モバイルに対応させたい、見た目を変えたいなど初心者が行うカスタイマイズには非常に不向き。

それでも何とかしようと後半は知識ある夫が何とかしてくれましたが、それにも限界があり、最終的には有料のテーマを購入しました

テーマをまとめてあるサイト

自分が作成したいサイトの目的によって欲しいレイアウトが異なるので色々みて見るといいと思います

TechAcademyマガジン

初心者におすすめ！無料・有料で使えるWordPressのテーマ30選【日本語対応のみ】

https://techacademy.jp/magazine/1172

WordPress（ワードプレス）初心者におすすめする【無料テーマ（テンプレート）】を紹介する記事です。全て日本語に対応。SEOに強いテーマや、テーマのカスタマイズに最適なテーマなど全部で30紹介しています。

サルワカ | サルでも分かる図解説明マガジン

【2018年版】おすすめのWordPressテーマ51選：無料と有料まとめて紹介

https://saruwakakun.com/html-css/wordpress/theme

おしゃれなWordPressテーマを厳選して紹介します。無料テンプレートも多数あり。「SEO対策をしやすい」や「ポートフォリオ向け」などジャンル別にまとめています。

子テーマの設定

テーマのアップデートに影響を受けないために設定を推奨されている子テーマ。

かわいいキャラでわかりやすく解説されています。

Webクリエイターボックス

子テーマを作ってWordPressの既存テーマをカスタマイズする方法

http://www.webcreatorbox.com/tech/wordpress-child-theme/

いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存

アバターの設定

外部Gravatarを使用してオリジナル画像を設定。

ちなみにWordPressのアカウントでつくることも出来るが単独の画像管理ソフトなだけなので独自のアカウントを作成しても支障はなかったです

www.adminweb.jp

Gravatarを利用した独自アバターの設定 - WordPressの使い方

https://www.adminweb.jp/wordpress/comment/index10.html

コメントの横に表示される画像をアバターと呼びます。このアバターの画像は表示しないこともできますし、別の画像を表示させることもできます。またGravatarという外部のサービスを利用して自分独自の画像を表示させることもできます。ここではコメント欄で使用されるアバターの設定方法について解説します。

パーマリンクの設定

こちらを参考に
/%category%/%postname%
にしてます

株式会社LIG

WordPressのパーマリンク設定を変更して、SEOや日本語URLの対策をしよう | 株式会...

https://liginc.co.jp/web/wp/customize/148458

Webサイトの根幹に関わる要素の「パーマリンク」は、初期段階で構成を決定した方が良いと言われています。一体どんなパーマリンクが理想的なのか、なぜ重要なのかを紹介します。WordPressのパーマリンク設定を変更して、SEOや日本語URLの対策をしましょう。

CSSを編集

記事を書くにあたりやはり気になるのが見た目。そうなるとどうしてもCSSをいじる必要が出てくる。

Webなんて学生時代に少々かじった程度の私が四苦八苦しながら設定しました。

CSSを編集前の注意

フォントの設定

これは一番初めに気になったところです。

Twenty Sixteenの初期設定は明朝体。

なじみが薄いので編集してみました。

参考にしたのはこちらのサイト。

元ひきこもり主婦が在宅PC1台で子供の留学費用を稼ぐ現旅行人ブログ

ワードプレスブログの文字フォントを変更して印象をガラっと変える！スタイルシー...

http://hwbase.com/archives/1575

  「ワードプレスの文字フォントが 気に入らない！」 というときにフォントを変更する方法を ご紹介します。     ワードプレスをインストールして ウキウキ自分のブログを見...

Twenty Sixteenではここに入れます

ダッシュボードの外観＞テーマの編集を開きます。

更新した（F５キー）が変化なし、、

悩みました。記述が悪いのかと色々探しました。

その結果どうやらキャッシュが悪さをしているようというわけでキャッシュを削除したら無事に更新されました。

Chromeのキャッシュ削除方法

いちいちアクセスするのが面倒くさいのでClearCashというChromeのプラグインを入れて作業にあたっています

本当にここに行き当たるまでに時間がかかりました。

こちらはトライ＆エラーに時間がかかったところです。気に入った形、色などを色々試す感じですね。

「見出し　CSS」で検索をかけるといっぱい出てきます

■テンプレートは主にこちらを参考に

サルワカ | サルでも分かる図解説明マガジン

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

https://saruwakakun.com/html-css/reference/h-design

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

■カラーコードはこちらを利用

html-color-codes.info

HTMLカラーコード

http://html-color-codes.info/japanese/

HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

Twenty Sixteenではここに入れます

ｈ1はHPタイトルに使用
ｈ２は記事のタイトル及びウェジットの項目に使用されていました

コピペユーザーの私は元のソースを極力いじりたくないため、影響の少なそうなh2～ｈ5のみを改変。

最終的にはこんな感じです

不安であれば「/* 文字列*/」で囲い、コメントアウトで元のソースを残しておく
というのも一つの手ですね。

出来れば時間をかけたくないところ

メインは記事作りなので、こういったカスタマイズには時間をかけたくないですよね。

痒いところに手が届くのが有料テーマであり、ユーザー数も多いものはちょっと検索をかけただけでも出てきます。

お手軽に始めるならOPENCAGEシリーズ

ユーザー数も多く、情報も探しやすいSTORK

ほんわりかわりいデザイン「SANGO」

SANGO

SANGO｜心地良さを追求したWordPressテーマ

https://saruwakakun.design

WordPressテーマSANGOのデモページです。

上記2つは私が（勝手に）師事しているブロガーさんもおすすめしています

反省と自戒。初心者がブログを運用するまでの流れと登録したASP

2017.6.11

予備知識を入れずに100記事以上書き上げてから、「ブログを作成するには」といったノウハウ情報を目にし、修正作業に大変な目にあっている私の経験談を踏み台に、ブログ作成の流れと事前にやるべきこと確認して、自分に合ったブログ作成をするきっかけになってもらえればと思います。 ブログを作成したいけど、まずは...

このサイトの現在のテーマ「DIVER」

お世話になってます

初心者でも素敵レイアウト! WordPressテーマ・テンプレートに「DIVER」がおすすめの理由！

2018.1.6

WordPressテーマDIVERについてのご紹介です。色々なテーマがある中、私がDIVERへ移行した理由とその後のDIVERに変更してからのサイトの変化、よく利用している機能について。 この記事は テーマを変更して、良い方向に転化した感動を皆様にお伝えしているだけの記事です。 ブログを初めて半...

散々カスタマイズに苦労したので、有料でも惜しくは無い断言できます！