当記事はInstant WordPress v4.3.1時点のものです。僕が確認した時点のv5.3以降では、インターフェースが新しくなり、以下のインストール手順は異なるものになってしまったのでご了承ください。 新しいInstant WordPressの利用方法は、InstantWPのインストール方法と使い方を参照してください。 今回は、Windowsに、これ以上無いくらいに簡単にWordpressローカル環境を構築する方法の紹介です。 僕は2台のWindowsパソコンを持っています。そのうち1台は、Bitnami for XAMPPを使ってローカル環境を構築しました。これが結構めんどくさかった。Bitnamiを使った方法もあるのですが、Instant WordPressを使用すれば、それよりもさらに手順を短縮できます。 僕は2台目のパソコンは、Instant WordPressでローカル環

Chromeアプリ「Vysor」とは Vysorは初心者でも簡単にスマホ画面をパソコンへ表示ができるChromeアプリです。 また、単にスマホ画面をパソコンへ表示させるだけでなく、表示された画面をパソコンからマウスやキーボードで操作することができます！ つまり、リモートデスクトップならぬリモートスマホができちゃうすごいやつなんです！ もちろん、スマホ側で操作をすればパソコンに表示された画面も連動して動きます。 「Vysor」デモ動画 Vysorはどんな時に使えるの？ スマホの画面がパソコンに表示されるのは分かったけど実際どういった場面で使えるのでしょうか？ と、いうことでVysorの使いどころをまとめてみました。 パソコン側から表示画面をスクリーンキャプチャをとって簡単に資料が作成できる プレゼン時にスマホの画面を映し出して操作をしながら発表ができる 長文を打たなければいけないとき、パソコ

/* 例:幅640px高さ360pxの画像の場合 */ #targetElm{ height: 0; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ padding-top: 56.25%; background: url('bg.png') 0 0 no-repeat; background-size: contain; }

作成する予約システム 画面構成は次のようになります。 作成するシステム 日付選択 --- 予約する日付を選択します。 時刻選択 --- 選択した日付で任意の時刻を選択します。 お客様情報入力 --- お客様の名前や連絡先を入力します。 確認画面 --- 入力・選択内容を確認します。 予約完了 --- 予約が完了します。管理者とお客様に確認メールが送信されます。 このようなシステムをプログラミングせずにDIY感覚で組み立てるイメージで作成できます。さっそく始めましょう。 始める前に：WordPressの準備 事前に、システムを組み込むWordPressを準備しておいてください。3.5以降のバージョンが必要です。使用中のWordPress、業務で使い込んでいるWordPressでも構いませんが、テスト用にWordPressをインストールしていただいた方が無難です。 さくらインターネットをお使い

投稿日:2015/03/15 / 更新日:2015/03/15 この記事では、Twitterのリスト機能の使い方を説明します。リストとは、特定のユーザーだけを指定して、そのユーザーだけで構成されるタイムライン(ツイート集)を作ることができる機能です。 この章では、Twitterのリスト機能に関するQ&Aをまとめています。 リスト機能って何？リストとは、特定のユーザーを選んで、そのユーザーだけで構成されるタイムラインを作ることができる機能です。あなたがフォローしているユーザーは、リアルの友人、好きな有名人、面白いネタを投稿する人、一応フォローしてるけどリムーブしにくい人(笑)など、様々なまとまりがあると思います。そんな中、例えば、面白いツイートだけを見たい時、リアルの友人の近況だけを知りたい時など特定の情報を知りたい時には、必ずノイズ(関係ないツイート)が混ざってしまいますよね。それを解決す

あなたはYoutube動画をビジネスに活用することに興味はありませんか？ 今、Youtube動画を活用することで集客力や売り上げを大きく高めることができます。 なぜなら、競合他社（ライバル）が取り入れていない分野だからです。 ですが、今後あなたの競合が徐々にYoutube活用を初めて、市場が飽和してくると、「最初に始めた人」が一人勝ちします。 そこで、この記事内ではYoutube動画を活用することのメリットや実際の活用法をお伝えしていきます。 なぜ集客でYoutube（動画）を使うのか？ では、なぜYoutubeを集客に使うのか？ 詳しく説明します。 理由1：Google副社長の発言が話題に！ 引用： http://douga-c6.com/ いまや、オンライン上では誰も太刀打ちできないであろう、Googleの副社長である、ロバートキンコー氏がこのように言いました。 「ネット上のトラフィッ

Facebook広告とはFacebookのタイムラインに表示される広告の事を指します。 Facebook広告を利用する事で、あなたは国内の2,600万ユーザーの中から高いターゲティング機能を使って、自社の商品やサービスの広告を配信する事が可能です。 初めまして！Facebook広告の専門家として活動しております林明文です。こちらの記事ではFacebook広告の運用代行を検討されている企業の担当者様に、私が2013年より9年間運用してきた経験を元にFacebook広告についてお伝えさせていただきますね。 こちらの記事では Facebook広告とは何か？ Facebook広告の種類は？ Facebook広告の特徴は？ Facebook広告の予算や費用は？ について図解で分かりやすく説明をしています。 売上アップ、サービスへの問い合わせ獲得をしたい経営者や現場のWEB担当者様、広告運用担当者が必

a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:

Linuxと呼ぶか、CentOS(もしくはUbuntu)と呼ぶか悩みます。 ぺやんぐ(@peyangu485)です。 今回は、さくらのスタートアップスクリプトを使用してMastodonのインスタンスを作った話をしようと思う。 これから、同じ手段でインスタンスを作ろうとしている人の助けになれば幸いである。 ◆導入 手順１:さくらのクラウドでDNSゾーンを作成する 手順2：独自ドメインを取得した側のネームサーバーの設定を変更する 手順3：APIキーの作成 手順4：サーバーの作成 手順5：アカウントの作成～ログイン 手順6：自分のアカウントを管理者にする ◆まとめ ◆導入 まず、下記のサイトでさくらインターネットのアカウントを作成する。 www.sakura.ad.jp 次に、独自ドメインを取得する。 私は、お名前.comで作成した。 基本的にはさくらのインターネットの導入の記事の通りにすれば、

こんにちは、さくらインターネット クラウドチームの大喜多です。 Mastodonは、Twitterライクな投稿ができる分散型ソーシャルネットワークを実現するオープンソースソフトウェア(OSS)です。Twitterとの違いは、1カ所に全ユーザがいる中央集権型でなく、個人でインスタンス(Mastodonではサーバのことをこう呼びます)を立てて、他のインスタンスと緩く繋がれる分散型であるところです。さくらのクラウドのスタートアップスクリプトを使うことで、自分(あるいは仲間同士)のMastodonインスタンスを簡単に作ることができます。 そこで今回はさくらのクラウドを使って、本当に「ゼロから」Mastodonインスタンスを作ってみます。

急速に盛り上がっている分散型SNS「Mastodon」（マストドン）。基本的な使い方やよくある質問・回答をまとめました。 Mastodonって？ Twitterのようなミニブログサービスです。Twitterとの大きな違いは「誰でもサイト（※）を作れる」ことです。TwitterのWebサイトは「https://twitter.com/」の1つきりですが、Mastodonは多数のサイトが乱立しており、その数が日々増えています。 各サイトは「インスタンス」と呼ばれ、4月21日時点で1000個以上もあります。あるインスタンスが利用できなくなっても、他のインスタンスは利用できます。「分散型」と言われるゆえんです。

2017年4月頃から急激に広まったオープンSNS「Mastodon(マストドン)」。日本人のSNSと言ったら、Twitter・Facebook・LINE・Instagramが現在は主流ですが、一体このMastdon(マストドン)というWebサービスはどんな特徴があってここまで広まったのか…。 そこで今回は、Mastdon(マストドン)の登録方法と使い方のまとめ、そしてMastodon(マストドン)の特徴や使ってみた感想を紹介していきます。 Mastodon(マストドン)とは？その特徴を解説 Mastodon(マストドン)とは、元々はドイツに住むEugen Rochkoさんが開発したTwitterに非常によく似たSNSで、オープンソースが公開されていることもあり有志がサーバーを立てて運用しているWebサービスです。 現在Mastodon(マストドン)のサーバーは500以上あると言われており、

スクロールせずに見えるコンテンツのレンダリングをブロックしている javascript/css を排除するWordPressプラグイン3つ 先日Googleさんから「レンダリングブロックjavascript/cssを排除」するよう警告された@web_shufuです。色々ググって調べると、レンダリングブロックjavascript対策に有効っぽいプラグインが3つ見つかりましたので入れてみました。 2015年4月20追記：当ページのプラグインはプラグイン「 WP Fastest Cache」の導入で不要になったので全て外しました。 レンダリングブロックjavascript/cssを排除することを決意 2013年10月ころは、PageSpeed Insightsで当サイトのどのページを調べても、冒頭の画像ような結果になりました。 特に「レンダリングブロックjavascript/cssを排除」は必ず

SEO対策を進める中で、スマートフォン対応はもはや必須と言っても良いほど重要な対策のひとつとなりました。 2023年10月に完全に移行が完了した「モバイルファーストインデックス」という仕組みによりスマホの最適化がSEOのコンテンツマーケティングに欠かせない施策となっています。 サイトの運用上、モバイル用とPC用のページファイル（URL）が同一の「レスポンシブデザイン」が管理・運用面で見ても簡単でGoogleにも推奨されていますが、 モバイル用のページを以前からパソコン用ページとは別で既に用意していて、今後もモバイルサイトで運用していく予定の方も多いかと思います。 この管理方法で注意したいポイントは、そのモバイル用に作成したページが正しくモバイル版と認識されているのかどうかはもちろん、パソコン版ページとモバイル（スマホ）版のページが存在することを検索エンジンに正しく認識してもらわなければ、全

公開日：2014年9月15日 スマートフォン用にサイトを用意した場合、ユーザーからのアクセスをPCサイトとスマートフォンサイトに振り分けるにはユーザーエージェントで判別します。.htaccess、PHP、JavaScript それぞれでユーザーエージェントを判別し振り分ける方法を解説します。 Webサイトの振り分け方法としては、ユーザーエージェントの他にスクリーンサイズで振り分ける方法もあります。こちらはレスポンシブWebデザインでよく用いられます。 また WordPress などの CMS を使っているサイトなら、プラグインを使ってテーマごと切り替える方法もあります。 PC用とスマートフォン用にサイトを別々に用意した場合は、ブラウザから送られてくるユーザーエージェントの文字列を、何らかのコードを組んで判別し振り分けるのが一般的です。 【コンテンツ】 モバイル端末のユーザーエージェントの見

TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s

テキストを使ったアニメーションを4つほど作りました。 実際の動作を下記URLで確認できます。 http://jsfiddle.net/junya_5102/dsqcwd0f/1/ その1 .text-anime1{ color: #fff; text-shadow: 1px 0 1px #000, 0 1px 1px #000; animation: text_animation1 2s ; } @keyframes text_animation1{ 0%{ letter-spacing: -2em; } 100%{ letter-spacing: 0; } }