WEBデザイン覚え書き

ソクラテツの憂鬱-DigiCon Library-

サーバー・ドメイン・DNS

WEB
webサーバー移転のイメージした画像

サーバー移行における3つのポイント

サーバーを移転したので、WEB営業に捉われないユーザー視点でポイントを紹介します。

DNS
DNS設定のやり方ページへのリンク画像

グーグルサーチコンソール登録時のDNS設定

ロリポップとムームー契約した人向けにDNS設定のやり方を解説します。

DNS
DNSサーバーを変更する手順
DNSサーバーの設定でWi-Fi速度アップ!

スマホやタブレットのWi-Fi速度が劇的に変わります。マンションの方にも有効です。

PC(html/CSS)
ハイライト表示したコードを写した画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリ「Highlight.js」を使用する方法を解説します。

サイト収益化

GoogleAdSense
googleアドセンス作業をイメージした画像

Googleアドセンスは稼げる?稼げない?どっち

キャリア10年以上でわかったこと、それは…

GoogleAdSense
googleアドセンスの特定広告をブロックする方法

Googleアドセンスの特定広告をブロックするやり方

ウェブサイトにマッチしない広告をブロック管理して収益を上げていきましょう!

GoogleAdSense
googleアドセンス全画面広告に困る女性の画像

Googleアドセンスの全画面広告を削除したい

全画面広告(インタースティシャル広告)がユーザービリティによくないと思ったら削除も検討しよう

PC(html)
Amazonギフト券メールが届かない、削除したかもなバナー画像

Amazonギフト券が届かない

Amazonギフト券メールが来てないかも…、それとも削除しちゃった!?そんな時はあわてず…

CSS レイアウト-はみ出し

Visual Studio Code
BracketsからVS Codeに移行する手順

Brackets Extension Packでユーザビリティアップ!

使い慣れたBracketsっぽくVS Codeをカスタマイズできます。

PC(CSS)
グーグルアドセンス広告がはみ出す時の修正方法

グーグルアドセンス広告がはみ出す時の修正方法

レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消!

PC(CSS)
縦スクロール時に横揺れするサイトの修正方法

縦スクロール時に横揺れするサイトの修正方法

縦クロールしたときブレたり横揺れてしまう場合のCSS対処法を解説(スマホタブレット)

PC(CSS)
preによるソースコードがはみ出す時の修正方法

preタグをきちんと整形をする方法

レスポンシブデザインのpre要素が折り返されない、改行されない場合の対処法を解説します。はみ出しも解消されます。

CSS センタリング

PC(CSS)
Googleアドセンスを中央に寄らない場合の対処法解説画面

Googleアドセンスが中央に寄らない場合のやり方

デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。

PC(CSS)
中央寄せした文字列を左揃えで折り返す方法をイメージした画像

中央寄せした文字列を左揃えで折り返す方法

短い文字列は中央に配置、折り返したら左揃えにしたい。こだわりレイアウトに。

PC(CSS)
画像の中央に文字列をのせるやり方

画像の上に文字列を中央配置する方法

positionプロパティで自由に要素を配置する方法。ヘッダーエリアでは必須テクです。

PagespeedInsightスコア改善策

PC
画像を最適化する方法を解説したページへのリンク画像

画像の最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(html/javascript)
オフスクリーン画像の遅延読み込みを解説したページへのリンク画像

画像の遅延読み込み実装でサイト表示高速化

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法を詳しく解説。LazyloadとIntersectionObserverを比較し導入できます。

PC(html)
preloadで先読みして高速表示する方法へのリンク画像

preloadで先読みして高速表示する方法

サーバーから先行してフェッチすることで、サイトの高速表示を実現します。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示

DNSプリフェッチでリレーションするだけで、少しだけ速く表示

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み速度比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
アフィリエイトの後ろになぜかある1ピクセル画像を究明するイメージ画像

謎の1ピクセル画像を究明

Amazonアソシエイトコードにあるimgタグの1ピクセル画像をご存知ですか?

PC(Windows)
arialフォントとヘルベチカの比較画像バナナー

Windows10でもHelveticaフォントを使いたい!

全然違う!Arialじゃ満足できない方必見。

PC(illustrator)
イラストレーターの機能であるスペースキーを押して使う「手のひらツール」が使えないトラブルを知らせる画像

手のひらツールのショートカットが効かない!!

イラストレーターやフォトショップでスペースキーを使ったショートカット「手のひらツール」が使えなくなった時の対処法。

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定は必ずしましょう。

PC(Macbook)
macbookキーボードの写真

MacBookを買ったので、Windowsのショートカットキーと比較早見表を作成しました。

TOP