前略、ソレガシ さん

投稿者:: @soregashi

私は今現在、サイドバーのプロフィールと、このショートコード（[author_box label=""]）で表示できるプロフィールの部分をカスタマイズしたいと考えているのですが、他サイトで「Cocoonのプロフィールボックスをカスタマイズ」とうたっている記事を読んでも、ショートコード（[author_box label=""]）に合わせてカスタマイズされているものはありません。

ローカルのテストサイトで、ショートコードでメインカラムにプロフィールを表示させてみたら、プロフィールウィジェットのHTMLの構成とクラスセレクタが同じみたいに見えます。

と、いうことは、もしかしたら、【他サイトで「Cocoonのプロフィールボックスをカスタマイズ」とうたっている記事】のデザインも使えるのでは？と、安易な考えが、ふと、よぎりました次第です。

もっとも、【他サイトで「Cocoonのプロフィールボックスをカスタマイズ」という記事の中に、メインカラムにウィジェットを設定した場合の記事が含まれていない場合は、自分でCSSを書かないとなりませんが・・

@leafytree 記事ではこのように書かれていますね→ https://web-ashibi.net/archives/2625

「サイドバーだけにプロフィールを表示する場合」で設定してみたところ、ショートコードではSNSボタンのみが変化したデフォルトの装飾になってました。「記事下だけにプロフィールボックスを表示する場合」を設定してみると、当たり前ですが、記事中の「記事下のメインカラムでのスマホ表示」での装飾となってます。

しかし、僕はこれを「記事下のメインカラムに表示する場合」で示された横長のタイプで、かつスマホの画面サイズに合うように設定したいのです。が、ここでCocoonのレイアウトをほかのテーマに似せたレイアウトにしたいというのは、よく考えたら失礼ですね…返信ありがとうございました。

@soregashi さん

投稿者:: @soregashi

しかし、僕はこれを「記事下のメインカラムに表示する場合」で示された横長のタイプで、かつスマホの画面サイズに合うように設定したいのです。が、ここでCocoonのレイアウトをほかのテーマに似せたレイアウトにしたいというのは、よく考えたら失礼ですね

いえいえ、おそらくですが、そんなことはないと思います。

いま、ちょっと詳しく見れないので、後で、また見てみます。

@soregashi さん

こちらのページ

【Cocoon】プロフィールボックスをSANGO風にカスタマイズ

の「記事下だけにプロフィールボックスを表示する場合」のCSSに以下のCSSを追記して

#main .author-thumb img {
    border-radius: 50%;
}

以下のショートコードでやってみたら、

[author_box label="リフィトリー"]

それっぽく？できました。

以下の順に画像を添付してみますね。

PC表示

スマホ表示

真ん中あたりの、紫のボタンも設置しようと、前述のページに書かれているとおりに、やってみたのですが、PHPの記述がfunctions.phpに上手く保存できませんでした。

@leafytree 変更箇所はアイコン画像の円型化ですね。これもやりたかったです。ありがとうございます。

捕捉として、私がスマホ版でやりたいことのイメージを添付させていただきます（説明が下手で上手く伝わっているか不安だったため）

「記事下だけにプロフィールボックスを表示する場合」ではプロフィールボックスの形がPC版（横長）、スマホ版（縦長）で形が違いますが、私は添付した画像のようにPC版で表示される横長のボックスを、スマホ版でも再現したいと考えています。（※ただ、そのままの縮尺ではアイコン、文字、ボタンともに小さいので少しばかりカスタマイズが必要と思いますが…）

このようなことは可能でしょうか？

@soregashi さん

真ん中の藤色のボタンは、私には、よくわかりませんが、それ以外であれば、PC表示時のCSSのコードを微調整していけば、できそうな気がします。

CSSのコードを詳しく調べた訳ではありませんが、スマホ表示のときに、やや縦長の表示に変わるのは、CSSのメディアクエリで、画面幅で分岐しているからだろうと思われます。

なので、そのスマホ幅のメディアクエリの中にPC表示のCSSを応用して、数値等を変更してCSSでデザインしていけばイケそうな気がします。

ただ、細かい調整が必要であったり、好みの問題もありますので、ご自身で、CSSでデザインをしてみてください。

デベロッパーツールの使い方や、HTML、CSSの書き方等は、以下のトピックに有用なリンクが満載です。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

素敵なデザインができましたら、フォーラムでご紹介いただけますと、他の方が気に入ってくださるかもしれませんね。

追伸：PC表示のときのCSSを土台にしてアレンジしていけば、デザイン制作過程で多少の紆余曲折はあっても、上手くいくと思います。

@leafytree なるほど、気を付けるべき点など事細かに教えていただきありがとうございます！リンクを少し覗いてみましたが、これならできそうな気がしてます。

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