タグ

ブックマーク / ferret-plus.com (35)

  • 【図解】Twitter(ツイッター)とWordPress(ワードプレス)の連携。All in One Seo PackとWP to Twitterがオススメのプラグイン

    【図解】Twitter(ツイッター)とWordPress(ワードプレス)の連携。All in One Seo PackとWP to Twitterがオススメのプラグイン更新日: 2020年10月26日TwitterWordPress CMSはホームページの更新に専門的なスキルを使わず、誰にでもスムーズに取り扱える手軽さが魅力であり、今では多くの企業に利用されています。2019年7月にQ-Successが発表したCMSのシェアによると、CMSの中で最も多くのシェアを獲得しているのがWordPressであり30.4%でした。2番目に多く使われているCMSの約10倍のシェアがあることから、WordPressはCMSを利用する多くの人にとって一般的な存在であることが推察されます。 参照:マイナビニュース・Squarespace増加 - 7月Webサイト向けCMSシェア ホームページとともに、情報収

    【図解】Twitter(ツイッター)とWordPress(ワードプレス)の連携。All in One Seo PackとWP to Twitterがオススメのプラグイン
  • box-shadowはもう古い?CSS新時代の「影の落とし方」

    長い間Webデザイナーが愛してやまないものの1つに*「box-shadow(ボックスシャドウ)」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで稿では、CSS新時代の影の落とし方につい

    box-shadowはもう古い?CSS新時代の「影の落とし方」
  • コーディング初心者こそ知っておきたい便利な「CSS関数」5選

    HTMLCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた

    コーディング初心者こそ知っておきたい便利な「CSS関数」5選
  • 押さえておきたい!正規表現の利用方法をわかりやすく解説

    時間がない中で急に修正依頼が来た。対応したいけれど、どのくらいのボリュームがあるか把握するのも大変…… まさに、このような「作業時間が間に合いそうにない!」という時に、皆さんはどのように対処していますか。 対応方法は色々ありますが、効率よく、ミスのない方法で進めたい方にオススメなのが「正規表現」です。利用することで作業を効率化することができる便利なものですが、耳にしたことはあるけれど「使い方がわからない」「難しそう」と感じている方も多いのではないでしょうか。 そこで今回は、否定の表現を中心に正規表現の利用方法を簡単にご紹介します。 一通りご覧いただければ、正規表現を利用できるようになります。興味のある方はぜひ記事を参考にしていただき、早速活用してみてください。 正規表現とは 正規表現(Regular Expression)とは、特定の文字列をパターン化して記号で表現する手法のことで、テキス

    押さえておきたい!正規表現の利用方法をわかりやすく解説
  • CSSの読み込みを高速化するための5つのポイント

    読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40%の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化

    CSSの読み込みを高速化するための5つのポイント
  • 無料&日本語化!タスク管理ツール「Trello(トレロ)」の使い方を解説!仕事で使いこなすためのアイデア付

    デザイナーであればデザインカンプの作成からプロトタイプのデザイン、エンジニアであれば日々発生するバグや課題、ライターであればテーマ出しから原稿作成など、延々と仕事を追いかける日々が続いていくものです。しかし、時には仕事に追いかけられることだってあります。 タスク管理を円滑に進めてくれる強い味方に、タスク管理・共有サービスのTrelloがあります。Trello(トレロ)は「カンバン・ボード」という形式でタスクを管理するためのツールで、従来型のチェックで管理するようなToDoリストとは一線を画します。 しかし、Trelloは使いこなせば非常に便利な反面、使い方が「自由すぎる」ので*「使いこなせない」*、結果として使わなくなってしまうツールになってしまいやすいのも事実です。逆に言えば、ケーススタディを通してどのように使っているかを知ることができれば、自分に合った活用の仕方を選んで、仕事のプロセス

    無料&日本語化!タスク管理ツール「Trello(トレロ)」の使い方を解説!仕事で使いこなすためのアイデア付
  • もっと早く知りたかった!SVGを扱うなら知っておきたいタグ&プロパティまとめ

    SVGが一般化してきたとはいえど、「SVGは聞いたことあるけれど、使ったことはない」というWebデザイナーの方も多いのではないでしょうか。 実際、長い間GIFやJPEG、PNGなどのビットマップ形式のデータが主流だったWeb業界ではあったので、SVGのようなベクター形式のデータが扱えるようになったとは言っても、「新しもの好き」の人が扱う目新しいフォーマットだと思っているひとが多いのも事実です。 しかし、SVGは画像劣化がなかったり、アニメーションを扱えたり、テキストエディターで直接カスタマイズができたり、CSSJavaScriptで操作できたりと、扱うメリットが多いので、これから急速に普及していく可能性があります。 また、Can I use…でも確認できますが、今ではほとんどのモダンブラウザがSVGをサポートしているので、互換性も他の最新技術ほど気にする必要がないのです。 今回は、SVG

    もっと早く知りたかった!SVGを扱うなら知っておきたいタグ&プロパティまとめ
    ddt2000
    ddt2000 2017/07/06
  • CSSで簡単に作れる見出しデザイン40選|オシャレ装飾で見出しに存在感を

    ホームページで必ずと言っていいほど必要になる要素といえば「見出し」です。しかし、ホームページに合わせて1からデザインするのは作業工数がかかる上に、毎回同様のデザインになってしまいがちです。また、CSSについてあまり知らない人にとっては、デザインしたくても自ら実装するのはハードルが高いと言えるでしょう。 そこで今回は、見出しをオシャレに装飾できるCSSのコードを紹介している記事をピックアップしました。 オシャレな装飾ができるCSSの見出しまとめ 1. 見出しをお洒落に装飾するCSSを紹介 http://ideahacker.net/2015/05/26/10208/ 11とおりのオシャレな見出しデザインを紹介している記事です。左と下にボーダーがあるもの、1文字目だけが大きいもの、といった定番デザインの見出しが作れるコードを掲載しています。 2. CSSのコピペだけ!オシャレな見出しのデザイン

    CSSで簡単に作れる見出しデザイン40選|オシャレ装飾で見出しに存在感を
  • ノンプログラマーにもオススメ!滑らかなSVGアニメーションを驚くほど簡単に作成できるMac用ソフト「Keyshape」の使い方を解説

    ノンプログラマーにもオススメ!滑らかなSVGアニメーションを驚くほど簡単に作成できるMac用ソフト「Keyshape」の使い方を解説更新日: 2018年05月29日プログラミングAR・VR制作 アニメーションを作成するためのCSSJavaScriptのライブラリ・フレームワークはたくさんリリースされています。 これらのライブラリやフレームワークは、オブジェクトそのものの見せ方をアニメーション処理を加えて見せるもので、ユニークな動きをするアニメーションを簡単に実装することができるので、今なお人気があります。 一方、昨今注目を浴びているのが、SVGアニメーションと呼ばれる新しいアニメーションの表示手法です。 SVGとはWebブラウザにも互換性があるベクターデータです。 通常の.gifや.pngファイルようなビットマープデータだと拡大すると粗くなってしまいますが、SVGだとどれだけ拡大しても滑

    ノンプログラマーにもオススメ!滑らかなSVGアニメーションを驚くほど簡単に作成できるMac用ソフト「Keyshape」の使い方を解説
  • Webデザイン初心者がランクアップするためのCSSのコツ10選

    ブログを始めたりホームページを自作したりするために勉強しはじめると、さらにデザインを凝ったものにしたくなります。 また、ある程度カスタマイズが進めば、表示速度をもっと早くしたり、より短いコードでコーディングしたりしたくなります。 そこで必ず話題に上るのが、CSSです。 もちろん、LessやSassのようなCSSプリプロセッサー(関数を使ったりしてプログラミングコードのように書くことができるCSS)が誕生したことで、より複雑なデザインをできるだけ少ないコードで書くことができるようになりました。 しかし、フロントエンドエンジニアとしてレベルアップするためには、どのように書けばレイアウトが改善されたり表示速度が速くなるのかをしっかりと理解しておいたほうがよいでしょう。 今回は、Webデザイン初心者がランクアップするためのCSSのコツをご紹介します。 これから紹介する、多くの初心者を泣かせたCSS

    Webデザイン初心者がランクアップするためのCSSのコツ10選
  • コピペで済ませていませんか?改めて学び直したい「Viewport」のすべて

    スマートフォンをはじめとしたモバイル端末でホームページを表示することを想定するとき、Viewportと呼ばれるタグを挿入します。 タグを挿入する時、例えば以下のようなコードを*コピー&ペーストしている方は多いのではないでしょうか。 貼り付けるだけでも問題ありませんが、構造を理解すれば好きなようにカスタマイズすることも可能です。 今回は、Viewportの基的な概念から設定に関する具体的なコツをご紹介します。 Viewportとは? Viewportとは表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。 例えば、上記のようなホームページがあるとします。 モバイルのViewportを指定していない場合は、デスクトップサイトで表示される横幅をモバイル端末の横幅と合わせてしまうので、以下のように非常に小さくて閲覧しにくい状態で表示されてし

    コピペで済ませていませんか?改めて学び直したい「Viewport」のすべて
  • 打ち込むより簡単!保存しておくと便利なCSSスニペット18選

    ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm

    打ち込むより簡単!保存しておくと便利なCSSスニペット18選
  • "地味にスゴい"ってホント!? わかりやすくHTML5.1の追加された新機能を紹介

    HTML5がリリースされて早2年。 HTML5のリリースによって、Webの世界も大きく前進しました。 シンプルなタグで書ける便利な機能がいくつも実装されただけではなく、1999年以来ずっとWebの技術を支えてきたHTML4.01が初めてメジャーアップデートを迎えたからで、あえてHTML5が登場してからは、「このサイトはHTML5で書かれています」と明示するホームページまで存在します。 そこで今回は、HTML5.1で採用された機能の中で特に注目すべき新機能をピックアップしてご紹介します。 補足 ありがたいことに次のHTMLのアップデートまで10年以上も待たなくてもいいようです。2010年10月、Webで使用される各種技術の標準化を推進する為に設立された標準化団体であるW3Cは、HTML5に残された課題を解決するためにHTML5.1の構想を組み立て始めました。最終的には、HTML5.1は、20

    "地味にスゴい"ってホント!? わかりやすくHTML5.1の追加された新機能を紹介
  • 【WordPress】作業は"コピペ"のみ!デザインや機能性を向上させるコード6選

    コンテンツマーケティングの時代とはいえ、WordPressである程度記事を書き溜めてくると、デザインや使いやすさにも注意を払いたくなることがあります。せっかく素晴らしい内容の記事を書いても、読みやすいデザインになっていなければ、記事の価値が目減りすることに気づき始めるからです。 そこで今回は、少しのコードをコピー&ペースト(以下、コピペ)するだけで、WordPressのデザインや機能性を向上させる便利なコードを6個ご紹介します。 コピペだけでWordPressのデザインや機能性を向上させるコード 1. 丸いサムネイルを出力する ブログサイトのトップページや、記事一覧のサイドバーで表示される機会の多いアイキャッチ画像。SNSでシェアする場合にも表示されるので、設定しておきましょう。 デフォルトではアイキャッチ画像は利用できないので、functions.phpに下記のコードを追加します。 <c

    【WordPress】作業は"コピペ"のみ!デザインや機能性を向上させるコード6選
  • CSSのみ!動きのあるデザインをコピー&ペーストで実装できるサンプルコード集

    自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。 今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。 フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー&ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。 CSSだけで表現できる動きのあるテクニックまとめ 1.CSS3フルスクリーン背景スライドショー DigitalSkill CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。 アニメーション部分は、複数パターンのサンプルデモを公開しています。 2.Fullscreen Overlay Effects codrops クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。

    CSSのみ!動きのあるデザインをコピー&ペーストで実装できるサンプルコード集
  • 初心者にオススメ!とりあえずいれておけば安心なWordPressプラグイン10選

    WordPressはカスタマイズ性が高く、様々なプラグインが開発されていることもあって、企業のホームページやブログによく利用されています。 しかし、WordPressのメリットであるプラグインが多過ぎることが裏目になって、どのプラグインをインストールすればいいのか悩んでしまってはいないでしょうか。 今回は、特にWordPress初心者の方にオススメしたい、入れておきたいプラグインをご紹介します。 どのプラグインも、意外に煩わしく難しい作業を簡略化してくれる優れものばかりです。 これからWordPressの使用を検討されている方や、まだ導入したばかりで使いこなせていない方は、ぜひ記事を参考に必要なプラグインをインストールしてください。 初心者にまず入れてほしいWordPressのプラグイン10選 1.Google XML Sitemap https://ja.wordpress.org/p

    初心者にオススメ!とりあえずいれておけば安心なWordPressプラグイン10選
  • リニューアルやメンテナンス前は要注意。SEOのリスク回避にはメンテナンスページが必須

    リニューアルやメンテナンスなどのホームページの改修などで、一時的にサイトを閉鎖するという措置をとることがあります。 そうなった場合、クローラーがホームページを見ることができなくなるため、これまであったGoogleからの評価にマイナスな影響として検索順位が下落する可能性があります。 今回は、その懸念を回避するための方法を解説します。 そもそもホームページが見られない状態が続くとどんなことが起きるの? ホームページをオフラインにしている状態が続くと、検索エンジンにおけるキーワードの順位下落をはじめ、それに伴う流入数やコンバージョンの低下がリスクとして挙げられます。 そのリスクテイクとして、メンテナンス前にはメンテナンスページを用意しましょう。 メンテナンスページとは、ユーザーに対して「ただ今メンテナンス中です」という旨を伝えるためのページのことです。 具体的にどんなページかというと、Googl

    リニューアルやメンテナンス前は要注意。SEOのリスク回避にはメンテナンスページが必須
  • httpからhttpsに切り替える際に見ておくべきSEOにおける14のチェックリスト

    Googleがhttpsをランキングシグナルに使用するという発表により、httpsに切り替える方も多くいらっしゃいます。 httpsに移行するにあたって、いろいろやらなければいけないことがあります。Web上にあるSEOにおけるTo Doリストは、広告周りやアクセス解析を含めて包括的なTo Doリストではありません。今回は、それらをリスト化してみました。 httpsの定義と移行するメリットのおさらい To Doリストの前に、改めてhttpsと移行するメリットをおさらいします。 httpsとは、「Hypertext Transfer Protocol over Secure Socket Layer」の略称です。通常のhttpにセキュリティ機能「Secure Socket Layer(SSL)」を追加しているため、情報漏洩防止のために使われています。 参考: https://ferret-pl

    httpからhttpsに切り替える際に見ておくべきSEOにおける14のチェックリスト
  • 物足りなさの原因は整理ができていないから?デザイナーのためのグリッド活用術

    ロゴやビジュアルのデザインをしているとき、なんとなく上手くできないと感じた経験はないでしょうか。 デザインが失敗する原因の一つとして、レイアウトが問題となっていることが多くあります。 その場合は、レイアウトに規則をつくるだけでしっかりとしたデザインになることも多いので、デザインをおこなう機会がある方は覚えておくと便利です。 今回は、レイアウトを行う際に使う手法である「グリッド」の活用に関する情報をまとめてご紹介します。参考実例として実際にグリッドを使ったロゴデザインもピックアップしています。 自分のデザインがいまいちだと感じている方、デザインを始めたばかりの方は特に必見です。 デザインのクオリティを高める!グリッドの活用まとめ 1.グリッドとは 引用:http://welovetypography.com/post/11817 グリッド・システムとは、スイス出身のデザイナー ヨゼフ・ミュー

    物足りなさの原因は整理ができていないから?デザイナーのためのグリッド活用術
  • 【11月編】WordPressの最新無料テンプレート17選

    WordPressの大きな魅力の一つが、豊富に存在するテンプレートです。 テンプレートを変更すれば、一瞬でデザインを変更することができます。 特に、最新トレンドを意識したものやデザイン性の高いテンプレートも多く、誰でも簡単に格的なホームページを持つことが可能になります。 テンプレートの使用には有償があるほか、無料で使えるものも数多くあります。 とにかく膨大な数のテンプレートがありますので、自分好みのテンプレートがきっと見つかるでしょう。 今回は、数あるテンプレートの中から公開されたばかりの最新無料テンプレートを17個ご紹介します。 今では当たり前になっているレスポンシブデザインや、近年よく見かけるシングルページのデザイン、人気のミニマルデザインなど様々です。 テンプレート変更を検討中の方は、ぜひ目を通してみてください。 公開されたばかりの最新WordPressテンプレート 1.SKT H

    【11月編】WordPressの最新無料テンプレート17選