WordPressテーマ変更!SimplicityからCocoonへ

コピペでカスタマイズ!ブログに「お知らせ」を置いてユーザーに近況情報を伝えよう

スポンサーリンク

トップページに運営者からの「お知らせ」を置くと、今 運営者はどんな思いで現状運営してるのか、次に何を書こうとしてるのかなど、トップページに見に来てくれた一部の人に伝える事が出来るんです。

そのカスタマイズ方法は、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では半角ドット「.」で表します。

  1. HTMLでクラスclass指定された△△
  2. CSSでクラス半角ドット「.△△」と表し、セレクタと読ぶ

<○○ class=”△△”>ほげほげ</○○>

  1. HTMLの開始タグ<○○ class=”△△”>
  2. 間の要素ほげほげ
  3. 終了タグ間</○○>

○○のタグに挟まれた要素「ほげほげ」は、CSSで装飾出来ます。出来る事の一部は下記。

  1. 背景を入れる
  2. ボーダーを入れる。
  3. フォントの色を変える
  4. 囲った枠の角を丸めたりなどできる

HTMLタグのdivとspan装飾の範囲

上述したHTMLコード、「div」の中に2つのspanを囲ってる形になってるのがわかります。その中にクラス名の違うspanが2個入ってます。コードをリストにしてみますね。

  1. <div class=”one-comment”>
    ※CSSで「.one-comment」になる。
  2. <span class=”info-span”>お知らせ</span>
     ※クラス名「.info-span」class
  3. <span class=”info-comment”>お知らせの内容を書く</span>
    ※クラス名CSSでは「.info-comment」
  4. </div>

1.はdivの開始タグで、4.はdivの終了タグだから2.3.を含めた要素を装飾出来る

pcビューのクラスセレクタの装飾範囲

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つ

  1. (HTMLのdivクラス).one-commentは、「お知らせ」と「お知らせの内容を書く」の装飾
  2. (spanクラス).info-spanは、「お知らせ」の装飾
  3. (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行目の間に貼り付けるとキチンと表示されますよっ♪

homecategory.phpの該当の場所に貼り付ける

子テーマに親テーマの該当のphpを挿入する方法

子テーマ使ってて、親テーマにしかhomecategory.phpがないっ!って場合は、FTPソフトなどで親テーマの該当php(homecategory.php)をダウンロードします。その後、子テーマのディレクトリにアップすれば問題なしですっ。

その時、ファイル名がhomecategory.php.txtとなってたら、名前を変更を選択して.txtを消して「homecategory.php」にしておくと良いですねっ。

ffftpソフトで該当ディレクトリにアップ前に名前を変える

  • アップする場所
    wp-content/themes/Gush4-Childフォルダ内へダイブ!

ffftpソフトでhomecategory.phpをPCからサーバーにアップする方法

さいごに

これで、きれいに表示されるはずです。

このコードは、エローラさんに作ってもらいましたっ。だって、うまくできないですもんっ。。もちろんEBCでカスタマイズ頼んだんですよっ!

さも自分がやったみたいですが。。私はまだコピペで工夫するくらいしか出来ませんっwあなたもカスタマイズ成功するよう、ココから願ってますからねぇーっ!

それではっ。かうたっくからでしたっ♪

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る