0からはじめるWeb日記

はてなブログでソースコードを表示させる方法

はてなブログでソースコードを表示させる方法

photshop

パターンをphotshopで作りました。

リピートさせるとこんな感じになります。

イラレでsvgに変換→htmlに埋め込む方法

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>かぼちゃ</title>
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen,print">
</head>
<body>

<div id="content">

<object data="image/2.svg" " type="image/svg+xml" width="592" height="120">かぼちゃ</object>

</div>
</body>
</html>

svgで線・円・楕円を書く

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>線・円・楕円を書く</title>
</head>
<body>
<svg width="600" height="300">
<rect width="100%" height="100%" fill="red" />
<rect x="50" y="50" width="100" height="100" rx="20" ry="20" fill="yellow"./>
<line x1="100" y1="100" x2="200" y2="200" stroke-width="20" stroke="pink" / stroke-linecap="round"/><!--アンカーポイント開始位置終了位置-->
<circle cx="200" cy="100" r="40" fill="white" />
<ellipse cx="400" cy="100" rx="40" ry="80" fill="green" />
</svg>
</body>
</html>

css 縫い目のようなデザイン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" media="screen,print">
<title>縫い目のようなデザイン</title>
<style type="text/css">
div {
  background: #036;
	display: inline-block;
/*デフォルトのpaddingがかかる h1をたくさん使って使用すると
floatなしでもナビボタンのように並んでくれる*/
	box-shadow: 1px 1px 0 rgba(0,0,0,0,5);
	color: #ff9;
	margin: 10px;
	outline: 1px dashed #fff;
	outline-offset: -5px;/*-5pxで内側に*/
	padding: 10px;/*これをしないと、文字がはみ出そうになる*/
	-webkit-transform: rotate(-5deg);/*回転させる*-webkitが必要なPCもある*/
}

h1 {
	font-family:"Courier New", Courier, monospace;
	margin: 0;
}
</style>
</head>

<body>
<div>
  <h1>Stitched</h1>
</div>
<div>
  <h1>Stitched</h1>
</div>
<div>
  <h1>Stitched</h1>
</div>
</body>
</html>

svgで描く

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>グループタグを使ってまとめて指定</title>
</head>

<body>
<svg width="600" height="300">
	<g stroke="black" stroke-width="10">
    <rect width="100%" height="100%"/ fill="red"/>
    <rect width="400" height="100"/ fill="white"/>
    <rect width="100" height="50"/ fill="blue"/><!--レイヤーと同じで一番下が一番上になる	-->
	</g>
</svg>
</body>
</html>

クロスフェードのソース

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>クロスフェード</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src="jquery.cross-slide.js"></script>
<style>
#slideshow {
	width: 500px;
	height: 200px;
	margin: 100px auto;
}
</style>
</head>

<body>
<div id="slideshow"></div>
<script>
  $(function() {
    $('#slideshow').crossSlide({
      speed: 45,
      fade: 1,
    }, [
      { src: 'img/cat1.jpg',dir:'up' },
      { src: 'img/cat2.jpg',dir:'down' },
      { src: 'img/cat3.jpg',dir:'up' },
      { src: 'img/dog.jpg',dir:'down' }
    ])
  });
</script>

</body>
</html>