【小学生でもできる】Cocoonでサイトタイトルを左寄せにする方法

スポンサーリンク
【小学生でもできる】Cocoonでサイトタイトルを左寄せにする方法 ブログ
悩む女性

WordPressの無料テーマCocoonでブログを始めたけど、サイトのタイトルが真ん中にあるのは嫌だな…左寄せにする方法はあるの??

こういった悩みに答えます

 

本記事では、WordPressの無料テーマCocoonでサイトタイトルを左寄せにする方法を超簡単に解説します(コピペでOK!)

おまけとしてサイトタイトルの非表示方法も紹介します
タイトル以外にも応用できるのでお試しください!

スポンサーリンク

タイトルを左寄せにする方法

さっそくタイトルを左寄せにしてみましょう

まずCocoon設定を見てみると、ロゴ(サイトタイトル)の設定はセンターロゴかトップメニューしかなくここからではサイトタイトルの位置が変更できないことがわかります

cocoon設定の画面
 

ということでCSSでカスタマイズしていきます

CSSを追加する場所

CSSを追加できる場所は2つあります

外観 ▶︎ テーマエディター ▶︎ style.css

style.cssの管理画面

外観 ▶︎ カスタマイズ ▶︎ 追加CSS

追加CSSの管理画面
 

おすすめは2の方法です

理由は下記の通りです

テーマエディターで不具合が起こるとWordPress全体に影響が出るから

追加CSSから作業をするとリアルタイムでプレビューが見れるから

 

CSSにコードを追加

外観 ▶︎ カスタマイズ ▶︎ 追加CSS

の手順で追加CSSに行ったら下記のコードをコピペします

.logo-image{
 text-align:left;
}

これは”「logo-image」で囲われた範囲の文字列(画像も含む)を左詰めにする”という意味です

もし右詰めにしたければ下記のようにleftをrightに変更します

.logo-image{
 text-align:right;
}
 

するとセンターだったサイトタイトルが左寄せになります

ブログタイトルセンター

⬇︎

ブログタイトルレフト

これで終わりです!

 

おまけ:ブログタイトルを消す方法

最後にブログタイトルを非表示にする方法を紹介します

外観 ▶︎ カスタマイズ ▶︎ 追加CSS

の手順で進み、追加CSSに下記のコードを追加します

.logo-image {
 display:none;
}

display:none; とは非表示という意味ですので、他にも消したい項目があればクラスを指定して消すことができます

クラスはChromeのデベロッパーツール(検証機能)で探すことができます

 

いかがでしたか?

CSSを勉強するとググらずにロゴの位置やタイトルの色を変えることができます
ブログやサイトをもっと自分らしくカスタマイズしてみませんか?

CSSは1週間で基礎を習得できる簡単なフロントエンド言語です
詳しい学習方法は【独学でお金をかけずにプログラミングの基礎を習得する方法】にてHTMLの習得方法とともに公開しています


【ランキングに参加しています】
面白かった!参考になった!という方は下のボタンをクリックしてくれると筆者が喜びます!

ブログランキング・にほんブログ村へ 人気ブログランキングへ
ブログ
スポンサーリンク
この記事をシェアする
KANONをフォローする
kanonblog

コメント

タイトルとURLをコピーしました