サイトを高速化するのは、SEO的にも重要な項目のひとつです。 サイトの速さを調査、改善するのに便利なサイトに「GTmetrix」というものがあります。 「GTmetrix」は、登録しなくても調査したいサイトのURLを入力するだけで調べられます。 ここではこの便利な調査サイトの「GTmetrix」の使い方などを紹介していきます。「GTmetrix」でサイトが遅くなる問題点を改善してアクセスの速いサイトを目指しましょう。 GTmetrix を使ってみる それでは実際に自分のサイトのURLなどを入れてスピードを計ってみましょう。「GTmetrix」は、英語のサイトですので、「Google chrome」のブラウザに搭載されている簡易的な翻訳機能などを利用したりすると、わかりやすいと思います。英語が苦手な方は、うまく活用してください。 GTmetrixのサイトへ GTmetrixのトップページに来

外部ツールなど使わずに普段利用しているEclipse上でSass/Compassの作業を完結させたかったので、導入からEclipseでCompassのコンパイルを行うまでの手順をメモしました。 Rubyのダウンロード SassもCompassもRubyで書かれているためRubyのインストールが必須になります。 ダウンロードサイト http://rubyinstaller.org/downloads/ RubyInstallersにあるリンクから環境にあわせて最新のRubyをダウンロードします。 Ruby 2.2.3 ← 32bit Ruby 2.2.3(x64) ← 64bit ※ 2016.01.18時点ではバージョン2.2.3が最新 Rubyのインストール rubyinstaller-2.2.3-x64.exe（あるいはrubyinstaller-2.2.3.exe）を実行します。 セ

最近新人研修（プログラミング未経験者・大学で専攻など、ごちゃまぜ）に関わることがありました。 適当なタイミングでEclipseのショートカットキーを教えていたのですが、実演してあげると食いつきがよかったです。 ウケがいい≒新人から需要があるといえそうですし 教えるほうも教わるほうもモチベーションを保ちやすいです。 その点で、ウケるかどうかは大切な視点のひとつだと思います。 なので、ウケのよさランキングの形式で、ショートカットを紹介したいと思います。 環境は、WindowsでPleiadesのやつ（http://mergedoc.sourceforge.jp/ ）を使って、Javaを教えていました。 第20位 ctrl + alt + k スネークケースとキャメルケースの切り替え 変数名やメソッド名を選択した状態でctrl + alt + k 教えていたのはJavaなのですが、C言語のように

高品質でかつ個人・商用問わず使える無料の写真素材を公開しているサイトの紹介です。 メール登録なども一切不要のサイトなので手間もなく、手軽に利用できる便利なサイトを選びました。 DotSpin DotSpin ”Instagram”にてCreative Common Licence 3.0で投稿されている写真をまとめてくれています。 綺麗な風景やおしゃれに加工された街並みの写真がたくさんあります。 DotSpin Little Visuals 1週間ごとに写真素材を公開しています。 写真をまとめてzipでダウンロードできるようになってます。 Little Visuals picjumbo 完全無料の素材が毎日更新されています。 カテゴリーごとに分けられているので目的の写真も探しやすいです。 picjumbo function 定期的に写真を公開していて、zipでダウンロードできるようになって

【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。

もしも、今まで1時間かけてやってきたことがたったの15分でできるようになったら、凄くありがたいですよね。余った45分間で世界を変えられるかもしれません。時は金なりです。ということで今回は、一気に作業の効率化を図れるGoogle Chromeの拡張機能を調べてみました。 特に役に立つなと思い、神に感謝したものを13個ご紹介します。 効率化の化身！おすすめChrome拡張機能13選 1. ページ全体のキャプチャに便利！　- Awesome Screenshot Awesome Screenshot みなさんはページキャプチャに何のツールを使っていますか？　OS標準のスクリーンショット？　それともSkitch？　これらのツールを使っているとページ全体のキャプチャが出来ず困ってしまうことがありますよね。そんなときにこの拡張機能が入ってると便利です。本当にありがとうございます！ できること Webペ

カスタマイズしやすいBootstrapフレームワークをベースに、気持ちの良いCSSアニメーションを追加した、高品質HTML5／CSS3テンプレートを配布する、新しいサイト FreeHTML5.Coを今回はご紹介します。 どのテンプレート素材もクオリティーが非常に高く、カスタマイズもしやすく、そのまま運用できるものばかりが揃っています。もちろん、どれも無料でダウンロードでき、あらゆる端末に対応するレスポンシブデザインが特長です。 詳細は以下から。 Bootstrap製HTML5/CSS3無料テンプレートを配布するサイト FreeHTML5.Co FreeHTML5.Coでは、利用しているユーザーも多いHTMLフレームワーク Bootstrapをベースに、デザインのアクセントとなるアニメーションエフェクトを採用した、モダンなHTML5/CSS3テンプレートを無料配布しています。 サイト開設から

前編に引き続き、JavaScriptで作られたブログ作成ツール「Hexo」と、Webコードエディタ「Cloud9」を組み合わせたブログ作成術の後編です。 今回は、以下のような流れでご紹介しようと思います！ ブログ公開の準備！ 「GitHub Pages」での公開！ 「記事の作り方」について ブログ公開の準備！ 前回の「前編」では、簡単な記事の投稿とブログの確認まで行いました。 まだ中身はほとんど無い状態だと思いますが、公開サーバーへアップロードするための準備作業をしておきましょう！ サーバーは、「AWS」や「レンタルサーバー」など何でもいいのですが、無料で利用できる「GitHub Pages」を使うと便利です。 まずは、GitHubのアカウントを取得し、マイページを表示させましょう。 そこで、自分のユーザー名を確認しつつ、メニューから「New repository」をクリックします。 これ

2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ

このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。

高機能なCMSが続々とリリースされている今、特別な技術がなくてもホームページやランディングページを作成できる環境が整ってきました。 Web制作会社やデザイナー等の専門職の方に頼らずにWebページを制作される方も増えてきていると思いますが、制作時につまづきやすいのが「配色」の選定です。 配色はページ全体の印象を決めますが、作成者のセンスに左右されるため、デザイナーのように配色の知識が無い方は何かと時間をとられてしまいます。 今回は、配色に自信の無い方でも最新のホームページのような配色ができる無料のカラーパレットをご紹介します。 あらかじめ配色が決まっているもの、自分で配色を調整できるものなど様々なパレットがあるので、目的に沿って使い分けてみましょう。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

0.rss-phpライブラリを使おうRSSやAtomを読み込むためのライブラリを開発している方がいらっしゃるので、そちらを使います。 今回は、rss-phpというライブラリを使います。 ライブラリをダウンロード以下のURLより、ファイルをダウンロードしてください。 dg/rss-php · GitHub 使うファイルをコピーダウンロードしたZIPファイルを解凍します。 この中の、srcディレクトリ内、Feed.phpを使います。 Feed.phpを作業するディレクトリへコピーします。 これで準備は完了です。 1.PHPを記述 2015/12/4：一部プログラムを修正しました。 2015/12/3：詳細の文字数を制限したいという要望をいただきましたので、プログラムを修正しました。 新着記事を表示させたいファイルに、以下のPHPを記述します。 <?php require_once "./Fee

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき 意外と出番が多い「カテゴリ毎の記事一覧」を表示するタグを紹介します。 プラグインとかは使いません。 コード書くだけでいけます。 カテゴリ毎の記事一覧を表示するコード 細かい話はどうでも良いと思うので取りあえずコード載せます。 <?php $categories = get_categories(); foreach($categories as $category) : ?> <div><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->cat_name; ?></a></div> <u

その場で展開できる「続きを読む」ボタンの作り方ボタンクリックで後続コンテンツを表示する「続きを読む」ボタンの作り方を解説。ページを読み込んだ時点では冒頭以外のコンテンツは折りたたんで(＝非表示にして)おき、「続きを読む」ボタンが押された際にだけ続きを展開(表示)する仕組みを作ってみましょう。グラデーションを使って徐々に後続コンテンツを薄くしたり、アニメーション効果と共に続きを表示したりする方法も紹介しています。