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

記事本文の余白、センタリング、両端揃い | カスタマイズ相談 | 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:

[解決済] 記事本文の余白、センタリング、両端揃い  


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月2日 23:44  

現在

             あいうえお

           かきくけこさしすせそ

            さしすせそなにぬねの

 

理想           

             あいうえお

             かきくけこ

             さしすせそ

コクーン を利用させていただき感謝しています。

画像のような感じで真ん中に文章を置いて、左右に余白を作りたいです。

また、行を揃えたいです。

現在、サイドバーを置いてないので真ん中にかけていますが、行がばらばらです。

ブログを始めて間もないので分かりやすく教えていただけるととても幸いです。

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


未解決
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月3日 19:45  

文字数がバラバラなので理想のようになりにくいと思いますよ。

センタリングしたいのか、行頭だけを揃えたいのか。よくわかりません。

  • あと記事entry-contentにある『段落だけ』を装飾したいって事ですか?
  • PC上でのみご覧になってますが、スマホ上では表示が変わると思います

どうしたいか具体的に言っていただいたうえで、該当URLをご提示いただけますか。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6487
わいひら - Facebookわいひら - Twitter
2019年6月3日 20:33  

キャプチャ画像の中でいうと、どの部分を中央寄せするのでしょうか?
「コンテンツの中身より~麻痺してしまったようです。」の部分でしょうか。


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 14:49  

具体的に説明できず申しわけございません。

画像の通り左右の余白が均等で、文章や見出しが中央に集まっているこのような状態にしたいです。

 


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 14:51  

今自分が書いている記事の画像です。

画像の通り、左の余白は少なく、右の余白が多すぎる状態になっています。

文字や構成をそのまま全体を右にずらして余白を均等にし、真ん中に集めたいです。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月10日 15:24  

具体的に説明できず申しわけございません。

画像の通り左右の余白が均等で、文章や見出しが中央に集まっているこのような状態にしたいです。

 

.entry-content {
	text-align: center;
}

https://gyazo.com/b71289c6862b534a601821c55a4b1ad7

こういう事ですか???

画像先のリンク

https://wp-cocoon.com/blogcard-types/

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

わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月10日 15:28  

今自分が書いている記事の画像です。

画像の通り、左の余白は少なく、右の余白が多すぎる状態になっています。

文字や構成をそのまま全体を右にずらして余白を均等にし、真ん中に集めたいです。

見出しかな?

下にボーダーがあるところ

大きくはみ出してるのが原因だと思います。子テーマのCSSなどさわっているのであれば、一度記載を削除して保存すれば普通に表示されると思います。

普通に表示されたら、子テーマのCSSが原因だった。ってことですかね。

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

わいひら 件のいいね!
k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 16:39  

囲みブログカードは全く僕の悩みと関係ないと思います。

画像の通り、黒の2本の縦線の間で文字をかいて縦線以外の左右のスペースは何も書かれていない余白にしたいだけです。

そのために具体的にどのような順序で編集するのかを教えていただきたいです。

ブログ初心者なのでわかりやすく教えていただけると助かります。

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月10日 17:14  

囲みブログカードは全く僕の悩みと関係ないと思います。

そこだけをみないで^^;

イメージが伝わってないです。

具体的に説明できず申しわけございません。

画像の通り左右の余白が均等で、文章や見出しが中央に集まっているこのような状態にしたいです。

 

画像の通り、黒の2本の縦線の間で文字をかいて縦線以外の左右のスペースは何も書かれていない余白にしたいだけです。

現状が以下画像ってことか?

チョット整理しただけです。


わいひら 件のいいね!
k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 17:22  

失礼しました。

そのようなイメージです

現状の記事がそちらです。

縦線をいれたのは理想を伝えたかっただけです


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月10日 17:22  

イメージが伝わってないです。

具体的に説明できず申しわけございません。

画像の通り左右の余白が均等で、文章や見出しが中央に集まっているこのような状態にしたいです。

何をされたいか考えてみたのですが。実際わかりません。メイン領域の幅を狭くして、その領域をセンタリングをしたいという事なのか?

もうしわけないですが、状態もやりたい事もイメージできません。

 

あと画像だけ見てても、HTML・CSSすら見えないのでなんとも言えない、また現状すら分かりません。

urlを置いてください。

不具合・カスタマイズ対象ページのURLを提示してください

***

考えてたら、書き込みがかぶってしまいました。URLをお願いします。

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

わいひら 件のいいね!
k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 17:32  

何のURLを置けばいいですか? 

僕のブログでしょうか?


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 17:36  

不具合カスタマイズ対象ページはどこにありますか?

どこにあるかわからないので載せれないです


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 17:39  

こちらが僕のブログのある記事の一部を切り取った画像です。

 


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 17:43  

こちらの写真は先ほど送った写真の編集したものになります。

左右の余白が均等でないことがわかります


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 17:45  

こちらの画像は理想を表す画像です。

縦線内に文章や見出しを入れて、左右の余白を均等にしたいです。


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 17:48  

こちらの画像はとあるブロガーさんの記事を切り取った画像です。

この写真のように左右均等の余白があり、見出しや文章が真ん中に集まりきれいにまとまっています。

このような記事にしたいとおもっています


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月10日 19:17  

何のURLを置けばいいですか? 

僕のブログでしょうか?

そうですね。カスタマイズしたいサイトのURLです。

不具合カスタマイズ対象ページはどこにありますか?

どこにあるかわからないので載せれないです

サイトをお持ちではないですか??

こちらの写真は先ほど送った写真の編集したものになります。

左右の余白が均等でないことがわかります

こちらは余白というより、文字列が短いからだと思いますよ。

長めの文字を入力したら、かわるので。

こちらの画像は理想を表す画像です。

縦線内に文章や見出しを入れて、左右の余白を均等にしたいです。

1カラムで設定されてるのかな?と思ったんですが、その情報はURLを置いていただけたら、すぐ分かるんですね。

どのような設定にされているかがサイト毎に違うのでカスタマイズのときはURLを置いてください。と言ってます。

こちらの画像はとあるブロガーさんの記事を切り取った画像です。

そうなんですね。勝手に画像をとって公開しているわけではない。と信じておこうと思います・・・

***

ザっと見た感じ


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月10日 19:18  

Cocoon設定・カラムタブから、コンテンツ幅を調整してみるのが良いかもしれません。

詳細が不明なため、一度お試しいただけますか。


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 19:24  

  https://yourplus.work

こちらが僕のブログになります。

コンテンツ幅というものをいじってみます


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 19:30  

コンテンツ幅とコンテンツ余白幅はどのくらいの数値にすればいいですか?


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6487
わいひら - Facebookわいひら - Twitter
2019年6月10日 19:54  

こちらのページなどは、左右の余白が均等になっているように見えますが、もっと本文部分のカラム幅を狭くして均等にするということですか?
https://yourplus.work/1%e3%83%b6%e6%9c%88%e4%bd%8f%e3%82%93%e3%81%a7%e5%88%86%e3%81%8b%e3%81%a3%e3%81%9f%e3%83%a6%e3%83%8b%e3%83%83%e3%83%88%e3%83%90%e3%82%b9%e3%81%ae%e9%83%a8%e5%b1%8b%e3%81%ab%e4%bd%8f%e3%82%80%e3%83%a1


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6487
わいひら - Facebookわいひら - Twitter
2019年6月10日 19:57  

本文幅を狭くするだけであれば、以下のコードを子テーマのstyle.cssにコピペすればできるかと思います(左右均等は既になっているので)。

.wrap {
width: 1000px;
}

k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 20:04  

ありがとうございます泣泣泣

これを求めていました

本当に丁寧にサポートいただきありがとうございました

 


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6487
わいひら - Facebookわいひら - Twitter
2019年6月10日 20:28  

現在設定されているカラム幅が2200pxになっているようなので、モバイルだとそのままCSSで指定した1000pxの横幅で表示されてしまうようです。

1000pxで設定するのであれば、以下のようにメディアクエリも追加する必要があるようです。

.wrap {
  width: 1000px;
}

@media screen and (max-width: 1004px){
  .wrap {
    width: auto;
  }
} 
This post was modified 3か月 前 by わいひら

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月10日 21:51  

PC大画面でいつも表示確認されてるようですが

ブラウザの画面を狭くした状態(モバイルでの見え方)も色々チェックしてみるのも良さそうですね。


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 21:54  

ありがとうございます。

もし、もう少し余白の幅を広げる時は、1000のすうじをへんこうすればよろしいでしょうか?


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月10日 22:05  

またかぶったようですね^^

その数値を変更すればOKですが、半角で変更してくださいね。

width: 1000px;

k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月10日 22:21  

試しに1000から500と2000に変えてみたのですが元の大きさに戻ってしまいます。

どうすればよろしいでしょうか?

いそぎませんので空いた時間に対応いただけると幸いです


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月11日 07:55  
@media screen and (min-width: 1500px) {
  .wrap {
    width: 1500px;
  }
}

どうなってるかわからないけど、とりあえず。

min-width: 1500pxとwidth: 1500px;の数値は同じ。


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月11日 11:20  

先ほど変更しましたが、余白がなくなってしまいました

https://yourplus.work


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3415
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年6月11日 14:38  

余白がなくなってしまいました

上で何度もかいてるのですが、『余白』の認識がちがってるんですね。

文字列が短いページの事ですかね?

横幅を狭くすれば、余白がちょうどいいとおもわれますか?

********

余白ではないけど、余白だと思われているページのURLをください。

その『余白』といわれる段落をクラシックエディタなどにいれてdivで囲んで装飾したらと思います。

以下HTMLは<div となるように段落を詰めてください。

<

div class="hoge">

短めの文字列をいれる

<

/div>

その記事下にあるカスタムCSSに以下を追記する。※widthの数値は半角で好みの数値に変更してください。

.hoge {
	width: 700px;
	margin: 1.2em auto;
}

わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6487
わいひら - Facebookわいひら - Twitter
2019年6月11日 19:24  

もし、もう少し余白の幅を広げる時は、1000のすうじをへんこうすればよろしいでしょうか?

「余白の幅を広げる」ということは、本文カラム幅を狭くするということでよろしいでしょうか?

例として、800pxにするのであれば、以下のように書けば良いかと思います。

.wrap {
  width: 800px;
}

@media screen and (max-width: 804px){
  .wrap {
    width: auto;
  }
} 

こちらの方法を採用してうまくいかなかった場合は、上記コードのみを採用した状態で、もう一度サイトの状態を見せてください。


k
 k
(@k)
ゲスト
参加: 4か月 前
投稿: 37
2019年6月11日 22:40  

わいひらさんのもので変更したら理想になりました

わいひらさん、かうたっくさん ありがとうございました

またわからないことがあれば’、お手数ですがよろしくお願いいたします。


わいひら 件のいいね!
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復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

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

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

Cocoon
  
動作中

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

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