web

Jun 10, 2017

個人情報を一切収集しない検索エンジンDuckDuckGoとは?

2017-06-10
duckduckgo search web

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。

DuckDuckGoという検索エンジンは最近知りました。検索結果を変えてみてみたい方はGoogle以外の選択肢として使ってみてはいかがでしょうか?

見た目はGoogleっぽいシンプルな感じですがアヒルのアイコンがマークになっています。

あなたを追跡しない検索エンジンというコンセプトのようです。ただし検索精度はやはり王者Googleにはまだ及ばないといって感じです。ですがあらゆるところで検索エンジンとして設定ができるようになっています。

iPhoneでも設定の検索エンジンからGoogle、Yahoo!、Bing、DuckDuckGoとなっているので設定できるようになっています。アンドロイドはアプリがあります。DuckDuckGoアプリ

Read more

Mar 25, 2017

ワードプレス管理画面にログインできない対処法

2017-03-25
wordpress developer web

今回はワードプレスについてです。

先日、管理画面には入れなくてかなり焦りました。ページは普通に表示されているのですが、管理画面には一切入れず、ページは機能していませんばかり。。。。

サーバーのセキュリティが引っかかっているんじゃないか?.htaccessか?といろいろ見てみましたが、そうでもありませんでした。

おっかしいなー、なんでだろう?これはやばいなと思いました。いろいろと調べてみました。

Read more

Mar 18, 2017

Git最初の一歩

2017-03-18
git web developer

今回は分散型バージョン管理システムのgitについてです。ギットと読みます。

公式サイト

ファイルのバージョン管理と思っていただければいいと思います。エクセルでもファイル1、ファイル2、ファイル3、ファイル4とかつけていきますね、これだとどのファイルが新しいのか古いのかがわからなくなりますが同じファイルで管理していけるのは良いですよね。

gitを使うとファイルを作ったり修正したりある程度のまとまりになったら履歴データベースに保存しておくと良いです。

  1. 作業ディレクトリ ここで作業する

  2. ステージングエリア(インデックス) 作業経過を保存

  3. リポジトリ(ローカル、リモート) 保存先、履歴データベースに入る

こちらのサイトがわかりやすいですね。⇒サルでもわかるGit入門 〜バージョン管理を使いこなそう〜

今回の保存先はBitbucketに入れますのであらかじめアカウントを作成する必要があります。

Read more

Mar 7, 2017

ドメイン移管について

2017-03-07
domain server web

ドメイン移管についての手順です。頻繁にすることでもないので忘れがちなので備忘録をかねて書き記しておきます。

ドメインの移管される側と移管する側の立場になって考えていきます。

仮定として佐藤さんがexample.comというドメインをもっていて田中さんに移管するということにします。流れとしましては佐藤さんから田中さんに移すというイメージですね。

設定として佐藤さんのドメイン管理会社はスタードメインとします、田中さんのドメイン管理会社はムームードメインとします。

ドメインの種類によっても手順が変わるので一般的なcom/net/org/info/bizなどのドメインの場合で考えていきます。

Read more

Feb 25, 2017

リンクタグの_blankについて

2017-02-25
html css link web

今回はちょいメモです。最近はあまりリンクにtarget=”_blank”をつけることはなくなったのですが、これをする場合はrel=”noopener noreferrer”をつけた方が良いということが言われています。

開かれたページの方では開いた元のページにアクセスできる仕組みになっているのでこれを悪用するサイバー攻撃を受けることがあると言うことのようです。

それでrel=”noopener noreferrer”をつけることで防ぐことが出来ると言うことです。

以下が例です。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">example.com</a>

Read more

Feb 4, 2017

親要素をクリックしたら子要素のリンクを発動させる方法

2017-02-04
js web css click

システム上の設定で自動的にはき出すhtmlの場合とかに有効な手段かもしれません。 a要素が複数でてきてその上の要素をクリックしたら下の要素が発動するような仕組みです。

例えばli要素の中にdiv要素とdl要素がありそこのdt要素内にa要素が入っているけどli要素全体をリンクにしたい場合の対処方法です。

cssでやる方法は一つ上の要素を全体リンクにする方法はありましたが子要素のリンクはなかったのでjQueryを使ってご紹介します。

Read more

Jan 28, 2017

ワードプレスでデバッグログをダッシュボードに表示させる方法

2017-01-28
wordpress web functions

ワードプレス運用中のサイトのエラーログを出力させてそれをダッシュボードで見る方法をご紹介します。

ログ出力方法は結構いろいろなサイトに書かれているのですがそれをダッシュボードに表示させる方法がなかったので作ってみました。WP_DEBUGを使ってデバッグモードをtrueにすれば表示させられるのですが、運用中のサイトにログが出力されてもいけないのでログファイルに保存するようにします。

まずはログファイルに出力させる方法は簡単です。

Read more

Nov 26, 2016

簡単!グーグル翻訳で自社サイトを多言語化

2016-11-26
google translate web グーグル 翻訳

今回は簡単にサイトを多言語化する方法をご紹介します。 当サイトにも実装しておりますが、5分で出来ます。翻訳ツールにはグーグル翻訳を使います。翻訳精度はご存じだと想いますがたまに変な翻訳しますのでご理解の上ご使用ください。最近はだいぶ翻訳精度も上がっております。当然ですがグーグルアカウントが必要になります。

ビジネス向けツールのグーグル翻訳を使います。下記公式サイトです。 ⇒ウェブサイト翻訳ツール

Read more

Nov 12, 2016

簡単ファビコン作成!ファビコンジェネレーターのご紹介

2016-11-12
favicon web ファビコン

サイトを作成する上で必須になってきていますファビコンについてご紹介します。 サイト表示にはわかりやすいfaviconを入れることがもはや当たり前になってきていますが、最近は対応ブラウザや機種によっても変わってきますので一括で出力できるFavicon Generatorをご紹介します。

⇒公式サイトはこちら

Read more

Sep 27, 2016

簡単に画像をリサイズする方法

2016-09-27
bulk photo resize web リサイズ バルク

最近画像のリサイズが簡単にできないかなと調べておりました。ソフトやアプリは多くありますよね。

iPhoneならImageResize、Simple Resize、バッチリサイズなどなど、Androidなら画像縮小 Image Shrink Lite、写真リサイズなどなど、最近はインスタ用に編集できるアプリ、InstaSize-フォトスタジオ画像加工&コラージュ編集などがありますよね。

WindowsならirfanviewとかMacならiMage Toolsとかまあ、簡単に画像がリサイズできるアプリって多いですね。

さてアプリを使っても良いのですが、ウェブ上でさくっとリサイズ出来るサイトはないものかと調べたらありましたのでご紹介します。

Read more

Jun 25, 2016

CSSだけでInstagram風のフィルターが使えるcssgramが便利

2016-06-25
css web Instagram filter インスタグラム風

インスタグラムはやってますね、私も1年ほど前に登録したもののあまり使っておりません。。。さてそんなインスタグラムの写真フィルターのようなライブラリがありましたのでご紹介します。

簡単に言えば、CSSgramはCSSで画像をInstagramのようなフィルターっぽく編集できるライブラリです。

ここでやっているのは、基本的に画像にグラデーションオーバーレイ、フィルタやブレンド機能を使って似せているような機能です。

簡単にInstagram風のフィルターが使うことができます。

対応ブラウザはIE(インターネットエクスプローラー)は対象外となっております。Google Chrome、Firefox、Opera、Safariが対応しているようです、edgeは対応しているのかな、cssの問題なのでおそらく対応していると思われますが。。

こちらは公式サイトです。⇒CSSgram test sheet

Read more

Jun 19, 2016

特定のサイトにアクセスできなくなった対処法

2016-06-19
eset access web deny virus software アクセス

なぜか特定のサイトだけにアクセスができないということがありませんか?

私はありました。すごく重用なサイトでもなかったので特に気にしていなかったのですが、どうもこのパソコンだけがアクセスできないということがわかったとき、原因を調べてみました。

原因はいろいろあると思いますが今回はウィルスソフトでした。ESET NOD32というソフトを長年使ってきたのですが今までこんなことなかったのですが、Macだとうまくいかないようですのでその対処法をご紹介します。

今回の設定はMac版に限ります。

Read more

May 21, 2016

CSShakeの使い方と紹介

2016-05-21
css web shake シェイク

今回はブルブル震えて注目してしまう動きCSShakeをご紹介します。

jQueryのプラグイン jRumble とかでもありますが今回は簡単に導入できて実装できるCSSでのご紹介です。

CSSShake公式サイトからダウンロードして使います。こちらの公式サイトにも使い方は載っておりますが、簡単に説明します。

インストールはnpmかbowerよりできます。公式サイトからダウンロードしても良いです。

Read more

May 7, 2016

HOVER.CSSの使い方

2016-05-07
css hover web

今回は手軽にhoverアニメーションできるhover.cssのご紹介です。hoverしたら動きが実装できます。

以前 CSS3でのアニメーションライブラリanimate.cssの使い方のご紹介しましたが、今回はhoverに特化していますのでcssを読み込んでクラスを付加するだけでhoverするときに限りますが簡単にアニメーション実装できます。

Hover.css公式サイトにもサンプルがあります。デモページの内容はこちらの公式サイトと同じです。

Read more

Apr 30, 2016

ワードプレスをバージョンアップしてCSSが崩れる現象について

2016-04-30
wordpress web ワードプレス

今回はワードプレスについてです。

ワードプレスでアップデートしたらなぜかスタイルが崩れたということはありませんでしたでしょうか?

いろいろと原因があると思いますが今回はfunctions.phpにwp_enqueue_styleで読み込ませている場合に限りますがその対象法をご案内します。

Read more

Apr 23, 2016

Bootstrap3のアコーディオンメニューを縦から横列に表示

2016-04-23
bootstrap css web ブートストラップ

CSSのフレームワークを使って制作されている方、特に手っ取り早く良い感じのデザインが出来るBootstrapを使っている方は多いと思います。私もその一人です。

Bootstrap1.4の段階から便利に使わせてもらっております。使いやすくてカスタマイズしやすいです。当初はLESSだったのですが最近になってSASSになりとても便利になりましたね。

さて本題です。Bootstrap3のCollapse collapse.jsの項目にアコーディオンメニューのサンプルがあります。このサンプルはひとまとまりにしてありますが、どうにかカラムにいれて列にしたいと思って調べました。中々無いんですね。

海外のFAQで同じような質問をしている方がいらしたので同じようにしたらうまくいきましたのでその設定を載せておきます。

Read more

Apr 9, 2016

CSS3でのアニメーションライブラリanimate.cssの使い方

2016-04-09
css animate web アニメーション

ウェブ上でも最近は動きのある要素を取り入れているサイトも多くなってきました。アニメーション動作を取り入れる場合はJavaScript(主にjQuery)が多いのですが、実はCSSだけでも動きのある要素を出すことも出来るんです。まずは公式サイトで動きを確認します。いろいろ出来ますね。

CSS3になって出来る要素がだいぶ増えてきました。JavaScriptでしか出来なかったこともCSSだけで出来る要素も増えてきたので下記のようなブログなどをチェックしてみると良いでしょう。

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

CSS3は要素によってはまだ対応していないブラウザもありますので HTML5/CSS3ブラウザ対応状況確認のサイトなどでどのブラウザ対応状況を確認してみると良いです。

Read more

Mar 26, 2016

Unicodeのコードから文字列変換そしてデコード

2016-03-26
js str web code 文字列変換

文字コードをユニコードの値から文字列を出力するプログラム関数 String.fromCharCode()というのを使ってプログラムを作ってみます。

これを使うことでちょっとした暗号文が出来ます。暗号って言うほどでもないですが文字を数値に変換してくれるので数値ばかりなので普通に人には分からないと思います。

ただこの数値は分かる人には分かります。しかも文字コード表もありますから見ていけば分かります。簡易の暗号文といったところでしょうか。

Read more

Mar 22, 2016

BMI値計算プログラム

2016-03-22
js bmi health web walking running sports 計算

健康志向のブームはいつもありますね。健康に気を使う人多いと思います。

運動してダイエットとかもそうですよね。テレビでもよくやっています。健康な身体作り。

身体が資本というのは病気になって初めて分かるものです。私もあまり運動していないので身体もたるみっぱなしで最近は完全に引きこもり生活です。パソコンでの作業が多いのであまり運動することがないのです。

座りっぱなしもよくないということなのでスタンディングワークしております。何年か前にもやりましたが1ヶ月ほどで1kgはやせました。最近はずっと立ちっぱなしで大変なのでスタンディングワークを多めで座って作業もしています。

病気をしない身体作りというのはとても良いことですね。背筋ともも肉を鍛えるとダイエットには効果的と効いたことがあります。

Read more

Mar 12, 2016

クラウド時代にオススメしたいメモアプリ

2016-03-12
memo note web cloud best apps クラウド メモ

最近メモしていますか?私はメモしまくっています。ウェブの業界は流れが速いので情報をつかむのが大変です。

そこでオススメしたいメモアプリをご紹介します。使う用途としては覚え書きや物の価格とかライブラリ、プラグインなどの使い方などもちろんクラウド同期でスマートフォンに同期します。

因みにEvernoteは定番ですが資料や気になる情報のウェブページ、日記などに使っています。これも便利ですが結構な情報量がある場合に使います。

オススメのメモ帳は・・・

Read more

Jan 27, 2016

https化はもう必須!?SSL/TLSの基礎知識

2016-01-27
ssl tls web https IP SNI

ここ最近はGoogle様の推奨でHTTPS化が進んでいます。ただしこの暗号化には料金がかかります。コストがかかるのでなかなか手が出なかったのですが、最近は無料のSSLやSNIなどの格安の証明書がでてきています。各種サーバー会社も提供しております。IPベースよりもネームベース(SNI)のSSL証明書がとてもお得です。

SSL証明書を一つとるのに年間3万ぐらいかかっていました。ちょっと昔は7万円ぐらいとか。。。IPベースの場合は未だ高いですがそれでも2万円ぐらいから提供されています。ネームベース(SNI)のだと5000円切る価格で提供しています。

SSL(Secure Socket Layer)とは、インターネット上でデータを暗号化して送受信する方法のひとつです。TLS(Transport Layer Security)は、SSLをもとに標準化させたものです。現在はTLSがの暗号化が一般的ですね。

SSLにはセキュリティ問題があり、サポート終了に向けた対策が進んでいます。それにともないSSLは今後利用されなくなりTLSがメインになってきていますが、暗号化のことをSSLと呼んでいることが多いようです。一般的な表記はSSL/TLSとします。

Read more

Jan 25, 2016

もうアマゾンプライムに加入されましたか?

2016-01-25
amazon ウェブ アマゾン プライム サービス amazon prime web

アマゾンのサービスは最近はとどまることを知らないですね。

私もアマゾンのサービスを利用していますが満足度は高いです。

アマゾンプライムサービスのご紹介

  • お急ぎ便、お届け日時指定便が使い放題( 無料のお急ぎ便で、自宅でもコンビニなどの店頭でも受け取れる)
  • 会員限定先行タイムセール(タイムセールに30分早く参加できる)
  • Kindleオーナーライブラリー( 対象のKindle本から好きなタイトルを毎月1冊無料で楽しめる)
  • プライム・ナウ(2時間の配送、対象エリアは東京都、神奈川県、大阪府、兵庫県の一部地域です。1時間以内配送は890円1回当たり2500円以上、商品は1個から購入)
  • プライム・ビデオ(映画もTV番組も見放題)
  • プライム・ミュージック(100万曲以上が聴き放題)
  • プライム・フォト(好きなだけ写真を保存可能)

Read more

Jan 21, 2016

CSS管理にSassという手はいかがでしょうか?

2016-01-21
sass scss web LESS HTML サス

今回はCSS拡張メタ言語をご紹介します。

なにそれ?って言う方も多いと思います。大まかに分けるとLESSとSassに分かれます。LESSの方が学習コストは低いですがSassはLESSを含んでさらに出来ることが多いです。

Sass公式サイト

LESS公式サイト

でSassとかLESSとかってなんなんだっていうことですが、簡単に言うとCSSをより簡単に記述しようってことです。

Read more

Jan 19, 2016

ウェブディレクターが覚えておきたいマークダウン記法

2016-01-19
markdown マークダウン web HTML

さてマークダウンとは何でしょうか?

HTMLに変換できる軽量なマークアップ言語なんです。 実はこのブログもマークダウンで書いています。

HTMLでタグを書くのはちょっと面倒なのでこの記法を覚えると割とらくにHTMLがかけます。といってもすべてのタグを網羅しているわけではないのでちょっとしたメモ書きやブログなどでよく利用されています。マークダウン対応エディタなどで確認が出来ます。

以下エディタAtom、MarkDown#Editor、MarkdownPad、MacDown、sublimetext、etc…私はSublimetextです。その他簡単に確認できるブラウザ上で編集できたりするブラウザエディタなどもあります。Stackedit、Dillinger、Marxico、Wri.peなど結構探せばあります。chromeのブラウザならMarkdown Preview Plusというエクステンションもあります。

覚えるルールはだいたい10個ぐらいなので比較的に覚えやすいですね。

Read more

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

最近の投稿

アイキャッチ
新しいことを続ける力を身につける方法

今回は新しく始めるきっかけや物事にどのように取り組むかを考えてみたいと思います。 結構新しいことを始めることって大変だと思います。なかなかの勇気と体力が必要かなと。 例えばダイエットとかを例...

24 Jun 2017

アイキャッチ
ドメインオーソリティの使い道

ドメインオーソリティーとは一言で言えばドメインの価値を数値化したモノです。ドメインに関するものなので中身については全く意味をなさないと思います。ドメインオーソリティーの数値が低いから低品質なコン...

17 Jun 2017

アイキャッチ
個人情報を一切収集しない検索エンジンDuckDuckGoとは?

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。 DuckDuckGoという検索エン...

10 Jun 2017

アイキャッチ
ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。 CSSのフレームワークBootstrap3をお使いの方ならすんなりと...

03 Jun 2017

アイキャッチ
PHPMailerの使い方

今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョン...

28 May 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

フッターイメージ