ブックマークしておくと便利！ CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership
自分のデザインに合ったローダーを簡単に実装したい！ そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
WordPressのブロックエディタのチューニング - シナプス技術者ブログ
システム開発課の今門です。 前回はWordPressの新しいエディタ、ブロックエディタとはどんなものなのかを紹介しました。 今回はブロックエディタのチューニングについて話します。 現在、WordPressのコア開発の中心はブロックエディタになっています。アップデートがあるたびに、ブロックエディタの新しい機能が追加され、ブロックの数も増えています。 高機能・多機能になるのはもちろん喜ばしいことですが、管理画面のUIも複雑になり、一部の機能しか使わないような場合には、操作性はすこぶる悪くなってしまいます。必要なもののみを取り入れ、不必要なものを表示しないようにチューニングすることで、操作性は格段に向上します。 そのためのTipsをいくつかご紹介します。 [Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする [Tips 2] 必要なブロックのみを表示する [Tips 3] ブロッ
WordPress 権限別に管理画面をカスタマイズする方法 - by Takumi Hirashima
WordPress 権限別に管理画面をカスタマイズする方法を紹介します。 例えば、寄稿者権限ユーザーに特定の項目だけを触らせたいときに便利な方法です。 権限別にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズする方法 寄稿者権限の場合にサイドバーメニューをカスタマイズ 寄稿者権限でも画像をアップロード可能にする 他のユーザーがアップロードした画像を非表示 寄稿者権限でログイン時のみ専用のCSSを読み込む 権限別にサイドバーメニューをカスタマイズする方法 権限別にサイドバーメニューをカスタマイズする方法を紹介します。 次のコードをテーマファイル内の function.php に追加します。 /*【管理画面】権限別にサイドバーメニューの表示をカスタマイズ */ function remove_menus () { if (current_user_c
【CSS】box-shadowでリアルな影を作成できる便利ツールまとめ
ほんのり影がついたようなドロップシャドウは、「浮いている」ような立体感を演出できる、ウェブサイトでは欠かせないデザイン要素のひとつです。 ドロップシャドウの使い方によって、デザインでユーザーを魅了するUIテクニックで、CSSによる手軽で、柔軟なスタイリングができるのも人気の理由でしょう。 しかし、いざCSSでドロップシャドウを作成しようとすると、設定する項目が多すぎて、なかなか思い通りの影が表現できないことも。 今回は、手軽な設定のみで、魅力的なドロップシャドウを作成できるオンラインツールをまとめてご紹介します。 簡単なクリック操作で、本物そっくりなリアルな影を作成できますよ。 Shadow Palette Generator ツールの特長 Shadow Palette Generatorは、後ほど紹介するツールにはない、ユニークな点が２つあります。 １つのCSSドロップシャドウを生成する
決定版?!50個のCSSボタンを一発コピペ、自分好みにカスタマイズできるCSSButtons.io
先日、コピペで利用できるCSSボタンスタイルを多数公開中の便利サイトをご紹介しましたが、また新しいサービスが公開されています。 クリックひとつでコピペできるだけでなく、気に入ったボタンはHTMLとCSSによるカスタマイズ、保存も可能です。 決定版?!50個のCSSボタンをコピペで利用、自分好みにカスタマイズできるCSSButtons.io CSSButtons.ioは、ボタンやチェックボックスなど、ウェブ制作に使えるCSSコンポーネントを公開しており、すべてのコンテンツはオープンソースで、無料で活用できます。 現在、CSSボタンは48種類公開されており、シンプルで使い勝手の良い素材から、アニメーションを使った波ウェーブ型やグリッチエフェクト、動くグラデーションなど、あらゆるCSSボタンスタイルに対応できる優れもの。 ボタンの他に、こちらもHTML/CSSのみでスタイリングできるチェックボッ
CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。 Custom Scrollbars In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールバーの構成要素 スクロールバーのデザインをカスタマイズする カスタムスクロールバーのスコープを指定する スクロールバーのデザインをカスタ
CSS Background Patterns by MagicPattern
CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. The collection is being updated regurarly! Patterns are everywhere! From your website to your favorite book cover. There're severa
CSSリセット、2019年におすすめのカスタマイズ方法
Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセットを紹介します。 My CSS Reset/Base 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSリセットについて margin, padding, borderのCSSリセット フォントのCSSリセット レイアウトとbox-sizingのCSSリセット 特定要素のCSSリセット 属性と状態のCSSリセット スクリーンリーダー専用の
ぼくのかんがえたさいきょうの editor-style #wpacja2013 - Toro_Unit
WordPress Advent Calendar 2013、3日目を担当させていただきます。@Toro_Unitです。 今回はWordPressで活用されているようで活用されていないような気がする、editor-style.cssをがっつり掘り下げてみようかと思います。 そもそもeditor-styleとは WordPressの投稿画面のビジュアルエディタ(ビジュアルリッチエディターとも言いますね)に適用するCSSのことです。 テーマのfunctions.phpに add_editor_style(); と記述すると、テーマ内のeditor-style.cssというファイルが、読み込まれるようになります。 また、引数にファイル名を指定することが可能で、その場合、 add_editor_style("css/editor.css"); とすると、テーマディレクトリのcss/editor.c
wp_register_scriptとwp_enqueue_scriptの使い方とその違いとは
$handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前が決めれます$srcはJavascriptのパスを書きます。$depsはどのJavascriptの後に読み込ませるか決めることができます。基本的には、読み込ませるwp_enqueue_script()の順に登録されますが、依存関係があるJavascript(JQueryプラグインなど)を登録させたい場合は、依存元のJavascriptの$handleを書いておくとそのJavascriptの後に登録されます$verは読み込ませるJavascriptのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与され
WordPressのガラケー変換プラグイン・Ktai Styleでthe_content()内の要素をスタイリングしてみる
スマートフォンサイトのWebデザイン に関する情報の配信が多いですが、 ガラケーサイトの制作需要もまだ健在 ですのでTipsを備忘録も兼ねて書いて みます。WordPressのKtai Styleで the_content()内をスタイリングする、 というもの。 まず最初に、僕はKtai Styleの仕様に関する知識は殆どありませんのであまり良くない方法なのかもしれません。その程度の記事としてお受け止め頂ければと思います。 Ktai StyleのテーマカスタマイズKtai Styleのテーマデザインの前に下準備。基本的には開発者さんが用意してくれたKtai Style用の既存テーマをコピーし、style.css内を書き換えて作ります。 /* Theme Name: foo Theme URI: http://example.com Version: 1.0.0 Description: M
任意のファイルを読み込み、その場に実装するWordPressショートコード | かちびと.net
3連休ですがいつも通り更新です。暇なものでして。今日はWordPressの小ネタです。一見凄く使えそうですが、使い方に気を付けたほうがいい、みたいなTips。任意のファイルを外部だろうが内部だろうが読み込むショートコードです。 休日ですし、ちょっとネタっぽい内容です。htmlでもxmlでもcssでも、指定したファイル内の文字列を取得してその場に実装します。 以下のコードをfunctions.phpに含めます function show_file_func( $atts ) { extract( shortcode_atts( array( 'file' => '' ), $atts ) ); if ($file!='') return @file_get_contents($file); } add_shortcode( 'show_file', 'show_file_func' );で、
WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする
凄く今更な話題かもしれませんが、知ってると便利なのでちょっと書いてみます。WordPressのテーマのcssに変更を加えたときに、表示をクライアントさん等に確認して貰う際、キャッシュの説明をするのがかなり面倒です。 というわけで、古来から伝わるcssファイルのキャッシュ(cssに限りませんけど)を防ぐ方法をWordPressで、という内容です。 この辺の理屈は、よく拝見させて頂いている小粋空間さんが書かれてますので合わせてご参照下さい。 コードget_bloginfo( ‘stylesheet_url’ )の方の方が多いかもですけど、今回はcssを読み込ませるのにこれ使います↓ href="<?php bloginfo('stylesheet_directory'); ?>/style.css"これで以下のように出力。 href="http://example.com/wp-content
WordPressで作成したFacebookページのIFrameタブデザインを崩さない方法
WordPressで作成したFacebookページのIFrameタブで、デザインを崩さずにきちんと表示させるためのTipsを紹介します。 １．問題点 次のような、WordPressとjQuery Tabs UIを使ったタブページを、FacebookページのIFrameタブに表示するものと仮定します。 上の場合は期待通りの表示になっていますが、場合によっては次のようにjQuery UI Tabsのスタイルが適用されず、崩れて表示される可能性があります。 余談ですが、WordPressを使って上記のjQuery UI Tabsによるタブページを表示するカスタマイズは「Facebookページプロフェッショナルガイド」に掲載しています。宣伝です（笑）。 Facebookページ プロフェッショナルガイドposted with amazlet at 11.07.16蒲生トシヒロ 竹村詠美 原裕 大元隆
Movable Type 5.1xのリスト画面のカラム幅を変更する
MT5.1xのリスト画面のカラム幅を変更するカスタマイズを紹介します。 下のスクリーンショットでは、公開日・更新日のカラムの幅を広くして、コメント数の幅を狭くしています。 変更前 変更後 １．デフォルトの動作 MT5.1で改善されたリスト画面のデフォルトの動作では、テーブルの各カラムの幅が次のCSSで固定されています。 記事タイトル系 .col.entry, .col.target { width: 25%; } カウント系 .col.num { width: 10%; } その他 .col { width: 13%; } 公開日や更新日など、過去の日付のものについて折り返しが発生し、逆にコメントカウントなどはカラム幅が少し余った状態になります。 ２．カラム幅を変更する カラム幅を変更するには、各カラムに対してCSSを設定します。ここではCMSHeadプラグインを利用します。 公開日と更新
わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr
HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。 トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート
Movable TypeでCSSファイルやJavaScriptファイルなどを管理するためのTips
MTQに「MTの管理画面上でCSSファイルやJSファイルの編集を行い、任意の場所に保存する方法はないでしょうか」というような質問がありましたので、こちらで情報展開します。 MTQ - フォルダにHTML以外のファイルを保存できるか？ このエントリーは以前書いた「インデックステンプレートにパスを設定する」のMovable Type 5版＋αになります。 １．インデックステンプレートで管理する Movable TypeでCSSファイルやJavaScriptファイルなどのテキストファイルを管理するには、インデックステンプレートを利用する方法があります。 CSSファイルやJavaScriptファイルにテンプレートタグを使えるという利点の他、テンプレートタグを使わないファイルでもFTPを行う必要がなく、管理画面上で編集・保存が行えるというメリットがあります。 ２．出力ファイル名にパスを設定して任意の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
様々なパターン背景をカスタマイズしてダウンロードできる・「Vector Pattern Generator」
好きなサイトのCSSを簡単にカスタマイズできる「Stylebot」 | ライフハッカー・ジャパン
http://webourgeon.com/2011/01/18/widget-class-name/