CSS レイアウト

33このレイアウトをCSSで作成する。

CSSには、下記を記述。

header」が上段、「left」が左、「middle」が真ん中、「right」が右、「footer」が下段を意味しています。 「my_body」で2段目全体の幅を設定しています。 3列のレイアウトは、2列のレイアウトよりも条件が厳しいらしく、 幅の長さをきちんと設定しないと、ブラウザによっては、サイドバーが下に落ちたり、ずれたりするいわゆる「カラム落ち」をする。

<style type=”text/css”>
#my_body {
width : 600px ;
}

#header {
width : 100% ;
background-color: #ff8c00;
}

#left {
width: 200px;
float: left;
background-color: #7fff00;
}

#middle {
width: 200px;
float: left;
background-color: #cccccc;
}

#right {
width: 200px;
float: left;
background-color: #00bfff;
}

#footer {
background-color: #b22222;
width : 100% ;

clear: both;
}

</style>

 

HTMLの方には、

<body>と</body>の間に、 以下の記述

<div id=”header”>
本文『上、幅100%色ff8c00』
</div>

<div id=”my_body”>

<div id=”left”>
本文『左、幅200px色7fff00』
</div>

<div id=”middle”>
本文『中、幅200px色cccccc』
</div>

<div id=”right”>
本文『右、幅200px色00bfff』
</div>

</div>

<div id=”footer”>
本文『下、幅100%色b22222』
</div>

 

 

ホームページに戻るボタンを設置

縦長のホームページの場合、戻るボタンが右下に付いてきてくれると非常に助かる。手でスクロールしまくるのはちょっと辛い。ということで、設置できます。

(1)まずは、htmlの内にjavascriptを設置します。

(2)次に、内の一番下の方に、

<p id=”page-top”><a href=”#”>PAGE TOP</a>
※<>は大文字全角をつかっているのでコピペで使用しない様にしてくださいね。

【】内を記述してね

(3)CSSに下記を追加すれば、スクロールが出現するようになる。微調整や、ボタンの変更などは、誰かのページをみれば乗っています。

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}

WordPress Google Chromeのデベロッパーツール

WordPressを使用していると、微妙に調整したいところが沢山でてくる。header.php・・・・phpなどの各ブロックをみたり、style.cssをみたりして修正をする。しかし、どう見ても、どこ見ても修正箇所が分からない場合がある。その時に便利なのが、Google Chromeのデベロッパーツールです。

2016-02-27_18h48_08

 

普通にサイトを開いたら、右クリックで「検証」ってやれば、HTMLとCSSと画面が見られますので、原因特定につながります。

そして検証していけば、どこのCSSファイルをつかっているのかもわかります。

今回は、右上のメニューの幅を変更したかったのですが、どこを探しても見つからず、このツールで調べたら、Skeleton.cssってのが関係していることがわかった。何気に使えるツールかもしれません。

WordPress(TWENTYFOURTEENテーマ)の表示幅を変える

このサイトもWordpressで作成しているが、投稿した表示が幅が狭くて見ずらかった。
Worepressの場合、テーマのCSSを修正すれば直るのは分かっているが、長くて探すだけでも大変。

しかし、検索かけて調べると同じ事をやっている人も多い。本当に感謝だ。

●テーマを編集して幅を調整する。

管理メニューで「外観」→「テーマ編集」と選び、Twenty Fourteenのスタイルシート (style.css)を編集。

下記の部分を見つける。

/**
* 6.0 Content
* —————————————————————————–
*/

.content-area {
padding-top: 48px;
}

.hentry {
margin: 0 auto 48px;
max-width: 672px;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 474px;
}
「max-width: 474px;」という部分で、コンテンツ幅を設定しています。
とりあえず800pxに変更します。

これで、幅は修正される。100%にすれば、幅いっぱいになると思う。