トップページに運営者からの「お知らせ」を置くと、今 運営者はどんな思いで現状運営してるのか、次に何を書こうとしてるのかなど、トップページに見に来てくれた一部の人に伝える事が出来るんです。
そのカスタマイズ方法は、CSSやHTMLすら解らなくってもコピーペーストすれば、誰でも出来ます。テーマによって使用者によってトップページの仕様は違ってもHTMLとCSSはコピペすれば反映するカスタマイズなのでっ。
自分でカスタマイズできるようになりたいあなた向けページは下記です。
LINK初心者向け、HTMLの入門編！HTMLタグとCSSのセレクタの関係＆要素とは？
お知らせを置きたいって思ってるあなたが、成功できれば良いなぁ。。っと思うので私のページのコードを公開しておきますね♪
ブログ運営者からの「お知らせ」に使えるhtmlコード
コピペでできる「ひと言コメント」はdivクラスone-commentで囲まれた、お知らせ「クラスinfo-span」とお知らせの内容を書く「クラスinfo-comment」からできてて、HTMLソースは下記です。
<div class="one-comment"> <span class="info-span">お知らせ</span> <span class="info-comment"> お知らせの内容を書く</span> </div>
divやspanの後ろにclass=””とついてますよねっ。クラス属性をつけたHTMLタグでCSSはクラスセレクタに・・関係は次に説明しますねっ。
HTMLタグとCSSのセレクタの関係を説明
クラス指定されたHTMLタグ△△<○○ class=”△△”>ほげほげ</○○>は、CSSで「セレクタ」になり、クラスはCSSでは半角ドット「.」で表します。
- HTMLでクラスclass指定された△△
- CSSでクラス半角ドット「.△△」と表し、セレクタと読ぶ
<○○ class=”△△”>ほげほげ</○○>
- HTMLの開始タグ<○○ class=”△△”>
- 間の要素ほげほげ
- 終了タグ間</○○>
○○のタグに挟まれた要素「ほげほげ」は、CSSで装飾出来ます。出来る事の一部は下記。
- 背景を入れる
- ボーダーを入れる。
- フォントの色を変える
- 囲った枠の角を丸めたりなどできる
HTMLタグのdivとspan装飾の範囲
上述したHTMLコード、「div」の中に2つのspanを囲ってる形になってるのがわかります。その中にクラス名の違うspanが2個入ってます。コードをリストにしてみますね。
- <div class=”one-comment”>
※CSSで「.one-comment」になる。 - <span class=”info-span”>お知らせ</span>
※クラス名「.info-span」class - <span class=”info-comment”>お知らせの内容を書く</span>
※クラス名CSSでは「.info-comment」 - </div>
1.はdivの開始タグで、4.はdivの終了タグだから2.と3.を含めた要素を装飾出来る
2.と3.は「お知らせ」「お知らせの内容を書く」の各要素のみの装飾が出来る
お知らせのCSSのコード
/***お知らせ***/
.one-comment {
width: 100%;
margin: 0 auto 24px;
line-height: 1.5;
border: 4px double #f90;
padding: 0.8em 0.4em;
box-sizing: border-box;
border-radius: 4px;
}
.one-comment span {
display: block;
vertical-align: middle;
border-radius: 4px;
}
.info-span {
font-size: 95%;
background: #f90;
color: #fff;
width: 190px;
text-align: center;
padding: 0.4em 0;
margin: 0 auto 0.5em;
}
@media screen and (min-width : 768px){
.one-comment {
display: table;
}
.one-comment span {
display: table-cell;
}
.info-comment {
padding-left: 1em;
}
.info-span {
margin: 0 0 0.5em 0;
}
}
クラスセレクタは3つ
- （HTMLのdivクラス）.one-commentは、「お知らせ」と「お知らせの内容を書く」の装飾
- （spanクラス）.info-spanは、「お知らせ」の装飾
- （spanクラス）.info-comment「お知らせの内容を書く」の装飾
各プロパティの説明
margin: 要素の外側の余白
line-height: 行の高さ
border: 4px線の太さ double線の種類 #f90色;
padding: 40.8上下 0.4em左右;内側の余白
border-radius: 4px;ボーダーの角の丸さ
要素の検証（の使い方：目次1）で貼り付けた後、カスタマイズしてみるのもありですねっ。
Gush4のトップ固定ページの場合、HTMLの挿入場所は？
表示したいphpに挿入すればオッケーなんですけど、一応固定ページの場合は下記です。「念のため」FTPソフトなどでバックアップをとってから貼り付けてたら安心です。
<div id="contents"><!-- contentns --> <div id="main-cat"> <!--ここに貼り付ける--> <div class="top-entry"><!--最新1＋新着3--> <div class="brandnew-list">
初めにCSSを貼り付けて、その後homecategory.phpの8～10行目の間に貼り付けるとキチンと表示されますよっ♪
子テーマに親テーマの該当のphpを挿入する方法
子テーマ使ってて、親テーマにしかhomecategory.phpがないっ！って場合は、FTPソフトなどで親テーマの該当php（homecategory.php）をダウンロードします。その後、子テーマのディレクトリにアップすれば問題なしですっ。
その時、ファイル名がhomecategory.php.txtとなってたら、名前を変更を選択して.txtを消して「homecategory.php」にしておくと良いですねっ。
- アップする場所
wp-content/themes/Gush4-Childフォルダ内へダイブ！
さいごに
これで、きれいに表示されるはずです。
このコードは、エローラさんに作ってもらいましたっ。だって、うまくできないですもんっ。。もちろんEBCでカスタマイズ頼んだんですよっ！
さも自分がやったみたいですが。。私はまだコピペで工夫するくらいしか出来ませんっｗあなたもカスタマイズ成功するよう、ココから願ってますからねぇーっ！
それではっ。かうたっくからでしたっ♪
Comments