Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
Stinger8のカスタマイズ ヘッダー画像を変更する | 思いだし にっき
サイトアイコン 思いだし にっき

Stinger8のカスタマイズ ヘッダー画像を変更する

<p>新しいサイトにStinger8を導入してから、カスタマイズを少しずつしています。今回はStinger8のヘッダーの変更をしてみました。<br &sol;>&NewLine;なかなか進みませんが&lpar;&Hat;&Hat;&semi;&rpar;これも勉強と調べながら試しながら楽しんでカスタマイズしています。<br &sol;>&NewLine;同じようにStinger8のカスタマイズをしようと思っている方の参考になればと思います。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>現在のStinger8は初期設定のままなのでこんな感じです。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8106" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;46ee616c6aeba6f6953f761d8b13c049&period;png" alt&equals;"" width&equals;"601" height&equals;"313" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>タイトルと説明とメニューが上の方にあり、その下に「Stinger」のヘッダー画像があります。<&sol;p>&NewLine;<p>ちょっと寂しいです。<&sol;p>&NewLine;<p>ヘッダー画像を変更してみました。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>画像探しと画像の加工<&sol;h2>&NewLine;<p>Stinger8では最適な画像サイズというのが<strong>1060×300推奨<&sol;strong>になっています。<&sol;p>&NewLine;<p>スマホやデジカメで撮った写真を利用したり、無料素材から気に入った写真やイラストを探したりして、ヘッダーに使いたい画像を決めます。<&sol;p>&NewLine;<p>使用したい画像を探したら「<strong>PhotoScape<&sol;strong>」でリサイズやトリミングをします。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8114" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;b15a5129977f35ffb75429f32d640a22&period;png" alt&equals;"" width&equals;"607" height&equals;"416" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>加工した画像はStinger8の<strong>メディアライブラリに保存<&sol;strong>します。<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;827&period;html&sol;2" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>PhotoScape<&sol;strong><&sol;a>については記事の2ページ目に、ダウンロード方法から使い方までを説明してあります。<&sol;p>&NewLine;<p>ヘッダーに使う画像の用意ができたら、Stinger8のヘッダー画像と入れ替えます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>Stinger8のヘッダー画像の入替<&sol;h2>&NewLine;<p>WordPressのダッシュボード、左側のメニューの「外観」&Implies;「ヘッダー」とクリックします。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8107" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;40c1a3feb421a534cfc77a72d5502970&period;png" alt&equals;"" width&equals;"322" height&equals;"223" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>図のような画面が表示されます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8108" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;df3f7ad76fd37adbe2fa756452fd4382&period;png" alt&equals;"" width&equals;"603" height&equals;"408" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「<strong>新規画像を追加<&sol;strong>」をクリックします。<&sol;p>&NewLine;<p>メディアライブラリの画面に切り替わるので、保存した画像をクリックで選択<&sol;p>&NewLine;<p>「<strong>選択して切り抜く<&sol;strong>」をクリックします。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8109" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;4d45f652babef5b63a8c2a5f85c9885d&period;png" alt&equals;"" width&equals;"605" height&equals;"421" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ここで切り抜いたりできます。「<strong>画像切り抜き<&sol;strong>」ボタンをクリックすると確定します。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8110" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;7838a0cd4c0830ed05d6331310bcd8d5&period;png" alt&equals;"" width&equals;"602" height&equals;"418" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>先ほどのヘッダー変更のところに追加した画像が表示されます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8111" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;71a12352149ee8527b2463b5e524b24c&period;png" alt&equals;"" width&equals;"605" height&equals;"403" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「公開」をクリックするとヘッダー画像が変更されます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>サイトを表示で確認してみましょう。<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;pasonyan&period;com&sol;" target&equals;"&lowbar;blank" rel&equals;"noopener"><img class&equals;"aligncenter size-full wp-image-8112" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;7fb592a55a5b7a647e8160d531061653&period;png" alt&equals;"" width&equals;"606" height&equals;"262" &sol;><&sol;a><&sol;p>&NewLine;<p>変わっていればOKです(^^)<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>Stinger8ヘッダー画像の変更 さいごに<&sol;h2>&NewLine;<p>これだとちょっと中途半端になっていますね。<&sol;p>&NewLine;<p>ヘッダーの上部にタイトルがあり、2重になっています。<&sol;p>&NewLine;<p>ヘッダー画像を削除して、タイトルをロゴ画像にする方法と、ヘッダー画像からタイトルを外して、画像だけにし、タイトルをロゴ画像にする方法とどちらかにしてみたいと思います。<&sol;p>&NewLine;<p>が、そのためにはテーマの編集をしなければなりません。<&sol;p>&NewLine;<p>子テーマには「style&period;css」しかないので、子テーマにも、ヘッダー編集ができるように「header&period;php」ファイルをコピーする必要があるんですね・・・。<&sol;p>&NewLine;<p>しばらくはこのままで、次回はヘッダーCSSの編集ができるようにして、ロゴ画像も作り、メニューや説明の位置なども変えてみたいと思います。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;www&period;blogmura&period;com&sol;ranking&period;html"><img src&equals;"&sol;&sol;www&period;blogmura&period;com&sol;img&sol;www88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;www&period;blogmura&period;com&sol;ranking&period;html">にほんブログ村<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了