ウェブサイトマスターの為の覚書きウェブサイトマスターの為の覚書きウェブサイトの運営をしていて気のついたこと、発見したことなどの記録です。コピー2018.01.18CSS3になって画像を使わなくてもいろんな効果をコードで出来るようになりました。ここでは記事の見出しをカスタマイズしてみました。コピペで使えるコードを掲載していますので、ご自由にお使いください。見出しの文字やブロックの背景をカスタマイズ見出しの背景にグラデーションをつける見出しの文字に影を付け加える見出しの枠に影をつける見出しの文字の影を長くしてインパクトを大きくする見出しを半透明にする見出しの文字やブロックの背景をカスタマイズ見出しのカスタマイズの例ですが、見出しに限らずブロック要素にも使えます。見出しの背景にグラデーションをつける背景をグラデーションにしました。CSS3以前は画像を背景にしましたが、CSS3では画像を使わずにグラデーションをつけることができます。コードは以下ですが色の好みなど適宜変更してください。21px;}右に向かって薄くなるグラデーションですが、「90deg」の数字を変えると方向が変わります。見出しの文字に影を付け加える見出しの文字に影をつける文字に影を付けるとより見出しが見やすくなります。CSS3だと文字の装飾もいろいろできるようです。コードは以下ですが、背景のグラデーションに文字の影を加えています。#fff;}影は白にしていますが背景色によって好みの色に変えて下さい。見出しの枠に影をつける見出しはブロック要素ですので、ブロックに影をつけることが出来ます。コードは以下ですが、影の色は濃いグレー、影の大きさは2PXにしています。影を大きくするには数値を大きくして下さい。#333;}見出しの文字の影を長くしてインパクトを大きくする見出しの影を大きくするとおもしろい効果を出すことができます。#fff」以降も増やしていくと影はどんどん大きくなります。#fff;}見出しを半透明にする見出しの文字と背景を半透明にしてみました。おもしろい効果が生まれます。透明度は「opacity」の数値を変えることでいろいろ変化できます。0.3;}例示したコードはすべて「h2」にしていますが、適宜hタグに適用して下さい。見出しタグだけでなく「p」タグなどの他の要素にも使えます。管理人をフォローする管理人ウェブサイトマスターの為の覚書き関連記事デザインモバイルファーストインデックスに対応する為にサイトを見直すモバイルファーストインデックスは、PCよりもスマホでのWeb閲覧ユーザーが多いことから、サイトの検索順位はスマホで閲覧する場合に、ユーザーが求めているサイトの条件をより多く満たしたサイトを上位にランキングしようということです。2017.12.02デザインbody内にCSSを記述する件と段組レイアウトとinline-blockを検証ウェブページのデザインはモバイル対応を無視できません。PCでは要素を横並びに配置し、モバイルでは縦配列にする必要があります。「段組」や「inline-block」で作るレイアウト例です。2018.03.14デザイン画像の引用で必要なクレジット表記と著作権判例サイトのコンテンツの一部として、他のサイトに掲載されている画像などを掲載したいという場合があります。このサイトではアイキャッチ画像は基本、著作権フリーの画像を使っているので、アイキャッチはいいのですが、コンテンツ内で使う画像をフリーの画像か...2017.04.08デザインAMPページに使う相対パスはルート相対パスにする内部リンクには絶対パスと相対パスの指定方法があります。WordPressのプラグインを使ってAMPページを作る場合には、通常のページの内部リンクを相対パスでの指定はルート相対パスでなければなりません。固定ページをフロントページにしているサイトがあります。SiteOrigin」でページを構成し、「Simpli...2017.06.11デザインRSSフィードを取得して自分用のアンテナページを作る方法が簡単コンテンツのネタ探しにいろんなサイトを見に行きます。最近はTwitterでネタ探しをする人も増えているそうですが、RSSフィードの閲覧で情報収集するのは以前からある方法です。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。△△△の複合キーワードがほとんどですが、中には3つのキーワードの場合もあります。グラフがあればがあればみたいです。1位なったサイ...上位表示されるまでの時間に法則は無いが上位表示されないとアクセスは増えないは法則だ管理人2018.01.28SiteOriginButtonで作ったボタンは画像データでは無いので使い回しはできないようですね。幅についてはサイズの設定でWidthの数値を統一するといいと思います。あとボタンの幅を一定にしたいのですがどうすれば良いのか分かりません。△△△の複合キーワードがほとんどですが、中には3つのキーワードの場合もあります。グラフがあればがあればみたいです。1位なったサイ...上位表示されるまでの時間に法則は無いが上位表示されないとアクセスは増えないは法則だ管理人2018.01.28SiteOriginButtonで作ったボタンは画像データでは無いので使い回しはできないようですね。幅についてはサイズの設定でWidthの数値を統一するといいと思います。あとボタンの幅を一定にしたいのですがどうすれば良いのか分かりません。httpタイトルとURLをコピーしました。