ヘッダーのキャッチフレーズ下に記事タイトルを表示する—Simplicity2カスタマイズ中—

このサイトではなく、現在構築中の映画情報サイトの方のカスタマイズ録をメモ記事にしています。

サイトタイトルを中心にした際に、「折角のセンタリングだからここに何か入れても面白いかも」と、
ヘッダー部分にテキストを入れて遊んで?いました。

―ふと思い出しました。

　以前、何処かのサイトに訪問した時に、
　ヘッダー部分に現在閲覧している記事のタイトルを表示されている仕様になっていたのを拝見しました。

　コンテンツてんこ盛りで迷子になりそうな外観のサイトさんでしたが、
　ヘッダー部分に現在居る場所を示されている事で、自分が居る場所が何処なのか?が判って
　極端を云うと、”居心地の良さ”を感じてました。

　どのテーマを使用されているかは分からなかったのですが、
　ヘッダーの何処かでサイトタイトルを呼び出す様に書けば実装できそうだなと思っていました。

と、閃いたのでした。

何故、ヘッダーに記事タイトルを表示する必要があるのか?

このサイトでは、記事毎に表示されているタイトルやパン屑リストで満足しているのですが、
映画情報サイトでは、トップページの記事一覧の前と、
単一記事の前あたりに色々と埋め込みたいと考えているのです。

Simplicityの標準だと、構図的にはこんな感じですよね。

DEMOサイトと映画情報サイトでは変更して、現在こんな感じになっています。

この状態を以下の画像の様にする予定。 ・トップページの変更予定(ヘッダーの下にウィジェットエリアを設ける)

・単一の記事表示での変更予定(ボディの上部にウィジェットエリアを設ける)

例えば画像の様に、ヘッダーとボディの間にウィジェットエリアを設けて、広告を配置したり、
サイトのトピック的なものをスライダーを使って表現したりすると、
その分スペースを取るので、ブラウザー内に、記事タイトルまで収まらなかったりします。

こうした場合、ヘッダーに案内的な表示があれば分かりやすいのではないか。と考えました。

そぅ、以前何処かのサイトで感じた”居心地の良さ”を自サイトでも取り入れようと目論んでいるのです。

ヘッダーのキャッチフレーズ下に記事タイトルを表示する方法

目的は、以下のように表示する事です。

(DEMOサイトに一時的に実装してますが外すかも?知れないので、画像貼っておきます)

上記画像の状態から以下画像のようにした。

📋 この作業に必要なファイル

1. 親テーマのheader.php。子テーマに複製し、【Simplicity child2 (header.php)】を編集。
2. Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】
   文字色と大きさを変更したい場合のみ編集。

親テーマのheader.phpを複製する。

Simplicityの親テーマにあるheader.phpを子テーマに複製(コピー)して下さい。
子テーマへheader.phpの入れ方は、前記事のこの辺りをご閲覧下さい。

ロリポップユーザーの方でも、ロリポップFTPで簡単にできます。

子テーマに入れたファイルを、子テーマ内で変更する。という事になります。
親テーマのファイルを書き換えずにカスタマイズする事になりますので、
親テーマがバージョンアップしても、変更したファイルを書き換える必要がなくなります。

詳しい基本的な事は、子テーマに無いファイルを親テーマから複製する。に記しています。

Simplicity2の子テーマのheader.phpを編集する

テーマの編集から、子テーマのheader.phpを開いたら、</div><!– /#h-top –>を探します。
ブラウザーの検索窓でサーチすると良いでしょう。

<?php get_template_part(‘sns-pages’); //SNSフォローボタンの呼び出し?><?php endif; ?></div>の下で、
</div><!– /#h-top –>の直ぐ上に記事タイトルを表示させる為のコードを書きます。
書きにくかったら改行スペースを空けても良いです。

以下の様に書き足します。

<h4 class="topArea">
<?php if ( is_single() ) : ?>
      <?php the_title(); ?>
<?php endif; ?>
    </h4>

因みに<h4>タグもお好みで変更して下さい。(<h1>以外、<h2>～<h6>まで。)

もう少しお洒落にしたい場合は、アナウンステキストを書き入れて、
Font Awesome絵文字アイコンなんてのを入れてみてはどうでしょう。
the_title()の括弧内に ‘（シングルクォート）で括り表示させたい事を書きます。

<h4 class="topArea">
<?php if ( is_single() ) : ?>
      <?php the_title('只今ご覧の記事　<i class="fa fa-sticky-note"></i>　*'); ?>
<?php endif; ?>
    </h4>

んと、デモサイトでノーマルな表示なんで、このサイトで暫く表示してみます。😅
この記事のタイトルがヘッダー部分に表示されていると思います。どーでしょうか?😮

因みにこのサイトは、Simplicityの1系(ver*1.9.3tの最終?安定版)なので、
Simplicity1系でも同じ様に変更が可能って事です。

Simplicity2の子テーマのスタイルシート、style.cssを編集する
　　　　　　(文字色と大きさを変更したい場合のみ)

この表示のフォントカラー等々を変更したい場合は、
スタイルシートに以下の様に書きます。

Simplicity2 child: スタイルシート (style.css)で変更内容を指定。

.topArea {
  color: #2098a8;
  font-size: 14px;
  font-variant: normal;
}

文字(フォント)の色や大きさはお好みで調整します。

尚、センタリングを行ってない(左寄り、デフォルト表示)場合は、
マージンプロパティを使って左からの領域スペースをつくってやります。
(キャッチフレーズに添った指定にすれば見栄えは良いかも。)

.topArea {
  color: #2098a8;
  font-size: 14px;
  font-variant: normal;
  margin-left: 30px; 
  padding: 0;
}

因みに映画情報サイトでは背景が黒っぽいので以下の様に白指定。

.topArea {
   color: #ffffff;
   font-size:14px;
   font-weight:normal;
}

以上です。

記事タイトルだけではなく、IF文(条件分岐)を使うと、カテゴリーやタグ一覧表示の場合にも
案内を表示する事ができます。
それは後日、別の記事で。😞

ご閲覧ありがとうございます。お粗末でした😑

サイトタイトルを中心にしフォローボタンを表示し文字サイズも変更—Simplicity2をカスタマイズ中

Simplicity2をカスタマイズ中。サイトタイトルを中心にしてフォローボタンを表示。サイトタイトルの文字サイズも変更。サイトタイトル文字サイズ指定の保持—見出しタグh1に依存させない方法。

mitemita.com

2016.02.04

グローバルナビメニューの位置をスクロールでヘッダー最上部に固定—Simplicity2をカスタマイズ中—

グローバルナビメニューの位置をスクロールでヘッダー最上部に固定する方法。jQuery必要なしで簡単に。前回に引き続き、ヘッダー廻りのカスタマイズの備忘録でございます。https://mitemita.com/simplicity2-customize1/今回は、グローバルナビメニューの位置をスクロールでヘッター上部に固定する方法です。jQueryは必要なしで、3つのファイルの編集のみで簡単に実装出来ます。

mitemita.com

2016.02.09

トップ(ヘッダー)のフォローボタンの位置替え!フォローボタンをサイドバーに移動—Simplicity2カスタマイズ中—

グローバルナビメニューの位置をスクロールでヘッダー最上部に固定した為、グローバルナビメニューでフォローボタンを隠してしまうので、シェアボタンの表示を移動する事にしました。フォローボタンをサイドバーに移動する方法

mitemita.com

2016.02.11