Category Archives: css

画像に動きを付ける

Posted on by

アニメーションを付ける

http://creatornote.nakweb.com/wow/

headerに以下のコードを追加





アニメーションを付けたい画像に以下のコードを追加

data-wow-offset=”10″
　要素が表示されてから、アニメーションを開始するまでの距離を指定
・data-wow-delay=”1.0s”
　要素を表示後、指定した秒数遅らせてアニメーションを表示
・data-wow-duration=”1.0s”
　指定した秒数をかけてアニメーションを表示
・data-wow-iteration=”10″
　アニメーションを繰り返す回数を指定

参考https://www.feelbee.jp/web_demo2
参考　アニメの種類https://haniwaman.com/wow/


写真にフレームを付ける

Posted on by

画像に写真風のフレームと影を付ける

Image0027

html記述部

<div id="frame-shadow"><img src="***"></div>

css記述部

#frame-shadow img{
border:solid 15px white;
padding:10px;
-webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
box-shadow: 0 10px 8px -6px #8d8c8c;
}

borderが認識されず、paddingでごまかしてます。
別のところでは出来ていたけど、why?


下枠線だけ破線表示の表

Posted on by

ノートの罫線だけみたいなこんな表です。

Name Yoshiming
Address Yokohama-City Japan
Tel abc-def-2525

html記述部

<table id="simply-table">
<tbody>
<tr>
<td id="simply-title">Name</td>
<td>Yoshiming</td>
</tr>
<tr>
<td id="simply-title">Address</td>
<td>Yokohama-City Japan</td>
</tr>
<tr>
<td id="simply-title">Tel</td>
<td>abc-def-2525</td>
</tr>
</tbody>
</table>

css記述部

#simply-table{
width:600px;
border-style:none;
background-color:transparent;
line-height : 2;
}
#simply-table td{
padding : 10px 5px;
border-bottom:1px dashed gray;
font-size:14px;
color : black;
line-height : 2;
}
#simply-title{
padding :10px 5px 10px 30px;
width:200px;
font-size:24px;
text-indent : 10pt;
}

リンク文字の設定

Posted on by

リンクの下線を消す
※リンクが貼ってあることが分かるように色を変える工夫が必要
a{
text-decoration: none;
}
未定訪問リンク
a:link{
color: #0000ff ;
}
訪問済みリンク
a:visited{
color: #000080 ;
}
ポイント時リンク
a:hover
{
color: #ff0000 ;
}


マウスポイント時に行がハイライト表示する表

Posted on by

スタイルシートでhoverを利用して作成しています。

#highlight{
width:600px;
color : black;
line-height : 1.3;
}
#highlight td{
padding : 10px 5px;
background-color : white;
border:1px solid darkgreen;
font-size:14px;
color : black;
line-height : 1.5;
}
#hi-title{
width:110px;
font-size:14px;
text-indent : 10pt;
}
#highlight tr:hover td{
background: darkgreen;
color: white;
}

htmlファイルの実装側はこんな感じです。

<table id="highlight">
<tbody>
<tr>
<td id="hi-title">2の倍数</td>
<td>1の位が0,2,4,6,8の偶数</td>
</tr>
</tbody>
</table>

見本：こんな感じ


アーカイブにアイキャッチ画像を表示させる（Photograph）

Posted on by

テキスト表示だけだったアーカイブにアイキャッチ画像を表示させる

Before After
archive-before → archive-after

 

  1. archive.phpを修正
    追加コード･･･the_post_thubnail()関数, id:b-thumbnail,b-title,text-boxの指定

    <a title="Permanent Link to&lt;br /&gt;
&lt;?php the_title_attribute(); ?&gt;" href="&lt;?php the_permalink() ?&gt;" rel="bookmark"><!--?php /* アイキャッチ画像を表示　サイズと位置指定　*/ ?-->
<span id="b-thumbnail">
<!--?php the_post_thumbnail( array(150,150), array('class' =--> 'imgLeft') ); ?&gt;</span>
<p id="b-title"></p>

</a>&nbsp;

・・・中略・・・
<div id="text-box"></div>
  2. custom.cssにコード追加 
    #text-box{
display:block;
height:100px;
margin-left:160px;
font-size: 12px;
}
#b-title a{
font-size:16px;
color:powderblue;
}
#b-thumbnail{
float: left; /*　テキストの回り込み可にする　*/
margin: 0 10px 0 5px;
}

iFeature：opacityでメニューバーとボックスを半透明

Posted on by

全体的に少しだけ透明にする
opacityは、背景だけでなく文字も画像も半透明にしてしまうので要注意。

style.css

メニューバーを40%半透明にする。

#navigation {
 	margin-bottom: 30px; 
	opacity:0.6;
	filter: alpha(opacity=40);/* IE6、IE7対応 */
	-moz-opacity: 0.6;/* Firefox1.5以前対応 */
}

コンテンツボックスを20%半透明にする。

.container {
  background: transparent;
  opacity:0.8;
  filter: alpha(opacity=20);/* IE6、IE7対応 */
  -moz-opacity: 0.8;/* Firefox1.5以前対応 */
}

iFeature：Boxes Lite　ボックスの仕様変更

Posted on by

TOP PAGEの3つのBOXは、Boxes Liteとリンクしている。

ほとんどコメントアウトにして背景色を消した。文字色だけ白指定。

style.css

.box {
margin-bottom: 30px;
padding: 20px;
# background: #fdfdfd;
# background: #160b24;
color:white;
# border: 1px solid #eaeaea;
# -webkit-border-radius: 3px;
# border-radius: 3px;
# overflow: hidden;
# -webkit-box-shadow: 0px 1px 0px 0px #adadad;
# box-shadow: 0px 1px 0px 0px #adadad;
}

※最初にテンプレートファイルを調べてしまい、探し出すのに時間がかかってしまった。


citizen-journal：サイドバーの行間を詰める

Posted on by

サイドバーの行間を詰める。

目次のように使うため、ゆったりとした行間を詰めることにした。

それに合わせて文字のサイズも少し小さくする。

style.css


#sidebar {
margin-top:2.2em;
}

.widget {
margin:0 30px 50px 0;
padding:0;
border-bottom:1px dashed #a3dae1;
font-size:13px;
}
.widget a { text-decoration:none; color:#5e5e5e; }

.widget a:hover { text-decoration:underline; color:#cd3e25; }

.widget li, #meta.widget aside a {
# background:url(library/images/bullet.png) no-repeat 3px 8px;
background:url(library/images/bullet.png) no-repeat 3px 4px;
border-top:1px dashed #a3dae1;
margin-bottom:0;
# padding:5px 5px 5px 20px;
padding:1px 5px 1px 20px;
}
.widget li:first-child {
border-top:0;
margin-bottom:0;
# padding:5px 5px 5px 20px;
padding:1px 5px 1px 20px;
}

.widget ul.sub-menu li:first-child {
border-top:1px dashed #a3dae1;
margin-top:-5px;
}

CSV Import Test

Posted on by

This is a post for csv import.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


CSV Import Test

Posted on by

This is a post for csv import.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.