AMPとは、Accelerated Mobile Pagesの略称で、Webコンテンツを瞬時に読み込んで表示するためのフレームワーク（手法）のことです。 このAMPはGoogleが推奨しており、AMP HTMLの仕様に沿ったWebページ（AMPページ）を作成して対応できます。 AMP化によってサイトの読み込み速度が向上するので、SEOの良い効果が期待できます。 一方、AMP対応しなければサイトの読み込み速度が上がりません。 この場合、ユーザビリティが向上しないので、Googleに評価されずらいというわけです。 こうした悪い状況を回避する為に、AMPの導入を検討して、ユーザーが目的のコンテンツにより早く辿り着けるようにしましょう。 この点踏まえて、今回は、AMPの定義や概要、AMPの対応方法など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。
WordPress（以降WPと表現します）には、有料、無料いろいろなテーマがあります。 私がお仕事で管理しているブログはライダーストアーの「賢威」というテーマを使っています。 この賢威ですが、先日8.0という最新バージョンが公開されました。 さっそく、お仕事ブログの賢威も8.0にバージョンアップさせたのですが、ちょっと改良したいなぁ、という点がありカスタマイズさせていただきました。 今回行ったカスタマイズは コピーライト表示の変更 続きを読むにnofollowを入れる という２点です。 カスタマイズをするのに、テーマのコードを修正するのではなく、子テーマを使ってカスタマイズするのが一般的で、今回も子テーマを使ったカスタマイズを行っています。 今回はWPテーマカスタマイズの基本である子テーマについてと、上記２点のカスタマイズ方法について解説していきます。 子テーマについてそれでは、まずWPカ
CSSをコピペ まず、以下のCSSをコピペします。 /*---吹き出し---*/ .wp-block-media-text.balloon-4536 { grid-template-columns: 100px auto; margin-bottom: 1.5em; } .wp-block-media-text.has-media-on-the-right.balloon-4536 { grid-template-columns: auto 100px; } .balloon-4536.wp-block-media-text { -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; } .balloon-4536 figure { -ms-flex-item-align: start; alig
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
Javascriptの読み込みをひとつのファイルにまとめる「import.js」 Javascript2011年1月9日 Javascriptファイルも読み込む数が多くなるとHTMLが煩雑になってきます。そんな時、JavascriptファイルもCSSファイルと同じようにひとつのファイルにまとめることでHTMLソースをきれいにする事ができます。また、サイトで使用しているJavascriptを管理しやすくなります。 HTML <script type="text/javascript" src="/shared/js/import.js"></script> Javascript document.write('<script type="text/javascript" src="/shared/js/jquery.js"></script>'); document.write('<scri
サイトをPC・タブレット・スマートフォンなどの端末に対応するためにナビゲーションメニューをレスポンシブ対応しました。その時採用したjQueryプラグイン｢MeanMenu｣をご紹介します。 必要なファイルと詳細はコチラ 下記リンク先からJavaScriptファイルやその他ファイルをダウンロードして下さい。 MeanMenu MeanMenuのデモサイトはコチラ ダウンロードファイルの使用方法 ナビゲーションメニューの表示に必要なコードは非常にシンプルです。 header <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>MeanMe
display－スタイルシートリファレンス display - CSS | MDN このように table は関連する各要素に対して固有の display 属性がデフォルトで設定されています。決して table という HTML タグ自体がテーブルレイアウトを実現しているのではありません。ならばこの dispaly 属性を CSS 側でどうにか制御すれば、モバイル端末といった表示領域が狭い環境にも適したレイアウトが組めるということになります。 DEMO See the Pen Blocked table - Demo of Responsive table by wakamsha (@wakamsha) on CodePen. こちらのデモをベースにしていきます。 とりあえず全部ブロック要素にしとけ 何も考えずに全てのtable 関連要素をブロック要素にしてみました。当然ですが、全てのセル
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
個人的に制作に欠かせないアプリケーションの一つがAdobe Bridgeです。 制作者の方は既に知ってるアプリケーションだとは思いますが、春ということで、新人の制作者やAbodeのアプリケーションを使い始めたばかりの人向けに書いてみました。 個人的に制作に欠かせないアプリケーションの一つがAdobe Bridgeです。 制作者の方は既に知ってるアプリケーションだとは思いますが、春ということで、新人の制作者やAbodeのアプリケーションを使い始めたばかりの人向けに書いてみました。 多数の形式のファイルをプレビュー サブフォルダ内の表示 ファイル名のリネーム ワークスペースの切り替え キーワード・レート・ラベルの追加 フィルター スマートコレクション スタック フルスクリーンプレビューやレビューモード Mimi Bridge Adobe Bridgeは写真や制作ファイルの管理・閲覧が簡単にでき
ブツ撮りや商品撮影は普段撮っている風景や街のスナップとは少し違った考え方が必要です。また、「カメラで撮る」以外の要素が大きなウェイトを占めるのも特徴。そんなわけで今回はブツ撮りをする際に初めに知っておくべき大事な３つの要素をご紹介します！ 商品撮影を上手にするためのポイントは？カフェのランチを撮ったり、お気に入りの雑貨やアクセサリーを撮ったり、オークション出品用の写真を撮ったり。。こういう撮影のジャンルを写真の世界では「ブツ撮り」とか「商品撮影」と言ったりします。 写真を撮るという行為自体は変わりないのですが、普段多くの方が撮っている風景やスナップとはまた違った考え方が必要になったりもするので今回はその辺のことについて撮影以外の大事な要素を３つに分けてご紹介します。 例えば上の写真、左右どちらも元は同じ写真です。左の写真を現像・レタッチすることで右になりました。 上手く撮れない原因はカメラ
SEOにも強いマウスオーバーでボタン画像切り替えのまとめ by ateliee · 公開済み 2013年8月1日 · 更新済み 2017年7月11日 ホームページをつくる上で欠かせないボタンやバナー。 ただの画像をおくだけでもいいのですが、今回はそんな当たり前のように使用するボタンを実装する様々なやり方をご紹介いたします。 まずは基本！マウスオーバーで画像切り替え ボタンにマウスを乗せると画像を切り替える方法です。 CSSスプライト もっともメジャーなやり方は、リンクをblock化し背景に画像を設定。 :hover擬似クラスで背景画像を移動してあげることでマウスオーバーアクションを作ります。 HTML <a href=”#” class=”btn”></a> CSS .btn{ width:111px; height:40px; display:block; background:url(
CSSレイアウトでfloatを使用した際、通常は親要素内にfloatする要素があり、floatに続く要素にclearを指定し回り込みを解除します。（これが基本です。）clearfixとはclearプロパティを使わずにfloatを解除する手段です。 例えば親要素内でデザイン上どうしてもfloatを解除する為のボックスを設けたくない場合などに利用します。 一部のブラウザで親要素内でfloatを解除しなかった場合に起こる現象として、親要素内に指定した背景画像が表示されない、或いは親要素の下まで表示されないなどがあります。 以下にサンプル解説します。 サンプルソースと通常指定 <div id="mainbox"> <!-- 親要素 --> <div id="box-a"> *** </div> <!-- float --> <div id="box-b"> *** </div> <!-- floa
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
