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カスタマイズ タイトルをロゴ画像に phpのコピー | 思いだし にっき
サイトアイコン 思いだし にっき

Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー

<p><img class&equals;"aligncenter size-full wp-image-11635" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;rogoga&period;png" alt&equals;"" width&equals;"387" height&equals;"196" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>Stinger8のヘッダー画像を変えてみましたが、タイトルを画像にいれたので、もう一度画像を替え高さを120に変更。<&sol;p>&NewLine;<p>タイトルをロゴ画像にしてメニュー位置も変えてみました。<&sol;p>&NewLine;<p>そのためには子テーマで<strong>header&period;phpを変更<&sol;strong>する必要があります。<&sol;p>&NewLine;<p>今回は子テーマに親テーマからphpファイルをコピーする方法から。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>Stinger8のヘッダーのカスタマイズ<&sol;h2>&NewLine;<h3>カスタマイズ用に子テーマの準備<&sol;h3>&NewLine;<p>子テーマで編集しようと思っても子テーマには最初から編集できる子テーマは、「functions&period;php」と「style&period;css」しかありません。<&sol;p>&NewLine;<p>これら以外のファイルを編集したい場合は、子テーマとして編集できるように、追加する必要があります。<&sol;p>&NewLine;<p>追加するには、親テーマからファイルをコピーします。<&sol;p>&NewLine;<h4>FTPで、「header&period;php」ファイルをコピーするには<&sol;h4>&NewLine;<p>FTPツールなどを使って「STINGER8」のファイルを子テーマの方にコピーします。<&sol;p>&NewLine;<p>FTPソフトを使用して、親テーマから目的のphpファイルをダウンロードし、そのまま子テーマにアップロードするというのが一般的な方法です。<&sol;p>&NewLine;<p>私はFTPソフトは<strong>FileZilla<&sol;strong>を使いました。<&sol;p>&NewLine;<p>インストールや使い方は<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2628&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>こちら<&sol;strong><&sol;a>で記事にしていますので参考にしてください。<&sol;p>&NewLine;<p>まず、FTPソフト経由で親テーマディレクトリから必要なphpファイルをダウンロードします。<&sol;p>&NewLine;<p>FileZillaを起動したら、サーバーに接続して、Stinger8をインストールしてある<&sol;p>&NewLine;<p>ドメインのpublic&lowbar;html&Implies;wp-content&Implies;themes&Implies;stinger8と開きます。<&sol;p>&NewLine;<p>今回は<strong>header&period;php<&sol;strong>を編集したいので<strong>header&period;phpファイルを右クリックしてダウンロードをクリック<&sol;strong>します。<&sol;p>&NewLine;<p>ローカルの開いているフォルダ内にダウンロードされます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8127" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;he01&period;png" alt&equals;"" width&equals;"416" height&equals;"445" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>(※図の例では、ローカルを前に開いたところのままにしていたので、そこに入ってしまいました&lpar;&Hat;&Hat;&semi;&rpar;みなさんは任意のフォルダを開いて作業してください)<&sol;p>&NewLine;<p>それを子テーマディレクトリにアップします。<&sol;p>&NewLine;<p>右側の欄の<strong>Stinger8 child<&sol;strong>フォルダを開いておいてから、<&sol;p>&NewLine;<p>ローカルにダウンロードした<strong>header&period;phpファイルを右クリック<&sol;strong>します。<&sol;p>&NewLine;<p>メニューからアップロードをクリックするとStinger8 childにheader&period;phpファイルがコピーされます。<&sol;p>&NewLine;<p>ドラッグ&amp&semi;ドロップでもできると思います。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8128" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;he02&period;png" alt&equals;"" width&equals;"603" height&equals;"299" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>途中でファイルを開いたりすることが無いので、文字化けエラーなどが起こりにくいです。<&sol;p>&NewLine;<p>また、一度ローカルにダウンロードするので、誤って別のディレクトリにアップロードしてしまっても、再アップロードができます。<&sol;p>&NewLine;<p>デフォルトのバックアップも取れるので安全ですね。<&sol;p>&NewLine;<p>アップロードしてからダッシュボードの「外観」&Implies;「テーマの編集」を開いてみると<&sol;p>&NewLine;<p>Stinger8 childに「header&period;php」がちゃんと追加されていました(^^)<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8129" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;he03&period;png" alt&equals;"" width&equals;"602" height&equals;"262" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ファイルをコピーすると、「テーマの編集」画面(子テーマ)からファイルの編集が可能になります。<&sol;p>&NewLine;<p>子テーマを使ってカスタマイズします<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>サイトタイトルをロゴ画像に<&sol;h2>&NewLine;<p>サイトタイトルをロゴ画像にするには、先にロゴ画像を用意します。<&sol;p>&NewLine;<p>簡単な方法としては、Web上で簡単にテキスト画像ができるサイト<a href&equals;"http&colon;&sol;&sol;ja&period;cooltext&period;com&sol;Logos" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>Cool Text<&sol;strong><&sol;a>を利用すると楽です。<&sol;p>&NewLine;<p>無料で利用できます。<&sol;p>&NewLine;<p>Cool Textにアクセスするといろいろなロゴサンプルが並んでいます。<&sol;p>&NewLine;<p>一覧から使いたいロゴスタイルを選ぶだけです。<&sol;p>&NewLine;<p>詳しい使い方は「<a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1291&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>WordPressのタイトルロゴ作成 Cool Textの使い方<&sol;strong><&sol;a>」を参照してください。<&sol;p>&NewLine;<p>作ったロゴ画像はメディアにアップ(保存)しておきます。<&sol;p>&NewLine;<p>保存の時のURLをメモしておきます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8130" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;prigo00&period;png" alt&equals;"" width&equals;"604" height&equals;"196" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&starf;URLは長い場合は、隠れている部分があるので、スクロールして確実に全部メモします。<&sol;p>&NewLine;<p>子テーマ「STINGER8 Child」のテンプレート項目にある「<strong>テーマヘッダー&lpar;header&period;php&rpar;<&sol;strong>」を選択します。<&sol;p>&NewLine;<p>「&lt&semi;&excl;– ロゴ又はブログ名 –&gt&semi;」で始まる以下のCSSコードを探します。<&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;dae3e4&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;f4fdfe&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;">&NewLine;&lt&semi;&excl;&&num;8211&semi; ロゴ又はブログ名 &&num;8211&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;p class&equals;&&num;8221&semi;sitename&&num;8221&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;a href&equals;&&num;8221&semi;&lt&semi;&quest;php echo esc&lowbar;url&lpar; home&lowbar;url&lpar; &&num;8216&semi;&sol;&&num;8217&semi; &rpar; &rpar;&semi; &quest;&gt&semi;&&num;8221&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;&quest;php echo esc&lowbar;attr&lpar; get&lowbar;bloginfo&lpar; &&num;8216&semi;name&&num;8217&semi; &rpar; &rpar;&semi; &quest;&gt&semi;<br &sol;>&NewLine;&lt&semi;&sol;a&gt&semi;<br &sol;>&NewLine;&lt&semi;&sol;p&gt&semi;<br &sol;>&NewLine;&lt&semi;&excl;&&num;8211&semi; ロゴ又はブログ名ここまで &&num;8211&semi;&gt&semi;<br &sol;>&NewLine;<&sol;div><&sol;div>&NewLine;<p>見つかったら4行目の<&sol;p>&NewLine;<p>「<strong>&lt&semi;&quest;php echo esc&lowbar;attr&lpar; get&lowbar;bloginfo&lpar; &OpenCurlyQuote;name’ &rpar; &rpar;&semi; &quest;&gt&semi;<&sol;strong>」というコードを、<&sol;p>&NewLine;<p>以下のコードに書き換えます。<&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;dae3e4&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;f4fdfe&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;">&NewLine;<p>&lt&semi;&excl;&&num;8211&semi; ロゴ又はブログ名 &&num;8211&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;p class&equals;&&num;8221&semi;sitename&&num;8221&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;a href&equals;&&num;8221&semi;&lt&semi;&quest;php echo esc&lowbar;url&lpar; home&lowbar;url&lpar; &&num;8216&semi;&sol;&&num;8217&semi; &rpar; &rpar;&semi; &quest;&gt&semi;&&num;8221&semi;&gt&semi;<br &sol;>&NewLine;<strong> &lt&semi;img src&equals;&&num;8221&semi;<strong><span style&equals;"background-color&colon; &num;ffff00&semi;">画像URL<&sol;span><&sol;strong>&lt&semi;&sol;span &gt&semi;&&num;8221&semi;&sol;&gt&semi;<&sol;strong><br &sol;>&NewLine;&lt&semi;&sol;a&gt&semi;<br &sol;>&NewLine;&lt&semi;&sol;p&gt&semi;<br &sol;>&NewLine;&lt&semi;&excl;&&num;8211&semi; ロゴ又はブログ名ここまで &&num;8211&semi;&gt&semi;<&sol;div><&sol;div>&NewLine;<p>「画像URL」の部分は、ロゴ画像を保存した時にメモした画像のURLをいれます。<&sol;p>&NewLine;<p>URLが間違っていると画像が正しく表示されません。<&sol;p>&NewLine;<p>その時は入力に誤りがないか確認してみてください。<&sol;p>&NewLine;<p>先程のCSSコードを書き換えると以下のようなコードになっていると思います。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8131" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;prigo01&period;png" alt&equals;"" width&equals;"490" height&equals;"129" &sol;><&sol;p>&NewLine;<p><center><strong><strong><span style&equals;"font-size&colon; 18pt&semi;">↓  ↓  ↓  ↓<&sol;span><&sol;strong><&sol;strong><&sol;center><&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8132" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;prigo02&period;png" alt&equals;"" width&equals;"580" height&equals;"131" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「ファイルを更新」をクリックします。<&sol;p>&NewLine;<p>ブログタイトルが指定したロゴ画像に変わります。<&sol;p>&NewLine;<p>サイトを表示で確認します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8133" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;prigo03&period;png" alt&equals;"" width&equals;"607" height&equals;"180" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>ヘッダーメニューの位置の変更<&sol;h2>&NewLine;<p>ロゴ画像に変更したことでブログイメージが変わりましたが、ヘッダー画像の上にヘッダーメニュー(グローバルメニュー)があるのが気になります。<&sol;p>&NewLine;<p>画像の下に移動してみました。<&sol;p>&NewLine;<p>ダッシュボードで、外観&Implies;テーマの編集と開き、子テーマになっていることを確認してから、テーマヘッダー(header&period;php)をクリックします。<&sol;p>&NewLine;<p><strong>ヘッダーメニューの記述<&sol;strong>をヘッダー画像記述の下に移動するだけでいいんですね(^^)<&sol;p>&NewLine;<p>こんな感じです<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8134" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;prigo04&period;png" alt&equals;"" width&equals;"607" height&equals;"258" &sol;><&sol;p>&NewLine;<p><strong>&lt&semi;&quest;php get&lowbar;template&lowbar;part&lpar; &&num;8216&semi;st-header-menu&&num;8217&semi; &rpar;&semi; &sol;&sol;カスタムヘッダーメニュー &quest;&gt&semi;<&sol;strong>の部分を<&sol;p>&NewLine;<p>&lt&semi;&sol;div&gt&semi;<br &sol;>&NewLine;&lt&semi;&excl;&&num;8211&semi; &sol;gazou &&num;8212&semi;<&sol;p>&NewLine;<p>の前に移動します。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8135" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;prigo05&period;png" alt&equals;"" width&equals;"601" height&equals;"214" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>Stinger8 カスタマイズ さいごに<&sol;h2>&NewLine;<p>こちらが今日のカスタマイズ分です(^^)<&sol;p>&NewLine;<p>クリックすると新しく作ったサイトにジャンプします。<&sol;p>&NewLine;<p>&nbsp&semi;<&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-8136" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;prigo06&period;png" alt&equals;"" width&equals;"607" height&equals;"310" &sol;><&sol;a><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>やる前は、子テーマに header&period;php をコピーと書いてあっても、具体的にどうやるのさ!?なんて思いつつの作業でしたが、なんとかなるもんですね(^^;<&sol;p>&NewLine;<p>同じように、ささいな事でつまづいている方もいるかもしれないと思いながらの記事書きです。めげずにがんばりましょう!<&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;

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