stinger3 備忘録 4

2017年12月20日stinger3 備忘録ナビケーションメニューのカスタマイズ, ヘッダー画像をスライドさせるstinger3 備忘録, ヘッダー画像をスライドさせる

stinger3

stinger3 備忘録 4

ヘッダー画像をスライドさせる

ナビケーションメニューのカスタマイズ 1

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ したやり方等を忘れないために書き留めた備忘録です

記事内にソースコードを表記してる箇所は、ダブルクリックすると ソースコードが全選択されるので、コピーして使えます。

 

1.ヘッダーの画像をスライド画像

 

ブログを開いた時、目を引くようにヘッダー画像をスライドさせた くていろいろググッテ見たがわからず、問いかけてみたところ、

Naifixー起業バカ」サイトの「エロー ラ」様からご指南を承りました。

ステインガーにスライダーを導入してみましょう

このままの通り実行しました。

 

「caption」 に大まかな説明を加えた。

「URL」にリンクさせるURLを挿入した。

「settings」箇所は任意。

画像サイズを変更してる。

 

万が一上記サイトが観れなくなった事を考えてやり方を記載して置 く。

 

【Meta Slider導入】

(1)プラグインインストール

WP→プラグイン→新規追加をクリック。

検索窓に「meta slider」を入力して「プラグインの検索」をクリ ック。

suraido001

表示された項目の中から「mete slider」の「いますぐインストー ル」をクリックする。

インストールが終わったら左メニュー欄に「meta slider」ボタン が表示されるのでクリックする。

suraido002

 

(2)設定画面

設定画面に移ったら、左上に表示されている「+」マークをクリッ ク。

suraido003

「Add Slide」からスライダーに適用する画像を選びます。今回はS tingerヘッダー部分に採用するので、幅1000px・高さ300pxの画像 にした。

suraido004

右側の設定ボタンで動きを調整できます。「Save & Preview」ボタ ンをクリックしてどんな動きになるか確認してみましょう。あとか ら自由に変更できます。

suraido005

「Advance Setteing」ではさらに詳細な設定ができます。「Auto p lay」にチェックを入れておけば、自動でスライドされます。その 他とくにいじらなくてもOK。

 

(3)テーマに挿入するコードを確認

右下の「Usage」にコードが表示されています。記事内で使う場合 は「Shortcode」ですが、今回はテーマに適用するので「Template Include」タブを選択する

suraido006

ここに表示されているコードをテキストエディタ等にコピペする。

 

(4)コード挿入

Stinger3のヘッダー画像は「gazou」というIDが振られている部分 になる。

ヘッダーPHP内を確認する。

その中に下記コードがあるので、検索等をしてを探します。

[php]
<div id="gazou">
  <div id="gazou-in">
    <?php if (is_home()) { ?>
<?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt= "*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } else { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt= "*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } ?>
  </div>
  <!– /#gazou-in –>
</div> <!– /#gazou –>
[/php]

 

中身を丸ごと消して差し替えても良いのですが、復元することも考 えて残しておきます。下記の直前に、先ほどコピペしたコードを挿 入する。

 

[php]
  </div>
  <!– /#gazou-in –>
</div>
<!– /#gazou –>
[/php]

 

挿入後はこんな感じになる。

 

[php]
<div id="gazou">
  <div id="gazou-in">
    <?php if (is_home()) { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt= "*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } else { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt= "*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } ?>
<?php     echo do_shortcode("[metaslider id=990]"); ?>
  </div>
<!– /#gazou-in –>
</div> <!– /#gazou –>
[/php]

ID番号は変わりますので、自分でコピペしたコードを使う。

 

【CSS設定】

CSSに下記を追加する。

[css]
#gazou-in {  margin: 0 auto 50px auto; }

#header {  min-height: 100px; }
[/css]

「min-height」の高さは、ブログタイトル部分です。ご自分のブロ グに合わせて調整する。

 

【見た目を確認】

これで一通りの設定が終わり。ヘッダー画像はそのまま表示されて います。

ヘッダー画像を消す場合

ヘッダーを消してスライダーのみ表示させる場合は、【外観】→【 ヘッダー】から「ヘッダー画像を削除」する。

スライダーのみ表示される。

suraido007

「エローラ」様にはたいへんお世話になっております。

ありがとうございます。

 

ナビケーションメニューのカスタマイズ 1

 

ナビケーションメニューのカスタマイズ 1としたのは、とりあえ ずの為。

余裕がでてきたら変更予定。

イマイチ満足していない。

 

カスタマイズ内容

1.文字のフォントを13pxから18pxにした。

2.marginに0 0 0 2pxを指定した。

3.グラデーションの指定をした。

4.ボックスシャドーの指定をした。

5.hover時動作のリンク文字色を、#C03にする変更した。(他のリ ンクと同じ)

 

子テーマのCSSに下記コードを追加した。

反映されなかったら、親テーマののCSSに追記。

 

[css]
/*———————
ナビゲーション
———————–*/
#navi-in li {
 position: relative;
 float: left;
 /*フォントサイズを16に変更*/
 font-size: 18px;
 padding-left: 10px;
 display: inline;
 padding-right: 10px;
 border-left-width: 1px;
 border-left-style: dotted;
 border-left-color: #CCC;
 padding-top: 5px;
 padding-bottom: 5px;
 /*背景色を指定*/
 background-color:#ECECEC;
 /*マージン指定*/
 margin: 0 0 0 2px;
 /*グラデーション指定*/
 background:-webkit-gradient(linear, 0 0, 0 100%, col or-stop(0.5, #ECECEC), to(#D1D1D1));
 background:-webkit-linear-gradient(#ECECEC 50%, #D1D 1D1 100%);
 background:-moz-linear-gradient(#ECECEC 50%, #D1D1D1  100%);
 background:-o-linear-gradient(#ECECEC 50%, #D1D1D1 1 00%);
 background:linear-gradient(#ECECEC 50%, #D1D1D1 100 %);
 /*ボックスシャドー指定*/
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1p x 0 #FFF;
     text-shadow: 0 1px #FFF;
     /*2013/11/21追記 日本語を表示するときに高さが均一に
ならないので高さを指定*/
     height: 20px;
}
#navi-in li li {
 float: left;
 font-size: 13px;
 padding-left: 10px;
 display: inline;
 padding-right: 10px;
 padding-top: 5px;
 padding-bottom: 5px;
 border: none;
}
#navi-in li a {
 float: left;
 color: #333;
 text-decoration: none;
}
.menu-navigation-container {
 overflow: hidden;
}
#navi-in li a:hover {
 text-decoration: underline;
 /*ホバー時の文字色を他のリンクと同じに変更*/
 color:#C03;
}
[/css]

カスタマイズ 1の変更後です
suraido008

お疲れ様です。