プロフィールウィジェットを改造

今日はプロフィールウィジェットを改造してみた。

Cocoonのプロフィールはシンプルでとても見やすいのだが、せっかくなので手を加えてみたい。

 

▼今回参考にさせて頂いたサイト様はこちら

【Cocoon】プロフィールボックスをSANGO風にカスタマイズ
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーと記事下のプロフィールボックスを人気のWordPressテーマ「SANGO」風にカスタマイズしてみました。サイドバーではこんな感じになります↓記事下のメインカ

 

まずはビフォーの状態。

≪before≫

プロフィール(改造前)

この状態でも非常に良いが、カラーをブログの状態と合わせたいなと感じる。

  1. 枠線をテーマカラーにする
  2. アイコンを大きく見やすいものにする
  3. プロフィールページへのリンクが重複しているので名前の方はリンクを外す

と、この3点くらいだろうか。

参考サイト様のコードを使わせていただき、そこへ加筆・修正を加えたものがこちら。

≪after≫

プロフィール(改造後)

参考サイト様のコードがあくまでも別テーマ(SANGO)にデザインを寄せるというものだったのでそもそも趣旨が違うのだが、コードがわかりやすく修正を入れ易かったので参考にさせて頂いた。

当サイトはあくまでもブログであり、ポートフォリオサイトやSNSへの誘致を目的としていないためアイコンの色もテーマカラーと合わせて全体の統一感を優先した。

今後(ないと思うが)SNSボタンが増えることがあってもコードは修正する必要はない。

 

また、トップページではサイドバーに、投稿ページでは記事下にプロフィールが表示されるようにしている。

基本的なコードは変わらないが、バランスをとるために一部修正を入れた。

 

リンク先のプロフィールページがまだシンプルなものしか作っていないので、そちらもそのうち手を加えたい。

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