現在デフォルトスキンとして「Season (Summer)」を適用中。

ヘッダーロゴ(ロゴを指定しない場合テキスト)の表示位置を変えたい | カスタマイズ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
ヘッダーロゴ(ロゴを指定しない場合テキ...
 
Share:

[解決済] ヘッダーロゴ(ロゴを指定しない場合テキスト)の表示位置を変えたい  

  RSS

kendox
 kendox
(@kendox)
ゲスト
参加: 2か月 前
投稿: 6
2019年6月12日 18:31  

初めてお世話になります。
wordpressでホームページを作るのは初めてで、全く手探り状態ですので、よろしくお願いいたします。

Cocoon設定のヘッダー設定を以下のようにしております。

  • ヘッダーレイアウト:センターロゴ(デフォルト)
  • 高さ:300
  • ヘッダーロゴ:指定している
  • ヘッダーロゴサイズ:幅300

そうするとパソコン表示で添付画像のようにヘッダースペースの真ん中あたりにロゴが表示されます。

これをウインドウの上辺の左右どちらかに表示するようにしたいのですが。
また、ロゴを指定しない場合、タイトルに設定しているテキストを表示するようになったいますが、その場合もウインドウの上辺の左右どちらかに表示するように、さらに文字サイズを任意に変更したいのですが・・・。
どこをどのようにすればよいのかさっぱり見当がつかず途方に暮れています。
ご教授をお願いいたします。
現在作成中のサイトは以下です。
https://mokkei-ksk.hzestate.com/

よろしくお願いいたします。

 

 

 

 


未解決
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年6月12日 21:01  

子テーマのstyle.cssに以下のコードを追記するとどうでしょうか?

.logo {
  text-align: left;
}

kendox
 kendox
(@kendox)
ゲスト
参加: 2か月 前
投稿: 6
2019年6月13日 07:53  

ありがとうございます。
ご教授頂いた通り、子テーマのstyle.cssに追記しましたが、少しは左に寄りましたが、希望は添付画像のように左上隅にぴったりと付くようにしたいのです。

また、ロゴを指定しない場合、タイトルと同じものが表示されるのですが、その文字サイズの指定もしたいのです。

よろしくお願い致します。

 

 


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3252
2019年6月13日 13:04  

https://mokkei-ksk.hzestate.com/

こちらのサイトですよね。テーマが違っているようで、Theme Name: Twenty Sixteen となってますよ。

HTMLとCSSを確認するため、一応テーマを有効化していただけたらと思います。

https://gyazo.com/909f3421a6d6785e1803fb4c0ae0d75f

This post was modified 2か月 前 by かうたっく

kendox
 kendox
(@kendox)
ゲスト
参加: 2か月 前
投稿: 6
2019年6月13日 13:24  

申し訳ございません。
元に戻しました。
よろしくお願いいたします。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3252
2019年6月13日 18:55  

https://gyazo.com/5cb4c8d605a6dbb8531908002edd9fed

完成図 ⇧PC ↓スマホ

https://gyazo.com/e4f8bbc37a2d46375ffa15f91c7c13b0

幅広げると

https://gyazo.com/e11c06d269f5da7e54c8de2436cff7fa

style.cssに貼り付けるスタイル

/*******************
* スマホビューの画像の高さ調整 *
********************/
@media screen and (max-width: 834px) {
	.header div.header-in {
		min-height: 150px;
	}
}
/*******************
* サイト名の位置調整 *
********************/
/* スマホビューのフォントサイズ */
#header .site-name-text {
	font-size: 15px;
}
/* サイト名を上・左に */
.site-name-text {
	position: absolute;
	top: 0;
	left: 5px;
}
/* PCビュー835px以上でフォントサイズを大きく指定 */
@media screen and (min-width: 835px) {
	#header .site-name-text {
		font-size: 20px;
	}
}

ビフォー

横幅小

https://gyazo.com/5cecdbace1058514fa0c8358f88a3406

https://gyazo.com/cefbb61ce44f5476542fb54ac65fa95f

とりあえず。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3252
2019年6月13日 19:11  

Cocoon設定のヘッダー設定を以下のようにしております。

  • ヘッダーレイアウト:センターロゴ(デフォルト)
  • 高さ:300
  • ヘッダーロゴ:指定している
  • ヘッダーロゴサイズ:幅300

そうするとパソコン表示で添付画像のようにヘッダースペースの真ん中あたりにロゴが表示されます。

これをウインドウの上辺の左右どちらかに表示するようにしたいのですが。

こちらのほうがキレイに表示されると思いますよ。cssも雑ですが。

⇧のCSSのようにスマホビューのフォントサイズ・PCサイズのサイズと指定すればもっと良いかもしれないですね。

https://gyazo.com/a743301f4b71c5eff62954034727822f

.logo-header {
	position: relative;
}

.site-name.site-name-text-link:before {
	content: "サイト名サイト名サイト名サイト名サイト名サイト名サイト名サイト名サイト名";
	position: absolute;
	font-size: 20px;
	color: #ddd;
}

わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3252
2019年6月13日 19:16  

#post-18155

背景画像の高さが足りないから下に余白が出来るんだと思います。

画像のバックアップをPCに置いておき、試しに両サイドをカットした画像をリネームしてCocoon設定・ヘッダー・背景に入れてみると、もしかしたらキレイに背景が表示されるかもしれませんね?


わいひら 件のいいね!
kendox
 kendox
(@kendox)
ゲスト
参加: 2か月 前
投稿: 6
2019年6月13日 20:36  

ありがとうございました。
思い通りになりました。
また、いつお世話になるかわかりませんが、その節にはよろしくお願いいたします。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年6月13日 22:46  

これをウインドウの上辺の左右どちらかに表示するようにしたいのですが。

さすがにこれで、「左上隅にぴったり」というのは無理があります…。そこまでは汲み取れないです。

一般的に、「上辺」というのは以下のような意味なので。

1 物の表面。おもて。外面。
2 内実とは違った見せかけのようすや事情。見かけ。外観。「上辺をつくろう」

https://dictionary.goo.ne.jp/jn/21398/meaning/m0u/

上という意味でとらえられたとしても、"上の辺り"なので、さすがにピッタリとは思いません…。
出来れば、誰が読んでも伝わるように書いていただけると助かります。


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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