グーグルアナリティクス(GoogleAnalytics)を使って、サイト内で最もページビュー数の多い記事を調べる方法です。 多機能なWebサイト分析ツール、グーグルアナリティクス(GoogleAnalytics)の使い方講座です。 GoogleAnalyticsを使って「期間中に最も読まれた記事」についての調べかたを覚えましょう。サイト管理の励みや今後の参考になります。 「サイトコンテンツ」の歩き方 レポート ＞ 行動 ＞ サイトコンテンツ ここでは、Googleアナリティクスで用意された機能の中でも特に「サイトコンテンツ」メニューの読み方についてご紹介します。 「サイトコンテンツ」メニューはいくつかの小機能で成り立っています。 すべてのページ ディレクトリ ランディングページ 離脱ページ 各機能は、ページごとのPV数一覧をチェックするのに適した項目が揃っています。順に見ていきましょう。

WordPressで「現在表示中のページ」のURLを取得する方法まとめ。カテゴリやタグアーカイブの取得、2ページ以降もカバーする方法も。条件分岐せずPHPで直接取得するときの方法もご紹介しています。 WordPressで現在表示中のページURLを取得（出力）する方法です。 TwitterやFacebookを初めとするSNSのシェアボタンを作ったり、リンクバック用のURLを細かく制御したいときなど割と出番は多いのではないでしょうか。 自分でもあちこち作り散らかして閲覧性が悪いので備忘録がてらにまとめておきます。 今いる投稿ページのURL 一番オーソドックスな方法は標準で用意されています。 【PHP】 the_permalink(); しかし問題はループ外の処理でしょう。特にトップページやカテゴリページなどは表示頻度も高いのですが、意図した動作をしないので困ります。具体的に言うと最新記事のID

.htaccess とは.htaccess のルールファイル名コメントアウト文字コードと改行httpd.conf転送と有効範囲正規表現Apache のモジュールと .htaccess で利用可能なディレクティブモジュールとディレクティブ一覧HTTP環境変数後方参照RewriteRuleの後方参照RewriteCondの後方参照まとめ.htaccess とは[1] Apache HTTP Server Webサーバソフトウェアが "Apache" である必要があります。 .htaccess とは、Webサーバの動作を制御するための設定ファイル [1] です。設定例としては、特定のファイルやディレクトリのアクセスを禁止したり、HTTP 404(Not Found：未検出)エラーページをカスタマイズすることもできます。.htaccess は設置しなくともWebサイトは問題なく動作しますが、セキュ

今日は、ちょっと技術的な話を。「meta referrer」という、リンクをクリックしてページ移動するときなどにリファラをどう送るかを、ページ側で指定できるタグの実装が進んでいるのです。 グーグルはHTTPSを推奨するけれども、リファラが……グーグルは、サイトがHTTPSかどうかを順位決定の要因とするなど、HTTPSを推奨しています。 でも、自分のサイトをHTTPSにすると、自分のサイトから非HTTPS（ふつうのHTTP）のサイトへのリンクをクリックしたときに、リファラが飛ばないんですよね。 これは、RFC 2616で、「セキュア接続のページから、非セキュア接続のページに移動するときは、リファラを送出するべきではない」と定められているからです（セクション15.1.3）。 とはいえ、Web担のようなメディアでは、「Web担のページから、うちのサイトにけっこう来る人いるんですよ」という反応も大

URL構造を変更するとSNSのシェアカウントもリセットされてしまいます。サイトを引っ越したときに新URLでも古いシェア数を表示する方法をTwitter・FB・はてブでまとめました。 URLの変更など本来やらない方が良いのですが、やむなくサイトの構造変更や引っ越しなどをすると相応に手間が掛かるものです。 中でも痛いのはSNSのシェア数がリセットされることではないでしょうか。いくらでも口コミが集まる人気サイトならともかく、通常運転での能動シェアが5000PVあたり1回程度な弱小サイトの場合はカウンタリセットって本当にショックが大きいわけですよ！！ …ということで、先日URL変更をした当おち研でも旧アドレスからのシェア数をサルベージすることにしました。基本的にWordPressサイトという前提で書いているので別のCMSをお使いの場合は適宜 読み替えて下さい。 旧シェア数が取得出来るサイト構造につ

This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission. More information...

おちです。 先日、iframeタグを使ってURLを上書きするln.isの話を書いたばかりですが、実は少し前から同様の動きをするサイトについて調べてたのでメモしときます。 特定のページをiframe内に収めて検索語を盛る 見かけた手口は以下の通り。ちなみに海外のサイトです。 はてなブックマークやSNSで人気の出たページに目をつける iframeタグを使って目的とするページの内容を全部引っ張る メインカラムにワードサラダを山盛る トップページにリンクを張りまくる しばらく運用したら丸ごと消去 勝手に人のページを引っ張るという点において、大筋でLinkisと変わりません。 ただ、随所に「ネタ元の記事を翻訳したような文」がついていたので最初見たときは「海外記事の紹介サイト」なのかと思ってました。 もっとも海賊翻訳サイトも厳密に言うとアウトですし、ページ内には翻訳文とは別に人気のありそうな単語をマル

Updated 2014.03.23 / Published 2013.10.25 2013年はGoogleがApple主導で開発していたWebkitから分離し、ChromeとOperaがレンダリングエンジンをBlinkへと切り替える大きな出来事がありましたので、ブラウザベンダーが勧告予定のCSS仕様の先攻実装を示すベンダープレフィックス（接頭辞）の整理整頓についてまとめてみましょう。 各情報の出典としてはCan I useを利用しており、各UA名称部分はIEはデスクトップ版Microsoft Internet Explorer, Chromeはデスクトップ版Google Chrome, Firefoxはデスクトップ版Mozilla Firefox, Safariはデスクトップ版Safari, Operaはデスクトップ版Opera, iOSはiOS Safari, AndroidはAndr

スマートフォン利用者に配慮して「レスポンシブWebデザイン」を採用するサイトが増えています。このデザインは1つのHTMLファイルで、パソコンとスマートフォン、それぞれに適したページを表示できるのが特長。特に若い人をターゲットにする大学サイトで注目を集めています。Googleも推奨する優れた手法ですが、デメリットもあります。話題になることが少ない、ユーザビリティ上の問題点について指摘しましょう。 「レスポンシブWebデザイン」（以下、レスポンシブ）とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます（中には、タブレット向けデザインを用意しているサイトもあります）。 レスポンシブを採用するサイトは最近増えていま

Yahoo!知恵袋が著作権無視の暴走を始めました。 以下のエントリーを見て「仕方のない事」なんて思っちゃいけません。 「Yahoo!知恵袋オフィシャルブログ」 URL付き投稿不可対応 http://blogs.yahoo.co.jp/yjchiebukuro_staff/69444251.html 知恵袋の特性上これはありえない対応です。 URL不可で迷惑被るブロガー それでなくとも著作権無視でコピペ回答するアホな回答者が問題視されているYahoo!知恵袋です。 URL不可となると引用元のURLを明示しない回答が激増します。 私のような木端ブロガーが知恵袋へ盗用コピペされた場合、私の書いた元記事よりも知恵袋の改変盗用が検索上位に表示されてしまうのです。 そのなかに引用元としてURLが貼られていれば良いのですが、URLが無ければただYahoo!知恵袋にPV盗まれてお終いです。 木端ブロガーに

tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ

おちです。 パクりサイトが嫌いです。一匹見つけると30匹…とは言わないけど、その気になって検索すると ちょいちょい微妙な記事が見つかるので探し方をまとめてみました。 パクられ記事をGoogle経由で検索する方法 まずはオーソドックスにGoogle検索で探す方法。基本的に検索文は独自ドメインを対象としてますが、ルートURLやアカウント名でも見つかることがあるのでレンタルブログを使ってる方も検索文を工夫してみて下さい。 site:パクりサイトのドメイン あなたのブログ名 パクりサイトが判っている場合に自分の記事を探す検索文です。ブログ名以外にもハンドルやユーザネームなど、自サイトに特徴的な単語で引っかかることがあります。 inurl:あなたドメイン -site:あなたのドメイン ディレクトリ構造などを元サイトからそのまま引いてるシステムに有効な検索文です。引っこ抜き方にもよりますが、これで盗用

Googleでrelated:検索したら化け物サイトと紐付いてた件 【初稿発表：2014/05/08】 Googleの検索オプションに related: なる機能があるのをご存じですか？あるドメインを入力すると似たサイトを示してくれるコマンドです。 Googleのrelated:検索 まずはGoogleのrelated:検索の例を見てみましょう。例えば related:google.com で検索すると Yahoo! を筆頭に諸々のサービスが、 related:yahoo.co.jp で検索すると Google が、 related:twitter.com で検索すると Facebook なんかが出てきます。 独自ドメインなら個人サイトでも検索可能ですから、試しにいくつか有名ブログを入力するとそれぞれの交友関係やサイトの方向性が見えてきて面白いです。 ちなみに当おち研はあまりよそのサイトと

ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素

【memo】 4月以前のログは現在集計しているデータと計測法が違うため除外しました。 あと、アクセス者数は月間5桁につき参考程度にご覧下さい。 （この手のデータは月6桁くらいアクセスないと誤差が大きいと思うので。） 初月（5月）のタブレット率が高いのは半分くらい自分の動作確認です。 2011年に1割程度と言われていたスマートフォンによるWeb閲覧は2012年には2割を超え、その後も増え続けてるのは周知の通りです。 現状おち研におけるスマホ閲覧率は半分超というところですが、5％ほどいらっしゃるタブレットユーザも入れると6割いきますね。 EC系サイトによってはモバイルとタブレットでアクセス総数の7割を超えるケースもあるようです。 一言でスマホと言ってもサイズや速度はPC以上に多様かつシビアなのでレスポンシブデザインなら良いとか、いやデバイスで振り分けるべきだとかページネーションどうするんだよと

とかくカオスになりがちな WordPress の PHP 周りのコードを、どう綺麗な設計で作るかということをデザイナーやディレクター向けにわかりやすく扱います。1年後に見て「あれ、なんだっけ？」となりにくい、コラボレーションしやすい設計をご紹介します。