one-seater’s blog

前途多難な新築マンション購入記です。

[タイトル]

【はてなブログ】Canvaで作ったタイトル無事スマホ画面に反映できた!

どうも、ワンシーターです。

 

 

今月初めだったですか、ブログタイトルを変更しようと思って挫折してたんですが、無事設定できました。

(1週間ほど前からタイトル変えています。特に問題は無さそうなので、タイトルはこのままでいきますよ(笑))

 

PCのみだと問題ない無かったんですがスマホ画面だとどうしても、見切れてしまってました。

 

 

自分的な条件としたら、設定でレスポンシブONの状態でタイトル表示させたいです。

 ↓これです。

f:id:one-seater:20181208121833p:plain

 

 

 

 

諸先輩方のお知恵からデザインCSSへコードを張り付ければうまく表示されるらしいのですが、なぜか自分にはできませんでした。

 

自分がお世話になってるのは「はてなブログ」さん なので、その前提とありますが説明すると、

 

↓のダッシュボードのデザインを選んで・・

f:id:one-seater:20181208121856p:plain

 

 

 

 

 

↓次の画面のスパナのマークを選びます。

f:id:one-seater:20181208121923p:plain

 

 

 

 

 

↓一番下の欄のデザインCSSにコードを張り付ければOKらしいのですが、ダメでした。ブログのテーマが関係するんでしょうかね・・

f:id:one-seater:20181208121952p:plain

 

 

 

 

 

 

 コードと言っても紹介されている方によっては若干違っているので、貼っては確認をひたすら繰り返していたんですが、やっぱりダメ・・

 

 

ぐぬぬぬぬ・・

 

 

もうね、いやになってましたよ。自分でコードを作成できないですから(涙)ちんぷんかんですよ。

 

 

 

でもね、諦めたくない!!

 

 

その一心で、先週の日曜日にネットで調べまくりましたよ。

(休みの日じゃないと、じっくりとできないです。仕事から帰ってやってたら睡魔に勝てません・・お爺ちゃんですね、ほんと)

 

 

そうしていきついた答えが、「はてなフォトライフ」を利用してタイトルを表示させるやり方です。

 

 

↓画面右上のキューブマーク内の「はてなフォトライフ」を選びます。

f:id:one-seater:20181208122019p:plain

 

 

 

 

 

↓アップロードをクリックです。(2つありますが、どちらでも同じです。)

f:id:one-seater:20181208122041p:plain

 

 

 

するとオプション窓が出るので、

 

フォルダ:Hatena Blog

画像サイズ:1000

「オリジナルサイズの画像を保存」にチェックを入れます。

 

 

画像サイズについては、1000x200で作成していたので、そのサイズを入れました。(はてなブログ推奨タイトルのサイズの様なので)

 

 

 ↓これが挫折した記事ですが、流れを書いています。

(Canvaの簡単な操作も書いてますので参考にしてください。分かりにくかったらゴメンナサイ・・)

www.one-seater.work

 

 

↓順番にやっていったらこの画面がすでに出てると思いますので、「アップロード」をクリックです。

f:id:one-seater:20181208122129p:plain

 

 

次は「フォルダを編集」を選びます。(さっきのアップロードボタンの横ですね。)

f:id:one-seater:20181208122151p:plain

 

 

 

そうすると、画像一覧が出てきますので、使いたい画像を選んで「ブログに張り付ける」をクリックです。

 

 

 

ここまで来ればゴールはすぐそこです。無知な自分でも出来ましたから安心ですよ。

 

 

 

 ↓こんなのが出てきます。

f:id:one-seater:20181208122220p:plain

 

 

 この「HTML」タグの一部を使います。

上の画像だと・・src=”の後から次の ” の手前までです。

 

   

で、抜き取ったコードを下のコードの一部と差し替えますよ。

 

 (ここで大事な注意があります。元のブログ設定のバックアップは取っておいてください。予期せぬ事態になったら大変ですから)

はてなブログ前提の話なので、ブログを追加するで、非公開ブログを別に作成していじる方がリスクは無いです。自分は臆病なのでそれでやりました。

 

 

自分は2か所変更しました。(下の色が付いてる箇所です。)

上の段はご自身のブログのURLを入れます。

下の段は先ほどの抜き取ったコードを張り付けます。

(注意、下のコードをそのままコピペしてもダメですよ。色の付いてるところを変更してくださいね。)

 

一度、メモ帳にコピペして使うといいかもです。

 

 

 この下から

 

<!-- タイトル用の画像付きリンク -->
<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>

 

この上まで 

 

 

 

 張り付ける場所は先ほどのスパナを選んで、ヘッダ内の「タイトル下」にごっそりと貼り付けますよ。

既に何かコードがあったら消さないようにしてくださいね。画面がおかしくなるかもです。(何もいじってなかったら空欄のはずです。)

↓ここの位置です。

f:id:one-seater:20181208122249p:plain

 

 

 

 

 

 

そして忘れがちなのが、「変更を保存する」ボタンです。これを押さないと設定は変わりませんよ。

f:id:one-seater:20181208122311p:plain

 

 

 

 

↓これはブログ記事を書きながら確認できるプレビュー画面です。(PC操作ですがスマホでどう見えるか確認できます。)

 

 

バッチリですね!

 

f:id:one-seater:20181208122331p:plain

 

 

 

いろいろ試してダメだと諦めていましたが、なんとかタイトル設置できました。

単純な事かもしれませんが、すごい達成感があります。

 

 

だけど、自分だけじゃ絶対に無理でした。

先人たちのお知恵に感謝します。

 

「うえの」さんのブログを参考にさせてもらいました。

この場を借りてお礼申し上げます。

www.uenoyou.net

 

 

 正直、コードですが自分に取ったら暗号の様なものですよ。

それでも、なんとか目的が達成できてよかったです。

 

 

それよりも早く、文章力をレベルアップしないといけないんでしょうけどね・・

 

 

 

 

今回はここまで。

 

 

つづく。

 

 

 

 


にほんブログ村