![[タイトル]](https://cdn-ak.f.st-hatena.com/images/fotolife/o/one-seater/20181229/20181229060826.png)
どうも、ワンシーターです。
今月初めだったですか、ブログタイトルを変更しようと思って挫折してたんですが、無事設定できました。
（１週間ほど前からタイトル変えています。特に問題は無さそうなので、タイトルはこのままでいきますよ（笑））
ＰＣのみだと問題ない無かったんですがスマホ画面だとどうしても、見切れてしまってました。
自分的な条件としたら、設定でレスポンシブＯＮの状態でタイトル表示させたいです。
↓これです。
諸先輩方のお知恵からデザインＣＳＳへコードを張り付ければうまく表示されるらしいのですが、なぜか自分にはできませんでした。
自分がお世話になってるのは「はてなブログ」さん なので、その前提とありますが説明すると、
↓のダッシュボードのデザインを選んで・・
↓次の画面のスパナのマークを選びます。
↓一番下の欄のデザインCSSにコードを張り付ければＯＫらしいのですが、ダメでした。ブログのテーマが関係するんでしょうかね・・
コードと言っても紹介されている方によっては若干違っているので、貼っては確認をひたすら繰り返していたんですが、やっぱりダメ・・
ぐぬぬぬぬ・・
もうね、いやになってましたよ。自分でコードを作成できないですから（涙）ちんぷんかんですよ。
でもね、諦めたくない！！
その一心で、先週の日曜日にネットで調べまくりましたよ。
（休みの日じゃないと、じっくりとできないです。仕事から帰ってやってたら睡魔に勝てません・・お爺ちゃんですね、ほんと）
そうしていきついた答えが、「はてなフォトライフ」を利用してタイトルを表示させるやり方です。
↓画面右上のキューブマーク内の「はてなフォトライフ」を選びます。
↓アップロードをクリックです。（２つありますが、どちらでも同じです。）
するとオプション窓が出るので、
フォルダ：Hatena Blog
画像サイズ：１０００
「オリジナルサイズの画像を保存」にチェックを入れます。
画像サイズについては、１０００ｘ２００で作成していたので、そのサイズを入れました。（はてなブログ推奨タイトルのサイズの様なので）
↓これが挫折した記事ですが、流れを書いています。
（Canvaの簡単な操作も書いてますので参考にしてください。分かりにくかったらゴメンナサイ・・）
↓順番にやっていったらこの画面がすでに出てると思いますので、「アップロード」をクリックです。
次は「フォルダを編集」を選びます。（さっきのアップロードボタンの横ですね。）
そうすると、画像一覧が出てきますので、使いたい画像を選んで「ブログに張り付ける」をクリックです。
ここまで来ればゴールはすぐそこです。無知な自分でも出来ましたから安心ですよ。
↓こんなのが出てきます。
この「HTML」タグの一部を使います。
上の画像だと・・src＝”の後から次の ” の手前までです。
で、抜き取ったコードを下のコードの一部と差し替えますよ。
（ここで大事な注意があります。元のブログ設定のバックアップは取っておいてください。予期せぬ事態になったら大変ですから）
はてなブログ前提の話なので、ブログを追加するで、非公開ブログを別に作成していじる方がリスクは無いです。自分は臆病なのでそれでやりました。
自分は２か所変更しました。（下の色が付いてる箇所です。）
上の段はご自身のブログのＵＲＬを入れます。
下の段は先ほどの抜き取ったコードを張り付けます。
（注意、下のコードをそのままコピペしてもダメですよ。色の付いてるところを変更してくださいね。）
一度、メモ帳にコピペして使うといいかもです。
この下から
<!-- タイトル用の画像付きリンク -->
<h1 class="headernew">
<!-- ①ブログのトップページのURL -->
<a href="https://www.one-seater.work/">
<!-- ②タイトル用画像のURLとブログタイトル -->
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/one-seater/20181118/20181118091901.png" alt="20181118091901" width="100%">
</a>
</h1>
<!-- タイトルのスタイル -->
<style type="text/css">
.header-image-wrapper {display: none;} /* 元のタイトルを非表示 */
#blog-title {display: none;} /* 元のタイトルを非表示 */
.headernew img {
max-width:1000px; /* ③画像の幅 */
margin: auto; /* ④画像の左右の余白を同じ幅にする */
display: block; /* 画像の下の隙間をなくす */
}
.headernew a {
display:block; /* 余白を塗りつぶすための設定 */
background-color:#003cb5; /* ⑤余白の色 */
}
.headernew {
margin:0px!important; /* 画像の上下の余白を削除 */
}
</style>
この上まで
張り付ける場所は先ほどのスパナを選んで、ヘッダ内の「タイトル下」にごっそりと貼り付けますよ。
既に何かコードがあったら消さないようにしてくださいね。画面がおかしくなるかもです。（何もいじってなかったら空欄のはずです。）
↓ここの位置です。
そして忘れがちなのが、「変更を保存する」ボタンです。これを押さないと設定は変わりませんよ。
↓これはブログ記事を書きながら確認できるプレビュー画面です。（ＰＣ操作ですがスマホでどう見えるか確認できます。）
バッチリですね！
いろいろ試してダメだと諦めていましたが、なんとかタイトル設置できました。
単純な事かもしれませんが、すごい達成感があります。
だけど、自分だけじゃ絶対に無理でした。
先人たちのお知恵に感謝します。
「うえの」さんのブログを参考にさせてもらいました。
この場を借りてお礼申し上げます。
正直、コードですが自分に取ったら暗号の様なものですよ。
それでも、なんとか目的が達成できてよかったです。
それよりも早く、文章力をレベルアップしないといけないんでしょうけどね・・
今回はここまで。
つづく。
