サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ドラクエ3
webdesign-abc.com
一度サイトを作ってしまうと、あまり見直すことのないheadタグ内の記述。新たなLPを作ったりする時でも、以前作ったもののコピペで何も考えずに作ってしまうのですが、SEO対策を見直してるうちに、今後のことも考えて順番等もきちんと考えた雛形(テンプレート)を作っておこうかな。という気になったので作ってみました。 <head>タグの雛形(テンプレート)<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="robots" content="index, follow"> <title>【 1:title 】</title> <meta name="description" content="【 2:description 】"> <meta name="keywor
【SEO対策】[section]等にそれぞれ [h1]等のhタグを入れて使う仕様について 2020/07/31 2018/01/29SEO ここ数年、[section]や[article]に、それぞれ[h1]等のhタグを入れるようにhtmlを記述してきました。正確には、[section]等が追加された、html5に変わった時(2014年の10月28日)に、section, article等にそれぞれ[h1]等のhタグを入れて使う仕様になったので、それから今まですね。ですが、html5.1に変わった時(2016年11月1日:HTML5.1勧告版(正式版)が公開)、に、その項目は削除され、昔の仕様に戻ったんだそうです。 要は、ここ数年(2014/10/28〜2016/11/1)問題のなかったこのような記述が、 <div class="wrapper"> <h1>このページのH1</h1> <h
【2024最新】スマホ・タブレットの解像度一覧表(画面サイズの割合)iPhone・iPad.. 2024/10/02 2018/02/05HowTo, Webデザインテクニック 2024/10「解像度一覧表」 更新 最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレイクポイントをどこにするか、画像サイズをどれくらいにするか変わってくるので、その都度メモをみたり調べたりしないでいいように、個人的に見やすい表にしてまとめました。主にデザイナーの方にとって見やすい表にしています。 ただ、、、バージョンが増えるにつれて、表も煩雑になってきてるのですが、そこはご了承くださいね。 スマホ・タブレットの解像度一覧表下記の『画面の解像度(画面サイズ)の割合』に詳細は記載してますが、当方管理サイトでの『iOS(iPhone・iPad)の割
ここ数年楽天RMSを使用する作業(楽天ショップでのデザイン作業)が増えて来たのですが、色々とトラブルが耐えず、その都度とっていたメモが溜まって来たので整理がてら色々書いていきます。 その第一弾。まず最初に楽天RMSで直面した問題が、『cssが普通に使えない!!』ということだったのですが、裏技でなんとかできるようになるので、まずは『楽天RMSでのcss等を有効にする方法』を。 楽天RMSで、css等を有効にする方法PC(パソコン)、SP(スマートフォン)で方法が違うので、まずはPCから。 『PC』で外部css(楽天GOLD内)を読み込む方法デザイン設定/■テンプレート設定→ヘッダー・フッター・レフトナビ/■テンプレートの編集・削除→任意の名前(自動選択)/■テンプレートの編集→HTMLタグの挿入→ヘッダーコンテンツ に以下のcssを読み込む記述を書きます。 <link rel="styles
SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.) 2020/02/22 2017/06/04HowTo, 管理 一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイトリニューアル等ではこのロゴのせいで配色がおかしくなったり、サイトデザインの統一性が失われたりしちゃうことがあります。また、ロゴのデザインが変わったりもしますので、そういう『ロゴの変更』を強いられた時にいちいち色んな公式のダウンロードページを探すのが面倒なので、まとめページを作ってみました。 SNS等の素材ダウンロードURL一覧ロゴ配布元配布形式
onMouseOver、onMouseOutで、簡単に画像を切り替える 2014/10/30 2013/09/22HowTo, Webデザインテクニック 今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させたりしてました。 反対に言えば、このやり方しか知りませんでした。恥ずかしながら。。 でもある時どうしても上記の方法ではうまくいかない事があり、onMouseOver、onMouseOut属性に辿り着いたわけなのですが、これ、すんごい楽チンですね。cssもjQueryも使わなくてもできるので。 ってことで、その書き方をメモ。例えば、、、 <a href="#"> <img src="img/ABC.jpg" onMouseOver="this.src='img/ABC_over.jpg'" onMouseOut="this
WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更する方法 2021/07/09 2015/10/03HowToPHP, WordPress 最近サーバーを変更してWordPressの引っ越しをしたのですが、引っ越し前のサーバーの初期設定でWordPressのデータベースのテーブル接頭辞が今のサーバーのものと違う!という状態だったので、管理が後々統一されていないとやいこしいだろうなぁ。ということで、WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更することにしました。 ただ正直まだデータベースをよくわかっていません。phpMyAdminの記述なんてさっぱりです。。 なので、一回やっただけでは忘れてしまうので、覚書代わりに。 記述方法、順番まずは 1, データベースにログインして、phpMyAdminを表示させる。ここは大丈夫ですよね?
はてなブックマーク(はてぶ)でブックマークしたURLを、まとめて変更する方法! 2016/01/18HowTo, SEO, 管理サーバー移転, ドメイン ドメインの変更をすると、301リダイレクトで対策をしたとしても(詳細はこちら)やはり今まで稼いできた被リンクも一緒に変更されてくれるわけではなく、1からやり直し!になってしまいますよね。でもなにかうまく変更できたりしないものかなぁ。と色々いじってたら、『はてぶ(はてなブックマーク)』に貼ったリンクアドレス(URL)は、なんと変更できた!んですよ。ですので、今回はその方法を紹介します! はてなブックマークでブックマークしたURLを変更する方法基本はこちらの、『設定/データ管理』の画面で行います。 まずはエクスポート→『ブックマーク形式』でデータを書き出します。すると、このような『dump』というファイルが現れるので、 テキストエディターなど
<table class="FireFox_BorderTest"> <tr> <th>Firefox</th> <th>消えるborder</th> <th>対策</th> </tr> <tr> <td>なんで消えるの?</td> <td>それは</td> <td>バグです。。</td> </tr> </table> ↑どう見えてるでしょう?大丈夫の時もありますが、たまにやっぱり見えません。。 今もFirefoxでチェックしたら左と下が消えてます。なんでやねん。。 そう言う時は、このhtmlに下記のcssを追加すると、 .FireFox_BorderTest{/*tableの背景を黒にします。これがborderの色になります。*/ background-color:#000000; border-collapse:separate; border-spacing:1px; } .Fire
このページを最初にブックマークしてみませんか?
『webdesign-abc.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く