レスポンシブ対応でサイズを変えるだけではなく、デザインも変更されるオフィス向けのアイコン素材 -Icons8レスポンシブ対応で単にサイズを変えるだけでなく、スマホ・タブレット・デスクトップの表示サイズにあったデザインが用意されたレスポンシブ対応のアイコン素材を紹介します。 「Good Boy License」でお馴染みのIcons8様からコリス限定のアイコンセットで、良い子だけが個人・商用利用無料です。
[JS]ページのツアーガイドをjQuery無しで実装するスクリプト -Shepherd
Shepherdの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="shepherd-theme-arrows.css" /> </head> <body> ... <script src="shepherd.min.js"></script> </body> Step 2: HTML HTMLは普通に実装してOKです。 ガイドを表示する要素には、それが指定できるようclassを付与しておきます。 Step 3: JavaScript ガイドを表示するタイミングや内容はスクリプトで記述します。 基本書式は下記のようになり、classesに表示する場所、scrollToで自動スクロールの有無を指定します。 tour = new Shepherd.Tour defa
はてなブログ | 無料ブログを作成しよう
織田信長 ぼちぼち、元気にやっています。少し薬にも慣れた...んかなぁ。相変わらず食べられないけど。朝、指がこわばって文字なんて入力できなかったけど、それはほぼなくなった。関節もどこも痛くない。薬効いてきたんやろな。 で、ブログを書こうと言う気がまた起きてきた。 …
WordPressの多言語化（マルチ言語化）検討 – Narratives From A Counselling Room
Diversity Counseling New Zealand（http://dcnz.net）において、カウンセリングサービスを複数の言語で提供することに伴い、このサイトを多言語化することを検討している。（調査時のメモ書き） ワードプレスのサイトにおいて、この件ついてまとめているので参考にさせてもらいながら、検討してみたい。しかし、たくさんあるので、検証には少し時間がかかりそう。 WordPress で多言語サイトを作成する 多言語化プラグインにはいくつか基本的なタイプがあります。 １．言語ごとに1つの投稿を管理する方法 (例: WPML【有料】、xili-language、Polylang、Bogo)。翻訳された投稿はお互いに関連付けられ、ある投稿の翻訳投稿がどれなのかが表示されます。 ２．すべての翻訳文をひとつの投稿内に含める方法（例: qTranslate）。 ３．投稿のコンテク
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
CSS3からの新しい単位「rem」をIE8でも利用できるようにするスクリプト -REM unit polyfill
当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。 それは「rem」はIE8をサポートしていないこと。 ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部ファイトとして記述するだけなので簡単！ REM unit polyfill REM unit polyfill -GitHub CSS3からの新単位「rem」とは REM unit polyfillのデモ REM unit polyfillの使い方 CSS3からの新単位「rem」とは まずは、「rem」のおさらいを簡単に。 サイズの単位には「px」「pt」などの絶対単位、「em」「%」などの相対単位
Icon Font Fallback
The jQuery plugin for replacing icon fonts with png files for browsers that don’t support webfonts. This is a icon font fallback solution for browsers that don’t support webfonts. It is designed for use with the IcoMoon Icon Font Web App. It is my hope that this plugin will soon become obsolete as mobile browsers continue to improve. So, if this seems a little bit hacky, that’s because it is. ☺ Do
Data Img - Two Blokes
Data Image Delivery Tiny jQuery plugin to deal with responsive image delivery. Think responsive.io minus the cdn. Download (0.4kb) Image Credit - Unsplash Usage <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="data-img.min.js"></script> <img class="data-img" src="http://placehold.it/1x1" data-sml="img/400x320.jpg" data-med="img/800x640.jpg" data-lrg=
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。 １．はじめに 「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。 同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。 ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。 利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
Googleカレンダー対応の、シンプルなイベントカレンダーを実装出来るjQueryプラグイン・kalendar
Googleカレンダーで設定したイベント等に対応したカレンダー実装スクリプト・kalendarのご紹介です。勿論、普通にイベント設定も可能。jQueryに依存しています。 イベント対応のカレンダーを手軽に実装出来る、というスクリプトです。 こんな感じのカレンダーです。日付を押すとその日のイベント一覧に切り替わります。 Sample events: [ { title: "hoge", start: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, end: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, location: "huga", url: "http://example.com", color: "string" } ],イベントは上記の要領で設定すればいいみたい。 他、Google
[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
より多くの言語にサイトを対応させるには（動画）
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
多言語化プラグインWPMLとW3 Total CacheでCSSが適用されない
This post is also available in: English-US (英語) 多言語化プラグインWPMLを使っているのですが、日本語だと正常にCSSが適用されているのに、英語言語版に切り替えるとCSSが一切適用されなくなってしまっていました。 本記事はその時の対策メモです。 WPML使って多言語化したらCSSが適用されない。原因はW3 Total CacheのMinify。 HTMLソース(画面右クリック＞ページのソースを表示)を見て確認するとCSSの参照URIが、日本語表示だと https://www.amelt.net/Minify済みのCSSのディレクトリ で表示されているのに、WPMLで英語言語版にすると https://www.amelt.net/en//https://www.amelt.net/Minify済みのCSSのディレクトリ になっていました。 CS
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
紙・布・デニム・皮・草・木などシームレスなパターン素材のまとめ
草・木をはじめ、ざらっとした紙、デニム地、布地、皮、ライトとダークな繊細な柄など、シームレスなパターン素材をWeb Designer Labから紹介します。 素材は全て個人でも商用でも無料、リンクなども必要なしで、もちろんリンクしてくれる分には大いにありがたい、とのことです。
Naver / Formstone / Ben Plum
Examples Basic Naver will atuomatically turn a basic navigation system into a mobile friendly system: $("nav").naver(); nav a { background: #254960; color: #fff; display: block; float: left; font-size: 16px; line-height: 40px; margin: 0 1px 0 0; padding: 0 20px; } nav a:hover { background: #222; } @media screen and (max-width: 740px) { nav a { float: none; margin: 0 0 1px 0; width: 100%; } } <nav>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Tables, for Bootstrap 5
[WordPress] qTranslateでサイト内検索をすると、言語設定が無効になる対処法 2 – モノグサにお灸![[WordPress] qTranslateでサイト内検索をすると、言語設定が無効になる対処法 2 – モノグサにお灸](https://cdn-ak-scissors.b.st-hatena.com/image/square/234519d754f2c45f2978896a78ecab27c77747ff/height=288;version=1;width=512/https%3A%2F%2Fmonoxa.net%2Fwp-content%2Fuploads%2Fwordpress_logo.png){kind=logo}
2/5 TablesorterでHTMLの表をソート(並び替え)可能にする [ホームページ作成] All About![2/5 TablesorterでHTMLの表をソート(並び替え)可能にする [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7dd4cd1dde65db6c38d7f226e1c72497bc2f3bc/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F3%2F4%2F2%2F6%2F0%2Ftopimg_large.png)
