2016年09月12日 18:06
こんにちわ。
僕が公開している自作テンプレートに少し修正を行いました。
内容はスマートフォンでのトップページの表示を変更しました。
変更したのは見た目だけなので、以前からテンプレートを使っていただいている方で今回のテンプレートの方がいいと思われたら変えていただければ結構ですし、前の方がいいということでしたら今回の記事はスルーして下さい。
先日、スマートフォンのトップページでサムネイル画像が縦長の場合、写真でブログの記事のタイトルなどが見えなくなるのでなんとかしたいという相談を受けました。
今のデザインのままで解決策を考えていたのですが残念ながら...。
縦長の画像の時は画像が画面を占領しすぎている状態。
高さを指定すると画像の縦横比が変わるし、縦画像だけを指定して画像サイズを変えることもできないし...
ジャバスクリプトとか使ったらできるのかもしれないけど僕にはそんなスキルはないし...
で、あきらめました(^_^;)
そこで、デザインを変更して対応することにしました。
今まではサムネイル画像の下に「記事タイトル」「投稿日」「タグ」「リード文」を表示していましたが
パソコンとタブレットと同じように左にサムネイル右にブログ記事のタイトルを配置するようにしました。
もともとこのテンプレートは、オリジナルのデザインには手を加えずレスポンシブ対応にするだけのつもりだったので、これでよかったのかもしれません。
左)以前のバージョン。
上から「サムネイル画像」「記事タイトル」「投稿日」「タグ」「リード文」の順に並べていました。
右)今回のバージョン
PCやタブレットと同様に左にサムネイル画像右にブログタイトルを配置。
ただ、この場合はスペースが狭いので記事の投稿日・タグ・リード文は非表示にしてブログタイトルのみ表示するようにしています。
以上でテンプレートの更新は完了です。
ご利用の際はコメント欄に一言いただけると嬉しいです。
このテンプレートに関しては、デザインは使う方が自分の好きなように変えていってくれればと思いオリジナルのデザインに変更は加えず(少しだけ僕のこだわりも入れていますが...)作りました。
そして不具合などが見つかれば都度更新してきましたけど、これで更新などは終わりにしょうかと思っています。
今度は、デザインなども僕オリジナルのものを(といってもこのテンプレートに変更を加えるだけですが)作ってみようかなと思ってます。
隙間を見つけてボチボチと作っていこうと思っていますｗ