【SANGO】記事サムネイルとサイドバープロフィールの高さを揃える方法

「SANGOカスタマイズガイドの通りにサイドバーにプロフィールを設置したんだけど、記事のサムネイルプロフィールの高さが微妙に合ってない…。

「記事のサムネイルとプロフィールの高さをぴったり揃えたい。」

 

ぼくもこの問題に遭遇しましたが、無事に解決できましたので方法をシェアしますね!

結論から書くと、スタイルシートにコードをコピペして終了です。

簡単なので、「プログラミングは良く分からない」という方も、見よう見まねでいけると思いますよ!

ではやり方を解説しますね。

記事サムネイルとプロフィールの高さが合ってない、とは?

もしかしたらぼくだけの問題なのかもしれないですが、記事のサムネイルとプロフィールの高さが微妙にずれてるんですよね…。

  • プロフィールのウィジェット(カスタムHTML)を一番上に設置している。
  • ウィジェットのタイトルは無し。(カスタマイズガイドの指示通り)

この2つの条件が揃うと、記事の高さとウィジェットの高さがずれてしまうようです。

SANGOカスタマイズガイドの方法通りにやった結果なので、もしかしたら他にも悩んでいる方がいるかと思って記事を作成しています。

もしこの症状がぼくだけのものだったら、それはそれでOKですからねw

それでは、治し方を解説しますね。

記事サムネイルとプロフィールの高さを揃える方法

大前提:子テーマを使うこと(重要)

まず大前提として、1つでも純正状態からカスタマイズする場合は、子テーマを使いましょう。

親テーマ(SANGO本体)をカスタマイズしてしまった場合、元に戻せなくなってしまったり、テーマがアップデートされた時に自分のカスタムが全部吹っ飛んでしまう可能性もあります。

子テーマの導入方法は、公式のSANGOカスタマイズガイドに載っていますのでここでは省略します!

WordPressのメニューからテーマの編集を開く

まずはWordpressのダッシュボードを開きます。

左側のメニューから「外観」→「テーマの編集」の順番にクリックしてください。

スタイルシートを開く

テーマの編集をクリックすると、テーマのコード編集画面に入るかと思います。

  • SANGO Childが選択されているか。
  • スタイルシート(style.css)が開かれているか。

この2点をしっかり確認してから次に進んでくださいね!

※子テーマが適用されていれば、特にいじらなくてもこの状態になっていると思います。

コードをコピペして保存

スタイルシートを開いたら、下記のコードをスタイルシートの中に貼りつけてください。

コード
/*記事サムネイルとウィジェットの高さを揃える*/
.textwidget p {
margin: 0;
}

張り付ける場所は何行目でもOKです。ぼくはここら辺に入れました。

もとから書いてあるコードを間違って消さないようにしてくださいね!

 

張り付けたら、「ファイルを更新」をクリックするのを忘れずに。

できた!

更新してみると、ちゃんと高さが揃ってます。うんうん!

ぼくの場合、プロフィールの背景の画像が微妙にでかくて、記事のサムネ画像と大きさが揃ってないという別の問題もありますがw

 

以上です!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください