ブログ

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

更新日:

ワードプレスのテーマをSANGOに変更しました。元のテーマに戻しています(笑)

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

プロフィールをサイドバーに表示する方法についてはSANGO公式カスタマイズガイドで公開されています。
ちょこっとデザインを変えているので、やり方をご紹介( ´ ▽ ` )

ゆうこりん
SANGOは使いやすくてとても素敵なテーマなのですが、更新のしやすさで戻ってまいりました。

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

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

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

詳しい方法はSANGO公式のカスタマイズガイドで説明されてます。
HTMLとかわから〜ん!って方は読んできてくださいね。
フォローボタンのみの表示方法も解説されていましたよ!

こウィジェットで入れているんですが、デザインをちょっと調整します。

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

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

カスタマイズ後の状態

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

プロフィール画像

150×150pxのPNG画像で、背景は透過処理しています。
(わかりやすいように画像の周りを囲んでみました)

CSSを上書きする

親テーマを編集すると、テーマの更新で全部消えてしまいます。

公式で子テーマを作ってくださっているのでダウンロートしましょう!

SANGOの子テーマはこちらにあります(公式)

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

追加するコード

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

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

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

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

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

表示を確認します

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

WordPressテーマ SANGO

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

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

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

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

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

見出しのデザイン崩れ

TOC+というプラグインのデザインが標準装備されているSANGOなのですが、今までの設定のままではデザインが崩れてしまっていました。

アイコンが横にはみ出しています。

スッキリおさまりました!

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

手順3:上級者向け設定(必須)|SANGOカスタマイズガイド

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

節約リッチ生活

あずさんち

とにかくデザインのカスタマイズがすごいです。
いろんな色のコードをコピペで使えるように丁寧に紹介されています。
まとめ記事を随時更新されるようなので、ブックマークするといいかもです。

ニシワカのメモ帳

一覧のアイキャッチがおしゃれです。
今後カスタマイズ記事も増えるのかな?

マサオカブログ

個人的にiPhone記事が気になっています。
「かゆいところに手が届く」系記事が多いです。

  • この記事を書いた人

ゆうこりん

システム手帳を活用して、暮らしをラクにする方法を模索する手帳ブロガー。
ブログは趣味。発信したい人が増えたので、ちょこっとお手伝いも。

-ブログ
-,

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