こんにちは!
サイトのデザインに四苦八苦なほりっぴーです
初めてWordPressを使ってcocoonを入れてめっちゃ簡単にできた!と思っていたのですが、、
サイト名(ブログタイトル)の表示位置を変えるだけでこんなに苦労するとは・・><
同じ悩みを持つ人がいたら参考にしてもらえればと思います♪
![ほりっぴー](https://horippy.com/wp-content/uploads/2022/01/PSX_20220128_004013.jpg)
今回初めてCSSをいじったよ
サイト名がヘッダー画像のど真ん中に!?
サイト名をいれてヘッダー画像を設定しただけだと、↓の画像のようになってました・・泣
![](https://horippy.com/wp-content/uploads/2022/02/20220204-1-500x270.png)
葉っぱの上に文字がかぶってるぅぅぅううう
ちなみにスマホも同様でした(泣)
できれば葉っぱの上の空いているスペースに文字を移動させたいところです
文字を移動させる設定がない!?
絶対cocoon設定にあるはず!と思っていた自分が甘かった・・。
あれだけ高機能なんだからあると思うよね!?
『ヘッダー』の項目を何度見たことか・・。
とにかく、設定は無い。無いものは無い!
あきらめて調べているとCSSなる設定がいるとのことでした。
追加CSSに記載すればできた!
CSSってなんぞや??
というところは割愛します。デザインを変えてくれる設定という感じです。
というのもよくわかっておりません!(汗)
設定は下記のとおりです。
1. 外観 > カスタマイズ を選択
![](https://horippy.com/wp-content/uploads/2022/02/20220205_1-1-1.png)
2.追加CSSを開く
![](https://horippy.com/wp-content/uploads/2022/02/20220205_2-1-1.png)
3.設定を入力して保存する
下記のように入力します。
.header-in {
justify-content: normal;
}
.logo-text {
padding: 0px 0px 50px;
}
↓こんな感じですね
![](https://horippy.com/wp-content/uploads/2022/02/20220205_3-1.png)
.header-in を入れるとPCサイトはうまくいったのですが、スマホが変わらない・・
そこで .logo-text の設定をいれるとスマホもうまくいきました♪
![ほりっぴー](https://horippy.com/wp-content/uploads/2022/01/PSX_20220128_004013.jpg)
PCができたのにスマホが変わってなくて焦った・・
スマホのチェックも忘れないでね♪
劇的ビフォーアフター
↓ビフォー
![](https://horippy.com/wp-content/uploads/2022/02/20220204-1-1-800x432.png)
↓アフター
![](https://horippy.com/wp-content/uploads/2022/02/20220205_4-1-800x439.png)
無事画像に被らなくなりました♪
※スマホもしっかり確認しましょう!
さいごに
cocoonはチェックいれたり選択するだけでいろいろできますが、やっぱり細かいことは難しい設定を入れないとできないんですね(汗)
やり方ほかにもあるかと思いますが、とりあえずこれで表示したい形になったので満足してます^^
同じように困っている人がいたら参考になるとうれしいです!
最後までお読みいただきありがとうございました♪
ではまた!
コメント