Webサイト関連・技術 一覧

カテゴリ別記事一覧

皆さんは何かしらの端末を使ってこのWebページを閲覧してくださっていると思います。

現在、インターネットの利用は「メール」や「Webページの閲覧」がほとんどを占めます。では、この内「Webページの閲覧」ですが、どのような仕組みで閲覧できるようになっているのかご存知でしょうか。とても気楽に閲覧できるため、気にしたことはあまり無いという方も多いかと思います。

しかし、インターネット関連のトラブルも同じく誰にでもやってきます。インターネットに繋がらないというトラブルは代表的ですね。そんなとき、どこにドラブルがあるのかある程度推測できる力があると時間も浪費せず役立つかと思います。

そこで、今回は「WebブラウザでなぜWebページを見ることができるのか」を焦点に当てて、ネットワークの仕組みの一端を、ある程度噛み砕いた内容で解説していきたいと思います。どんな経路でデータが流れていっているのか分かれば、場合分けによる原因特定が容易になるので概要だけでも覚えていただければ幸いです。

続きを読む

現在、ブログのデザインを一新するため隠れて必死に再構築している最中です。
それと、仕事とかイベントとか他いろいろ現実世界で用事が入り乱れてきたので長い記事を書く時間が取れなかったため、今回はシンプルにいきます。

ブログを作るために、私はMovable Type(以下MT)というコンテンツ管理システム(CMS)を使用しています。このMTに使用できるプラグインに「PageBute」というものがあります。これは、ページを分割するためのプラグインで、アーカイブページなど1ページに収まりきらないコンテンツがある場合に使用します。

ただ、このプラグインによって分割されたページはすべて「タイトル」が同じになってしまいます。これはSEO的に問題があり、検索エンジンが「重複タイトル」として判断してしまいます。これでは何かしらペナルティを受けるかもしれません。

そこで、この問題を解決してみたいと思います。

続きを読む

1週間ほど前にブログの移転を完了しました。現在、アクセス数の低下も無いため正しくリダイレクトされているようです。

移転に伴い、301リダイレクトなるものを利用してみたり、サーバー内も色々弄りました。
また何かあったときに調べ直すのも面倒なので、今回は管理人のメモ的な記事になります。

内容は主に「301リダイレクトの記述方法」になります。
興味ない方は特に面白みなど無いかと思いますが、結構苦労したので記録を残しておかないと後々面倒なのです・・・

ということで今までやってきたこと書いていきます。誰かの参考にもなれば嬉しいです。

続きを読む

一ヶ月前くらいからちょっとずつブログの軽量化・表示高速化を図ってきました。

どんなサイトでも、表示されるまでの時間が早ければストレスも少なくうれしいですよね。
このブログでも、皆様のストレス軽減のためちょっとだけ軽量化・高速化(たぶん)しました。

基礎的なことしかやってないので、元々速い回線を使っている方はあまり効果は無いと思いますが、全体のデータ転送料量を幾分か減らすことができました。管理者側としてもサーバー負荷が減るのは嬉しいです。

今回の記事は、このブログで実行した軽量化・高速化の方法をいくつか紹介していきます。
基礎的なことですので結構簡単にできます。ブログをやっている人はぜひお試しください。

JavascriptやCSSの最適化

アクセス解析結果
▲アクセス解析結果

以上の画像はこのブログのアクセス解析結果です。これはトラフィック量の多いファイル上位30位を示してくれます。
(読み込まれる回数の多いファイルで総転送容量も多いということ)

見れば分かるとおり、CSSやJavascriptが上位を占めています。
つまり、これらのデータ量を減らすことができれば転送されるデータ量も大幅に減らすことができることを意味しています。

ってことで、これらを圧縮してみましょう。

続きを読む

このブログはコンテンツマネージメントシステム【Contents Management System:CMS】、通称CMSと呼ばれるシステムによって管理されています。

CMSにはいくつか種類があるのですが、私は「Movable Type」(以下「MT」)を選びました。

このMTの記事投稿機能には「日時指定投稿」ができる項目があるのですが、
これを実行するにはサーバー上でcron設定をする必要があります。

cron設定をすることで指定した時間(時刻)でブログの再構築を実行し、その際に記事を投稿させます。
今回の記事では、MTでブログ記事を日時指定投稿する方法を紹介します。

(※さくらインターネットでの解説となります)

さくらインターネットのcron設定

続きを読む

HTMLなどでJavaScriptを読み込ませると、Webサイトに様々な便利機能を追加させてくれます。なので便利なJavaScriptを見つけるといくつも導入してみたくなるものです。

しかし、複数のJavaScriptを読み込ませようとすると、HTML内の記述が煩雑になり見にくくなってしまいます。

そこで、JavaScriptの読み込み(ロード)を1つのファイルにすべてまとめて実行する方法を紹介します。
これでHTMLの記述がすっきりし、またJavaScriptの管理もしやすくなります。

いくつか方法はあると思いますが、この記事では2つの方法を紹介します。

続きを読む

ソースコードをブログなどでそのまま記述すると、非常に見にくくなってしまったという経験はないでしょうか。

SyntaxHighlighter(シンタックスハイライト)は、ブログ上で読みにくくなってしまうソースコードを色付き(ハイライト)や行番号で分かりやすく表示するためのJavaScriptです。

この記事では、SyntaxHighlighterの導入方法と使い方、日本語化などのカスタマイズ方法を紹介します。

※当ブログではVer 2.x系のSyntaxHighlighterを導入したのでVer 2.x系の解説になります。

続きを読む

Webページ内で貼られている画像の中には、クリックすると拡大された画像を表示するものがあります。
あれは画像自体にリンクを貼って、クリックするとそのリンク先(この場合は拡大画像)に飛ぶように設定されているためです。

しかし、HTML標準のリンクでは、リンクをクリックするとページが更新されるか新しく別窓を開く設定になってしまいます。拡大画像を見たいだけなのに一々別窓が開くのは鬱陶しいの一言です。 Webサイトの運営者の中には改善したいと考えている方も多いでしょう。

そこで、別窓を開かず画像を拡大してくれるJavaScript「FancyZoom」を紹介します。
以下、そのサンプルです。


▲サンプル画像。クリックするとポップアップ形式で拡大。

※Webサイト運営者向けの記事です。ユーザー(閲覧者)が導入するものではないのでご注意ください。

続きを読む

皆さんは、GoogleやYahoo!Japanが提供する「検索エンジン」を利用して必要な情報を検索していると思います。

複数の検索キーワードの間にスペースを入れると、すべてのキーワードに一致したページを表示する(AND検索)ということは皆さんもご存じかと思いますが、実はそれ以外の検索方法があるのです。

それには「検索演算子」「特別構文検索」と呼ばれるものを利用します。

これらを利用すると、検索ボックスに入力したキーワードに対してより正確に検索を行うことができるようになり、早く目的の情報を見つけることができるでしょう。

続きを読む

このページの上部へ

サイト内検索

広告

Powered by Movable Type 6.3.2