ブログを少し更新し、右横の最新エントリーを少し替えてみました。

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

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

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


実際に利用した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アプリケーション

コメント投稿フォーム

 

フィギュア

最近

カテゴリ

カプセルトイ

初音ミク

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard

PICUP