はてなブックマーク

リンクをコピー Googleフォームは便利ですね！ 使ってる人は多いと思います。 アンケート調査用のフォームや普通のメールフォームなど、各種のフォームが無料で簡単に作成できます。 また、回答をGoogleスプレッドシートに集計することも可能です。 当ブログでも読者さんからのメッセージ受信用に使っています。 （＊現在はお問い合わせページを作ってます） 今回はこれをWEBサイトに埋め込む方法について解説。 埋め込み手順 Googleフォーム自体の登録や作成方法は、下記のブログでも参照されてください。 ＊Googleフォームの使い方 – 作り方・作成方法 | アンケート回答記録をスプレッドシートで さて、これのWEBサイトへの埋め込み方法についてです。 サンプルとしてテスト用のフォームを作ってみました。 これを埋め込んでみましょう。 まず、GoogleフォームにGoogleアカウントでログイン、

「Xeory Extension」は国産の無料WordPressテーマです。 ＊Xeory Extension カスタマイズ自由で商用利用可。 SEO 最適化済、レスポンシブデザイン。 提供元クレジット表記無し。 WordPressの国産テーマの大半はブログ型テーマで 企業や店舗で用いるコーポレート型テーマは少数派です。 その少数派の中に 以前にご紹介した「Lightning」や同じ運営会社の「BizVektor」、 そしてこの「Xeory Extension」などがあります。 とりあえず速攻で、 格好良いトップページと秀逸レイアウトのブログを持ったサイトを作りたい、という人にはピッタリのテーマです。 今回から数回に渡って「Xeory Extension」のカスタマイズ方法を載せていきます。 ～ 目次 ～ Xeory Extensionとは？ 架空のフリーカメラマンのWEBサイトを制作 テ

便利なWordPressプラグインをご紹介します。 今回は、カテゴリーの順番を並び替えるプラグイン「Category Order and Taxonomy Terms Order」です。 カテゴリーの順番を並び替えるプラグイン WordPressはデフォルトの設定だと、カテゴリーの並び替えが出来ません。 ウィジェットでサイドバーにカテゴリーを表示した場合、デフォルトだと作成時間順に並んでしまいます。 任意の順に変更できず、とても不便です。 そこで、この「Category Order and Taxonomy Terms Order」の出番です。 ドラッグで簡単に表示順を並べ替えられます。 （＊カスタムタクソノミーの並び替えにも対応しています） 以前はこの用途では「Category Order」というプラグインが一世を風靡してましたが、更新が止まり不具合が多くなってきました。 インストールか

Bootstrap4を使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap4」。 ＊Material Design for Bootstrap 「Material Design for Bootstrap4（以下、MDB4と呼称）」は無料で商用利用可能です。 クレジット表記も必要なく、制作にも使えます。 ライセンスは「MTIライセンス」で、 ソースコード内（mdb.min.css）にクレジット表記が載っているので、それさえ消さなければ問題ありません。 以前、MDB4について単発の記事に概要のみ載せました。 また、これのBootstrap3対応バージョンについて、8回のシリーズで書きました。 Bootstrap4も正式リリースから半年以上経ちましたので、そとそろ皆さん慣れてきた頃かと思います。 今回から数回に渡って「

前々からマテリアルデザインを使って、サイトを制作したいなあと考えていたのですが、習得するのもやたらと小難しそうで躊躇していました。 このGoogleのガイドラインを見ても、 ＊マテリアル デザインのガイドライン（日本語版） 「マテリアルはメタファー（比喩）である」 などと書いていて、だから何なんだよと言いたくなります。 読むだけで頭が痛くなります。 で、手っ取り早くマテリアルデザインを実装する方法はないかと探してみたのですが、ありましたよ、ありました。 ＊Material Design for Bootstrap Bootstrapを使い慣れてる人ならば、簡単に導入することが出来ます。 最新の「Bootstrap 4」に対応しています。 多種多様のマテリアルパーツ 「Material Design for Bootstrap」を導入すると、多種多様のマテリアルデザインのパーツが使用可能にな

この記事は内容が古くなっています。 最新バージョンのLightningと合わない箇所が多々あると思います。 新しいLightningによるサイト制作シリーズはこちらから。 「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。 ＊Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ GPLライセンス、カスタマイズ自由自在で商用利用可。 Bootstrapを実装、レスポンシブデザイン。 公式プラグインとの連携により高機能を実現。 株式会社ベクトルは「BizVektor」というテーマが超有名ですね。 ＊BizVektor 企業サイト向けスマホ対応レスポンシブWordPressテーマ この「BizVektor」に次いで開発されたのが「Lightning」です。 さて、今回から数回に渡って「Lightning」

リンクをコピー WEBサイトのページを丸ごとキャプチャする場合は、専門のソフトを使うか、ブラウザにアドオン（拡張機能）を入れて撮ってる人が多いと思います。 Firefoxならばアドオン無しで、ページ全体のスクリーンショットを撮ることが可能です。 今回はこれの解説。 キャプチャの手順 試しに当ブログのトップページを撮ってみましょう。 まず、Firefoxでトップページを開き、キーボードの「F12」キーを押します。 （右クリック⇒「要素を調査」でも可） するとブラウザ下半分に開発ツールが表示されます。 開発ツールの右上にある小さな「歯車マーク」をクリックします。 設定画面が表示されるので、「利用可能なツールボックスのボタン」の中の「ページ全体のスクリーンショットを撮ります」にチェックを入れます。 すると、開発ツール右上に「カメラマーク」が表示されます。 これをクリックすると、「カチッ！」と音が

この記事は内容が古くなっています。 最新バージョンのLightningと合わない箇所が多々あると思います。 新しいLightningによるサイト制作シリーズはこちらから。 「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。 ＊Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ 前回に引き続き、Lightningのカスタマイズ「その３」。 今回はCSSによるカスタマイズを扱います。 前回は、WP管理画面からあれこれ設定をいじってみました。 これを最終回までに、以下の状態にまでカスタマイズします。 ＊北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者 （架空のサンプルサイトです） ＊2017/10/28のアップデートにより、コードを一部書き換えました。 フォントを変更 「Lightning

リンクをコピー IE（Internet Explorer）に泣かされることは多々あります。 WEB制作者の頭痛の種です。 徐々にIEの各バージョンも引退しつつありますが、最後の砦である「IE11」は未だ現役です。 今回はこの「IE11」で、スクロール時に固定背景画像がカクつく問題についてです。 発生条件 発生条件は、CSSで背景画像に 「position : fixed」 「background-attachment : fixed」 どちらかを適用した場合に起こるようです。 ま、百聞は一見にしかず。 以下のページをPCから見てください（スマホ・タブレットは画像非表示）。 ＊サンプルtmp001（no-js） Chrome・Firefox・Edge・Safariなどでは普通に見れます。 普通のサンプルサイトです。 今度はこれをIEで見てみましょう。 マウスでページをスクロールすると、ページ

オリジナルでWordPressサイトを制作する際に、スターターテーマと呼ばれるカスタマイズ専用のテーマを使うととても便利です。 スターターテーマ、別名「ブランクテーマ」とも呼ばれています。 有名なスターターテーマは幾つかありますが、その中で私が重用しているのがこの「アンダースコア（_s,underscores）」です。 今回はこれのご紹介。 アンダースコアのダウンロード このテーマの存在はschooの授業で知りました。 ＊WordPress入門 -オリジナルテーマの制作方法- では、早速使ってみましょう。 まずアンダースコアのサイトに行きます。 ＊Underscores | A Starter Theme for WordPress 「Theme Name」と書かれたフォームに、ご自身のオリジナルテーマ名を記入し、「GENERATE」ボタンをクリックするとテーマがZIP形式でダウンロードさ

リンクをコピー ブログやWEBサイトなどにツイッターのタイムラインを埋め込んでいる人も多いかと思います。 WordPressのサイトではブロックやウィジェットを使って埋め込むことも可能です。 今回は、これの埋め込み手順とデザインカスタマイズの解説です。 まずはタイムラインの埋め込み方法です。 こちらのページに行き、 https://publish.twitter.com/# タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。 URL、ちなみに当ブログの場合は以下です。 https://twitter.com/souken_blog 次に、左側の「Embedded Timeline」をクリックします。 最後に、コードが表示されるのでこれをコピーして、ブログなりWEBサイトなりに貼り付けます。 これでタイムランが表示されるようになります。 細かくカスタマイズ

リンクをコピー ネットのバナー広告やブログのアイキャッチ画像などで、同じような人物を見かけることが多いと思います。 「あれ、この人見たことがある！？」この既視感。 私も仕事柄お世話になっている有名モデル画像素材を集めてみました。 今回は女性モデル編です。 ＊一年おきぐらいで最新版に更新します。 ぱくたそ ＊ぱくたそ https://www.pakutaso.com/ 「河村友歌」さん 「茜さや」さん 「LaLa」さん 「緋真煉」さん 「たけべともこ」さん 「にゃるる」さん 「高尾実生」さん 「SAKI」さん 今やブロガー御用達系サイトとなった「ぱくたそ」。 お遊び画像が豊富でブログのアイキャッチやバナーの素材によく使われます。 写真AC ＊写真AC http://www.photo-ac.com/ ID「mdjf003」さん ID「mdjf005」さん ID「mdjf007」さん ID「m