【WordPress】Cocoonのサイトロゴを左寄せにする方法

Cocoon

今回もCocoonのカスタマイズです。
カスタマイズ記事は、自分が忘れないようにしているという備忘録的な意味もあります。

今回はヘッダー部分にあるサイトロゴを左寄せるカスタマイズです。
右寄りにもすることが出来ます。(あまり需要ないと思いますが・・・)

それでは行きましょう!

コチラの記事でCocoonのカスタマイズ記事をまとめています。

【高機能すぎる】無料テーマCocoonのカスタマイズまとめ!
高機能なWordPressテーマ「Cocoon」 なんだったら、カスタマイズなんて必要はないですが、やはり多少はカスタマイズしないと個性があまり出ないような気もします。 そのため、当ブログで細かいカスタマイズ記事を少しずつ書いていま...
スポンサーリンク

子テーマを使用しましょう

カスタマイズをするので子テーマを使いましょう!
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、 「子テーマ」というものがあります。 ブログを書き始めた方の場合や、 WordPressを使い始めた方の場合は、 「子テーマ?なんだそれ」とか 「親テーマにそのままコードを書けばいいじゃん...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、 子テーマの重要性について説明しました。 今回はその子テーマの導入方法と、 使い方についてご説明します。 子テーマを導入する! 子テーマを導入する方法は2通りあります。 1つは親テーマと一緒にダウ...

Cocoonの子テーマ導入方法はこちらの記事で紹介しています。

【初心者向け】Cocoonの導入方法と子テーマの使い方だよ!
高機能無料WordPressテーマ「Cocoon」 3月頃からβ版が公開され、作成者である「わいひら」さんが、利用者の意見を広く取り入れ、先月7月から正式公開となりました。 β版は会員登録をしなければ、ダウンロードできませんでしたが...

デフォルトは中央

デフォルトの状態だとロゴは中央にあります。

ちなみにCocoonの管理画面から多少は設定することが出来ます。
以下の部分で設定できます。

ここでも設定できますが、ロゴを左端に、メニューをその横にというような設定しかできず、通常の状態から単純にロゴだけを左端に移動させるということはできません。

そんな時には自分でカスタマイズするしかありません!

コードを追記

左端にしたい場合は、以下のコードをstyle.cssに追記します。

.logo{
	text-align:left;
}

以上です。
簡単ですよね。

ちなみにこのコードでこのようになります。

ロゴだけ左に寄りました!

コピペも良いですが・・・

Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント