デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

ホームページ制作

  • 重いJetpackの代わりとしてアクセス解析に使えるプラグインはこれ

    ·

    master

    Jetpackプラグインは多機能でWordPressのダッシュボードでも確認が出来ることから多くのサイトで使われてるが、唯一の欠点とも言えるのが重いこと。高機能ゆえの状況なので仕方ないのだが、ホームページの表示が遅くなる、レスポンスが悪くなるのは残念なところ。
    当然、総括的にアクセス解析をするならばGoogle Analysisがベストの選択となるが、気軽さの点ではプラグインひとつで済ませたい。
    (さらに…)

  • WordPressで表示の遅い原因が円グラフで分かるプラグイン

    ·

    master

    WordPressで作成したホームページが遅いと感じた時、余分なプラグインを外す・削除するのは表示速度の改善に有効ですが、「All In One SEO Packは重い」「Jetpackは遅くなる原因」といったネットの情報だけを元に削除しても、思ったように改善されないことがあります。
    (さらに…)

  • カテゴリーや記事ごとにサイドバーを変更したい時はこのプラグインが便利

    ·

    master

    カテゴリーによってサイドバーに表示させたい内容を変更したい時は、Content Aware Sidebarsを使うと、管理も簡単で便利。
    (さらに…)

  • mixhostでタイムゾーンがずれているとき

    ·

    master

    mixhostに作ったサイトでPHP の date() で日時を取得したら日本の時刻と違っていた。
    mixhostでタイムゾーンを日本にする方法は簡単。
    「.htaccsess」に以下を記載してアップロードする

    php_value date.timezone Asia/Tokyo

    これでタイムゾーンが日本になり、日時のずれは解消する。

  • htaccessに記入したリダイレクトが、シンボリックリンクにしているフォルダに効かない時

    ·

    master

    常時SSLへ

    ブラウザシェアで60%程度のシェアを持つGoogle Chromeが、Chrome（バージョン 62）において、https化してないホームページのフォーム入力時に「保護されていません」という警告が表示されるようになり、既にSSL化は必須と言える状況になっている。
    そんな中、サイトのSSL化に移行する際に、いままで非SSL（http://〜）でアクセスしていたページをSSL（https://〜）に変更しても、過去のリンクやブックマークからのアクセスにより、非SSLにアクセスされてしまうことが考えられる。
    (さらに…)

  • WordPress高速化・軽量化のためDisable Emojisで不要なコードを減らす

    ·

    master

    WordPressの高速化にはコードのスリム化が有効

    WordPressはアップデートのたびに安全で便利になっていますが、様々な機能と引き換えに出力されるHTMLも増える傾向にある。
    WordPress 4.2から導入された絵文字対応もそのひとつ。絵文字を使用することができるようになったことと引き換えにデフォルトで以下スクリプトが挿入される。

    (さらに…)

  • WordPressで「お知らせ」に使うと便利なプラグインVK Link Target Controller

    ·

    master

    VK Link Target Controllerとは

    WordPressを使ったサイトで、カスタム投稿タイプを利用してトップページに「お知らせ」「新着情報」「information」などのタイトル一覧を載せるケースは多い。
    新しい記事の更新情報だったり、企業サイトだと展示会出展の情報など、トップページの記事タイトルをクリックすると記事が読めるので便利。
    イベントや外部サイトについて書く場合、通常は詳細情報などを書いた記事の中にリンクを貼り、そこからジャンプするのが基本なのだが、特に説明は不要で指定のURLに飛んで欲しい時もある。
    そんな時に便利なのがWordPressの無料プラグイン「VK Link Target Controller」

    (さらに…)

  • SWFからMP4等の動画形式に変換するフリーソフトならSwivelがおすすめ

    ·

    master


    Googleは以前からFlashを使わないことを進めており、最近のChromeにおいてはアラート表示するようになっている。
    ここまでがFlashを外したがっている理由は、Flashの再生に使用されるAdobe Flash Playerの脆弱性がいつになっても解消せず攻撃・被害が無くならないから。このGoogleの流れに合わせるなら、すべてのWebサイトがFlashから移行する必要があると言える。

    (さらに…)

  • マッチングサイトにはオープンソースのOsclassがオススメ

    ·

    master

    マッチングサイトとは

    海外では、自分の家や車を売ったり家庭教師やスキルを使って利用者を探したりする、マッチングサイトが広く普及している。
    日本では家や車の売買をする場合、不動産屋、中古車ディーラーを使うのが一般的だが、自分で交渉すれば仲介費用が必要ないという合理的な個人売買というスタイルは日本でも徐々に増えて来ている。
    既に多くの利用者を集めている『地元の掲示板 ジモティー』はマッチングサイトの代表例ともいえる。
    実際、ジモティにアクセスすると、売ります・あげます、教室・スクール、イベント、里親募集、譲って・助けて、中古車、地元のお店、不動産、メンバー募集、アルバイト、正社員、と様々なジャンルで掲載されている。

    オープンソースのOSClass

    マッチングサイトが構築できるオープンソースにはどんなものが選択肢としてあるかを探す場合、海外ではAD Managementというジャンルを探すことになる。
    (さらに…)

  • favicon.icoやapple-touch-icon.pngを作りたい時のベストな方法

    ·

    master

    ウェブサイトを作ったら必ずやっておきたのが、ファビコンの作成。
    そして、スマートフォンでホームに保存する際に使われるapple-touch-icon。

    解像度に合わせて複数のサイズの画像をアップするのがベストだが、Photoshopで作るにしても手間がかかることは確か。
    そんな時は、画像をアップすると自動的にファビコンやapple-touch-iconを生成してくれるFavicon Generatorのサービスを利用するといい。

    Googleで検索すると様々なサービスが存在するが、お薦めはこのサイト。

    Multi Favicon Generator
    http://favicon.miugle.info/ ピクチャ 3Multi Favicon Generatorなら、1枚のアイコン画像からfaviconはもちろんiPhone&Android向けの各種apple-touch-iconも一気に生成してくれる。

    使い方も簡単。
    512ピクセル×512ピクセルの画像を用意したら、サイトにアクセスしてアップ。
    各種画像データが含まれる圧縮ファイルのが作成されるので、自分のPCにダウンロード。
    圧縮ファイルを解凍すると以下のファイルがある。

    apple-touch-icon-57×57.png
    touch-icon-iphone-retina.png
    apple-touch-icon-72×72.png
    apple-touch-icon-114×114.png
    apple-touch-icon-144×144.png
    favicon_sample.txt
    favicon.ico
    touch-icon-ipad-retina.png
    touch-icon-ipad.png

    favicon_sample.txt以外のファイルをサイトのルート（index.htmlやindex.phpがある階層）にアップ。
    faviconやapple-touch-iconの設定は、inex.html等をエディタで開きfavicon_sample.txtの中身を追加。

    具体的には、スタイルシートを呼び出している場所

    <link rel="stylesheet" href="style.css" />

    やtitleタグの場所

    <title>○○のホームページ</title>

    の前後に

    <link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut" href="/favicon.ico" type="image/x-icon">

    を追加する。