Cocoonフォーラム

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

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

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

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

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

タグで分けたカラムの中で英文を書いた時...
 
共有:
通知
すべてクリア

[解決済] タグで分けたカラムの中で英文を書いた時にワードごとに改行させたい

21 投稿
3 ユーザー
4 Reactions
1,982 表示
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

こんにちは。素晴らしいテーマをありがとうございます。

あまりにも素晴らしいテーマなので、4つのワードプレス 全てで使っています。

その中で、英語で書いているサイトがあるのですが、タイトルのようにタグで分けたカラムの中で、1つの単語が区切られる形で行替えになってしまうので、ここが単語ごと改行されるようにならないでしょうか。

どうぞよろしくお願いします。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

その記事のURLをご提示ください。

独自カスタマイズであれば、基本上記の通りです。

https://gyazo.com/14dae6a665e3e16a3a5e3c8d3f879928

カンタンなカスタマイズであれば、対応してくれると思いますが

 

ただ、該当箇所のカスタマイズが

  • 状況が把握できないまま案内をすれば
    何度も繰り返すハメになり、書き込みが倍増してしまいます。
  • また、その結果を書き込まない人が後を絶たない
    など不誠実な書き込みもあったりします。

状況を見てもらっていただき、わいひらさん・書き込み主ともに
納得したうえでの返信を。と思います。

 

ご協力お願いします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

かうたっくさんと重複する形となってしまいますが、出来れば実際のページのURL提示していただいて「この部分」と詳細に書き込んでいただければと思います。
テキストだけでは、認識に大きな乖離が出てしまう恐れがあるので。

せめて、該当部分のスクリーンショット画像をいただければと思います。


   
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

現在作成中の記事のプレビュー のキャプチャになります。

the, an, takesなどが語の途中で行替えされてしまいます。日本語はスペースを伴わない言語なので、そういうことを気にしなくて良いのですが、英語のように単語ごとにスペースで区切っている言語は、1単語の途中で行替えしてはいけない(するとすると、シラベルで区切って-をつける)ので、普通のエディタのように、自動で1行のスペースの間などが調整されて自然に行替えされる風にはならないだろうか、と思いまして…

難しいでしょうか?よろしくお願いいたします。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

難しいです。

と、いうのもどの領域を。って指定がいるからで
結果URLの提示がないからです。

 

ただ。
ご自身でどこの部分で出力されている領域で、指定方法を変えることはCSSで可能だと思われますよ。

 

http://www.htmq.com/style/word-break.shtml

http://www.htmq.com/style/word-wrap.shtml

 

これを上手に使えば、URLの提示なしに、ご自身で解決できると思います。

 

 

解決できたさい、そのstyleを検索から入った人のためにも、書き込みいただけたら。

と思います。※URLの提示をしていただいた人にも同様のことを思ってやっているのをご理解いただけたら。と思います。


   
わいひら reacted
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

今までは、エディタの中で画像を置き、特にカラムで分けることなくテキストを書いてたので、
https://ana-platinum.club/en/kaiten-zushi-in-tokyo/
↑例えばこのように…

気づかなかったのですが、やはりPCで見た際に、画像の横に画像を説明する形でテキストを入れたいとタグでのカラム分けをしたところ、英単語が切れてしまったので、

cocoonの仕様として、エディタの他の部分と同様に自動で改行されるというわけにはいかないかな、と思いました。

たとえば上のキャプチャでは、4行目のSapporoなども切れてしまうため、自分でfromの後を改行したのですが、こういうことをすると環境によっては

...and only 40 km away
from
Sapporo so it takes...

などのように表示されてしまいます。

単純に、cocoonで日本語以外のヨーロッパ言語で書くことが想定されていないだけかと思いましたので、要望として出した次第です。

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

Cocoon自体は、日本語向けなので、そういった改行になっているのは今のところ仕様です。

というのも、そのようにしないと例えば以下のような長いURLを文中に挿入した時に、改行されないので、スマホなどで見ると画面が横揺れしてしまうという報告が相次いだからです。
https://wp-cocoon.com/community/demands/%e3%82%bf%e3%82%b0%e3%81%a7%e5%88%86%e3%81%91%e3%81%9f%e3%82%ab%e3%83%a9%e3%83%a0%e3%81%ae%e4%b8%ad%e3%81%a7%e8%8b%b1%e6%96%87%e3%82%92%e6%9b%b8%e3%81%84%e3%81%9f%e6%99%82%e3%81%ab%e3%83%af%e3%83%bc/

ただ、Cocoonも2.0以降、まがりなりにも英語翻訳ファイルを作成して一応の英語対応はしたので、その部分は改行されないように変更しようと思います。
長いURL等が、改行されなくて横揺れするようにはなりますが、本来ユーザーの利便性を考えるのであれば、URLを書くのではなくテキストを書いてリンクする方法を推奨しようと思います。

変更したファイルはこちら。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

長いURL等が、改行されなくて横揺れするようにはなりますが、本来ユーザーの利便性を考えるのであれば、URLを書くのではなくテキストを書いてリンクする方法を推奨しようと思います。

ホントこれですよね。

URLを見せたい場合、そのようにする傾向はあると思います。

 

おそらく対応済みだとおもうので、対応した場合

数年前それで横揺れを体験したユーザー←私も、長い文字列にはスペースを用いて工夫する(文字列のいい場所に半角などのスペースをいれるなどする)しかないと思います。

それでわいひらさんの言う通り
リンクのほうで対応していただくとか。
もしくは。例えば、引用しているのにリンクしたくない人がいるので
その人は、半角スペース対応では、おそらく
コピペ検索でヒットしないものになるかと思います。


   
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

わいひらさん、どうもありがとうございました!!


   
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

度々申し訳ありません。

FTPでアップロードしたのですが、変わってないように思います。(ワードプレスでログインもし直してみたのですが…)

それとも子テーマのフォルダの中のstyle.cssを上書きすべきですか??


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

https://ana-platinum.club/en/kaiten-zushi-in-tokyo/

このページを見るとはみ出している形跡がみあたりません。

  • どこのページのどの文字列を見てるのか、教えていただけますか。

~~追記~~

はみ出している記事のURLを貼ってください。との意味です。

~~~~~~

 

そのほかざっと見て、気にならない場合は、

  • 該当箇所をチェックする必要がありそうだからです。

 

それとも子テーマのフォルダの中のstyle.cssを上書きすべきですか??

子テーマの上書きは基本しません。カスタマイズした箇所・phpファイルも含めて全て初期状態にもどるからです。

 

子テーマのstyleなどのチェックを行いたい場合、子テーマのstyleを全コピペして、Editorで保存。←バックアップをとってチェック。
影響があれば、どの場所のstyleがおかしいかを、コピペ・削除を繰り返すと特定できますよ。

その他カスタマイズがあれば、一時的に親テーマを有効化してみる。
それで影響がない場合、Cocoon設定で行った設定なども含め子テーマ側に問題があるとわかるので、原因を特定する感じです。

この投稿は5年前ずつかうたっくに変更されました

   
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

いえ、まだ既に更新してる記事でタグでカラムわけをしていないので、上でキャプチャーを出したように、今書いている記事のプレビュー で見ても、単語が区切られてしまったままです。

テストの投稿ページを作りましたので、プレビューのURLはこちらです。

https://ana-platinum.club/en/?p=497&preview=1&_ppp=17b270238b


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

プレビューでは管理者しかみえません。

 

ちょっと状況が不明なので何とも言えないかもです。


   
わいひら reacted
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

公開プレビュー にチェックしてますが、時間が経つと見えなくなるようですね。

既にあげたキャプチャと同じ現象を画像とテキストを変えてるだけですが、スクリーンショットです。

 

 


   
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

あと、わいひらさんには既に通じているお話だと思います。

ですので、わいひらさんがその仕様を変更してアップデートされたと案内してくださったので、FTPでアップロードしてみたけど、変更されてないので、そのご報告をさせていただいてる形です。

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

環境情報をいただけますか。アップデートがうまくいっていないように見えます。
https://wp-cocoon.com/theme-report/
あと有効期限があるものならば、僕もいつ見れるかわからないので、出来ればプレビューではなく公開ページにしておいていただけると助かります。
問題解決後は削除しても構いませんので。


   
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  
度々ありがとうございます。よろしくお願いします。
---------------------------------------------- サイト名:Make your trip to Japan PERFECT サイトURL: https://ana-platinum.club/en ホームURL: https://ana-platinum.club/en コンテンツURL:/wp-content インクルードURL:/wp-includes/ テンプレートURL:/wp-content/themes/cocoon-master スタイルシートURL:/wp-content/themes/cocoon-child-master 子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css スキン:/wp-content/themes/cocoon-master/skins/skin-mixgreen/style.css WordPressバージョン:5.3.2 PHPバージョン:7.2.24 ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36 サーバーソフト:LiteSpeed サーバープロトコル:HTTP/1.1 エンコーディング:gzip, deflate, br 言語:ja,en-US;q=0.9,en;q=0.8,fr;q=0.7 ---------------------------------------------- テーマ名:Cocoon バージョン:2.0.4.1 カテゴリ数:7 タグ数:0 ユーザー数:1 ---------------------------------------------- 子テーマ名:Cocoon Child バージョン:0.0.5 ----------------------------------------------

   
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

とりあえず2017年ということにして公開してみました

https://ana-platinum.club/en/test/


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

バージョン:2.0.4.1

現在、以下からダウンロードした場合は、2.0.4.3になるはずです。
https://github.com/yhira/cocoon
上記のページのダウンロードボタンからダウンロードされましたか?
手軽な方法として、cocoon-masterフォルダ直下にあるstyle.cssだけを上書きでも、今回の不具合は改善されるかと思います。

子テーマはさわらない方が良いかと思います。


   
(@マダムSFC)
Active Member
結合: 5年前
投稿: 11
トピックスターター  

遅くなりました。

ローカルに保存してたファイルからstyle.cssのみアップロードしたら、修正されました!

なぜフォルダごとアップロードして直らなかったのか謎ですが、お騒がせしました。

これで安心して、これからバンバンカラム分けしていきたいと思います!

本当にありがとうございました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

ご確認ありがとうございます。
うまくいったようで安心いたしました。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

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

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

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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