aoiasabaのブックマーク - はてなブックマーク

[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグイン CLEditor です。各種ボタンのカスタマイズができる他、フルブラウザ対応（リサイズ）や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。 ※注意点としては、jQuery1.4 系で動いている点です。 jQuery のバージョンを1.7 などにすると上手く動きませんでした。 CLEditor の設置ダウンロードした CLEditor ファイル一式を jQuery ファイルと一緒に<head> 内に設置します。ボタン画像なども含まれるので、cleditor/ のようなフォルダにまとめて置いた方が良いです。 <link rel="stylesheet" href="./cleditor/jquery.cleditor.css"> <script src="./jquery.min.js"></sc

aoiasaba 2022/05/25

WYSIWYG

リンク

[JS]jQuery の fadeIn() でページ読込み時にフェードインで要素を表示する｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

サイトにアクセスしたら、ページ全体をボワ〜ッと徐々にフェードインで表示させる方法です。 jQuery の fadeIn() を使うだけの簡単な処理ですし、フェードインの微調整（時間調整）次第で効果的な演出も可能になるかと思います。

aoiasaba 2019/11/12

リンク

[CSS]CSS で作る「吹き出し」のサンプル｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

吹き出しやバルーンとも言いますが、CSS だけで実現できるのでまとめました。上下左右の4方向に対応した吹き出しサンプルです。「下向き」吹き出しの作り方まずは「下向き」からです。 <style> /*親*/ .parent1 { width:100%; background:#dd0000; padding:0; position:relative; } /*子*/ .parent1 .child1 { background:#dd0000; position:relative; /*テキストの補正*/ color:#fff; padding:10px 0 } /*擬似要素:after*/ .parent1 .child1:after { content: ' '; width:0; height: 0; position:absolute; border:10px solid tra

aoiasaba 2017/11/21

わかりやすい！

リンク

<a href=> に javascript：void(0) を指定する際の注意点｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

void(0) は「何も処理しない」という時に使用します。 a タグの href 属性ではリンククリックを無効化（処理しない）して、onClick 属性に書かれたスクリプトを実行する、なんて使い方が多いと思います。 javascript:void(0) の使い方 javascript:void(0) は、基本的な書き方はこんな使い方をします。 <a href="javascript:void(0)" onclick="javascript 関数();">リンク</a> IE6用でも動くように return false; を指定但し、IE6 の場合は href 属性のリンクと onClick 属性の処理がバッティングするようなので、void(0) を利用する場合は IE6用でも動くように return false; も指定します。 <a href="javascript:void(0)"

aoiasaba 2015/03/12

javascript

リンク

[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

<head> 内に jquery ファイルと一緒に jquery.backgroundSize.js ファイルを設置しますが、IE8 以下に対応させるので <!–[if lte IE 8]> で括るようにします。 <script src="./jquery.min.js"></script>  .contents の要素に対してCSS3 の background-size:contain を適用させる例です。 <style> .contents { w

aoiasaba 2014/06/09

リンク

[WP]WordPressのテーブル用プラグイン「TablePress」の使い方と、レスポンシブWEBデザイン対応について｜WordPressプラグイン｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[WP]WordPressのテーブル用プラグイン「TablePress」の使い方と、レスポンシブWEBデザイン対応について <table> タグを使ったコーディングはまだまだ多いですが、例えばWordPressで作った企業サイトで「会社概要」のような表組を掲載する場合に便利なプラグインが、今回紹介させていただく「TablePress」です。 TablePress は、例えば「企業情報で使うテーブル」「会社沿革で使うテーブル」「商品情報で使うテーブル」のように、コンテンツ毎にテーブルを複数管理でき、投稿記事や固定ページでショートコードを使ってフロント画面に表示させることができる便利なプラグインです。また、拡張機能を使えばテーブルコンテンツをレスポンシブWEBデザイン対応することができますので、<table> を使うサイトであれば是非導入しておきたいプラグインではないかと思います。 Tabl

aoiasaba 2014/02/07

リンク

WordPressで投稿記事の並び順を自由に変更するプラグイン「AStickyPostOrderER」｜WordPressプラグイン｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

AStickyPostOrderER のインストール以下のページより、最新版のプラグインファイルをダウンロードし、Wordpressの管理画面でプラグインを有効にします。 AStickyPostOrderER の基本設定 – 投稿記事 AStickyPostOrderER の編集画面で使用されている主な（英）単語は、概ね以下のような表現になります。 Sorted：ソート設定された分類（記事リスト） Un-sorted：ソート設定されていない分類（記事リスト） Send To：記事の表示順プラグインを有効にした直後に AStickyPostOrderER の編集画面へ移動すると、投稿記事は全て Un-sorted に表示されています（デフォルト）。これを、表示順を変更したいものだけピックアップしてSortedへ移動させる、あるいは、全投稿記事を対象に表示順を変更してSortedへ