copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 - CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ
免責事項 当サイトのすべてのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、必ずしも正確性・信頼性等を保証するものではありません。 当サイトの情報によるいかなる損失に関して、免責とさせて頂きます。ご利用の際はあらかじめご了承ください。 本免責事項、および、当サイトに掲載しているコンテンツ・情報は、予告なしに変更・削除されることがあります。予めご了承下さい。
Post Snippets: HTML・PHPコードを使い回すWordPressプラグイン
Post Snippetsは、頻繁に利用するHTML・PHPコードを登録して、ブロックまたはショートコードで呼び出せるWordPressプラグインです。 このプラグインに頻繁に利用するHTML・PHPコードを登録して、定型文・パーツを使い回すことで、記事作成を効率化できます。便利なプラグインなので活用しましょう。 はじめに このプラグインが優れていること 頻繁に利用するHTML・PHPコードの定型文・パーツを登録して、 ブロックまたはショートコードで呼び出せる。 登録したパーツに変数を受け渡すことができる。 記事編集エディタにブロックまたはショートコードを呼び出すボタンが追加される。 登録したデータのインポート・エクスポート機能あり。 更に機能を拡張できる有料版が用意されている。 活用のヒント 記事本文
Webサイトやスマホアプリでよく使う、JavaScriptの有用なコードのスニペットのまとめ
JavaScriptの有用なコードのスニペットをまとめたサイトを紹介します。 一つひとつは30秒ほどで理解できるコードとなっており、膨大な数のスニペットがまとめられています。あれなんだっけ？ という時に、便利ですね。
10 Super-Useful Bootstrap 4 Code Snippets
If you’ve done any frontend development then you’ve heard of Bootstrap. It is by far the most significant framework for web developers with the most features out there. The newer Bootstrap 4 is super easy to use and it even works with many free templates you can find online. But the team has made quite a few changes to BS 4 and there’s a lot of new goodies. These snippets are some of the coolest e
管理画面でもMTタグを入力補完できる Alfred Snippets を作りました | Movable Type | かたつむりくんのWWW
こんにちは。この記事は「 Movable Type Advent Calendar 2017 - Adventar 」の 6 日目の記事です。Movable Type のアドベントカレンダーで 6 年連続で 12 月 6 日に書かせていただいております。Movable Type 7 の Developer Preview 版の公開からもうすぐ2ヶ月。時が経つのは本当に早いですね。 さて、bit part では、MTMLのタグを補完するツールをいくつか公開していますが、それらは IntelliJ IDEA や ATOM など、何かしらのエディタのプラグインでした。でも実際に Movable Type でサイトを運用していると、管理画面で直接テンプレートを編集したいというケースも意外と多くありませんか？ 今年はそんなあなたにクリスマスプレゼントを。Alfred の Power Pack で利用
CSS3で斜線・ストライプなどの背景装飾のコードまとめ-コピペですぐ使える！
みなさんはCSS3での装飾はどれくらいしていますか？ 僕はモダンブラウザのシェアが最近上がってきているので、PCサイトでも気にせず使ったりしています。 ちょっとしたコードでPhotoshopを使わずに簡単に装飾出来るのでズボラな僕にはピッタリです。 しかし！毎回コードを書くのは面倒くさい･･･ ということで、すぐにコピペして使えるようにまとめて見ました！良ければ使ってみて下さい！ 斜めストライプ(斜線)による装飾 ボーダー(横線)による装飾 ストライプ(斜線)による装飾 四角(ブロックパターン)による装飾 気が向いたらどんどんサンプルを増やしていきます！ 斜線による装飾 SAMPLE 1 background-color: #F9F2B3; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #
今さら聞けない強調スニペット。全種類のまとめから対策まで - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ Googleのアルゴリズムの著しい進化や、音声検索の普及が進むにつれて、 強調スニペットの重要性は日に日に増しています。しかしながら、強調スニペット、リッチスニペット、リッチアンサーなど 様々なコンセプトが入り交じり、どんどん理解が難しくなっているのが現状です。そんな中で、「強調スニペットとは何なのか？」「何が強調スニペットで、 何がそうではないのか？」それを振り返るために有用な記事をご紹介します。 いま一度強調スニペットの全体像を振り返るためにご活用ください！– SEO Japan *リンク先は全て英語記事です。 オーガニック検索の結果がPPC広告に侵食されるにつれて、ナレッジグラフや、「他の
Google検索結果での星表示にも対応させたレビューのまとめ表示カスタマイズ - FOXISM
… 基本的なデザインはGoogle Playストアの評価部分を参考にしました。ほぼアレです。 一応レスポンシブというか、横幅800px以下の時に画像と評価部分の横並びが解除されるようになってます。横幅800pxというのはこのブログの今の状態に合わせたものなので、導入の際は自分のブログに合わせてください。 html <div itemscope itemtype="http://schema.org/Product" class="review-ex"> [f:id:c-miya:20170704103615j:plain]<!-- 商品画像 --> <div class="review-ex-right"> <div itemprop="name" class="review-ex-title">Xiaomi Sling Bag</div><!-- 商品名 --> <div class="
打ち込むより簡単！保存しておくと便利なCSSスニペット18選
ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm
いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
マウスオーバーでクルッとするボタン 画像もJavaScriptも使わずに、HTML＋CSSのみでクルッと回転するようなエフェクトの発生するボタンの作成方法を紹介します。（使用例： ニュースページ、地図ページ） ニュースページのカテゴリナビゲーションです。もともと英語で表示しているテキストを、マウスオーバーでくるっと日本語に入れ替えています。CSSを工夫して用いれば、このように要素内のテキストを動かすことも可能になります！ 実際につくってみよう！ 上述のスライドアウトインする画像と同様で「transition」というCSS3プロパティを用い、マウスオーバーでのCSSプロパティの変化にアニメーションを加えています。サンプルコードを以下に用意しました。 CSSでクルっとするボタン - jsdo.it - share JavaScript, HTML5 and CSS CSS3を用いて作成したマウ
Google、パンくずリストとサイト名をURLの代わりにモバイル検索結果で表示。構造化データで指定可能
[レベル: 中級] Googleはモバイル検索で、すべての結果にURLの代わりにパンくずリストを表示するように仕様を変更しました。 また、ドメイン名の代わりにサイト名を表示することがあります。 Official Google Webmaster Central Blog: Better presentation of URLs in search results モバイル検索結果ではパンくずリストを表示 下のモバイル検索結果では、URLのところがすべてパンくずリストで表示されています。 とはいえ、もともとPCからの検索でもパンくずリスト表示だったのなら、モバイル検索特有の機能とはいえません。 比較してみましょう。 こちらのPCからの検索結果では、通常どおりにURLがそのまま表示されています。 スマートフォンから検索するとこのようになります。 少々わかりづらいのですが、パンくずリストっぽく変
30 Free Bootstrap Code Examples for Web Developers
Twitter Bootstrap has become a powerful asset to frontend web developers. It comes with a library of JavaScript widgets and quintessential CSS resets to build identically-rendered layouts for any web browser. If you’re already familiar with HTML/CSS you can pick up general Bootstrap concepts within a day or two. This collection of open source code is dedicated to Bootstrap layouts, widgets, interf
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
50 Useful CSS Snippets Every Designer Should Have
CSS Resets Basic CSS resets are a staple found in many online resources. This snippet, which I’ve customized, is inspired by Eric Meyer’s reset codes. It includes responsive image settings and applies the border-box model to all core elements for consistent margin and padding measurements. /* Resetting Styles */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
30 Seconds of CSS
CSS Snippets - NxWorld
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
GitHub - movabletype/mt-recipes: Movable Type examples and solutions to common problems
WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット