Cocoonの設定でヘッダーに表示されるブログタイトルなどを非表示にする方法

ブログに役立つプチ知識
スポンサーリンク

本日もLibelulaBlogにお立ち寄りいただき、ありがとうございます。

前回から、
2つめのブログの編集過程をいくつかご紹介してきました。
ConoHa WINGのサーバーに独自ドメインを設定する方法
WordPressでサイト制作中 サイト全体や特定の記事を非公開にする方法
エラーを解決!ワードプレスで目次が2つ表示されてしまう!?

今回も、
前回の制作時には通らなかった(のか、忘れているのか)疑問にぶつかったので、
こちらの記事でご紹介していきます。

スポンサーリンク

ヘッダーに使用したい画像のサイズを合わせたい

ヘッダーで使用したい画像があったのですが、
サイズが全く合わず、
どうにもおかしなことになりました。

「Cocoon設定」でどうにかできないかと
見てみました。

「Cocoon設定」→「ヘッダー」をクリックします。

「高さ」と「高さ(モバイル)」に
数値を入力すると、ヘッダーの幅が変更できますので、
画像がうまく入る数値を調整しながら入力します。

ちなみに私の場合、
400で入力するとサイズがピッタリ合いました。

使用する素材によって
調整も変わってくるかと思いますのでご自身で確かめてみてください。

入力しましたら、
「変更をまとめて保存」のクリックをお忘れなく!

ヘッダーに表示されるキャッチフレーズを非表示にしたい

こちらの疑問も、
「Cocoon設定」から設定可能です。

先程と同じく、
「Cocoon設定」→「ヘッダー」をクリックし、
「キャッチフレーズの配置」で変更します。


「表示しない」を選択し、
「変更をまとめて保存」をクリックし、設定完了です。

≪変更前≫

≪変更後≫

キャッチフレーズが非表示になりました。

ヘッダーに表示されるブログタイトルを非表示にしたい

ブログタイトルを
「Cocoon設定」で非表示にできないかと思ったのですが、
どこを見ても設定につながるような記載は見当たりませんでした。

そこで検索してみたところ、
CSSを使った方法が分かりました。

CSSと聞くと難しそうですが、
設定はシンプルでした。

まず、
WordPressのダッシュボードから、
「外観」→「カスタマイズ」の順にクリックします。

次に、
「追加CSS」をクリックします。

そして、CSS入力欄が表示されますので、
下記のように入力します。

/*ブログタイトル非表示ここから*/
.logo-header{
display: none;
}
/*ここまで*/

実際に入力してみました。

入力完了しましたら、
上部にある「公開」ボタンをクリックし、設定完了です。

≪変更前≫

≪変更後≫

無事に反映されています。


以上、
ヘッダーに表示されるブログタイトルなどを非表示にする方法を
まとめました。

次回もまた、
ブログ制作で疑問に感じたことを記事にしたいと思います。