はじめてちゃんとブログのデザインをカスタマイズしてみた
※今回は音楽関係ないです
ブログのデザインを色々といじってみたんだけどあたふたして完成させたので、現時点で自分でも何をやったのか曖昧なので記憶を辿りながらまとめて次回以降も利用できるようにメモとして残しておきます。
これまでは『Brooklyn』という人気テーマを使わせて頂いてました。シンプルでとても使いやすかったです。解説も親切で何も困りませんでした。
しかし、飽き性がスゴイ人間なので「そろそろデザインを一新したいな」というのを考えていたので今回デザイン変更に踏み切りました。
そこで採用した新テーマは『DUDE』。こちらも人気のテーマ。洒落てる～
さて、インストールしたはいいが何をしたらいいのか。
理系学生ではあるがhtmlやCSSは一切分からないので結局グーグル先生に泣きつくことに。
今回一番参考にさせてもらったのがこちら。ありがたや。
タイトルバーとヘッダー
まずはブログの顔ともいえるタイトルバーとヘッダー。「まずは」と言ってもほとんどここしかいじってないのだけれども。
タイトルバー
この『DUDE』はタイトルバーの下に画像とおすすめ記事をお洒落に配置できるのが特徴である。
しかし、やってみたものの「画像にもタイトルバーにもタイトルあってなんかゴチャゴチャしてんなぁ、、」と思ったのでタイトルバーを消去しました。思い切り大事。
ヘッダー
適当につけたブログタイトル『綿飴と水飴』は『Wataame-Mizuame』に。横文字お洒落！！！(単純)
- provided courtesy of iTunes
ちなみにサブタイトルは「タイトルは関係ない。内容と関係ない。」という奥田民生氏のマシマロの歌詞をもじって英語にしただけ。
- provided courtesy of iTunes
マシマロは関係ない 本文と関係ない
画像はお洒落な風景写真にでもしようかと思ったんだけどそういえばこれは音楽戯言ブログ。「なにか関係した画像にしなくては...」ということでアビーロード（ビートルズ抜き）に。これが結構しっくりきてる。我ながらセンスあるやん。
おすすめ記事は現時点で僕自身が推してる3記事をピックアップ。これは定期的に変えるかな。
グローバルメニュー
メニューバーを付けたいというのが長年（半年くらい）の夢だったのでヘッダー画像の下に入れました。参考にしたのはこちらの記事。コピペだけでいいので楽チン。
その他カスタマイズ
シェアボタン
シェアボタンは以前のやつでも付けていたけど今回はこちらのデザインのものにした。
前のやつでは記事の上部、下部と両方に備えてたんだけど上部に入れるとゴチャゴチャ感があるので今回は下部のみに挿入。スッキリ。
Amazon、iTunesのレイアウト崩れ
ほとんど文句なしの『DUDE』なんだけど、唯一導入してみて不満に思ったのがAmazonとiTunesのレイアウトに枠線や箇条書きの行頭記号が入ってしまうこと。両方音楽紹介には欠かせないものなのでここはどうにかしたいとグーグル先生に泣きついたところこの記事に助けてもらった。
フォント
フォントはGoogle Fontsから『Open Sans』と『Open Sans Condensed』を使った。日本語には『游ゴシック』を採用。
最後に
初心者でもなんとかデザインを一新させることができた。これもグーグルと参考にさせてもらった記事様のおかげです。
スマホ版はproじゃないのでいじれなかった。こればかりは仕方ない。僕の場合はデザインいじりは自己満なので。
『DUDE』、お洒落でカスタマイズしやすいデザインテーマなのでぜひ！
