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

投稿

ラベル(レイアウト)が付いた投稿を表示しています

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

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

Bloggerで取得できるアドセンスのホスト型と非ホスト型のライセンスについて

サイト広告のアドセンスのライセンスにはホスト型と非ホストの二種類がある。アドセンスのホスト型のライセンス提供元のGoogleにホストされた一部のサイト:YouTubeやBloggerから取得して個々のサイトで設定して使用できるアドセンスの非ホスト型のライセンスGoogleアドセンスのサイトから取得して所定の広告コードを掲載できるかぎりの全てのサイトで使用できる BloggerはYouTubeと共にアドセンスのホスト型のライセンスを取得して使用できる数少ないサイトの一つで、一般サイトとしてはサブドメインのサイトアドレスでも申請できるのが例外的なんだ。 現状、非ホスト型で申請するには独自ドメインのサイトアドレスでなくてはならないし――以前はサイトアドレスのタイプは不問だったから又変わらないともかぎらない――概して有料なので、無料でもアドセンスのサイト広告で収益化を図ろうとすればホスト型のラ…

縦並びリストのマーカーや左端が揃った状態を中寄せする方法

サイト作成でhtmlの番号なしリストのulや番号付きリストのolを使ってcssの中寄せ:text-alignのcenterを指定した場合に内側のリストタグのliしか移動せず、ulの中黒やolの数字のマーカーが付いて来なくて左端に残ったまま、ずれてしまうのを修正できる方法はないか。 cssのlist-style-positionのinsideを使う 考えて番号なしリストのulや番号付きリストのolにcssのlist-style-positionのinsideを指定するとリストタグと一緒に中黒や数字のマーカーも位置合わせが可能になると分かった。 同時にcssのtext-alignのcenterを指定しておくと中寄せになるし、または値をrightに変えれば右寄せでもマーカーがリストタグと揃って移動するから大丈夫なんだ。 cssのlist-style-positionのinsideを使うとリス…

Bloggerブログで記事中の複数の画像を横並びやグリッドデザインで配置する方法

イメージ
Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン(縦横を均等に表示する/タイル張り)を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。サイト作成でcssのGrid Layout:displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。目次Bloggerの投稿画像の横並びやグリッドデザインの前提条件個別の記事にcssのGrid Layoutを取り入れる記述についてBloggerの投稿画像にdisplayのgridを的確に反映させる新テーマでのソースコードの修正点旧テーマでのソースコードの修…

アドセンスの関連コンテンツユニットの使用条件と設定方法とカスタマイズ

イメージ
ブログで待ちに待った瞬間が訪れた。というのもアドセンスの関連コンテンツユニットが開放されて使えるようになったためだ。管理画面を覗くと不意に関連コンテンツユニットをサイトに取り入れるヒントが表示されていた。使えないのにおかしいと怪しみながら広告の設定の広告ユニットから「+新しい広告ユニット」を押すと以前は欠けていた部分が埋まっているのを初めて知った。新しい広告ユニット via Google AdSense無条件に使えるテキスト広告とディスプレイ広告、インフィード広告、記事内広告に関連コンテンツが新たに加わって四種類の広告ユニットの全てが設定可能に揃っていた。アドセンスで発表されたのは先一昨年の四月なので、僕が承認された同年九月からすると、二年半以上、経ってついに夢が叶ったと感じる。目次関連コンテンツユニットの使用条件関連コンテンツユニットの設定方法基本設定の四項目最適な配置のヒントラベル/…

BloggerブログでGoogleアドセンスを使う際にくれぐれも気を付けておきたいこと

Bloggerはウェブの編集の「収益」でスイッチを入れるとGoogleアドセンスのサイト広告が簡単に使えるようになっている。どちらもGoogleのサービスだから上手く連携されているせいだろう。Googleアドセンスのライセンスを持っているかぎり、もはやBloggerは一般的に必要とされるhtml編集を行わなくても特定のガジェットの「Adsense」からサイト広告のソースコードをボタンだけで挿入できてしまう。ブログを開設して間もないと最初の設定の「収益」が機能しないけれども暫く待っていれば大丈夫なんだ。しかし実際に使う際に気を付けておきたいことが出て来てとても大事だから明らかにしてしっかり覚えるべきだと考える。html編集で記事以外に出すなBloggerではhtml編集も可能だけれどもGoogleアドセンスに厳しいのはサイト広告のソースコードを挿入するとエラーページにも表示される。Goog…

レスポンシブ対応ならばサイトを画面幅に合わせられた

デバイスでサイトのレイアウトを保持するにはmetaタグでviewportを設定すれば良い。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
html編集のhead内に追加すると画面幅に合わせてサイトが表示されるので、デバイスが変わってもデザインが崩れることはなくなるんだ。
レスポンシブ対応といわれる。Googleのビューポートを設定するによればソースコードを、一行、追加するだけで、とても容易い。
画像はcssでwidthを100%など画面に収まるように指定しなくてはならないにせよ、スマホでサイトのコンテンツが小さく表示されてしまうような事態は避けられる。
metaタグのviewportは本当に有り難いと思う。サイト作成でオススメしておきたい。