WordPressで「記事タイトルの位置を変更したり、フォントサイズを変更したい」というご相談を頂きました。
WordPressに限らずHPのデザインの微調整には、CSSの知識が必須です。
CSSを学べば様々なデザインを自分で修正できるようになります。CSSの調べ方や役に立つサイトをご紹介したいと思います。
目次
記事タイトルの位置変更・デザイン調整をしたい
はじめまして。WordPress 4.9.2でサイトを始めたばかりの初心者です。
記事タイトルの位置を変更したり、フォントサイズを変更したいのですが、色々検索して調べてみましたが子テーマのcss編集にて、調べた情報をコピペしても変更されません。
今のタイトル表示だと、折り返しの文章が中途半端に真ん中にきてしまっているので、左端に揃えるか、フォントサイズを小さくして、文字全体のバランスを整えたいです。
それとサイトタイトルの上下の幅ももう少し狭くできたらと思っているのですが。
大変恐縮ですが、ご教示いただけますと幸いです。
宜しくお願いいたします。
＞fumi様
コメントありがとうございます！
サイトも拝見しました。
残念ながら、全ての情報をお教えすることは”作業”になってしまいます。こちらの掲示板では”調べ方” ”自分でカスタマイズする方法”のヒントとなる情報を提示できればと思っております。（ご依頼いただければもちろん可能です）
・位置変更（左右中央揃え）
・フォントサイズ
・サイトタイトルの上下の余白
など、CSSを調べれば記述方法は分かると思います。
＞子テーマのcss編集にて、調べた情報をコピペしても変更されません。
これについては、テーマが違えば方法も違います。
記事タイトルだと、.entry-content h1 {} や h2 などで解説されている記事も多いかもしれませんが、見たところプラグインかテーマ独自のスライダーではないでしょうか。
このようなケースの場合、「記事タイトル 調整」で調べてもマッチする情報は出てこないでしょう。
「class」「id」、現在適用されているCSSの調べ方 開発者ツール
・CSSを適用する
・どんなCSSが適用されているか調べる
ためには、ブラウザの開発者ツールを利用しましょう。
Google Chromeでは右クリック＞要素を検証 で、右クリックした部分のHTML構成（class id）・適用されているCSSを確認できます。
<div class="aaa"> <p>赤くしたい</p> </div>
の文章(pタグ)を赤くしたいなら
.aaa p { color:red; }
となります。
<div id="bbb"> <p>赤くしたい</p> </div>
の文章(pタグ)を赤くしたいなら
#bbb p { color:red; }
となります。
idなら『#』シャープ
classなら『.』ドット
と覚えましょう。
#aaa p なら、”aaaというIDが付いたタグの中にあるpタグ” という意味になります。
CSSの優先順位や、適用方法については色々なサイトで解説されていますが、僕のおすすめはこちらです。
http://www.htmq.com/style/
テキストの位置変更（左右中央揃え）なら text-align
フォントサイズは font-size
サイトタイトルの上下の余白は、margin や padding
を調べればカスタマイズ可能かと思います。
CSSの適用方法・カスタマイズについては、先日このようなご質問も頂きました。参考になるかもしれません。
WordPressの記事ページのみにカスタマイズCSSを適応させたい
その他WEBサービス
外注をお考えであれば、クラウドソーシングや、ココナラのようなサイトが良いかもしれません。
プロに頼めば、1万円もかかるような内容では無いと思いますよ。
・悩む時間がもったいない
・調整は任せてコンテンツ作りに注力したい
ということであれば、このようなサービスも利用してみてください。
ランサーズ
ココナラ（500円～の依頼があります。WordPressの場合はもっとすると思いますが･･･）
他、ストリートアカデミー（ストアカ）というサービスでは、WordPress関連の講座も多数開催していました。
ストリートアカデミーでWordPressの講座を探す
もちろん、ご依頼頂ければ当方でも可能です。
ご参考になれば幸いです。