ブログ運営

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

投稿日:2017年10月1日 更新日:

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ユーザーさんのカスタマイズ

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