サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大阪万博
webantena.net
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
Dropboxは原則1アカウントしか利用（同期）することができませんが、Macの場合はAutomatorでDropboxを起動することにより、2つ以上の複数アカウントを同期させることが可能です。 新しいDropbox フォルダの用意 Mac の/Users/ユーザー名/フォルダに、新しいDropboxのフォルダを作成します。 すでにDropboxアプリケーションを使っている場合は、Dropbox2、Dropbox-Bなど別の名称であれば何でも構いません。※今回は「Dropbox-s」にしています。 Automator の起動 アプリケーションフォルダ内のAutomatorを起動します。 Automatorの「アプリケーション」を選択します。 左メニュー（ライブラリ）の「ユーティリティ」から「シェルスクリプトの実行」を選択します。 「シェルスクリプトの実行」ウィンドウで、 左側のシェルは/b
WP Facebook Portalプラグインのインストール 管理画面のプラグイン新規追加よりWP Facebook Portalを検索するか、以下のページからプラグインファイルをダウンロードします。 WP Facebook Portal Facebook側での事前準備 WP Facebook Portalプラグインで連携する前に、Facebook側でいくつか事前に準備をしておきます。 Facebookページの用意 まずはFacebookページを用意します。 Facebookページの作成方法は、過去に紹介させていただいたFacebook ページの作成方法（2015年9月版） の記事を参考にしてみてください。 Facebookアプリの用意 Facebook アプリの作成方法も、過去のFacebook アプリの作成と公開方法のまとめ（2014年版） の記事を参考願います。 WP Faceboo
以前に、このブログでも管理画面の「表示オプション」や「ヘルプ」リンクを非表示にする方法について紹介させていただきましたが、 今回は、管理画面の「表示オプション」リンクは表示させるものの、表示オプション内で不要なものを最初から非表示にしてしまう方法について紹介させていただきます。 functions.php で不要な表示オプションを非表示にする。 ご利用のテーマのfunctions.php に以下のコードを追加します。 function my_remove_meta_boxes() { remove_meta_box('authordiv', 'post', 'normal'); // オーサー remove_meta_box('categorydiv', 'post', 'normal'); // カテゴリー remove_meta_box('commentstatusdiv', 'pos
Bootstrap<で.navbar-collapse内のメニューリンクをクリック（タップ）して同一ページのアンカーポイントへ移動すると同時に、.collapseメニューを閉じる処理についてメモ。 <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="co
Really Simple CSV Importer のインストール 管理画面のプラグイン新規追加よりReally Simple CSV Importerを検索するか、以下のページからプラグインファイルをダウンロードします。 Really Simple CSV Importer CSV の編集例 以下、頻繁に使いそうなCSV の編集例をまとめました。 ※必要に応じて、随時追加していきたいと思います。 新規に記事を投稿する post_idを空値にします。 下記CSV 例だと「サンプル記事2」が新規に登録されます。 ただし、次回インポート時も空値のままだと、同じ記事が新規記事として追加されてしまいますので、新規投稿を終えたらpost_id 欄に記事ID を入れておきます。
jQuery プラグインのダウンロード アラートボックスにはSimpleModalを利用し、jQuery CookieでCookie に保存する仕組みになりますので、それぞれ必要なファイルをダウンロードしておきます。 SimpleModal のダウンロード 以下のページからSimpleModalのファイルをダウンロードします。 SimpleModal jQuery Cookie のダウンロード jQuery Cookieのファイルはこちらからダウンロードします。 jQuery Cookie SimpleModal と jQuery Cookie の設置 jqueryファイルと一緒にjquery.cookie.jsとjquery.simplemodal.1.4.2.min.js のファイルを設置します。
ブログをメインにWordPress を運用する場合は別ですが、企業サイトをWordPress で構築する場合は「投稿」という表示を別に名前にしたい時もあります。 そんな時は、テーマファイルのfunctions.php を編集して「投稿」を別の表記に変更することが可能です。 「投稿」を「ニュース」に表示変更してみる 通常、WordPress 管理画面の左メニューは「投稿」になっていますが、 例えば「投稿」を「ニュース」に変更したい場合は、ご利用のテーマファイルfunctions.php を開いて、以下のような記述を追加します。 function change_post_menu_label() { global $menu; global $submenu; $menu[5][0] = 'ニュース'; $submenu['edit.php'][5][0] = 'ニュース一覧'; $subme
replace() で同じ要素内で複数組のテキストを置換 同じ要素内で複数のテキストを変換したい場合のサンプルです。 <script src="./jquery.min.js"></script> <script> $(document).ready(function(){ $('.replace').each(function(){ var txt = $(this).html(); $(this).html(txt .replace(/A/g,'B') .replace(/C/g,'D') .replace(/E/g,'F') ); }); }); </script> 出力結果ですが、元のテキストはこちら。
MacのTime Machineは外付けハードディスクなどに丸ごとバックアップを取っておける非常に便利なアプリケーションですが、不要な過去のバックアップファイル（Backups.backupdb/の中）を消す際にはやや注意が必要です。 そのままFinder のゴミ箱に入れちゃうと厄介なことになりますので、手順に従ってきちんとバックアップデータを削除する必要があります。 Time Machine にアクセス 画面右上のツールバーからTime Machineにアクセスします。 Time Machine のファイルを消去する 右端に並んだ日付の中から、消去したいバックアップを選び、「アクション」ボタンから「バックアップを削除」をクリックします。 パスワードを聞かれるので入力します。 デスクトップに戻ってくる場合は、画面左下の「キャンセル」をクリックします。 以上がTime Machineのバック
WordPressの管理画面やフロント画面に「100 Views」のような記事閲覧数を表示できるプラグインWP-PostViewsのご紹介です。 記事の閲覧数は、今までにどれくらい閲覧数があったか？という「累計表示」になりますが、工夫次第で「人気記事」のような見せ方も可能になります。 WP-PostViews プラグインのインストール 管理画面のプラグイン新規追加画面よりWP-PostViewsを検索するか、以下のサイトよりプラグインファイルをダウンロードします。 WP-PostViews 管理画面に記事の閲覧数を表示する プラグインを有効化すれば、管理画面上に記事の閲覧数（Views）を表示できます。 また、プラグインを有効化した時点で記事投稿画面のカスタムフィールド欄に「Views」が追加されます。 フロント画面に記事の閲覧数を表示する WordPress管理画面の左メニュー「設定」か
<style> ol { position: relative; margin:0; padding:0 } ol li { list-style: none; list-style-position:outside; margin:0; padding-left:1.25em } ol li span { position: absolute; left:0; margin:0 } /*IE6*/ *htmlolli span { left: -1.25em; } </style> <ol> <li><span>①</span>リスト1</li> <li><span>②</span>リスト2</li> <li><span>③</span>リスト3</li> <li><span>④</span>リスト4</li> <li><span>]
WordPressで「記事の1件目にだけ広告を表示する」みたいなことをするための方法です。 記事の1件目に広告を挟むような特定の処理を入れたりできる他、1件目の記事にだけ特別なクラスを指定することもできます。 また、偶数件数や奇数件数の記事、ループで回した最後の記事に対しても特別なクラスを指定することができるなど、デザインの自由度がかなり上がるカスタマイズです。
WordPress のContact Form 7 プラグインを使ったメールフォームに「画像アップロード」のフィールドを追加する方法と、アップロードしてもらった画像をメールに添付して受け取る方法のご紹介です。 Contact Form 7 プラグインのインストール 管理画面のプラグイン新規追加画面よりContact Form 7 を検索するか、以下のサイトよりプラグインファイルをダウンロードします。 Contact Form 7 Contact Form 7 で画像アップロードフィールドの追加 Contact Form 7 を有効化したら、管理画面左メニュー「お問い合わせ」よりメールフォームの編集ページへ進み、「タグの作成」メニューより「ファイルのアップロード」を選択します。 「ファイルのアップロード」の設定項目は以下の通りです。 ①アップロードを必須にする場合は「必須入力の項目ですか？」
WEBサービスのモックアップ作成などでもお世話になる事が多いアイコンフォント。 今回は、数も種類も非常に豊富なアイコンの中から、自分が好きなモノを選んでダウンロードできるIcoMoonというサービスについて、その使い方と簡単なカスタマイズについて紹介させていただきます。 IcoMoon にアクセス 以下のページからIcoMoonへアクセスします。 IcoMoon IcoMoon の取扱アイコン IcoMoonページ上部の「IconMoon App」ボタンをクリックします。 WEBサービスでもよく使いそうなアイコンが多数掲載されています。 一部になりますが、ざっとこんな感じ↓ IconMoon Free Linecons Eighty Shades Entypo IcoMoon の使い方 使いたいアイコンをクリックして、 ページ下部の「Font」ボタンをクリックします。 確認ページへ遷移しま
次のページ
このページを最初にブックマークしてみませんか？
『WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
