2016/02/17

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

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

そのカスタマイズ方法は、CSSやHTMLすら解らなくってもコピーペーストすれば、誰でも出来ます。テーマによって使用者によってトップページの仕様は違ってもHTMLとCSSはコピペすれば反映するカスタマイズなのでっ。

自分でカスタマイズできるようになりたいあなた向けページは下記です。

LINK初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?

お知らせを置きたいって思ってるあなたが、成功できれば良いなぁ。。っと思うので私のページのコードを公開しておきますね♪

スポンサーリンク

ブログ運営者からの「お知らせ」に使えるhtmlコード

コピペでできる「ひと言コメント」はdivクラスone-commentで囲まれた、お知らせ「クラスinfo-span」とお知らせの内容を書く「クラスinfo-comment」からできてて、HTMLソースは下記です。

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のコード

クラスセレクタは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ソフトなどでバックアップをとってから貼り付けてたら安心です。

初めに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あなたもカスタマイズ成功するよう、ココから願ってますからねぇーっ!

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

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー