Blogger日本語テーマ「QooQ List版」で音楽活動用ウェブサイトを 動作も軽快でいい

2019年9月24日

Blogger ネット ホームページ

先日も書いたように音楽活動ウェブサイトを再度「Blogger」で作ってみました。ここ最近の数ヶ月前から運営してたのは「Google Sites」

音楽活動のホームページを作るにはどのサービスで作るのがいいか?(再度Blogger編)

コチラ↑↑に書いたように運用しやすくて、まぁまぁ気に入ってたんです「Google Sites」。ただし編集時と閲覧した時の見た目が違うなって思う事があったんですね。あと一つ言えば、音楽活動用のウェブサイトっていう特質もあると思います。

音楽活動用のコンテンツって

ライブスケジュールだったり、オリジナル曲だったりすると思う。ただ一番大事なのは、ライブ告知やオリジナル曲なんかの最新情報を発信するって事じゃないかなって。いわゆる「What's New」ってやつやね。僕もライブ告知やライブレポなんかを最新情報一覧としてトップページに更新してたわけですけど、その情報の記事を「Google Sites」で作成するのが面倒なわけですよ。ブログみたく簡単に投稿できなくて、都度ページって機能でレイアウトから作成しなくてはいけない。

これが面倒だから「Google Sites」上には記事の見出しを一覧表示し、記事内容は別途「Tumblr」で作成してリンクしていたんですね。こうなると音楽活動用ウェブサイトを運用するのに複数サービスを利用しなくちゃいけないから、少し面倒かなぁ~って。あと先の記事に書いたように「Google Sites」から別サービスへリンクを張ると都度「Googleサービスから他のサービスへ移ります」みたいな説明画面が表示されるんで、画面推移が美しくなかったりするわけです。

ってことで、これらを解決するため再度ブログサービス「Blogger」
で作りなおしてみようかってなったわけですね。

Bloggerでのウェブサイト製作について

ブログサービスでウェブサイトを作るのに、難しい事考える事はしなかったです。Bloggerでは固定ページを作れるから『自己紹介』『オリジナル曲』等のコンテンツはそこへ。で、トップページは記事一覧表示型テーマを選択したのみ。トップページを固定ページにするって方もいらっしゃるけど、僕には最新記事一覧が一番トップページに適している感じがしたんでそのままです。で、今回僕が選んだBloggerテーマですが

「QooQ(クーク) List版」

シンプルで速い日本語bloggerテンプレート「QooQ」の紹介!

にしました(^^)。

Blogger日本語テーマ「QooQ」

このテーマには通常版とList版があり、通常版はトップ画面の画像が大きくアピールするレイアウト。画像って言ってもギター抱えた僕の写真が中心になるんで通常版は自粛しました(^_^;)。さて、このテーマは本ブログで使用しているテーマ「Tokyo」の作者QooQ氏作。「Tokyo」を気に入っている事もあり、迷いなくQooQ氏作成の最新テーマを適用...ってか、使ってみたかったってのがありますね(^^)。

このテーマは無駄を排除して軽快に動作する事にこだわって作られたとのこと。なので、その良さをダメにしないためにも、ド素人の僕はカスタマイズなどせずに以下の調整にとどめてます。
  1. フォントの変更
  2. ナビゲーションバーの文字サイズ変更
  3. 記事一覧と関連記事のサムネイル画像を四角に
あとQooQ氏作成テンプレートは「Tokyo」もそうだけど、調整しやすい見やすいコードで書かれてるのが美点。テーマ「QooQ」はよりわかりやすくなってますね(^^)。

フォントの変更

このブログでも適用してるけど、標準の「游ゴシック」を「メイリオ」に変更してます。この文字間・行間では画面で見るには僕は「メイリオ」が一番好きなんでね。
「font-family」のフォント設定部分で「メイリオ」を先頭に

ナビゲーションバーの文字サイズ変更

標準では最上部に表示されるナビゲーションバーとその下のブログタイトル文字が同じサイズ感なんですね。やっぱブログタイトル文字の方を強調したいんで、ナビゲーションバーの文字を控えめに設定変更しました。
ナビゲーション
#navigation-content li a{
font-size: 90%;
font-weight: normal;
}

記事一覧と関連記事のサムネイル画像を四角に

標準は丸型表示されてて、それはそれで洗練されてる感あるんやけどね。僕は四角の方が好きなんで丸みをとりました。以下の感じで「border-radius」をコメント化。
記事一覧
.list-item-img{
display: block;
/*記事一覧画像を角型に
border-radius: 50%;
*/
width: 72px;
height: 72px;
object-fit: cover;
}
関連記事
.mrp-post-img{
display: block;
/*関連記事画像を角型に
border-radius: 50%;
*/
width: 72px;
height: 72px;
object-fit: cover;
margin: 0 auto 0 auto;
}

以上3点のみ。あとは背景色や文字色を変更しただけ。あっサイドバーの文字サイズを変更したかな。でも、ほぼそれだけで...こんな感じです。

ふじみきMAGAZINE

うん。思ったとおりのサイトができたね(^^)。ストレスなく運用できそうですわ。やっぱり「Blogger」っていい!

スポンサーリンク