ブログを少し更新し、右横の最新エントリーを少し替えてみました。 : ういすぷの記録帳

ブログのデザインを少し変えてみました。
今まで、テキストだけが新しい投稿記事順に並んでいたところに、画像を追加してみました。
ちゃんとレスポンシブするようにも加工しています。

テキストからテキスト+画像となったので、だいぶ見やすいのではないかと思っています。
少しでも、アクセスしやすくなるといいな。

もう少し替えたいところもあるので、追々やっていきます！


実際に利用したHTMLとサンプルソースを添付します。

□ HTML

<div class="LIST">
<ul>
<li>
<a href="[URL]"><img src="//media.tree-web.net/img/download1.svg" data-src="[IMG URL]" class="upimg lazy" class="image"></a>
<a href="[URL]" class="title">タイトル</a>
</li>
<ul>
</div>

□ CSS

.LIST li {
margin-top:5px;
margin-bottom:5px;
padding-bottom:5px;
display:flex;
display:-moz-flex;
display:-o-flex;
display:-webkit-flex;
display:-ms-flex;

border-style:none none dotted none;
border-width:1px;
border-color:#eee;
}
.LIST li:last-child {
border:none;
}
.LIST .image {
max-width:50px;
max-height:50px;
display:inline-block;
border-radius:50%;
font-size:10px;
}
.LIST .title {
margin-left:5px;
display:inline-block;
}

□ 関連記事
・何だろうなこのスパム
・パラメータ付URLを.htaccessでリダイレクトするメモ
・ゴールデンウィークが待ち遠しいのでタイマーを作りました！
・「まだ2016年だよタイマー」 にアップデート！
・全角英数字を半角英数字へ変換する「変換機」を作りました。
・「規定のメール クライアントが設定されていないか、または現在使用されているメール クライアントが〜」と表示される。
・Unix Time <-> 日付 変換Webアプリケーション