【Cocoon】ブログ初心者でもできる『ヘッダーロゴ』のおしゃれなカスタマイズ【コピペでOK!】

WordPress ヘッダーロゴのカスタマイズ

こんにちは、yujiです!
このブログでは、WordPressを使ったブログ運営について詳しくまとめています。

「ブログ初心者なりに、ヘッダーのロゴをおしゃれにカスタマイズしたい!」

この記事では、以上のようなブログデザインについての質問に答えます。

このブログではWordPressテーマのCocoonを使っていますが『ヘッダーロゴ』は以下のようなデザインにしています。

Cocoonヘッダーロゴデザイン

Cocoonヘッダーロゴデザイン

このように、ブログの印象に大きく影響するのがヘッダーロゴです。

この記事にまとめた方法で以上のようなCocoonのヘッダーロゴを再現できるので、参考にしていただけたらと思います。

Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方もいると思います。
変更点の詳細とその攻略法を、以下の記事に詳しくまとめました。

【2020年最新攻略法】Amazonアソシエイトの審査方法が変わる!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。

【審査承認されたので解説】2020年最新Amazonアソシエイトの審査方法!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。
2020年3月以降のAmazaonアソシエイト審査方法変更点と、その攻略法を詳しく紹介します。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方の参考になるかと思います。

【年収7ケタ突破】僕のブログの収益化方法まとめ【大変だけど、ちゃんと稼げる】
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!

ヘッダーロゴの設定方法。

Cocoonヘッダーロゴデザイン

Cocoonのデフォルトではこのようなシンプルなデザインになっています。

ヘッダー設定

Cocoonヘッダーロゴデザイン

WordPressメニューから「Cocoon設定」を開きます。

Cocoonヘッダーロゴデザイン

「Cocoon設定」から「ヘッダー」タブを選択し、上から順に設定していきます。

Cocoonヘッダーロゴデザイン

ヘッダー設定
ヘッダーレイアウト
・センターロゴ(デフォルト)
ヘッダーの固定
・チェックしない
高さ
・なし
高さ(モバイル)
・なし

Cocoonヘッダーロゴデザイン

ヘッダー設定
ヘッダーロゴ

・「選択」から表示する画像をアップロードします。(背景透過がおすすめです)
ヘッダーロゴサイズ
・横幅のみ入力します。ページを確認しつつ微調整します。
キャッチフレーズの配置
・表示しない
ヘッダー背景画像
・なし

Cocoonヘッダーロゴデザイン

ヘッダー設定
ヘッダー全体色

・デフォルトのままでOKです。
ヘッダー色(ロゴ部)
・ロゴエリア背景色…好きな色を指定します。
・ロゴ文字色…デフォルトのままでOKです。

Cocoonヘッダーロゴデザイン

上記のように設定できたら「変更をまとめて保存」でヘッダー設定は完了です。

モバイル設定

Cocoonヘッダーロゴデザイン

続いて「Cocoon設定」の「モバイル」タブを選択します。

Cocoonヘッダーロゴデザイン

モバイル設定
モバイルメニュー
・ヘッダーモバイルボタン
モバイルボタン
・サイトヘッダーロゴを表示する
・モバイルボタン時コンテンツ下のサイドバーを表示

以上を保存して、モバイル設定は完了です。

スタイルシートにコードをコピペします。

Cocoonヘッダーロゴデザイン

「外観」から「テーマエディター」に進み「style.css」を開きます。

Cocoonヘッダーロゴデザイン

スタイルシートに以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。

スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取りましょう。
・編集するテーマが「CocoonChild」になっていることを確かめましょう。
・「@charset “UTF-8”;」から始まる最初から入力されている部分には触れないようにしましょう。

スタイルシートにコピペするコードはこちらです。

コード
/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){/*トップページモバイルボタンの真下にスペースを作る*/
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;
}
.logo {
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){/*835px以上で非表示にすると空白ができるので埋める*/
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{/*835px以上でモバイルヘッダーを非表示*/
display:none;
}
}
@media (max-width:834px){/*835px以上でヘッダーを非表示*/
.header-container {
display:none;
}
img.site-logo-image{/*モバイル表示ロゴ*/
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
}

Cocoonヘッダーロゴデザイン

コピペができたら「ファイルを更新」をクリックします。

これでヘッダーロゴのカスタマイズは完了です!

デザインを確認します。

Cocoonヘッダーロゴデザイン

Cocoonヘッダーロゴデザイン

このように表示されていればOKです!

「うまく表示できた方は、以下のモバイル版も試してみてください!」

モバイル表示版ヘッダーメニュー

ヘッダーメニューのモバイル表示版カスタマイズを、以下の記事で紹介しています。

Cocoonのモバイル表示版のトップメニュー

Cocoonのモバイル表示版のトップメニュー

このように統一性のあるデザインにすることで、まず読者にとって読みやすく、良い印象を与えることができます。

【Cocoon】初心者でもできる『モバイル表示版ヘッダーメニュー』のおすすめカスタマイズ【コピペでOK!】

【Cocoon】初心者でもできる『モバイル表示版ヘッダーメニュー』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『モバイル表示版ヘッダーメニュー(グローバルメニュー)』をカスタマイズします。すべてコピペでOKなので「初心者なりにブログをおしゃれにしたい!」という方にもおすすめです。

このブログでは、以上のようなWordPress/Cocoonを使ったブログでのオリジナルカスタマイズを他にもたくさん紹介しています。

すべてコピペでOKなので、初心者の方にもおすすめです。興味のある方は以下の記事からどうぞ!

【コピペでOK!】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル【WordPress】

【コピペでOK!】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル【WordPress】
WordPress/Cocoonを使ったブログでのオリジナルカスタマイズを紹介します。すべてコピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

また、僕は独学でプログラミングを習得しました。

そのスキルを記事にしてシェアした結果、yujiblogはWordPress/CocoonでのWEB制作をしたい人向けに、よく検索されるブログとなりました。

cocoon検索1位

おかげさまで検索上位をキープしつつ、順調にアクセス数が伸びています。

そこで、プログラミング未経験の僕が独学でWEB制作を学んだ方法について、以下の記事でまとめてみました。興味のある方はどうぞ!

【経験者は語る】ブログ運営に必要なプログラミングスキルは、すべて独学可能です

【簡単】ブログ運営に必要なプログラミングは、すべて独学可能です
プログラミング未経験の僕は、独学でWEB制作を学びました。プログラミングは難しいイメージがありますが「独学でもcssを極められる」と思います。デザインを整えると読者の満足度が高まり、年収7ケタのブログになりました。

この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました!

【年収7ケタ突破】僕のブログの収益化方法まとめ【大変だけど、ちゃんと稼げる】
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!
【もしもアフィリエイト】初心者でもできる『かんたんリンク』のおしゃれなカスタマイズ【コピペでOK!】
【利用者が増えている理由とは?】『もしもアフィリエイト』を実際に使ってみた感想【口コミ・評判・メリットまとめ】
【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!

コメント

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