読者です 読者をやめる 読者になる 読者になる

趣味イラストレーターのオタク主婦のひっそりブログ。

とりとめのない日記です。メインサイト:http://hide.kanari.info/ ブログ:http://kanari.info/b/

このブログのサイドバーに、画像付きの「最新の記事一覧」を付けました。

※2014/02/03の時点で外してます。

やっぱり、サイドバーに画像付きの「最新の記事」があると見栄えが良いかなぁと思って試してみました(`・ω・´)ゞ

【修正済】はてなブログの「最新記事」を画像付きにする方法。 - #ChiroruLab

の記事を参考にさせて頂いて、サイドバーに画像付きの最新の記事を付けました。ソースをコピペするだけだったので簡単だったです。読み込み中の画像は、ローディングアイコン:素材工房 TAKE ホームページ用素材が無料!からお借りましました。

ついでに画像なしのエントリーの場合の差し替え画像のお試しも兼ねて、このエントリーを書いています。どうかな、うまくいくかな?

追記:

あ、CSSはちょっといじってます。ついでなので、忘備録用に載せておきます。

/* ----- NEW_ENTRY ----- */
.htbl_new_entries {
  height: 100%;
  width: 100%;
}
.htbl_new_entry {
  position: relative;
  background: #ddd;
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin-top: 1px;
  border-radius: 1px;
}
.htbl_new_entry_img { position: relative; top: -9px; min-height: 118px;opacity: 0.5;}
.htbl_new_entry_text {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  width: 90%;
  height: 100px;
  margin-top: 0px;
  padding: 0 5%;
  color:#000;
}
.htbl_new_entry_text:hover {
  color: transparent;
  text-shadow: none;
  padding-top: 100px;
}
.htbl_new_entry_text span.entry_title {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 100px;
  font-size: 14px;
  font-weight: lighter;
}
.htbl_new_entry_text span.entry_date {
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 10px;
  text-shadow: none;
}

 上のCSSは、【修正済】はてなブログの「最新記事」を画像付きにする方法。を参考にしてちょっと書き換えているだけです。

広告を非表示にする

▲TOPへ