部長ナビのページはApple製品のレビューを中心としたブログです。ドラマ仕立ての長期連載も見てね!

Simplicityでブログカード(自サイト内リンク)に色を付け、横幅一杯にする方法

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

今回は、自分で何とかした「ブログカード」のカスタマイスコードについて紹介します

ブログカードとは?

Simplicityでは、サイトのURLをそのまま書いてアップすると、勝手にブログカードという「そのページを紹介する」枠付きカードを作ってくれます

が、デフォルトだと、色々と「うーん」って所があったので、自分で改造しました

最終的な見た目

URLを貼るだけで、アップするとこうなります

image

この、「枠がオレンジで中身黄色、文字が青緑で、カーソル合わせると赤」ってのをカスタマイズして作りました

あと、「枠が幅一杯」というのもいじりました

やり方1「カスタマイザーの「ブログカード」で設定をする」

image

カスタマイザーの中に「ブログカード」ってのがあるので、それを選択します

image

基本的にはそのままで良いんですが、私は、一番上の「はてブ数を表示」と、「カード幅を広げる」を外しています

はてブ数を表示しないのは、g.O.R.iさんのマネです。カード幅を広げるを外すのは、これしないと、幅一杯にすることが出来ないからです。

やり方2「子テーマのstyle.css」に追記

/* ブログカードの背景・枠に色付け、幅一杯に表示、タイトルに色付け、下線 */
.internal-blog-card{
  padding:12px 12px 0;
  border:1px solid #FFAD90;
  word-wrap:break-word;
  border-radius:5px;
  background-color: #FFFFEE;
}

.blog-card{
  margin:20px 0;
  width:100%;
  position:relative;
  clear:both;
  min-height:155px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  zoom: 1;
}

.blog-card-title a{
  text-decoration: underline;
  color:#2098a8;
}

.blog-card-title a:hover {
  text-decoration: none;
  color:#cc0033;
}

これでウチと同じになるので、後は色を調整してください

ブログカードは幅一杯の方がカッコいいと思うし、色も付けた方が良いと思うので、スゴい気に入って使ってます。ただ、「外部URL」はそのままです。ま、見やすいので良いかなって感じです。自サイト内のリンクは色つきで、外部リンクは色無しって事なので分かりやすいですよね

ぜひ、Simplicityの方は見やすいブログカードでステキなブログを彩ってみてくださいね!

フォロー購読方法について >

関連記事もっと記事を読む >

  1. Home >
  2. ブログ管理 >
  3. Simplicity >