綿飴と水飴.com

綿飴と水飴

140字にまとめられない好きな音楽のこと

はじめてちゃんとブログのデザインをカスタマイズしてみた

f:id:shabazooo-tkfm:20170617184623p:plain

 

※今回は音楽関係ないです

 

ブログのデザインを色々といじってみたんだけどあたふたして完成させたので、現時点で自分でも何をやったのか曖昧なので記憶を辿りながらまとめて次回以降も利用できるようにメモとして残しておきます。

 

これまでは『Brooklyn』という人気テーマを使わせて頂いてました。シンプルでとても使いやすかったです。解説も親切で何も困りませんでした。


しかし、飽き性がスゴイ人間なので「そろそろデザインを一新したいな」というのを考えていたので今回デザイン変更に踏み切りました。

 

そこで採用した新テーマは『DUDE』こちらも人気のテーマ。洒落てる~

 

さて、インストールしたはいいが何をしたらいいのか。

理系学生ではあるがhtmlやCSSは一切分からないので結局グーグル先生に泣きつくことに。

 

今回一番参考にさせてもらったのがこちら。ありがたや。

 

タイトルバーとヘッダー

まずはブログの顔ともいえるタイトルバーとヘッダー。「まずは」と言ってもほとんどここしかいじってないのだけれども。

f:id:shabazooo-tkfm:20170617190528p:plain

 

タイトルバー

この『DUDE』はタイトルバーの下に画像とおすすめ記事をお洒落に配置できるのが特徴である。

しかし、やってみたものの「画像にもタイトルバーにもタイトルあってなんかゴチャゴチャしてんなぁ、、」と思ったのでタイトルバーを消去しました。思い切り大事。

 

ヘッダー

適当につけたブログタイトル『綿飴と水飴』は『Wataame-Mizuame』に。横文字お洒落!!!(単純)

水飴と綿飴

水飴と綿飴

 

ちなみにサブタイトルは「タイトルは関係ない。内容と関係ない。」という奥田民生氏のマシマロの歌詞をもじって英語にしただけ。

マシマロ

マシマロ

  • 奥田 民生
  • ロック
  • ¥250

マシマロは関係ない 本文と関係ない

 

 

画像はお洒落な風景写真にでもしようかと思ったんだけどそういえばこれは音楽戯言ブログ。「なにか関係した画像にしなくては...」ということでアビーロードビートルズ抜き)に。これが結構しっくりきてる。我ながらセンスあるやん。

f:id:shabazooo-tkfm:20170617191542j:plain

 

おすすめ記事は現時点で僕自身が推してる3記事をピックアップ。これは定期的に変えるかな。

 

グローバルメニュー

メニューバーを付けたいというのが長年(半年くらい)の夢だったのでヘッダー画像の下に入れました。参考にしたのはこちらの記事。コピペだけでいいので楽チン。

 

その他カスタマイズ

シェアボタン

シェアボタンは以前のやつでも付けていたけど今回はこちらのデザインのものにした。

 

前のやつでは記事の上部、下部と両方に備えてたんだけど上部に入れるとゴチャゴチャ感があるので今回は下部のみに挿入。スッキリ。

 

AmazoniTunesのレイアウト崩れ

ほとんど文句なしの『DUDE』なんだけど、唯一導入してみて不満に思ったのがAmazoniTunesのレイアウトに枠線や箇条書きの行頭記号が入ってしまうこと。両方音楽紹介には欠かせないものなのでここはどうにかしたいとグーグル先生に泣きついたところこの記事に助けてもらった。

 

フォント

フォントはGoogle Fontsから『Open Sans』と『Open Sans Condensed』を使った。日本語には『游ゴシック』を採用。

fonts.google.com

 

最後に

初心者でもなんとかデザインを一新させることができた。これもグーグルと参考にさせてもらった記事様のおかげです。

スマホ版はproじゃないのでいじれなかった。こればかりは仕方ない。僕の場合はデザインいじりは自己満なので。

 

『DUDE』、お洒落でカスタマイズしやすいデザインテーマなのでぜひ!

 

GOLDBLEND(紙ジャケット仕様)

GOLDBLEND(紙ジャケット仕様)