2017-10-10

ワードプレスのテーマと枠線について

mocot640

お仕事用のワードプレスのテーマはMinimalWPさんのVanilla City をカスタマイズして使っています。

今回はFolclore にしました。

peewee-wp

PCではド~ン!とトップページに画像がでます。

スポンサーリンク


バックの白い画像の為に枠を付けたい

かっこいいテーマで何も申し分のないデザインですが、枠を付けた630PXの画像の右端が微妙に欠けるので、両サイドのパディングを狭くしてブログ内をちょっとだけ広げてみました。

これで記事内の画像の枠は上手く表示されました。

次はトップの記事一覧の画像に枠を付けたいです。

最初は「.item-img」 にボーダーを付ける方法でトップページの画像に枠を付けていました。

しかしトップのアニメーションの下部に余白ができるのが気に入りませんでした。

でも、閃いちゃったのです!アニメーションのコードに書き込めばいいことを・・・!

サイトのトップを開くと画像が枠で囲われていますが、触れると枠がなくなる設定です。

これでアニメーションの下部余白を無くすることが出来ました!

/* ギャラリーレイアウト
---------------------------------------------------- */
.item-img {
margin: 0 0 10px 0;
overflow: hidden;
text-align:center;
}

上のコードにパディングを追加してボーダーが見えるようにしました。

/* ギャラリーレイアウト
---------------------------------------------------- */
.item-img {
margin: 0 0px 10px 0;
overflow: hidden;
text-align:center;
padding: 0 2px 0px 0;

}

トップのアニメーション画像の下部の余白に対処します。

/* *****************************************************************
*	CSS3アニメーション
* ***************************************************************** */

.img-anime2 img {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

}

.img-anime2:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);

}

上のコードに追加

/* *****************************************************************
*	CSS3アニメーション
* ***************************************************************** */

.img-anime2 img {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
border:1px solid #eeeeff;
}

.img-anime2:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);

}

完成!

記事内の画像に枠を付けました

/* 画像
---------------------------------------------------- */

img{
border:0;
padding:0px;
margin:0px

}

img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
border:1px solid #eeeeff;
}

記事内の画像に枠を付けたくない場合は画像コードに以下を追加する。

style="border:0px "

こんな感じです。

<img class="aligncenter" src="https://★★★.jpg"  style="border:0px "/>

関連記事と新着記事の枠線

関連記事の画像の枠
table.similar-text img {
width: 150px;
border:2px solid #eeeeff;
}
新着表示(新着記事)の枠
table.similar-side img {
width: 80px;
border:2px solid #eeeeff;
}

プラグインNewpost Catchのスタイルシートに、ボーダーのコードを入れました。

マガジンPIC UPの画像に枠が付きます。
※子テーマではないのでアップデートの時に確認が必要になります。

#npcatch img {
  float: left;
  /*padding: 0 .5rem 0 0;*/
padding: 0 ;
margin: 0 .5rem 0 0;
border:1px solid #eeeeff;
}
MOCOTのメモ(パディングとフォントさいサイズの修正)
#npcatch img {
  float: left;
  /*padding: 0 .5rem 0 0;*/
padding:  0;
border:1px solid #eeeeff;
}

#npcatch .title {
  overflow: hidden;
  display: block;
font-size: 14px;
padding:0 10px 0 10px ;
}

プラグインwordpress popular postsのサムネイルに枠を付けました。

<public<wpp.css

/* Thumbnail styles */
    .wpp-thumbnail {
      display: inline;
      float: left;
      margin: 0 5px 0 0;
      border: none;
    }
border: none; を2px solid #eeeeff;に変更
/* Thumbnail styles */
    .wpp-thumbnail {
      display: inline;
      float: left;
      margin: 0 5px 0 0;
      border: 2px solid #eeeeff;
    }

★wpp.cssを使っている子テーマのスタイルシートと同じ階層にアップロードしてカスタマイズすればプラグインのアップデートで消えることがありません。

※私がカスタマイズしているテーマはFolclore です。

  • follow us in feedly
スポンサーリンク


タグ:
こちらの記事も読まれています。