ワードプレス

プロフィール画像サイズを変更、枠線を消す方法【SANGO】

2017-10-01

SANGOサイドバープロフィールのカスタマイズ

元のテーマに戻しています(笑) すでにカスタマイズのコードの公開をされている方がいるので、ありがたく使わせていただいております!

プロフィールをサイドバーに表示する方法についてはSANGO公式カスタマイズガイドで公開されています。

ちょこっとデザインを変えているので、やり方をご紹介( ´ ▽ ` ) SANGOは使いやすくてとても素敵なテーマなのですが、更新のしやすさで戻ってまいりました。

サイドバーにプロフィールを表示する方法

ウィジェットのサイドバーのところに「カスタムHTML」をコピペして、自分のアドレスに書き換えるだけです。

「テキスト」だとワードプレスのビジュアルエディタの状態になるので、HTMLを書くときは「カスタムHTML」を使います。

詳しい方法はSANGO公式のカスタマイズガイドで説明されてます。
HTMLとかわから〜ん!って方は読んできてくださいね。

フォローボタンのみの表示方法も解説されていましたよ! ウィジェットで入れているんですが、デザインをちょっと調整します。

コードを入れただけの状態

  背景画像の下に小さめのプロフィール画像がちょこんと表示されます。
白で枠線がついていますが、元の画像はもちろん四角ですよ〜!

SANGOサイドバープロフィール

プロフィール画像を大きく表示して枠線を消しています。

プロフィール画像

ゆこ

200×200pxのPNG画像で、背景は透過処理しています。 (今のアイコンは背景ありのjpg画像です)

CSSを上書きする

親テーマを編集すると、テーマの更新で全部消えてしまいます。 公式で子テーマを作ってくださっているのでダウンロートしましょう!

普通のテーマと同じように、管理画面から子テーマをインストールして有効化すればOKです。 (元々のSANGOのテーマは消さずにそのままにしておきます)

追加するコード

「外観→テーマの編集」でSANGO Child:スタイルシート(style.css)になっていることを確認します。

ブログの見た目を変えるときは基本的に「スタイルシート(css)」を使います! これはどのテーマを使っていても同じです。
テーマの編集をクリックすると、今有効になっているテーマのスタイルシートが表示されるようになっています。

*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/の下に書きます。

ファイルを更新」したら完了です(^_^)
使っている画像のサイズに合わせたサイズに調整してお使いくださいね。

幅と高さをそれぞれ指定しているので、真四角じゃなくても表示できるはずです。

表示を確認します

ページを再読み込みして、見た目が変わっているのを確認したら完了です^^

WordPressテーマ SANGO

SANGOさん。 購入して、1時間もかからずにサクッと導入できるテーマです。 手間をかけずにおしゃれにしたい人にオススメです。

公式ガイドが充実していて、ユーザーさんも増えているので新しいテーマではありますが初心者さんも使いやすいと思います。

SANGOユーザーさんの手が回ってなさそうなところ

ほんと初歩的なところばかりなのでアレなんですけども・・・ 渦中(大げさ)にいると気づかなかったりするものなんですよね。

ガイドがすごく細かく説明されているのですが、見落としがちなところを書いておきます( ´∀`)

見出しのデザイン崩れ

TOC+というプラグインのデザインが標準装備されているSANGOなのですが、今までの設定のままではデザインが崩れてしまっていました。 目次の横のアイコンが左側にはみ出してしまっていますね。

しっかり書いてあるのに、読み飛ばしていました! 色が変わってるのは途中でカラー設定をしたからです。

SANGOユーザーさんのカスタマイズ

RELATED POST

-ワードプレス
-,

Copyright© ゆころぐ , 2019 All Rights Reserved.