要素の表示位置を取得／設定するには？（offset）
offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得／設定する基本的な方法を説明する。 ← 前回 連載 INDEX 次回 → 要素のドキュメント上の表示位置を取得／設定するには、offsetメソッドを利用します（ただし、不可視の要素に対しては動作しません）。なお、類似のメソッドにpositionメソッドがありますが、これは現在の要素の親要素からの相対位置を取得するためのもので、機能が異なります（次回のTIPSで詳しく説明します）。 要素の表示位置を取得する まずは、位置情報を取得する方法からです。以下は、指定された要素（＝<div id="child">要素）の位置情報を表示するサンプルです。
【CSS】Webアプリ化するときに有効！テキストや画像を選択不可するCSS Tips | unitopi - ユニトピ -
こんにちは。 本日はテキストや画像を選択不可にするCSSプロパティのご紹介です。 最近ではネイティブアプリ（それぞれの言語でストアでダウンロードするアプリです）ではなく、Webベースでアプリ化するサービスも増えてきていますので、WebっぽくならないTipsです。 さっそくコード -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ -webkit-user-select: none; /* Chrome, Safari, and Opera */ -webkit-touch-callout: none; /* Disable Android and
WordPressテーマ「TCD020(Logue)」で個別記事の最初のアイキャッチ画像を非表示にする方法 | 合同会社うえせいや | ホームページ制作
2015年9月7日2016年4月23日WordPress使い方 WordPressテーマ「TCD020(Logue)」では、アイキャッチ画像を設定すると個別記事の先頭にメインカラムの横幅いっぱいに表紙されるようになっています。 この先頭に表示される画像を表示しないようにする方法を解説します。 最初から、このテーマを使って書いていればこの仕様に合わせて書いていけばいいのですが、別のテーマを使っていてこの「Logue」に変えた方などの場合は、表示させたくない場合もあると思います。 該当する方法がどこかで紹介されていないかと、探してみましたが見当たらないので、私が自身の備忘録として残しておきます。 直接表示させている部分を削除する方法 FTPソフトなどで、WordPressのテーマファイルが入っているディレクトリの中にある wp-content>themes>tcd20_logue>sin
[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
Re: 今さら聞けないjQuery実行パターンまとめ【実行のタイミングって？ちょっとした補足】
今さら聞けないjQuery実行パターンまとめ :: 5509(+1) noriさんのブログでまとめられていた「.ready()」などのjQueryの実行パターンについてのまとめ。jQueryの書き出しに書かれる.ready()メソッドや$(function(){～});などを「おまじない」とか「最初に書いておくもの」なんて言われたり見て覚えていた人が多いんじゃないかなって思うのですが、こういうまとめがあるとわかりやすくていいですね。 十分ではあるのですが、僕なりの補足を入れておこうかなと思ったので紹介も兼ねてエントリー 慣習的に書く理由 この「$(document).ready(function(){～});>」や「$(function(){～});」はjQueryのスクリプトを書くときの最初に、慣習的に書くもので、「おまじない」とか「とりあえず書いておけ！」なんて言われて、何となく書き入
少しのコードで実装可能な20のWordPress小技集
2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 カスタムメニューの設置 アイキャッチ画像（サムネイル画像）を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ
携帯サイトの作り方
ここでは、携帯向けサイトの作り方を簡単に紹介します。 PC向けサイトを作ったことのある人を対象とさせていただきます。 まず、携帯版のファイルはPC版と完全に分けましょう。 共通のファイルで済まそうとするのはかなり無理があります。 PCと携帯の違い いくつかあるので順に説明します。 ファイルサイズの制限 これが一番大きなところでしょう。 後で詳しく説明しますが、携帯向けサイトでは1ページ当りのファイルサイズを 画像も含めて5Kbytes程に収めなければなりません。 5Kbytesでは足りない、と思われる方も多いと思いますが 試しに5Kbytesの文章を書いて携帯で表示させてみましょう。 携帯の小さい画面から見ればこれでもかなりの情報量だと感じるはずです。 スタイルシート関連 携帯向けサイトでは、一切のスタイルシートが使えません。 もともと、スタイルシートとは細かな装飾方法をアレンジするための
Wordpressで1秒切り！目を疑う高速表示の設定はこれだ！1時間で5万PVでも大丈夫 | iPhone 研究室
先日、Yahoo! ニュースからリンクして頂いたのを切っ掛けに、大量アクセスがありました。いつもは後で気がつくんですけど、たまたま Google Analytics のリアルタイム画面を開いたらその直前にアクセスが爆発していました。通称「Yahoo!爆弾」ってヤツですね。 【追記】現在はコアウェブバイタル対応を完璧にするため、もっとモダンな設定にしています。 iPhone 研究室は WordPress で運営していますが、全く動じないでこの大量アクセスをこなしてくれました。 11時半頃にリンクがあったみたいなんですけど、世の中がお昼休みに入った12時頃から更にアクセスが倍増しました。 だいたい、11時半から12時までの30分で2万ページビュー（PV）、12時から13時までの1時間だけで5万PV位の大量アクセスになりました。 新型iPhoneに関する噂という記事からのリンクだったので、興味を
WordPress 3のマルチサイト運用のためのデータ移行方法
WordPressを使って複数のブログをサブドメインで運用している状態から、マルチサイト機能を使って一つのシステムで一括管理するための方法をまとめてみた。 目次移行内容データベースのバックアップサブドメインサイトのデータをエクスポート画像、テーマ、プラグインのバックアップマルチサイトの有効化サブドメインサイト設定画像、テーマ、プラグインのアップロード投稿データ等のインポートその他、設定など移行内容移行内容としては、こんな感じ。 ・メインサイト hoge.com ├メインのWordpressはこれを使う └このサイトをメインで運用 ・サブドメインサイト sub.hoge.com ├既に運用中。 └このサイトのデータをメインサイトに組み込む データベースのバックアップまずは、失敗した時のために、バックアップは必要だ。 データベースのバックアップ用プラグインがあるが、ここは男なら黙ってphpMy
これなら出来る！Facebookソーシャルプラグイン設置方法まとめ★具体的な導入手順を徹底解説【保存版】
これなら出来る！Facebookソーシャルプラグイン設置方法まとめ★具体的な導入手順を徹底解説【保存版】 自社サイトやブログに簡単にFacebook関連のボタンを配置できるFacebookソーシャルプラグイン機能。今回は、全11種類あるソーシャルプラグインの中でも特に利用頻度の高い「Like Button」と「コメントプラグイン」を例に、ソーシャルプラグインの具体的な導入方法をご紹介します！ こんにちは、アライドアーキテクツ株式会社 制作部 プロデューサーの久保田です。 オウンドメディアをソーシャル化できるFacebookの「ソーシャルプラグイン」機能。以前の記事で、この「ソーシャルプラグイン」は全11種類あり、導入の際は5つの基本ステップを押さえましょうとご紹介しました。 そこで今回はその続きとして、全11種類の中でも特に利用頻度の高い「Like Button」と「コメントプラグイン」を
WebデザイナーにおすすめのEvernote活用術
2017年6月30日 便利ツール アイデアのメモも、画像も、音声も、とにかくなんでも保存できちゃうメモツール「Evernote」。有名すぎる便利ツールですね！逆に自由度が高すぎてどうやって使えばいいのかわからない、という方も多いと思います。今回は「Webデザイナー」をキーワードに私のEvernoteの使い方を紹介します。 ↑私が10年以上利用している会計ソフト！ Evernoteってなあに？ Evernoteの機能を簡単に説明します。 画像・音声・PDFファイルなどが保存できる アップロードできる容量は月に無料アカウント：60MB、プレミアムアカウント：1GB プレミアムアカウントは月額5ドルまたは年額45ドル ノートに対して一つだけ設定できるノートブックを大カテゴリとして使用 ノートに対して複数設定できるタグを小カテゴリとして使用 ノートブックもタグも階層化させて整理できる 携帯電話・ス
ページのリストを思い通りに表示させるWPタグ
WordPressには、ページ機能があり、通常のページ作成が出来ますが、そのタイトルをリスト表示させる方法を書いておきます。 全てのページを表示する場合は、 < ?php wp_list_pages(''); ?> 親ページのみを表示する場合は、 < ?php wp_list_pages('depth=1'); ?> 指定した表示順に並べたい場合は、 < ?php wp_list_pages('sort_column=menu_order'); ?> ちなみに複数指定したい場合は、&で繋げる事が出来ます。 ｈ２タグでリストタイトルを表示させて、親ページのみを指定表示順で表示する場合 < ?php wp_list_pages('sort_column=menu_order&depth=1&title_li=＜H2>Menu＜/H2>’ ); ?> 親ページを表示した時に、その子ページのみリス
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法｜BLACKFLAG
サイトのトップページなどでキ―ビジュアルにあたる部分を、複数枚ある画像を単純なフェードで切り替えるような動作を組み込むことはよくあること。 そんなちょっとした画像の切り替えが必要な際に使える、凝った動きも無く、画像がひたすらクロスフェードし続けるシンプル画像ビューアーのサンプルを作ったので紹介してみます。 まずは動作のサンプルから。 jQuery CROSS FADE IMAGE VIEWER【SAMPLE】 サンプルでは4枚の画像を切り替えています。 自動で再生され、4枚の画像が永遠にループし続けます。 全体構成についてHTMLから。 ◆HTML <div id="viewer"> <img src="img/photo01.jpg" width="400" height="300" alt="" /> <img src="img/photo02.jpg" width="400" hei
スクリーンショットを印刷してもクオリティを落とさないようにする方法
スクリーンショットをプロダクトの写真などと一緒に300dpiで出力する際にぼやけてしまう場合、スクリーンショットがシャープになるようにする方法をTurbo Photoから紹介します。 ビフォーとアフター Step 1: Capture the screen スクリーンをキャプチャします [Ctrl]キーを押しながら、[PrtSc]（プリントスクリーン）キーを押します。 アクティブなウインドウだけをキャプチャしたい場合は、[Ctrl]+[Alt]と[PrtSc]キーを押します。 Step 2: Paste in Photoshop Photoshopにペーストします Photoshopを起動し、新規ドキュメントを開きます([Ctrl]+[N]）。Photoshopはキャプチャに合わせたサイズで開きます。 スクリーンショットをペースト（[Ctrl]+[V]）します。 Step 3: Chang
パソコンとアプリケーションの備忘録 非表示モジュール内でコンパイル エラー 多発中！
パソコン関連の障害やTIPSなどのちょっとしたことの備忘録 -- 2年半ぶり、2011年2月5日再開-- ☆Since 2007-03-13☆ どうも4月マイクロソフトの月例アップデートのあとから、このブログに、 非表示モジュール コンパイルエラー 無効なオブジェクト ライブラリです。または定義されていないオブジェクトへの参照を含んでいます 非表示モジュール <モジュール名> 内でコンパイルエラーが発生しました とかのフレーズでもう2000件くらい訪問されています。 たぶん、「MS12-027」が原因のような..... http://technet.microsoft.com/ja-jp/security/bulletin/ms12-027 ただ状況がまったくわからないので、解決策も不明です。 検索で訪問されても情報がないので、調べようも、検証しようもなし..... 再現手順とか書き込んで
jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (1/5)
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト：『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが
Photoshopで深海からの景色を描く方法 / ウェブデザインライブラリー
投稿日：2011年10月7日 レベル：初心者 ソフトウェア： このチュートリアルではPhotoshopで深海からの景色を描く方法を紹介します。 Step1 ： 背景の作成 Step2 ： 水面の作成 Step3 ： 光の線を描く Step4 ： 海底の作成 Step5 ： イルカの作成 Step6 ： 完成 まずは、背景に青いグラデーションを作成します。 グラデーションツールを選択し、グラデーションの編集画面を開きます。 明るい部分は#3567a6とし、暗い部分は#0d1c2fと設定します。 新しいレイヤーを作成し、そのグラデーションで塗りつぶします。 新しいレイヤーを作成します。 前景色を白、背景色を黒に設定します。 長方形選択ツールを選び、長方形の形をした選択範囲を作成します。 「フィルタ」−「描画」−「雲模様」を選択し、雲を作成します。 その後、「編集」−「変形」−「拡大・
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【制作Tips】画面解像度一覧表 | Webデザインラボ
