スキップしてメイン コンテンツに移動

投稿

ラベル(レスポンシブ)が付いた投稿を表示しています

Bloggerの画像なしの投稿のスニペットに専用のサムネイル画像を表示する方法

イメージ
Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズの方法を考えてみたい。 新テーマのContempoとSohoとEmporioは注目とブログと人気の投稿の三つのウィジェット、Notableは注目かブログと人気の投稿の二つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。そしてテーマ毎にデザインも違うので、それぞれにカスタマイズためのソースコードを取り上げる。 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行は注目とブログの投稿と人気の投稿の三つのウィジェットのスニペットでサムネイル画…

インラインsvgで線や丸や四角や三角や弧を描いて色を塗るマークアップ

イメージ
htmlのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 svgはScalable Vect Graphics(スケーラブルベクターグラフィックス)の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の一般的なjpgやpngやgifの画像のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにsvgファイルの画像を表示するにはimgタグで<img src="画像URL">とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データを、直接、マークアップする。sv…

cssで画像に文字を重ねる:グリッドデザインでアイテムのスペースを合わせて表示する

イメージ
サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えてレスポンシブでデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法はグリッドデザイン:displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。目次グリッドデザインで画像に文字を重ねるソースコード画像の中央に文字を重ねる画像の右上に文字を重ねる画像の左上寄りに文字を重ねる文字の位置取りを余白で調節する区分けしたレイアウトで画像に重なる文字を整序させる画像の中央の下のスペースの中央に文字を重ねる文字を整序して位置取りを余白で調節する文字の幅を確保しながら画像に重ねるグリッドデザインで画像に文字を重ねるソースコード画像に文字を配置するスペースの割合を計算する計算されたスペースの中に文字を実際に配置するcssのdisplayのgr…

Bloggerの公式テーマからContempoをブログに新しく採用した

イメージ
今年の三月にBloggerに公式テーマ/テンプレートが新しく四つ追加されていた。ContempoとSohoとEmporioとNotableという。それぞれに基本色が五つずつ用意されていて全部で二十種類になる。従来のテーマでは様々な難点を抱えていたし、細かいところだけれども改善されているのではないかと嬉しい予感がして直ぐに使ってみたくなった。テーマ via BloggerただしBloggerのテーマを取り替えるのは僕には難儀だった。というのはパソコンを使ってないせいで、htmlのコピーが保存できなかった。スマホ/タブレットの長押しで反映するのは張り付けだけだからコピーはパソコンではできないのではないか。取り替えた後に止めたくて元に戻せなくなるのは辛いし、もしも可能でも自分で追加したソースコードを記載し直すのは厄介だと避けたかった。Bloggerではウェブのカスタマイズのテーマにバックアップ…

BloggerにYouTubeを埋め込む二つの方法はどちらを選ぶべきか

イメージ
Bloggerはウェブの編集から動画挿入によってYouTubeを検索して動画を取り込むことができる。便利だと思ってマイケル・ジャクソンの記事で初めて使ってみたら記事ではサムネイルになって横幅320pxで表示されてしまう。スマホならば画面に収まって良いかも知れない。ちょっと両端が途切れるのは悲しいけれどもパソコンのウェブバージョンでもサムネイルのままになっている。小さ過ぎるのではないか。YouTubeの埋め込みコードを使うと微妙に異なっていてスマホではサムネイルだけれどもパソコンのウェブバージョンでは普通に表示されていた。BloggerでYouTubeを埋め込む方法は二つあってどちらが良いかと考えてしまうYouTubeの埋め込みコードは一般的にはそのままで使うとスマホの画面からはみ出すことが多くてレスポンシブに対応するcssを追加せずに済むのは有り難いと思う。画面幅に自動的に合わせるように…

YouTubeの動画をレスポンシブ対応でサイトに埋め込む

イメージ
ホームページのMusicにYouTubeチャンネルの自作曲の動画を埋め込みコードで置いているけれどもiframeタグで載せるようになっていてサイズが固定されているんだ。そこで大きなものをスマホで観ると画面からはみ出してしまうからレスポンシブ対応でデバイスの画面にきっちり収めたいと思った。
ところがiframeタグをcssのwidthで100%に指定すると横幅は合う(metaタグのviewportの設定によってページそのものはレスポンシブ対応にしてある)のに縦幅が合わないんだ。縦幅をheightで指定しても駄目で、どうしても動画の画面比が崩れるので、スマホのために小さいものを載せるようにせざるを得なかった。
考えるとガラケーならばはみ出すような大きさだったり、パソコンやタブレットではダイナミックに載せられなかったりしてしまうので、やはり何とかしたくなって調べてみた。
見付け出したのがWordPr…