写真にフレームを付ける

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

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?


下枠線だけ破線表示の表

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

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;
}

リンク文字の設定

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


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

スタイルシートで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)

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

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;
    }
    

Myスタイルシートファイルを作り@importする

  1. Myスタイルシートファイル名:custom.cssをcssフォルダの中に保存する。
  2. custom.css の先頭行で文字コードの指定をする
    @charset "utf-8";
  3. 既存のstyle.css内のコメントの下に、取り込みコードを追加する。
    @import url(css/custom.css);

 


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

全体的に少しだけ透明にする
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 ボックスの仕様変更

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:サイドバーの行間を詰める

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

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

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

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

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

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.