voyager - about

ここは●●で××なサイトです。$$$や$$$を取り扱っていますなどなど。
現在当サイトで使っているものです。
トップの画像はｃｓｓで丸くしているので、四角い画像でも大丈夫です。周りのラインなども好きな色に変えてもいいかもしれません。

link

●URL - http://yoursiteURL.jp/
●memo - こんな感じで詳細あれこれ
●owner - ななし(〒)

●トップ画像はパブリックドメインのものを加工したものなので、こちらから。
●見出しの足跡画像はicon rainbow＞クツの足跡のアイコン素材＞から。

head.

body,h1,h2,h3,h4,p{
 margin: 0;
 padding: 0;}

body{font-family: 'Josefin Sans',  'Kosugi Maru', sans-serif;
background:#fff;
color: #222222;
 font-size: 13px;
 line-height: 1.6;
 word-wrap : break-word;}

img {
    border-radius: 50%;  
    width:  150px;    
    height: 150px;    
margin:20px;
 padding: 5px;
border: 10px solid #eee;

}

a{
 color: #222;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 tap-highlight-color: rgba(0,0,0,0);}

a:hover{
 text-decoration: line-through;
 color: #000;}

a:active{ color: #000;}

::selection {
    background: #eee;
    color: #fff;
}

//Firefox
::-moz-selection {
    background: #eee;
    color: #fff;
}

.all{
 max-width: 500px;
 margin: auto;
padding: 25px 15px 0 15px;
 margin-top: 30px;
}
.top{ text-align: center;
 position: relative;}

h1,h2,h4{font-family: 'Sigmar One', cursive;}

h1{font size:20px;

background-color :rgba(255,255,255,0.8);
 display: inline;
padding:0.3em;
}

h2{
color:#555;
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #fff;/*背景色*/
text-align: center;}

h2:before {
content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width:30px;/*画像の幅*/
  height: 30px;/*画像の高さ*/
  background-image: url(##足跡の画像URL##);
  background-size: contain;
  vertical-align: middle;
background-repeat: no-repeat;
padding:2px 7px;
}

h3{
  color: #000;
background-color :rgba(250,250,250,0.8);
padding:0.5em;
}

h4{color: #fff;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.2;/*行高*/
  background: #000;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h4:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

hr{border-top:1px solid #000;}

nav{
font-size:15px;
padding: 24px 0;
padding-bottom:8px;
}

nav a{
padding-bottom:3px;
border-bottom:#555 double 9px;
text-decoration:none;
margin:0 5px;}

nav a:hover{
color:#555;
border-bottom:#6495ed solid 3px;
 text-decoration: none;
}

a:hover{color:#bbb;}

article{ margin-bottom: 26px;
padding: 10px 10px;
background:#eee;}

.footer{ text-align: center;}

.footer a{ padding: 0 3px;}

.color{ color: #a44;}

textarea{
font-family: 'Josefin Sans',  'Kosugi Maru', sans-serif;
border:0;
padding:10px;
font-size:10px;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 20px;
width:200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}
--></style>

ABOUT SITE.

link

SOURCE and CODE.

head.

html - top.

html - page.