こんにちは。フローラです。
前回私の記事でSVGアニメーションについてご紹介しました。
参考記事：
SVGファイルを使って簡単にアニメーションを作ってみましょう
WordPressは初期状態ではSVGファイルをアップロードできません。
SVGファイルをアップロード、表示させるには、functions.phpにSVGファイルの記述を追加しなくてはなりませんが、プラグインで簡単に取り扱えるようになりますので、早速設定してみましょう。
プラグインをインストールする方法については下記記事をご参照ください。
参考記事：
WordPressで簡単に便利な機能を盛り込みたい！
では「Scalable Vector Graphics」を検索してインストール、有効化してください。
.htaccessはサーバの設定によりますが、ドキュメントが置いてあるトップのディレクトリにあることが一般的です。
.htaccessに下記コードを追加して保存してください。
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
早速「メディアを追加」してみると、SVGファイルが表示されましたね。
なお、float指定している要素にwidthが指定されてないと表示されませんのでご注意ください。
また、SVGファイルに書き出しをする際、画像の場所は「リンク」ではなく「埋め込み」にしてください。CSSプロパティは「スタイル属性にすると画像サイズが重くなります。「プレゼンテーション属性」で良いかと思います。
SVGファイルもJPGやPNGのようにアップロードできるようになりましたね。
前回の記事でもご紹介しましたが、簡単にアニメーションも付けられますので是非使ってみてください。
ちなみに今回の記事の画像ファイルもSVGファイルですよ！
意外と知っておくと便利なツールチップ。
グローバルメニューをスタイリッシュに表示したい時に英語表記することが多々あるのですが、年齢層高めのユーザーがターゲットの場合、日本語表示も欲しいという声をいただきます。
そんなときにツールチップがあれば、英語表記だけどマウスオーバー時にちゃんと日本語で案内できるので、クライアント様の要件を満たせることが多いです。
みなさまも覚えておくと、ちょっとサイトデザインの幅が広がりますよ。
まずは、Wordpressにプラグインを追加しましょう。
今回ご紹介するのは「Simple Tooltips」です。
なので、Wordpressのダッシュボードの
「プラグイン」→「新規追加」→右上の検索ボックスに「Simple Tooltips」と入力しましょう。
すると「Simple Tooltips」が表示されますので、
インストール→有効化
をクリックします。
では早速、このプラグインを使ってグローバルメニューにツールチップを追加しましょう。
現在ご覧の弊社onWEBのサイトでは、グローバルメニューが英語表記となっています。
こちらに日本語表記のツールチップを導入し、ユーザーの利便性を高めたいと思います。
まず、ダッシュボードの左メニューの「設定」→「Simple Tooltips」をクリックします。
- Background Color
- Text Color
- Max Width
- Opacity
- Position
- Disable On Mobile
- Menu Selectors (Advanced)
ツールチップの背景色の変更
ツールチップの文字色の変更
最大幅の設定
ツールチップの背景透過度の設定
ツールチップの配置場所
モバイル時にツールチップを表示するかしないかの設定
グローバルメニューに設定する際にクラス名を指定
今回の重要なポイントです
背景色や文字色などは、サイトに合わせて設定してください。
では、グローバルメニューにツールチップを使用していきましょう。
まず、ツールチップを入れたい、グローバルメニューのクラス名を確認してください。
※弊社onWEBでは「headMainMenu」になります。
クラス名が確認できたら、上記「Menu Selectors (Advanced)」の項目に先ほどのクラス名を記入ください。
その際、「.」を入れるのをお忘れなく。
ツールチップ側の設定が完了しましたら、次はグローバルメニューの設定です。
ダッシュボード左メニューから「外観」→「メニュー」をクリック。
そこで、右上の「表示オプション」をクリックし、「タイトル属性」・「CSSクラス」にチェックを入れます。
次にメニュー構造のメニューを一つ開き、以下の項目を入力しましょう。
- タイトル属性
- CSS Class
ツールチップに表示するテキストを入力
「tooltips」と入力
以上で設定が完了しました。
ちゃんとグローバルメニューにツールチップが表示されるか確認してみてください。
このような簡単な設定で、グローバルメニューにおしゃれなツールチップが入りました。
これでまたデザインの引き出しが増えましたね。
WordPressでブログを書いていくと必ずカテゴリーが増えていくと思います。
そのとき一番使うカテゴーを一番上に持っていきたい、このカテゴリーはあまり使わないから下に移動させたいなどあると思います。
今回はブログカテゴリーの並び替えプラグインを紹介していきたいと思います。
WordPressの初期設定で並び替えのプラグインが入っていませんなので「Taxonomy Order」というプラグインをインストールします。
※ インストール方法は、「WordPressで簡単に便利な機能を盛り込みたい！（プラグインのインストール方法）」を参考にしましょう。
プラグインをインストールするとWordPressの管理画面の左メニューの「投稿」内に「Taxonomy Order」が追加されるのでクリックする。
下記の画面が表示されます。このカテゴリーの順番は現在サイトで表示されている順番になります。
ここの画面でカテゴリーの順番を変えることができます。変えていきたいとおもいます、まず変えたいカテゴリーをドラッグして任意の位置に移動させます、今回は「未分類」を一番下にもっていきます。
移動が完了したら左下の「更新」をクリックして完了です。
上記の画像を見るとしっかり「未分類」の位置が下に変更されています。「information」のカテゴリーに関しても同じ工程でできるので試してみてください。
このように投稿やinformationのカテゴリーの位置を変えたいときにプラグイン「Taxonomy Order」を使うことで簡単に順番を変えることが可能です。
どうしても順番を変えたい時に是非使ってみてください。
WordPressの初期設定では問い合わせフォームが用意されていないので「Contact Form 7」というプラグインを使うと簡単に設置できる。
※ インストール方法は、「WordPressで簡単に便利な機能を盛り込みたい！（プラグインのインストール方法）」を参考にしましょう。
ここでは、お問い合わせフォームの設定について説明していきます。
プラグインをインストールするとWordPressの管理画面の左メニューに「お問い合わせ」が追加されるのでクリックする。
下記の画面に変わるので「新規追加」をクリックします。
上のように画面が表示されます、次に赤枠内に任意で名前を入れて左下にある「保存」をクリック。
次に「フォーム」では記事や固定ページで表示されるフォームの部分を定義していきます。
デフォルトでは次のように「お名前」「メールアドレス」「題名」「メッセージ本文」の4つの入力欄と「送信」ボタンが表示されるようになっています。
今回はデフォルトのままいきます。
続いて「メール」タブをクリック
「メール」では「フォーム」で入力された内容を送信するメールアドレスや送信方法について設定を行います。
「メール」で使われている[your-name]や[your-message]には「フォーム」で入力された該当する項目の値が入ります。
メールについてはデフォルトのままとしました。
設定が終わりましたらじ上記画面左下の「保存」をクリックして下さい。
メールフォームが作成されました、このメールフォームを利用するには、メールフォーム作成時に表示されている下記のコードを記事や固定ページにコピーして記述します。
(このコードは作成済みのメールフォーム一覧画面でも確認できます)。
メールフォームを実際に利用してみます。
固定ページや投稿の新規記事作成画面を表示し、先ほどコピーしておいたコードを記述して下さい。
記事を公開しブログをこの記事を見てみると次のようにメールフォームが表示されています。
このように「Contact Form 7」プラグインを使用することで簡単にメールフォームを作成することができます。
このように「Contact Form 7」プラグイン使うことで簡単にお問い合わせフォームを作成することが可能になります。
ウェブサイトを制作する上で必ずと言っていいほどお問い合わせフォームは使うので覚えておくと良いでしょう。
こんにちは。フローラです。
今週末はまた日本列島に台風が近づきそうです。
皆様お住まいの地域はいかがでしょうか。
さて。
台風とはあまり関係ありませんが、今回はChromeの拡張機能についてご紹介します。
Chromeをカスタマイズをして業務効率化しましょう！
拡張機能とは？
Chromeを便利に使うためのChrome強化機能です。
例えば今まで何個もウィンドウを開き時間をかけてやっていた作業がぱぱっと1つのウィンドウで作業できるものもあります。
好きな機能をChromeウェブストアで追加するだけです。さらにショートカットキーも割り当てられるので、Chromeを自分好みに変えられます。早速Chromeウェブストアを覗いてみましょう。
Chromeウェブストア
拡張機能は数多くあり、無料のものもたくさんあります。
今回はウェブ制作者にオススメの拡張機能をご紹介します。
まずはOne Tabです。
ウェブ制作のお仕事はネットで調べものすること多いですよね。
タブ、開きすぎたりしませんか？
タブを開きすぎていつ開いたタブか、どこに行ったか分からない状態。
- Chromeウェブストアにアクセスし左上の検索ボックスに「One Tab」と入力すると（拡張機能を選んでください）検索結果が表示されるので、今回はOne Tab.comの「One Tab」の「CHEROMEに追加」ボタンを押します。
- 「拡張機能を追加」ボタンを押します。
以上で追加作業は終わりです。とっても簡単ですね！！
まずいつも使っているタブがあれば名前を付けてロックしてしまうのがオススメです！
- いつも使っているタブを開き、ブラウザ右上にあるOne Tabのアイコンをクリックします。
- One Tabのウィンドウが開くので、メニュー「その他」から「このタブグループに名前を付ける」をクリックします。また「このタブグループをロックする」をすれば削除できないので、設定しておくと良いと思います。
- ブラウザをいったん閉じて、再度One Tabのアイコンをクリックし、該当グループで「すべてを復元する」をクリックするとタブが全て開きます。
色々なウェブページをリサーチする時にも使えますね。
グループ名を付けなくても、「6個のタブ」などと履歴で管理もしてくれるので突然ブラウザが落ちてしまった時も安心です。タブはそれぞれ単独で開くこともできるし、グループから削除することもできます（マウスオーバーするとタイトル左側にバッテンマークが表示されるのでそこで消します）。
ちなみに、色々とウェブページをリサーチする時は下記ショートカットキーが便利ですよ♪
- リンク先を別タブで開く→URLをマウスホイールでクリック
- タブをまとめて閉じる→複数のタブをCTRL+クリックやSHIFT+クリックで選択してからCTRL+Wで閉じる
Chromeウェブストアで「ato-ichinen」を追加してださい。
googleの結果を表示している状態で「ato-ichinen」のアイコンをクリックすると各種プルダウンメニューが表示され、更新日でソートできます。その他言語を日本語に絞ったり関連度順などで絞ることも可能です。
色々なウェブページリサーチしたい。
そんな時検索結果でプレビューできたら嬉しいですよね！そんな時は「Search Preview」です。
Chromeウェブストアで「Search Preview」を追加してださい。
自動的にgoogle検索で検索結果のサムネイルが表示されるようになります。
Search Previewアイコンを押すとオプションが設定できます。
クライアント様にウェブページちゃちゃっと送りたい時ありませんか？
ちょっと長いウェブページだと、Photoshop立ち上げて切り貼り・・・面倒ですよね。
「Awesome Screenshot」は長いウェブページでも1回でキャプチャーできます。
対象の画面を表示させて「Awesome Screenshot」アイコンをクリックし、「Capture entire page」を選択します。
すると新しいタブにキャプチャーされたウェブページが表示されます。お手軽です。
画像の保存はキャプチャー結果画面の右側のツールでできます。
※ローカル保存の例です。
また、「Awesome Screenshot」はとても多機能で、様々なキャプチャー機能があります。
キャプチャー後の編集画面でささっと注釈をつけるなどの加工も可能です。
以下メニューです。
- Capture visible part of page
- Delayed capture
- Capture selected area
- Capture entire page
- Select a local image
- Capture desktop
- Record screen
- My recordings
- Options
- Help
翻訳すると以下の通りです。
- ページの可視部分をキャプチャする
- タイマーキャプチャ
- 選択領域をキャプチャ
- ページ全体をキャプチャする
- ローカルイメージを選択する
- キャプチャデスクトップ
- 録画
- Myレコーディング
- オプション
- ヘルプ
以上のように色々ありますが、動画も簡単に保存できます。
今回はウェブ制作に便利なChromeの拡張機能を4つご紹介しました。
ウェブ制作に便利なChromeの拡張はまだまだありますが、今回は厳選版です。
またChromeの拡張機能は第二弾でご紹介したいと思います（第二弾でご紹介したいものが増えてきました・・・。なかなか追い付かずにすみません！）
それでは皆様良い週末をお過ごしくださいませ。
こんにちは。フローラです。今回はWordPressネタです。
夏ももう終わり。今年の夏は日本列島は雨続きでしたね。
弊社サイバーグリーンシステムのある川崎市もずっとすっきりしない空でした。
さて、これから芸術の秋！食欲の秋です！
ウェブサイトもイメージチェンジしたくなる方もいらっしゃるのではないでしょうか。
例えばこんなhtmlソースがあります。
<h2 class=”entryTitle”>夏のお出かけスポット2 川崎市民プラザ</h2>
今回例として中見出しのh要素を使っていますが、通常この配色を変更したい場合はスタイルシートで変更することが多いでしょう。
ですが場合によってはhtmlの構造自体を変更することもありますよね。
今回はサイト全ファイル対象で、「class=”entryTitle”」のh2要素を「class=”entryTitle”」のh3要素に変更するケースとして見ていきましょう。
プラグイン「Search Regex」をインストールします。
※プラグインのインストール方法は「WordPressで簡単に便利な機能を盛り込みたい！（プラグインのインストール方法）」でご確認ください。
WordPress左メニューの「ツール」から「Search Regex」を選択します。
- 検索文字列
- 置換文字列
|<h2 class=”entryTitle”>(.*)</h2>|
<h3 class=”entryTitle”>$1</h3>
「Regex」にチェックマークをします。
「Replace」ボタンを押すと検索＆置換結果が表示されます（まだ置換されていません）。置換結果を確認後、「Replace & Save」ボタンを押します（ここで置換保存されます、ご注意ください）。
最後はウェブサイトで確認をしてください。
- Source
- Comment author：コメント作成者
- Comment author email：コメント作成者メールアドレス
- Comment author URL：コメント作成者 URL
- Comment content：コメント内容
- Post content：投稿内容
- Post excerpt：投稿抜粋
- Post meta value：投稿カスタムフィールド
- Post title：投稿タイトル
- Post URL：投稿パーマリンク
- Limit to
- Order By
- Regexのチェックマーク
- 検索文字列を「|」で囲います。
- (.*)は全ての文字列が対象という意味です。
- 内容を変えずに変換したい文字列を置換のテキストボックスで$1として入力します。
置換処理の対象です（投稿記事は固定ページも対象です）。
処理対象数（No Limitがデフォルトで上限なしですが、数が多い場合は上限数を設定してください。
検索結果の表示順。Ascendingが昇順、Descendingが降順です。
正規表現を用いた検索方法をするかどうか。今回「Regex」にチェックしたので正規表現です。他にも右側に3つチェックボックスがあり高度な設定ができます（今回は省略します）。
※正規表現
本日ご紹介した文字列の置換は、必ずバックアップを取っていただきたいのと、恐れ入りますが作業は自己責任でお願いします。一発で「Replace & Save」せず必ず「Replace」でプレビューすることをお勧めします。「Replace & Save」したファイルは完全に書き換わってしまうのでご注意が必要です。
とは言え、とても便利な機能ですので是非是非ご活用くださいね！
こんにちは。フローラです。
毎日ジメジメ暑いですね。
こんな時期は色々な手間を省き快適な毎日にしましょう♪
・・・ということで、夏季限定（！？）小ネタを２つご紹介します！！
先日の記事でインストール不要の便利アイコンフォント「フォントオーサム」をご紹介しましたが、アイコンのウェブサイトからコピー＆ペーストするのがちょっとだけ面倒だ～！という方、お気持ち分かります！！
WordPressの記事作成エディタにWebアイコンフォントのボタンを追加するプラグインを入れてみましょう。
※フォントオーサムについては「簡単便利！Font Awesomeを使ってみましょう！」「簡単便利！Font Awesomeを使ってみましょう！２」を参照ください。
※プラグインのインストール方法は「WordPressで簡単に便利な機能を盛り込みたい！（プラグインのインストール方法）」をご参照ください。
「Better Font Awesome」をインストール、有効化します。
使用方法はいたって簡単です。
記事の作成画面よりエディタを開くと「Insert Icon」というボタンが追加されているので、そちらからお好みのアイコンを選択するだけです。
それではもう一つ、エディタをカスタマイズする技です！
WordPressのエディタですが、標準の白地に黒い文字だと少し見づらいと思いませんか？
オーサリングソフトや便利な機能の盛り込まれたテキストエディタは、要素と属性などを違う色で表示させたり色々と見やすい工夫がされていますね。
WordPressでもプラグインをインストールするだけで見やすくできます。
ちょっと目が疲れがちなhtmlの編集、サクサクと作業を進めるためにインストールしてみましょう♪
「WP Editor」をインストール、有効化します。
- 左メニューに「WPエディタ」が出現します
- 設定画面が表示されます
「Plugin Editor」－「Theme」のプルダウンメニューよりエディタのテーマを選べます。
ページ下部にある「Save Settings」ボタンで設定を保存します。
WorldPressのエディタ画面に戻り「テキスト」タブを選択します。
エディタのテーマが変更されました。
英語ですが、難しい内容ではないので他にも色々いじってみてください！
制作作業もちょっとした工夫で効率がグンとアップします！
特に暑い日はサクサク作業を進めてゆっくり涼みましょうね。
onWEBでは今後もこういった小ネタを紹介していきますので、今後もどうぞよろしくお願いいたします！
今回はWordPressで作ったウェブサイトを簡単に便利な機能を盛り込みたい！という方必見です。
WordPressの基本中の基本かもしれないプラグインのインストール方法と、停止、削除、更新方法をご紹介します。
プラグインとはアプリケーションの機能を拡張するために追加するプログラムです。WordPressのプラグインは標準で入っていない機能を追加することができます。例えばonWEBでは下記のようなプラグインを使っています。
- Akismet Anti-Spam
- パムコメントを自動でブロックしてくれるスパム対策のプラグイン
- All In One SEO Pack
- SEO対策の設定、管理をしてくれるプラグイン
- Page Builder by SiteOrigin
- ウィジェット操作で直観的にページを構築できるレスポンシブページビルダー。
今回は例として、WordPressのページ作成エディタにフォントオーサムボタンを追加するプラグインを入れてみたいと思います。
フォントオーサムについては「簡単便利！Font Awesomeを使ってみましょう！」「簡単便利！Font Awesomeを使ってみましょう！２」を参照ください。
WordPressでAkismet（アキスメット）、Hello Dolly（ハロー・ドリー）が標準で入っています。
ここに追加していきます。
- まずはウェブサイトにすでに該当のプラグインがインストールされていないか確認します。左メニューの「プラグイン」の「インストール済みプラグイン」をクリックします。右上部検索ボックスに「Better Font Awesome」と入力します。
- 次に左メニュー「プラグイン」の「新規追加」をクリックします。右上部の検索ボックスに「Better Font Awesome」を入力します。「Better Font Awesome」がヒットしますので「今すぐインストトール」ボタンを押します。
- インストールが完了したら「有効化」ボタンを押してください。プラグインインストール完了です。
左メニュー「プラグイン」の「インストール済みプラグイン」をクリックすると今ウェブサイトにインストールされているプラグインの一覧が表示されます。停止をしたい場合は停止をクリックしてください。削除は停止を押すと表示されます。いきなり削除せず、まずは停止してみると良いかもしれません。
左メニュー「プラグイン」の「インストール済みプラグイン」をクリックすると今ウェブサイトにインストールされているプラグインの一覧が表示されます。更新プログラムが出た場合は新バージョンのお知らせが表示されます。「更新」を押して更新してください。
公開されているWordPressのプラグインは何万個もあります。何をインストールするのか悩んでしまう方もいらっしゃると思います。むやみにインストールしてしまうとメンテナンス（更新作業）も多くなってしまうので、必要なものを入れていくと良いかもしれません。
onWEBでは今後もWordPressの便利な利用方法やおすすめプラグインをご紹介していきたいと思いますので、お楽しみに！
WordPressで作ったブログやサイトを引っ越したい↑
でも、コンテンツやデータを移行するの大変↓
そんな時にお役に立てるプラグインをご紹介します。
今回紹介するプラグインは「All-in-One WP Migration」です。
WordPressはプラグインが充実しているのでとても便利ですよね。
というわけで、インストールしていきましょう。
管理画面の左メニュー
「プラグイン」→「新規追加」
で、キーワード検索に「All-in-One WP Migration」といれます。
All-in-One WP Migrationが表示されると思いますので、インストール→有効化をしましょう！
インストールが完了しましたら、早速データ移行を行いましょう！
左メニューに「All-in-One WP Migration」の項目が出来ていると思いますので、「Export」をクリック。
エクスポート方法は「FILE」を選択します。
こんな感じでエクスポートが始まります。
完了したらこの画面が出ますので、「DOWNLOAD サイト名」をクリックします。
するとエクスポートデータがダウンロード出来ます。後ほど使用しますので、しばらくそのまま保管しておいてください。
CLOSEをクリックして、画面を閉じます。
次に移行先の設定に移ります。
こちらはWordPressをインストール後、さきほど同様に「All-in-One WP Migration」をインストールしましょう。
次に先ほど移行元からダウンロードした、エクスポートデータを新しいサーバへインポートします。
左のメニューに「All-in-One WP Migration」があるので、「Import」をクリック。
IMPORT FROMは「FILE」をクリックし、さきほどのエクスポートデータを選択します。
そのまま完了画面が出れば完了です。
簡単ですよね。
データ移行がこんなに簡単に出来るのも「All-in-One WP Migration」のおかげです！
WordPresswでサイトやブログを作成する際、bizvektorというテーマをよく使用させていただいております。
こちらのテーマは、私ごときが言うまでもないことですが、とても有名なテーマで使い勝手がよく、拡張性もあるのですごくおすすめのテーマです。
さて、今回はそのbizvektorのプラグインを使用して、投稿者を記事に掲載する方法を書いていきます。
複数の方々でブログやコラムなどを書いていると、これって誰がかいたんだっけ？とか、この記事書いた人の他の記事読みたいなとか、投稿者の情報が欲しい時ってありますよね。
そんな場合にとっておきのプラグインがありますのでご紹介させていただきます。
今回のプラグインはbizvektorのコア開発者であるkurudrive様が作成されているものです。
BizVektorだけでなく、とても使いやすいプラグインを作成していただきありがとうございます！
ガンガン使用させていただいております！！
まず、VK Post Author DisplayをWordPressへインストールしましょう。
「プラグイン」→「新規追加」で、キーワード検索に「VK Post Author Display」を入力。
で、検索に出てきた「VK Post Author Display」をインストールし、有効化を行ってください。
これで、インストール完了です。
ユーザー一覧から編集したいユーザーをクリック。
変更点は
ブログ上の表示名、
あとは、プロフィール情報とProfile Pictureを編集すれば最低限の表示はOKだと思います。
さらに、TwitterやFacebookの情報も記入できますので、そちらも掲載したい方は情報を入力してください。
以上で、VK Post Author Displayの設定は完了しました。
結果は、この下をご覧ください笑
]]>