AFFINGER5

【コピペOK】AFFIGNER5でPinterestのピンを左上に表示する方法を解説

【コピペOK】AFFIGNER5でPinterestのピンを左上に表示する方法を解説

 

Pinterest(ピンタレスト)のピンが、AFFINGER5の記事一覧で左上に表示されない...。カスタマイズ情報も載ってないし、どうしたら良いんだろう。

 

こんな悩みを解決します。

 

セイタ
こんにちは、セイタ(@seita_blog)です!

 

先日SEITALITYでもAFFINGER5を導入することにしたのですが、Pinterestのピンがアイキャッチの中央に表示されてしまいました。

 

これではユーザビリティが低下すると思い、原因を探していたのですが見つからず...。

 

そこで、今回はPinterestのピンを左上に表示するためのカスタマイズCSSを作成したので、共有したいと思います。

 

本記事を読むことで、3分ほどあればPinterestピンの位置を正常な位置にすることができるので、是非ご覧ください。

 

本記事の内容

  • AFFIGNER5でPinterestのピンが左上に表示されない状況
  • AFFINGER5でPinterestのピンを左上に表示する方法
  • AFFINGER5ユーザーも諦めずにPinterestを使ってみよう

 

本記事の筆者

月に40万円を稼ぎつつ生計を立てている専業アフィリエイター兼ブロガー。上位表示が得意でSEOが好きです。

\ 当サイトも使ってるWPテーマ『AFFINGER5』/

当サイト限定の10特典付き

AFFIGNER5でPinterestのピンが左上に表示されない状況

AFFIGNER5でPintarestのピンが左上に表示されない状況

 

AFFINGER5のピンが正常に表示されない状況は、上記のような状態。

 

画像をチェックしてもらうと分かるのですが、保存ボタンが中央やや右下に表示されてしまっています。

 

ここからの内容は、ピンが左上に表示されない理由を知りたい人向けの内容となっているため、サクッと修正したい場合はAFFINGER5でPinterestのピンを左上に表示する方法まで移動してくださいね。

 

事前知識:AFFINGER5のアイキャッチ配置について

事前知識として、AFFINGER5のアイキャッチがどのように配置されているのかチェックしておきましょう。

 

.content-post-slider .post-slide-image img, .post-card-list .post-card-image img {
position: absolute;
top: 50%; left: 50%;
width: 100%;
height: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 0; background: #fff;
}

 

CSSが苦手な人は何が書いているかわからないと思いますが、下記のようにコードを変更したときの画像をご覧ください。

 

.content-post-slider .post-slide-image img, .post-card-list .post-card-image img {
FONT-VARIANT: JIS04;
position: absolute;
top: 0;//50%を0に変更
left: 0%;//50%を0%に変更
width: 100%; height: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 0;
background: #fff;
}

 

AFFINGER5のCSSで高さ横幅指定なし

 

Pinterestのピンを左上にすることができました。

 

以上のことから、恐らくAFFINGER5では広い画像サイズを中央に表示するためのCSSとPinterestとの相性が悪く、ピンが右下の部分に表示されてしまっていたのだと思います。

 

とはいえ、このままではアイキャッチが正常に表示されないので、アイキャッチを正常に表示させつつPinterestのピンを左上にするコードをチェックしていきましょう。

 

Pinterestのピンボタンを中央表示にカスタマイズするCSS

Pinterestのアイキャッチ画像を正常に表示させつつ、Pinterestのピンを左上に表示するためのカスタマイズCSSは下記です。

 

PinterestピンのカスタマイズCSS

/* ************************************* */
/* PinterestピンのカスタマイズCSS */
/* ************************************* */
.content-post-slider .post-slide-image img, .post-card-list .post-card-image img {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(0%, 0%);
    background: #fff;
}

 

主に変更した箇所はこちらです。

 

  • top: 50%;→top: 0;
  • left: 50%;→top: 0%;
  • height: auto;→height: 100%;

 

heightをautoのままにしてしまうと、参考画像のように日付部分が正しく表示されなくなってしまいます。

 

AFFINGER5のtopが0になっている状況

 

これは、もともとアイキャッチの上下に小さな空白が空いているのですが、上部の空白が詰められているため正常に表示されていないという状況です。

 

そのため、heightを100%にすることで上下の空白を削除してアイキャッチをフルで表示させることができます。

 

heightを100%にする時の注意点

heightを100%にすると上下の空白が無くなるのですが、アイキャッチに設定している画像サイズが記事ごとに異なっている場合は、表示に差が出るかもしれません。

 

そのため、アイキャッチ画像は固定サイズで作成するようにしましょう。

 

セイタ
本ブログのアイキャッチ画像や記事内画像に関しては、『450*650』サイズにしているので参考までに!

 

AFFINGER5でPinterestのピンを左上に表示する方法

AFFINGER5でPintarestのピンを左上に表示する方法

 

それでは、実際にPinterestのピンを左上に表示する方法について解説します。

 

カスタマイズする手順としては、下記の3ステップです。

 

Pinterestのピンを左上に表示する手順

  • カスタマイズCSSをコピーする
  • カスタマイザーの追加CSSにペーストする
  • Pinterestのピンが左上に表示されているか確認する

 

手順①:カスタマイズCSSをコピーする

最初にカスタマイズCSSをコピーしていきましょう。

 

PinterestピンのカスタマイズCSS

/* ************************************* */
/* PinterestピンのカスタマイズCSS */
/* ************************************* */
.content-post-slider .post-slide-image img, .post-card-list .post-card-image img {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(0%, 0%);
    background: #fff;
}

 

手順②:カスタマイザーの追加CSSにペーストする

カスタマイザーの追加CSSにペーストする

 

PinterestピンのカスタマイズCSSをコピーしたら、追加CSSにペーストしていきましょう。

 

WordPressサイドバーの『外観→カスタマイズ』から『追加CSS』をクリックすると、カスタマイズCSSが入力できるようになるため、貼り付けていきます。

 

手順③:Pinterestのピンが左上に表示されているか確認する

Pintarestのピンが左上に表示されているか確認する

 

追加CSSを入力して『公開』ボタンをクリックしたら、トップページを確認してみましょう。

 

参考画像のようにマウスポインターを乗せたときに、左上にピンボタンが表示されてればOKです。

 

AFFINGER5ユーザーも諦めずにPinterestを使ってみよう

AFFINGER5ユーザーも諦めずにPintarestを使ってみよう

 

ここまでの内容でAFFINGER5のPinterestピンを左上に表示させる方法について知ることができました。

 

AFFINGER5でPinterestを利用しようとしても、今回の表示で諦めようと思った人も多いはず。

 

本記事以外にも、当ブログではAFFINGER5のカスタマイズ記事を多く公開しているので、ぜひ参考にしてみてくださいね。

 

\Twitterのフォローをお願いしますっ /

  • この記事を書いた人
  • 最新記事
セイタ

セイタ

『ひとつ先のブログ情報』を発信するSEITALITYの管理人。ブログ月収41万円。専業アフィリエイター兼ブロガーとして活動しています。趣味はギター・ゲーム・ガジェット集め。最近はAPEX Legendsがブーム。愛用デバイスはG502 HEROとAPEX PRO TKL。

-AFFINGER5
-

© 2020 SEITALITY