Blogger カスタマイズ

Bloggerの画像関連を触る。ヘッダーに画像、トップページのサムネイルのサイズを変更、画像なしの記事に自動サムネイルを設定する方法

なんとかしてちょっとでも見やすいデザインにしようと格闘中(^_^;

今日やったことメモ

ヘッダーに画像を入れてみました。

まずは、これまで文字だけだったヘッダーに画像を入れてみるところからです。「Chiii Blog」様を参考にしました。

【Blogger・Vaster2】ヘッダータイトルに画像を挿入する方法

レイアウト＞ガジェットで設定する方法と、HTMLを編集して設定する2通りの方法が紹介されていますが、今回は前者のレイアウト＞ガジェットで設定する方法を選びました。

1. 画像を用意する。今回は「ぱくたそ」様からいただきました。最初はピンク色のつるバラが白いフェンスを覆っている素敵な写真を使ってみたんですが、魔女の机のほうがなぜかすごーくしっくり来るのでそちらに変更しました。サイズ比の都合でちょっと文字とのバランスがおかしくなってます(´･ω･`)
   
   ぱくたそ-フリー素材・無料写真ダウンロード
2. Blogger＞レイアウト＞ヘッダーガジェットを選んで編集する。1で用意しておいた画像を指定してアップロード。このときどう配置するか選べます。
3. ついでにブログタイトルと説明文を左寄せ→センタリングに変更しました。

以上です。現時点で

• ブログのタイトル文字の色が変更できない（多分、リンク先を踏んだか踏まないかの影響？）
• ブログの説明文の改行ができない（なんか解決策はありそうなんだけど見つけられていない）
• ブログのタイトル文字と説明文の縦横もセンタリング配置したいんだけど、なんかややこしそう。

という課題が残っています(´･ω･`)

トップページの記事一覧のサムネイルのサイズを調整しました。

トップページのサムネイルのサイズが結構大きいな…と感じていたので、ちょっと小さくしました。これは「BLOGGER LABO」様を参考にしました。

【Vaster2】トップページのサムネイルのカスタマイズ

これはBloggerでテーマ＞HTMLの編集を選んでCSSを編集します。「.article-list
img{」で検索して、縦横の数値を希望の数値に書き換えます。デフォルトではwidth：300、height：185になっていました。縦横比を変えない記述もありましたが念のため300と185の最大公約数を探したんですが、どっちも5の倍数だからまずは横300を240にして縦も合わせようと思ったら185÷6だと割り切れないそらそうだ5の倍数だっつってんでしょーが

仕方ないので300と185を同時に素因数分解してみたら1回目で素数にぶち当たりました。なんて素敵な数学の世界

というわけで現在の縦横比率はwidth：180、height111です。

画像なしの記事に自動的にサムネイルが入るようにしました。

画像なしの記事がトップページに表示される際、何とも言えず寂しかったので、画像なしの記事に自動的にサムネイルが入るようにしました。これは「プゥ二郎さんの日記」様を参考にしました。

画像無し記事のトップページ表示 Blogger·Vaster2 カスタマイズ#8

これも、画像は前述の「ぱくたそ」様からいただきました。あらためて見ると、画像なしの記事がほとんどですね(^_^;　これから引っ越し（出戻り）作業が進むにつれて、マシになることを祈ろう。

というわけで、今日やったことメモでした。