ロト君のサイト by lotokunn

L'sCore ロト君のサイトへようこそ!

  1. TOP
  2. パソコン
  3. HPサムネイル作成 簡易HTML CSS

HPサムネイル作成 簡易HTML CSS

皆さん今日は!ロト君です。今回はHPなどで活用できそうな簡易サムネイル作成ソフト??の様なものを作ってみました!

 

本来は.exeの様なものを作るつもりでしたがHTMLとCSSだけを使ってでも簡単に出来てしまったので書いておこうと思います。

 

因みに今回のサムネイルに使った画像はそのHTMLキャプチャしたものを使っています。

 

キャプチャするソフトは使わず、Windows標準のスクリーンショット(Alt + Print Screen)ボタンを使って取得し、ペイントツールで、リサイズ・切り取りなどを行って.jpgに保存して使っています。

 

HTMLの記載内容は下記の通りです。

<html>
<head>
<title>サムネイル作成</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div>
<img src="sample.jpg" id="thumbnail">
<div id="thumbnail">
<div id="thumbnail1">
<p>HPサムネイル作成</p><p>簡易HTML CSS</p>
</div>
</div>
</div>
</body>
</html>

CSSは下記の通りです。

@charset "UTF-8";
img#thumbnail {
width: 850px; height: 478px;/*478px;*/
/*border: #CCCCCC solid 5px;*/
text-align: center;
position: absolute;
z-index: 1;
}
div#thumbnail {
width: 850px; height: 287px;
margin: 95px 0px; padding: 0px;
background-color: rgba(255,200,150,0.75); /*rgba(150,150,150,0.75);*/
text-align: center;
position: absolute;
z-index: 1;
display: table;
}
div#thumbnail1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
p {
font-size: 70px;
font-weight: bold;
line-height: 0%;
color: #f04848;
text-shadow: 5px 5px 1px #FFFF00;
}

完成したHTMLファイルを開くと下記のようなサイトが表示されるはずです。

 
後は、↑のブラウザを先に記載したようにペイントソフトなどで加工すればリサイズ・切り取りのみでのサムネイル・アイキャッチ画像の完成です!

 

何か良いソフトがないものかと探していましたが、以外と自分であっさり作れたので安心できました(>ω<)ノ

 

これから、簡単に更新時のサムネイル・アイキャッチ画像が出来るので重宝して行こうと思います。

では、今回はここまでで(=ω=)<HTMLって結構便利だなぁwww


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA



Hello!!

皆さんこんにちは!こんばんは!!ロト君です。

このサイトは私が興味を持ったモノやコトについて掲載をしていくサイトです。

主にパソコン関係やアニメ・ゲーム等について掲載すたいと思いますので、 どうぞ宜しくお願い致します!

コメント等はTwitter等を活用して頂けると有り難いです!!

Twitter: ロト君@lotokunn