STINGER3のタイトルをロゴ画像に変更した

      2016/07/08

daredeki1

こんにちはおっちゃんです。

テーマのタイトルをロゴ画像にしてみた

やり方は検索しまくりました

STINGER3のテーマを使い始めて数日、やっぱりタイトルが文字だとカッチョ悪いと思いロゴ画像に変更する事にしました。

さてどうしたもんかと途方にくれながらSTINGER3の公式サイトを覗きに行ったらありました。

カスタマイズの仕方「ロゴを画像にしよう」読んでみると僕にも出来そうなので早速作業を開始する。

一応仕事でイラストレーターを使う(業種は職人ですが)のでイラレでパパッと思い描く文字を打ち込む。

決め事として公式サイトにも書いてありましたが、320px以下のロゴ画像を用意する事

irare0001

日本語フォントと、英語にしてみたカッコイイのはたぶん英語なんだけど、やっぱり優しい雰囲気が出ないので日本語で行こうと決める、次にカタカナとひらがなで悩むがカタカナにしてみた。

irare0002

見た目で選ぼう、でも優しい雰囲気のあるフォントにしようと思い決める。

irare0004うん、たぶん今の自分にはこれがあっている、あまりキッチリしたフォントを選ぶよりも少し砕けた感じで優しいフォントにしてみたが、少し文字間隔がおかしく見えてしまうので詰めてしまうことに、アウトラインを入れて調整する。

irare0005途中、文字の大きさを変えたりして遊んだけど、やっぱり普通にしようっと。

irare0006文字間隔の修正をして基本的に出来上がりました、このままだとちょっとだけ寂しいので色を入れたりして完成。

irare0007

オレンジ色って好きなんだよね、暖かい雰囲気がする。

っとここまでは僕のお遊びです。

このPNG画像を使ってタイトルを画像ロゴに変更していきます。

解説通りに、外観→テーマの編集→header.phpに行き、以下の部分を探しだしました。

1
2
3
<p class="sitename"><a href="<?php echo home_url(); ?>/">
        <?php bloginfo('name'); ?>
        </a></p>
&amp;lt;?php bloginfo('name'); ?&amp;gt;

上の2番目の所を以下のように変更する

&amp;lt;img src="&amp;lt;?php echo get_template_directory_uri(); ?&amp;gt;/images/rogo.png"&nbsp;&nbsp;/&amp;gt;

ここで余談ですが、↑で使っているスクロールするやつね、これもこの記事を書いている時に探しております。

これ探すだけでえらい時間が掛かりました、名前がわからない、今だ使い方がわからんけどね。

プラグイン名は「SyntaxHighlighter Evolved」ってやつです

ソースコードを美しく表示するプラグインでした、使い方はサッパリですw

で、どうなったかと言うと見事に出来ませんでした(泣)何故なのかは全くの不明、何しても僕の知識ではダメでした。

でもメゲマセン、こんな事はショッチュウなんですよ、だからまた検索と言う旅に出たわけです。

「STINGER3 カスタマイズ」などのワードを使ってネットを彷徨い歩くと出てきました^^

真夜中WORKSさんが、「サイトタイトルを画像に変更」をとっても簡単に解説してくれていました。

助かり~、ありがとうございます~

で、また以下の場所を探すんですが、さきほど失敗した場所と同じでした。

&amp;lt;p class="sitename"&amp;gt;&amp;lt;a href="&amp;lt;?php echo get_option('home'); ?&amp;gt;/"&amp;gt;&amp;lt;?php bloginfo('name'); ?&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;

で、新たに直すのがこの部分、やっぱり2行目でした。 <?php bloginfo('name'); ?>


結果的に上手くいきましたので手順を最初から

320ピクセル以下の画像ロゴをpng画像で作る、僕の場合は「daredekirogo1.png」と言うファイル名になりました。

ワードプレスのダッシュボードからメディア→新規追加で画像をアップロードする。

tema3ここで、上の画像のような物が出てきますので、右側の「ファイルのURL」をコピーしておく。

それで、先ほど出て来た直さないといけない部分2行目でしたね。

この部分を以下のようにしちゃう、と言っても下に貼っているのは真夜中WORKSさんのをそのまま貼り付けていますが。

文字の青い部分を先ほどコピーしたURLに貼り替えて、真夜中ワークスと言う部分は自分のブログ名に変えてあげて、最後に更新したら出来ました。

&amp;lt;img src="http://www.mayonaka-works.com/wp-content/themes/stinger3ver20130925/images/logo.png" alt="真夜中ワークス" /&amp;gt;
 完成はこちら rogokansei
編集後記 当初の予定ではもっと早く終わる予定でした。 

何故かわかりませんが上手く行かない事が多くて、知識が無いって本当にツライです でもメゲナイでがんばります、わからない事は調べてわかるようにしたら良いんです 色々な先輩がわかりやすく解説してくれていますからね。
 

 - STINGER3カスタマイズ , ,