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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スタイルシートを開く

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

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

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

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

コードをコピペして保存

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

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

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

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

 

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

できた!

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

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

CSSの初歩的な知識があれば、自分で調べられるよ。

この程度のデザイン編集であれば、すこしだけCSSの知識があればサクッと調べて解決できます。

  1. ぐぐる。もしくは検証ツールなどで調べる。
  2. あ~なるほどね、この数字を変えると、こうなるのね。」ぐらいには分かる。

ぶっちゃけブログやるだけならこの程度の知識で十分ですね。

Web完結プログラミングスクールが最速です。

手っ取り早く最低限の知識を身に付けるには、Web完結プログラミングスクールがおすすめです。

なんてググればいいのか分からない」レベルから「自分でググってなんとか解決できる」ぐらいのレベルになるには、やっぱり先生に教えてもらうのが最速ですよ!

おすすめなのはTechAcademyで、WordPressコースなんていうドンピシャなコースもあります。

もしふわっとした悩みがすでにあるなら、実際に自分のブログを先生に見せて、チャットサポートでガンガン質問しちゃえばOKですね。

1週間の無料体験がありますので、まずはサクッと体験しちゃうのがおすすめです。

TechAcademyの無料体験はこちら

コメントを残す

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

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