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

プロフィールの肩書きラベルの文字サイズと色を変えて名前の下に表示させたい | カスタマイズ相談 | 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:

[解決済] プロフィールの肩書きラベルの文字サイズと色を変えて名前の下に表示させたい  


ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月16日 16:44  

「プロフィール」ウィジェットについての質問です。

サイドバーに「プロフィール」ウィジェットを表示させていますが、肩書きラベルの文字のサイズと色を変え、プロフィール画像下の名前の下に表示させたいと思っています。

具体的には、次のCocoonユーザーの方のページの「サイドバーではこんな感じ↓」という画像のように、上から下に順番で「プロフィール画像 → 名前 → 肩書きラベル → 1行くらい間隔を空ける → プロフィール本文」という状態にしたいです。

https://web-ashibi.net/archives/2827

よろしくお願いします。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3935
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年5月16日 16:58  

実際にどうしたいか、よく分からない。カスタマイズしたいURLを置いてください。

 


ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月16日 20:05  

かうたっくさん

こちらになります。
https://www.eevocablog.com/mail-magazine/

よろしくお願いします。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7358
わいひら - Facebookわいひら - Twitter
2019年5月16日 20:49  

僕もどのようなカスタマイズにしたいのかがわかりませんでした。

ただ、サポート対象外のものにもあるように、時間のかかるようなカスタマイズはノーサポートとさせていただいています。
一つ一つ、オーダーメイドで要望を聞いて、カスタマイズをするようなことはできないのでご了承ください。
複雑なカスタマイズは、クラウドソーシング等を利用してプロの方にご依頼ください。


ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月16日 21:20  

わいひらさん

最初のリンクのCocoonユーザーの方のプロフィール画像と全く同じように、次のような感じをイメージしています。

なお、複雑なカスタマイズがサポート外なのは承知しています(前回教えていただきました)。style.css に貼り付けるだけで変更できる簡単なカスタマイズなのか、それとも複雑なカスタマイズなのかが全く見当がつかず、まずは質問してみるようにしています。

複雑なカスタマイズをお願いするつもりは全くありませんので、その場合はお気軽に却下ください。


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

申し訳ないですが、私はおりますね❦


ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月16日 21:58  

申し訳なくではなく、気軽に降りて大丈夫ですよ。


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

あ、ありがとうございます。

わいひらさんに、申し訳ない気もしたんですけど、気軽におります!


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7358
わいひら - Facebookわいひら - Twitter
2019年5月16日 22:46  

CSSだけでやるとしたら、添付画像のような順番まではできます。

けれど提示された画像通りの順番にするには、冒頭のリンクにあったようなPHPのカスタマイズが必要になると思います(もしくはJavaScript処理が必要になる)。


ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月16日 23:14  

わいひらさん

ありがとうございます。では添付いただいた画像の順番で大丈夫です。
肩書きラベルの文字のサイズと色も変更可能でしょうか? また、名前/肩書きラベルとその下の本文の間に1行分くらいのスペースを入れる方法はありますでしょうか?

 


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

style.css に貼り付けるだけで変更できる簡単なカスタマイズなのか、それとも複雑なカスタマイズなのかが全く見当がつかず、まずは質問してみるようにしています。

最後に言っておこうと今決めたので、やっぱり書き込みますね。きっと回答サイドの気持ち:特に私が言ってもしかたないんだろけど。

無差別にご自身がやりたいカスタマイズを質問されたり、その内容がよくわからなかったり、回答した事が分からない、だから今度やって見ます。で放置。などされているんですね。今まで。

そのようなかたは滅多にいないので、返信して満足されたら良いんじゃないかと思い返信されるんだと思います。

けど、 ねいとさんが逆の立場で、そうされるとしんどくないですかね。逆の立場でもないから関係ない。と思われるかもしれませんが。

合間でやってる事なので、とりあえず今回はココだけお伝えっと。


ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月17日 14:49  

私も自分が詳しいソフトウェアについて他のフォーラムでいろいろな人に方法を教えていたことがありますが、マニュアルを見ても分からない人がいろいろ質問するのは当然ですし(それがフォーラムの目的ですので)、教えてあげた方法が相手にとって難しくてできなかったり、難しそうで今すぐにはできないと言われても不快に思ったことはありません(そのようなことで不快になる人を周りで見たこともありません)。

人にはそれぞれ事情があってできることとできないことがありますし、考え方も人それぞれです。ですので無理なお願いをするつもりはなく、できないことはできないと言っていただければそれで問題ありませんし、こちらも自分にできないものはそう回答するしかありません。

もし私の質問や返答の仕方が不快に思われる場合は、私の投稿はすべて無視するほうがいいと思います。私の方もわざわざそのような思いをさせてまで回答してほしいとは思っていませんし、せっかく教えていただいた方法が難しくて理解できなかったときにまた今回のようなご返事をいただくのは望んでいませんので。


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

マニュアルを見ても分からない人がいろいろ質問するのは当然です

マニュアルの件はそうですが、範疇を越えている人がいれば、声はかけると思います。今回はそれで声をかけました。

こういった事は滅多にない事であってほしいし、同じようなトピックが続くと対応が大変で困るので。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7358
わいひら - Facebookわいひら - Twitter
2019年5月17日 22:11  

こんな感じで子テーマのstyle.cssに追記すれば順番は変えられると思います。

.author-box {
display: flex;
flex-direction: column;
}

.author-thumb {
order: -1;
}

色変更はこちら。
http://www.htmq.com/style/color.shtml
文字サイズの変更はこちらです。
http://www.htmq.com/style/font-size.shtml

変更対象のCSSセレクターは以下の方法で取得できるかと思います。
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner


ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月18日 12:21  

わいひらさん

ありがとうございます。教えていただいた方法で順番を変更することができました。

3つめのリンクのCSSセレクターの取得方法についてのページですが、あのページはものすごく分かりやすく書かれています。あの内容を知っているかどうかで大違いというレベルですので、「テーマのカスタマイズ相談でフォーラムに書き込む際のお願い」のページにあのページへのリンクを貼り、まずは自分でCSSセレクターを探してカスタマイズを試み、それでも分からない場合に「カスタマイズ相談」のフォーラムに投稿するように案内するといいのではないかと思ってしまいました(自分が過去に立てたトピックのいくつかはあの方法を知っていれば自己解決できてご迷惑をお掛けすることもなかったと思います)。

なお、肩書きラベルの文字サイズと色の変更については、今のところ解決できていません。下の画面ショットのように肩書きラベルの箇所は特定できたのですが、element.style の下にある .nwa .author-box や .author-box に font-size を追加して変更すると、肩書きラベルだけでなくプロフィール本文の文字サイズも一緒に変わってしまう状況です。

これは恐らくサポート対象外の範囲だと思いますので、あとはもっと時間のあるときにもう少し勉強して再チャレンジしてみたいと思います。

なお、プロフィール名とプロフィール本文の間に1行程度のスペースを入れる方法については、あのCSSセレクター取得方法のページのやり方でセレクターを特定し、次のテキストを子テーマのstyle.cssに追記することで上余白を広げることができました(プロフィール本文の行間も狭く感じていたので併せて調節することができました)。

.author-box p {
margin-top: 1.4em;
line-height: 1.5;
}

 


わいひら 件のいいね!
ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月18日 14:36  

わいひらさん

ChromeやFirefoxで見ると次のように問題がないのですが、

Internet Explorer では次のようにプロフィール画像の下に大きなスペースが空いていることに気づきました。

原因が簡単に分かるようなものであれば教えていただけると助かりますが、そうでない場合はさすがにあのスペースは目立つと思いますので、順番を元に戻すしかないと考えています(順番を変えるテキストをstyle.cssから削除するとあのスペースはなくなります)。

 


草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 145
草村 - Twitter
2019年5月18日 16:07  

こんにちは。

余白の件に関して、Googleで検索したら出てきました。
IEのバグで↓こちらが原因だと思います。

flex-directionを指定した時に IE11で表示がおかしくなる | WEB PIXY

上記ページを参考に.author-thumbにmin-heightを指定すれば直ると思います。


わいひら 件のいいね!
ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月18日 17:09  

草村さん

ありがとうございます。教えていただいたとおり .author-thumb内にmin-height: 0%;を追加したところ、見事にあのスペースを消すことができました。本当にありがとうございました。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7358
わいひら - Facebookわいひら - Twitter
2019年5月18日 20:30  

肩書きラベル部分は、HTMLが書いてある部分のclassを見ればクラス名を取得できるかと思います。

こんな感じで書けばいけるかと思います。

.author-widget-name{
color: red;
font-size: 16px;
}

ねいと
(@neito)
Trusted Memberサイト
参加: 1年 前
投稿: 82
2019年5月19日 09:59  

わいひらさん

ありがとうございます。その方法で上手く調節することができました。

いろいろあってスレッドが少し長くなってしまいましたが、同じことがやりたい人には役に立つページになったと思います。

また、CSSセレクター取得方法のページのおかげで次に質問しようと考えていたカスタマイズを自分で行うことができました。

お忙しいところ本当にありがとうございました。


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

#post-16908

テーマ作成者がテーマ使用者のカスタマイズで
困った事を時間があれば助けられる範囲助けよう。が前提で

検索しても分からない事であろうって事。そして時間が許せばフォローできれば。って言う状況

※フォーラムは皆が意図せず、わいひらさん1人に質問してる状態。

  • 複数の回答者がいて。というフォーラムもあるけど、ココは回答するのは1人
  • フォーラムだから、何も悪気がなくカスタマイズ内容を決定してない状態での質問連発
  • それ当たり前でしょ!フォーラムなんだから!というスタンス

という状況。

その対応は全部テーマ作成者さん1人に行くけど、

リスト内容のように思われる人も中には居てもおかしくない❦

私の感覚と違った見かたで、それ以外の見かたが見えたない人が居ても良いかも。

自分が役に立てば、それ以外は関係ない。役に立たなくてもそのカスタマイズが完成しなかったと思えば良いし。他のカスタマイズ指南さえ受けられたら良い。

だって、『フォーラム』というのは、そういう場所という認識だって事。

って事がわかり、そのような考えがあるんだと勉強になりました


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

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

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

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

クーポンコード:Y2KIC92J9Y

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

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

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

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

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

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

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

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

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

Cocoon
  
動作中

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

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