あぶく銭を手に入れようと始めたはずのブログですが、開設から一年が経過しました。未だに購読してくれる読者は0名ですし、google adsenseの収益はロクに上がっておらず、独自ドメインの年会費にすらなりません。笑えます。
それはさておき、折角一年も経過したので、ここらでブログのデザインでも変更してみる事にしました。
目次
ヘッダー画像作成
とりあえず、タイトルの画像を作ってみました。
イメージはターミナルソフトです。後ろには適当に本から抜粋して書いてます。素人丸出しです。笑ってくれ。
[PC版]
[スマホ版]
で、ここまでは良かったのですが、流石似非エンジニアの私です。うまく設定できずに1週間くらい苦戦しました。理解度がそこら辺の人以下なので、正直死にたくなりました。
なんか小さく表示される
そんなわけで、とりあえず作った画像を貼り付けてみました。
このありさまですよ。
希望としては余白なく、ピッタリとヘッダー画像を表示させたかったのですが、もう救えないほど不格好に表示されてます。
ただ、「こんなん直ぐに解決できる」とタカをくくっていました。そう4月末に思っていたら結局解決しないままGWが終わっていました。
焦るような時間だった
ヘッダー画像が無いことはさして問題ではないが、こんな事すら解決出来ない事実がやばすぎて、焦り始めました。
で結局以下の記事の内容から解決しました。本当に感謝してます。
www.tukinasikotonoha.com
個人的な要望として、余白に色を表示させるのではなく、ヘッダー画像を横いっぱいに広げたかったので、max-widthの部分を変更して、適用しました。以下のような感じです。
<style type="text/css">
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:1920px;
margin: auto;
display: block;
}
.headernew a{
display:block;
background-color:#000000;
}
.headernew{
margin:0px!important;
}
</style>
<h1 class="headernew">
<a href="トップページURL">
<img src="画像URL" alt="よくわからないエンジニア" width="100%">
</a>
</h1>
とりあえずこれで解決しました。なんだか記事にするのも恥ずかしい内容ですが…
一歩目から色々つまずきましたが、少しずつサイトのデザインとかも変えていこうかなと考えています。