ブログをリニューアルしてみました

f:id:yoooooemin:20170812220626g:plain

こんばんは、織田檸檬です。

ちょっと気が向いたので、ブログをリニューアルしてみました。

テーマは『ZENO-TEAL』

zeno-teal.hatenablog.com

www.foxism.jp

良さ気なブログテーマを見つけたので導入してみました。

c-miyaさんのブログテーマ『ZENO-TEAL』です。

緑色もいい感じですし、ヘッダーの下にオススメ記事を乗っけることができるっていうのがCOOLです。これがあったので導入したといってもいいでしょう。

カード型の記事表示も気に入っています。

躓いたところいくつか

広告邪魔問題

導入当初、カード型記事のサムネイルに覆いかぶさるように広告が張り付いていて悪戦苦闘しました。

f:id:yoooooemin:20170813004946p:plain

ギャアアーーーッ

しかし同じように苦しんでる方が先に質問されていて、しかも答えが返ってきていました。

『はてぶの広告を非表示にせよ』

よく読んでなかったっていうのもあるのですが、そういえばこのテーマ、インストールページにこんなことが書かれていました。

f:id:yoooooemin:20170813005024p:plain

よく読めよ！って話ですね。すみません。

というか僕はAdsense審査通ってはいたものの、あんまり使い方がわかってなくて、QuickStartをオンにした状態で止まっていました。

てっきりこの広告はAdsenseのせいだろうと思っていたので、悪戦苦闘していたわけですね。あれがはてブ側の広告だったとは……。

ちなみにコマーシャルA,Bが僕が設置した初のアドセンスです。

載せ方はこちらを参考にしました。

www.polyglotconspiracy.net

タイトルロゴ挿入

アイキャッチ画像ですね。

あれ実は星が動いてるんですよ。GIFでつくってあるんです。

サイズもこれとまったく同じです。

当初は文字部分だけの透過pngを挿入しようと思っていたのですが、タイトルロゴを設定するところが見当たらなかったので、止む無くヘッダーをいじる方向にしました。

小生CSSはあまり得意ではないので無理矢理な感じが否めないのですが、一応コードを公開しておこうと思います。

以下のコードをデザインのカスタマイズのデザインCSSのところに貼り付けます。


 
/* YoYoYoYの文字を透明化 */
#blog-title #title a
{
opacity:0;
}

/* 画像配置 */
#blog-title{
background-image: url("画像のリンク");
background-repeat: no-repeat;
background-position: center top;
}

/* 説明文の再配置 */
#blog-description
{
padding-top:180px;
padding-bottom:30px;
color:#fff
}

原理としては、まずタイトル文字を透明化させて、その背景の先ほどのGIFを置いてます。

そもそも画像だけならヘッダー画像を設定できるところあるじゃんと思われるかもしれません。しかしそうするとせっかくのレスポンシブが台無しになってしまいます。

僕は下地の緑は画面に合わせて伸縮してほしかったので、ヘッダー画像で設定するのをやめたのです。

説明文に関しては都度変えたかったので、表示させています。

しかしもうちょっと下に来てほしかったので適当に調整してます。ここらへんちょっとスマートな方法がありそうな気がします。

あと関係ないですが、こちらの記事。

nasust.hatenablog.com

僕はここではてブのテーマがすべてCSSで出来ていることを知りました。

はてブってHTMLいじれないのか、と思うと同時に、ZENO-TEALも含め全部のテーマがCSSだけで出来てることに驚き、そしてようやく、HTMLが骨組みでCSSが見た目を担っているっていう言葉の意味が、ちょっとわかった気がしました。