最新情報

  • 2019/07/14
    ブログを更新しました。
    2018/04/30
    冷やし中華...じゃなかった、Twitterはじめました。

このサイトに関して



当サイトご利用上の注意

  • 記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。

    2019/04/14現在、コメント欄の認証方法やNGワード設定等、時々変更しています。メールアドレスの入力が求められる場合、とりあえずメールアドレスの形をしていれば(@の前は適当でも)OKです。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

  • 台湾の名前で東京オリンピック参加を!署名活動


    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会









管理人ポータル

大師小同窓会関連












  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

各種ノウハウ集



私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


« 2014年6月 | トップページ | 2014年8月 »

2014年7月の8件の記事

2014/07/31

【ブログの楽しみ方】アクセス解析:「過去の足あと」(旧「通常の足あと」)の改善【ココログ】

気づかないうちに、「リアルタイム足あと」から表示できる「通常の足あと」の仕様が変わっていました。

タイトルも「過去の足あと」となっています。

Access08

大きな変化は、まず、直近のログが上に表示(降順に表示)されていること。さらに、見出しの「アクセス日時▼」をクリックすると、昇順に表示されます。

ちなみに、下は4月頃の画面です。

Cocolog_access_analytics02

関連記事:『【ブログの楽しみ方】新アクセス解析に「通常の足あと」機能(「生ログ」)追加【ココログ】

なお、 環境(Google Chrome?)によっては「ページタイトル/URL」が表示されない現象があるようで、助け合い広場でそのような質問がありました。覚え書きとしてリンクを貼っておきます。

FAQ: 「足あと」から閲覧ページが消えた

 


Cocolog_iken 管理画面の右サイドバーにこのようなバナーが表示されていて、リンク先はココログに関するアンケートになっています。

ブログ主もさっそく意見を送りました。

バナーのリンク先: https://eq.nifty.com/webeq/pub/ptlsv_00/cocolog_euq1407

つぶやきなどで悪態 をつくなら、こういうところに建設的な意見を送ったらどうでしょう。今回の改善 -生ログの表示順やソート(並び替え)の切り替え- も、以前、ブログ主が要望を送っていたことなので、こういう声が集まれば、少しずつ使いやすくなってくるかと思います。

以下は、ブログ主が今回回答した内容の一部を覚え書きとしてメモしておきます。


★Q:あなたがココログを利用していて、容量が足りているか教えてください

 【選択】今は足りているが、将来的には足りなくなると思う

★Q:画像などのファイルをアップロードする際に、容量で困ったことはありますか

 【選択】その他 (ファイルのタイプによっては2MBの制限が不便に感じる)

 【意見】

■容量に関して:現在のブログ(サブドメイン)をそのまま使用できるよう、有料でも良いので、拡張できる機能が欲しい。

■ファイルのサイズ制限について:画像に関しては、サイズの知識がなくて巨大なファイルをアップロードするユーザもありえるので、ある程度の制限は仕方がないと思う。ただ、PDFなど、2MB以上のファイルも掲載できると便利。ファイルマネージャでのアップロードに限るといったハードルを設けて、もう少し大きなファイルもアップロードできると良い。

★Q:投稿関連の機能について、ご意見・ご要望がございましたら、お聞かせください(自由記述)

 【意見】編集画面の機能(ボタン)はもう少し機能を追加して欲しい。
例)
・テーブル挿入ツール
・文字の背景色

■その他
記事を保存しようとした際にrequest url too largeエラーになる原因は理解しているが、何か救済方法がないものかと思う。(体感的にログイン後6時間を超過していても記事を保存する以外のアクション、例えば、管理メニューを移動するといったことはできてしまっていると思う。そのため、実はログアウトしてしまっているというのが分かりにくい。)

 

2014/07/30

【ブログの楽しみ方】siteコマンドの使い方/検索サイトからのアクセスを増やすには

検索サイトからのアクセスが少ない理由は?

これはココログに限ったことではありませんが、自分のブログやホームページが、GoogleやYahooの検索サイト(サーチエンジン ※1)経由でアクセスされない原因は、大きく分けて2つのポイントがあります。

一つは、ブログのタイトルや記事中に使う言葉が検索されやすいように考慮されていない場合で、これについては『【ブログの楽しみ方】ブログのアクセスを増やすには?/キーワードに関する考察【ココログ】』で説明しました。

もう一つは、そもそも、自分の書いた記事やそれに関連するページ(※2)が検索サイトに認知されていない、即ち、検索サイトにindex(インデックス)されていない場合です。これでは検索結果に表示されないので、アクセスされるわけがありません。

 

 

siteコマンドで、自分のブログがGoogle(Yahoo)からどのくらい認知されているのか確認する

自分のブログがGoogleにindexされているかどうかは「site」というコマンドを使用して、ある程度(※3)調べることができます。具体的には、Googleの検索窓に下記のように指定して検索ボタンを押します。(「site:」の後ろにスペースは入れない。)

site:ブログのURL

下は、その検索結果です。

Site01 図-1

このブログのトップページを表示したときにアドレスバーに表示されるURLは「daishi100.cocolog-nifty.com/blog/」(http://daishi100.cocolog-nifty.com/blog/)なのですが、「daishi100.cocolog-nifty.com/」の部分を「site:」の直後に記述します。(個別の記事がインデックス登録されているかどうかを調べるには、URLをフルに記述します。)

検索結果が表示されたあと、更に、「画像」をクリックすると、indexされている画像も表示されます。(下図)

Site02 図-2

関連サイト:『Google のインデックスの状態を確認する

※1 検索サイト

この記事では、GoogleとYahooからの検索を意識していますが、ここではその理由を説明します。

下は、当ブログの6月(2014年)のアクセス状況を参照元別に表示したグラフです。(Google Analyticsにて調査)

Site03 図-3

最初にこの表の見方を簡単に説明すると、

「google/organic」と「yahoo/organic」、「bing/organic」と、「organic」と表記されている参照元がありますが、「organic」とは、ここでは「自然な/自然発生的な」という意味で、それぞれの検索サイトで、キーワードによる検索から訪問されたことを示しています。

「(direct)/(none)」というのは、ブックマーク(ブラウザの「お気に入り」登録)からや、URLを直接入力することによって訪問されたことを意味します。また、「~ / referral」というのは、どこかのサイトに貼られたリンクから訪問されたことを示します。「referral」とは「紹介/(別の場所への) 派遣、委託」といった意味です。

この表を見ると、「organic」(自然検索)での検索は、ほとんどGoogleとYahooがメインで、あとはせいぜいWindowsに組み込まれているBingからと言えます。

YahooはGoogleのサーチエンジンを使用しているので、Google対策が重要ということになります。

 

※2 自分の書いた記事や“それに関連するページ”:

ブログで記事を書くと、その記事に固有のURL(アドレス)が振られて公開されますが、それだけでなく、ブログのトップページや、カテゴリ毎のページ(サイドバーに表示させているカテゴリ名をクリックしたときに表示される、同一カテゴリの記事をまとめたページ)なども更新されたり、新規に作成されます。つまり、自分のブログ内には、個々の記事だけでなく、もっと多くのページ(=HTML文書)が存在します。

また、マイフォトを作成している場合は、そのトップページや個々の画像ページ、ブログにアップロードしたファイルなども固有のURLを持っているので、siteコマンドで検索される件数(図-1/「約3720件」)は実際の記事件数よりかなり多くなります。

 

※3 より正確にindex状況を調べるには、Google ウェブマスターツール(Webmaster Tool)にサイトを登録して、index状況(インデックス・ステータス)を見ます。(図-4)

Site04 図-4

上のグラフでは7月20日時点で3833件のindexが登録されていることが分かります。図-1の検索結果に表示された件数(約3720件)とは若干の誤差があるにしても、似たような数字になっています。

関連記事『【PC】Googleウェブマスターツールで「(not provided)」の検索キーワードが見える!

 

 

 

検索サイトにインデックス登録されるために:(1) PINGの送信

ココログの場合、デフォルト(既定または初期設定)で、PING(ピングまたはピン)サーバに更新情報を送信するようになっています。(管理画面→「ブログ」→「設定」→「更新通知」)

更新情報とはURLや記事のタイトルや概要で、PINGサーバと呼ばれる場所にこの情報が蓄積され、検索サイトがこの情報を参照します。

PINGのシステムはブログのために考えられたもので、ココログ以外のブログシステムでも、大抵は自動的に送信するような仕組みが備わっています。

 

検索サイトにインデックス登録されるために:(2) Googleにサイトマップ(sitemap.xml)を送信する

PINGの送信が個々の記事を公開する毎に行うのに対し、Googleに自分のブログの情報(サイトマップ)をまとめて送信する方法です。これも、ココログに限らないのですが、ここでは、ココログの機能を紹介します。

公式FAQ『ココログから Google へサイトマップを送信するには』に簡単な説明がありますが、流れとしては、

  1. ココログ側でサイトマップを作成(これも「更新通知」画面ではデフォルトで作成する設定になっている)
  2. (Googleにアカウントを作成してから)自分のブログを登録
  3. サイトマップを送信

するだけです。

下は、更に簡易な登録方法で、それぞれ、下のような画面に自分のブログのURLを記入して送信するだけです。

Webmaster01 Webmaster02

 

Googleにサイトを登録:https://www.google.com/webmasters/tools/submit-url

Bingにサイトを登録:http://www.bing.com/toolbox/submit-site-url

 

しかし、これで、自分のブログの記事が全てインデックス登録されるわけではありません。下にGoogleの登録画面に書いてある説明を転記しましたが、これはGoogleやBingにインデックス登録を“依頼する”だけであり、また、インデックスされるまでしばらく時間がかかります。

Google はウェブをクロールするたびに、インデックスに新しいサイトを登録し、既存のインデックスを更新しています。新しい URL を使用する場合は Google にご連絡ください。送信されたすべての URL がインデックスに登録されるとは限りません。送信された URL がインデックスに表示される時期について、予測や保証はいたしかねますのでご了承ください。

 

Googleと相性の良いサイトとは

最後にGoogle Webmaster公式ヘルプのガイドラインをご紹介します。(余裕があったら、上位のページにも目を通すことをお勧めします。)

 

個人的には、ブログなんて、好きなこと、書き留めておきたいことを自由に書くことで十分だと思いますが、自分の発信する情報を多くの人に読んでもらいたいという場合、良質なコンテンツを提供し、他のサイトに評価してもらう(=リンクを貼ってもらう)。また、ペナルティ(いわゆる“Google八分”)を受けるような行為はしない...

しごく普通なことですが、こうした地道な努力が大切ですね。

 

 


2014/07/15

【ブログの楽しみ方】今更きけないココログ-(3) カスタムCSSの使い方

この記事の目的

この記事は過去の記事が既読であることを前提としています。

今回は、ココログの「カスタムCSS」に自分で記述できるよう、CSSの記述ルール(「セレクタ」、「プロパティ」)について解説します。

実際に、様々な“修飾”を加えるためには、「プロパティ」についてまとめたサイトや本を読む必要がありますが、その前提となる知識です。

また、この記事の中で使用している見出し、例えば上の「この記事の目的」は、左側に葉の画像 Icon01 が付いたり、サイドバーで使われている見出しと同じ書式になっていますが、いちいち画像を貼り付けているわけではなく、HTMLタグを弄って、このように表示させているだけです。どうやったらこのようなことができるのかを説明します。

前回のまとめ

前回説明した内容を図に表しました。

Basic14

そのブログが使用するスタイルシートは<head>~</head>内に書かれていて、これにより、ブログがブラウザに読み込まれるとき=表示されるときにスタイルシートの内容を参照(①)します。

更に、外部スタイルシートimportしている場合、上から順番(②~⑤)に読み込み、次に、その下に記述されているカスタムCSSを読み込みます。したがって、重複した記述があった場合、下に書いてある方が優先されます。(←ここ重要)

ココログのカスタムCSS

前回記事『(2) ブログのスタイルシートの中を見るには』でも少し触れましたが、使い方は公式FAQにも掲載されています。

公式FAQ『CSSを使って自分でデザインを編集できますか?

前述のように、CSSはブログが表示されるときに読み込まれるので、カスタムCSSを修正して保存したときは、(ブログが既に開かれている場合、)F5キーを押すなどして再読み込みをする必要があります。

CSSの記述ルールと行間(段落間)を変更するCSS

記述方法は下の図を参照して下さい。

Basic16

文字(スペースも)は必ず半角英数字を使用します。見やすいように、上のように、セレクタやプロパティを改行して書くのが一般的です。

上のように記述されているCSSを使用しているブログの場合、例えば、下のようなCSSをカスタムCSSに記述したとすると、<p>タグに関してのみ、上下のマージンの値が10px→15pxと変わります。(上下に5px増えるので、行間は10px分より広く空くようになる。)

p
{
    margin-top: 15px;
    margin-bottom: 15px;
}

たいていの場合、この記述をカスタムCSSに加えて、マージンの値を調整することで行間を変えられと思いますが、必ず、自分のブログのCSSが現在どのように定義しているのかを確認してから行って下さい。

セレクタの種類

スタイルシートをブラウザで開いて見たときに、大きく分けて、「セレクタ」が「#」で始まっているもの、「.」(ピリオド)で始まっているもの、それらが付いていないもの(前項で説明したような、個々のHTMLタグの属性を直接指定するもの)があるかと思いますが、それぞれ、「IDセレクタ」、「クラスセレクタ」、「タイプセレクタ」と呼びます。

この項では、補足説明として「クラスセレクタ」のみ紹介します。

まずは簡単なサンプルです。

あいうえお

このブログのスタイルシートでは、引用ボタン( Blockquote )を押して、<blockquote>~</blockquote>で囲むと、グリーンの破線で周囲が囲まれるように定義してあると、前回説明しました。(文字の色や大きさは<p>タグと同じです。)

「あいうえお」という文字に色が付いていますが、これは編集画面の「フォントカラー」ボタンで色を付けたわけではなく、下のように記述してあります。(背景色は便宜的に付けました。)

<blockquote class="emphasize4"><p>あいうえお</p></blockquote>

この「emphasize4」という「クラス名」は、このブログのカスタムCSSで次のように指定してあります。

.emphasize4 {
        color: #8C9801;
}

この例のように、ピリオドに続けて任意の名前を付けたセレクタをCSSに記述すると、その属性を様々なHTMLタグで使用することができます。使い方は上のように、タグの「<>」の中に「class="クラス名"」のように記述します。(「HTMLの編集」モードで自分で記入する)

この「emphasize4」という「クラス名」を<p>タグ内で使い、<p class="emphasize4">かきくけこ</p>と記述すると、下のように表示されます。

かきくけこ

使えるタグを限定してスタイルシートに指定する方法もあり、例えば、<p>タグだけに使う場合は、「p.emphasize4」のように、タイプ(タグ)を前に付けて記述します。

なお、サンプルとして、web_css_test というwebページを用意したので、ご興味がありましたら、ソース(HTML)やカスタムCSSの内容をご覧下さい。

クラスセレクタの使用例

この記事の中で使っている見出し(例えば上の「クラスセレクタの使用例」)は、「HTMLの編集」で下のように書いているのですが、サイドバーに表示されている見出しと同じ書式になっています。(左側に“葉”のイラストが付いたり、文字の大きさなどもサイドばーの見出しと同じです。)

<h2 class="module-header">クラスセレクタの使用例</h2>

これは、ブログのソースを見たときに、サイドバーの見出し部分の記述を真似したもので、見出し等、サイト内で頻繁に使う書式に名前をつけておき、必要に応じて「class="~"」でその書式を適用するというのが、クラスセレクタの一般的な使い方です。

下は、他の方のブログのHTML(ブログA)で見出し部分を見たところですが、たまたまこのブログ(ブログB)と同じ「module-header」というクラス名を使っていますね。

Basic15

 

この記事は前後の記事との兼ね合いで加筆修正する可能性があります。

 

 

2014/07/12

【ブログの楽しみ方】今更きけないココログ-(2) ブログのスタイルシートの中を見るには

この記事の目的

この記事は過去の記事が既読であることを前提としています。

(1)でスタイルシートの概略を説明しましたが、この記事ではもう少しその役割を説明し、これをカスタマイズする作業に必要なテクニックと知識を紹介します。

段落タグ(<p>~</p>タグ)は行間を広く空けるためのタグではない

このタイトルの意味が理解できない方は、下の記事をお読み下さい。

【ブログの楽しみ方】Enterでの改行とShift+Enterでの改行の違いと行間の関係【ココログ】

答えを言ってしまうと、<p>~</p>で囲まれた段落と段落の間がやや広く空く(ことが多い)のはスタイルシートでマージンの設定をしているからだと言うことが書いてあります。

上で見たように、“<p>といった個々のHTMLタグに対する“装飾”を細かく設定”しているのがスタイルシートです。

もう一つ例を説明すると、下の「ここはblockquoteです」の部分は、ココログ編集画面の Blockquote ボタンを使用しています。ブラウザで閲覧したときに、モス「グリーンの破線で周囲が囲まれていると思いますが、これも、このブログのスタイルシートでそう指定されているからです。

ここはblockquoteです

この部分を「HTMLの編集」モードで見ても、

<blockquote><p>ここはblockquoteです</p></blockquote>

と記述されているだけです。

<blockquote>の装飾方法を設定している部分をスタイルシートから書き出すと、以下のようになります。

blockquote {
    font-size: small;
    border: 1px dashed #8C9801;
    padding: 8px 8px 0 8px;
    margin: 10px 0;            
}

ここでは詳しく説明しませんが、「border: 1px dashed #8C9801;」は、「枠線(「border)は1pxの太さで、グリーン(8c9801 )の破線(dashed)で囲む」という意味です。

ココログの編集画面はBlockquote ボタン(引用ボタン)が押されたら、その行を“<blockquote>と</blockquote>で囲む”ということをしているだけです。

 

スタイルシートの内容を見るには?

既に説明したように、スタイルシートはHTML文書の<head>~</head>の間に記述されているので、HTML文書の生データ(ソース)を見ます。

ソースを表示する方法は『【ブログの楽しみ方】ブログやウェブサイトのソース(HTML)を表示する/HTMLタグとは』で説明しています。

スタイルシートを呼び出す<link>タグを探します。(下図)

Basic12 図-1

当ブログでは(現在使用しているデザインでは)下記のように記述されており、背景色を浸けた部分がスタイルシート(cssファイル)のURLです。

<link rel="stylesheet" href="http://daishi100.cocolog-nifty.com/blog/styles.css" type="text/css" />

この部分をコピーして、ブラウザのアドレスバー(URLが表示される窓)に貼り付けて開きます。

@import:外部スタイルシートを呼び出す

下図は、このブログのスタイルシートを開いたところです。

Basic13 図-2

「@import」というのは、外部、つまり別のスタイルシートを呼び出す命令のようなもので、括弧の中がそのスタイルシートのURLです。

また、このブログではテストなどでユーザ独自に記述した「カスタムCSS」も使っているので、その下(「/* user css */」以下)に表示されています。

『カスタムCSS』は管理画面の「ブログ」タブ→「デザイン」の下の方にある、「カスタムCSSを編集」で、記述した内容です。

Basic09 図-3

自分でCSSを記述すると、図-2のように、既存のスタイルシートの下に追加されるようになっています。

ここで、一番上のURLを見ると、

/.shared-cocolog/themes/common/base-weblog.css

となっており、http:で始まっていません。このような場合は、ブログのURL(トップページが分かりやすい)のフォルダ名(ここでは「blog」)をとったものを先頭(左側)付けます。

このブログのURL「http://daishi100.cocolog-nifty.com/blog/」で言うと、背景色を浸けた部分です。

これで、

http://daishi100.cocolog-nifty.com/.shared-cocolog/themes/common/base-weblog.css

というURLが得られます。このURLにアクセスして内容を見ます。

【メモ】当ブログの外部css呼び出し部分

/* base css */
@import url(/.shared-cocolog/themes/common/base-weblog.css);
/* portal css */
@import url(/.shared-cocolog/nifty_managed/themes/common/base.css);

/* theme css */
@import url(http://theme.cocolog-nifty.com/themes/rich/newdays/screen.css);
@import url(/.shared-cocolog/nifty_managed/themes/rich/newdays/screen.css);

このような作業(文字を切り貼りしたする作業)をするときは、テキストエディタを使用すると便利です。Windows PCなら、「メモ帳」が代表的なテキストエディタです。テキストエディタについて詳しくはwebページ『【ブログの楽しみ方】Windowsアプリ「メモ帳」【ココログ】』で説明しています。

<p>タグの定義を調べる

ここでは、<p>タグに関する記述を例に説明します。“行間”(正確には「段落と段落の間の広さ」)を決定しているからです。

h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote
{
    margin-top: 10px;
    margin-bottom: 10px;
}

という記述です。(「p」には便宜的に背景色をつけました。)

この記述方法に関する説明は次回にしますが、この「h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote」という部分は、<h1>タグ、<h2>タグ~<blockquote>タグのマージンの指定をまとめて一度に行っていることを意味します。「margin-top: 10px;」は上に、「margin-bottom: 10px;」は下に10pxのマージンを空けるという意味です。

 

この記事は前後の記事との兼ね合いで加筆修正する可能性があります。

 

 

2014/07/10

【ブログの楽しみ方】今更きけないココログ-(1) ココログのしくみ-HTML文書とスタイルシート

この記事の目的

ブログは本来、難しいHTML(インターネット上で公開するページ)の知識がなくても、気軽に書けるもので、基本的な操作方法、例えば、画像の挿入や文字の色を変える、などといったことは、だいたい編集画面を見れば想像が付くし、公式FAQ(ヘルプ集)に解説されているので、このシリーズでは対象とはしていません。

しかし、ちょっとしたトラブルに対応したり、ブログをカスタマイズしようとするときには、もう少し基本的なことが分かっていないと理解できないことがあります。

カスタマイズとは、例えば、「ブログ全体の文字を大きくしたい」とか、「ブログ全体の文字の色を変えたい」、「行間を広げたい」といったブログ全体に関わることは、「スタイルシート」(CSSファイル/シーエスエス・ファイル)という、ブログのデザインをコントールしている情報(ファイル)をカスタマイズしなくてはなりません。

「スタイルシート」に記述するタグのようなものはプロパティと呼ばれますが、ネットで検索すれば、その記述方法はいくらでも見つかります。したがって、この「今更きけないココログ」シリーズでは、その詳細を説明する予定はなく、それを理解する前提の知識を提供するこことを目的としています。

最終的にはスタイルシートを使って下のようなことが何故できるのか?ということが理解できることを目標としますが、今回の記事では、スタイルシートの基本的な役割を理解します。

Basic00 図-1

上の画像で、②と③はCSSで色と文字の太さが変わるようにしています。④と⑤は通常の改行(正確には改段落)をしていますが、CSSで行間(段落と段落の間)が広くなっています。

 

HTML文書、スタイルシートとは

HTML文書やHTMLタグについては、こちらの記事(webページ)を参照して下さい。『【ブログの楽しみ方】ブログやウェブサイトのソース(HTML)を表示する/HTMLタグとは

HTMLタグはココログが自動的に追加してくれ、ユーザがブログを書くときは、提供されている編集画面を使ってワープロソフト感覚で書けばよく、HTMLタグを意識する必要はありません。

ここでは、編集画面を使って書いた文章や貼り付けた画像から、ココログが自動的にHTMLタグを付加してHTML文書を生成してくれるということを理解して下さい。

 

次にスタイルシートについて基本的な説明をします。

ブログを始めるときに、ココログなら「テーマ」(ブログデザイン)を選択し、これによって背景画像がついたり、2カラムや3カラムといったカラム数、文字の色や大きさといった、デザインが決定します。

HTML文書そのものには、デザイン情報を直接記述しないのが現在では一般的で、このデザイン情報は別のファイルに記述されています。これをスタイルシートと呼び、ファイル名は「styles.css」という名前がよく使われます。「styles」の部分は他の名前でも構わないのですが、拡張子(ピリオド以下の文字は、「css」をいうものを使い、このため、「css(シーエスエス)ファイル」などとも呼びます。

テーマを変えることで、文章や画像には影響なくデザインだけが変えられるのは、このスタイルシートを変えているだけだからですが、スタイルシートを使わないと、ブログやホームページはどう見えるのか?というのは、簡単に試すことができます。

下はIE11(Internet Explorer11)の例ですが、「スタイルなし」を選択(図-2)すると、スタイルシートを使わないでページを表示(図-3)することができます。

Basic05 図-2

Basic06 図-3

これでスタイルシートの役割がだいたいおわかりになると思います。

なお、上の画面を元に戻すには再びメニューから「規定のスタイル」を選択します。

 

ここまでのまとめとして、HTML文書とスタイルシートの関係を表したのが下の図です。

Basic03_3 図-4

上図に一部誤りがあります。スタイルシートの記述が<body>~</body>の中の「ヘッダー」にあるとしていますが、正しくは、<head>~</head>の中です。図を修正次第差し替えます。 →修正済み

ココログ独自の用語もありますが、ブログは一般的にこのような仕組みになっています。

なお、上の図で分かるように、ユーザが記事を書くと言うことは、HTML文書の一部分だけを書いており、その部分のHTMLタグを確認するには、編集モードを「HTMLの編集」に切り替えれば見ることができます。

記事部分以外のHTMLタグは、ブログ全体で共通(同じ内容)になっていて、どのスタイルシートを使うかというのは、ヘッダー部分<head>~</head>部分に記述されています。

ブログのデザインを変えてブログ全体に“反映”すると、過去の記事もデザインが変わるのはこのためで、例えば、「9月になったから、今日の記事から秋らしいデザインに変えたい」と思っても、記事毎にデザインを変えることはできません。

また、ブログ毎に使われているスタイルシートを直接編集することはできませんが、ココログには「カスタムCSS」という機能があり、ここに自分で追記することで、スタイルシートを変更することができます。

 

よくあるトラブルと対応方法

ブログのデザインを変えたのにブログを見ても変わっていない

  

次回は、「HTML文書」→「スタイルシート」についてもう少し詳しく見ていきます。

この記事は次回以降の記事との兼ね合いで加筆修正する可能性があります。

 

2014/07/08

【我が町】2014年 川崎大師風鈴市日程(2014/07/17~21)

今年も川崎大師の風鈴市の時期になりました。

900種類、3万個の風鈴を展示即売する市で、7月17日(木)~21日(祝)、10時~18時(19、20は20時まで)の日程で行われます。

Furin000

Walk_rally2014

右の画像はたまたま市の広報に載っていた川崎大師サマーフェスタの「名所めぐりクイズウォークラリーのマップです。

京急(京浜急行電鉄)大師線でお越しの際は、川崎大師駅からは裏門からの方が近く、仲見世(左の画像)~山門経由少し遠回りです。

と言っても、小さな境内なので、どちらからでもどうぞ。

京急川崎駅から川崎大師駅まで5分(日中は10分おき)。川崎大師駅から大師様までは徒歩8分です。

風鈴市の詳細は川崎大師平間寺のHPでどうぞ。

ウォークラリーは毎年海の日(7月21日)行われているもので、親子連れの方達がたくさん参加されているのを見かけます。

各ポイントでは地域に関するクイズ、俳句作り、昔の遊びやクラフト作りが体験できるそうです。(受付:9:00~13:30) 各チェックポイントのスタンプを7つ集めると若宮八幡宮での抽選会に参加できるとのこと。


2014/07/06

【ブログの楽しみ方】アクセス解析:「参照元」が「サイト内」とは/ニックネームについて【ココログ】

まずは、「参照元」と「検索キーワード」に表示される項目を簡単に説明しておきます。

アクセス方法の違いによる表示内容の違い

●検索サイトからのアクセス

「参照元」はどのサイトからアクセスされたのかというアクセス元のことで、例えばGoogleやYahooなどの検索サイト(サーチエンジン)からアクセスされた場合、下記のように表示されます。

Access01

参照元はアイコンで示され、その右に検索キーワードが表示されます。

not providedについては、公式FAQに説明がありますが、検索キーワードだけでなく、参照元にも表示されることがあります。

■参照元ページに表示されている場合
ブックマークからのアクセス、SSLページからのアクセス、携帯電話からのアクセスの場合などが考えられます。

■検索キーワードに表示されている場合
グーグルの検索結果ページがSSLの場合、キーワード取得ができないため、「not provided」と表示されます。

公式FAQ『「not provided」と表示されますが、これは何ですか?

SSLページとは、参照元の情報をブログシステムなどに渡さないように作られているサイトのことです。

 

 


●どこかのサイトにリンクが貼られていて、そこからアクセス

Access04

検索サイトからのアクセスでないときは、そのページのURL(の一部)が表示されます。

この例はweb上にお気に入りサイトなどのブックマークをしておけるサービスで、公開と非公開があるようです。

ちなみに、この参照元はGoogle Webmasterで見つけて、そのサイトを開いてブログ主自身でアクセスしたものです。

Access07

 

●ブラウザに直接URLを入力してアクセス

Access02

参照元は取得できないため、「--」と表示されます。

これは、ブラウザのお気に入りや、メールなどに貼ってあったリンクをクリックしてアクセスしたり、RSSリーダーからブログを開いた場合も同様です。(参考→『【PC】RSSリーダーとは/Windows Liveメールでブログの購読【ブログ主覚書】

 

参照元が「サイト内」とは

ここからが本題ですが、完全に理解(納得)していません。とりあえず分かっていることを書いておきます。

分かりやすいのは、このブログのどこかのページにアクセスしてから、バックナンバーなどから同一ブログ内の他のページ(記事)を開いた場合です。

他には、他のココログ(ブログ)にリンクが貼ってあり、そこからアクセスした場合です。

Access03

たまたま、『参照元種別の合計数と入り口回数の合計数が一致しません。』という公式FAQを見て知ったので、回答を引用します。

内部(他のココログのブログでも内部として扱っています)の
参照元からのアクセスの場合は参照元にカウントしていません。
最初の入口が内部からの場合、参照元種別の合計には加算されません。
そのため、基本的には一致はしない数値になります。

ココログの「ブログ広場」の新着記事などからアクセスした場合も「サイト内」になります。(テストして確認済み)

ここまでは納得できるのですが、ちょっと解せないアクセスログがあります。

下は適当なアクセスログ(足あと)から「直近の足あと」を開いたものですが、個別記事、それもかなり以前の記事に直接アクセスがあって、サイト内と表示されている例です。

Access06

「新着ユーザー」と表示されるのは、一度アクセスをしており、新着ユーザーではないとしても、30分以上経って再度アクセスした場合(画面を開きっぱなしでも同様)もこのように表示されますが、上の例では全くの新着ユーザーのようです。

何故か、スマホからのアクセスがこのように表示されることが多いようなので、なにかカラクリがあるのではないかと思っています。(そのうち原因が分かったら追記します。)

【2014/09/22追記】やはりスマホや携帯からのアクセスは、アクセスの直前にココログドメインがワンクッション入るケースが多いということが分かりました。→『【ブログの楽しみ方】アクセス解析:スマホや携帯からのアクセスが「サイト内」と表示される?【ココログ】

 

訪問者にニックネームを付けたのに機能しない

ココログでは訪問者(ログ上には英数字の文字列で表示)に、覚え書きとしてニックネームを付けられる機能があります。

実際にはブログ主は使っていないのですが、友人などがアクセスしたときに分かるように使う機能なのだと思います。(監視しているようで、ちょっとアレですが...

これはたまたまココログのFAQを呼んでいて面白いと思ったので、覚え書きとしてメモしておきます。

公式FAQ『足あとのニックネーム登録は、IPアドレスが変わると別人として判定されますか?

足あとのニックネーム登録は、閲覧者のブラウザー(cookie)に紐付いて登録されています。
そのため、同じブラウザーを利用している場合は、IPアドレスが変わっても同一人物として判断されます。
※閲覧者のブラウザーのcookieが削除されると同一人物と判断できなくなります。

IPアドレスとは簡単に言えば、インターネット(ネットワーク)上における、PCに個別に割り振られた識別名のようなもので、上の説明では、ニックネームと紐付いているのはIPアドレスではなくてCookie(クッキー)の情報だと言っています。

Cookieとは、あるサイトを訪れたときに、そのサイトがブラウザ(正確には、そのブラウザが使用しているPC上のフォルダ)に書き込んでいる情報(ファイル)のことで、再度そのサイトを訪れたときに、その情報がサイトに送信されます。多くは、その訪問者を識別するために使われ、ネットショップのサイトを訪れたときに、ログインしていなくても、「ようこそ、○○さん」などと表示されるのはこのためです。

このような情報のため、嫌う人もいて、ブラウザを使用するたびに①Cookieを削除したり、②そもそもブラウザでCookieを無効にしていたり、③複数のブラウザを使い、ブラウザ毎に有効/無効の設定を変えている人もいます。

また、④Cookieには有効期限が設定されているので、自動的に消えている場合もあり得ます。

このような閲覧者にニックネームを付けても意味がありません。

 

2014/07/05

【PC】ブログに掲載すると縦長の画像が横になってしまうのを解消する【ココログ】

なぜこのようなことが起こるのか?

 

【原因と対策 概要】

PCなどで画像を見て縦(縦長の画像)なのにブログに投稿すると横(横長)になってしまうというのは、本来は横なのにPCのビューワ(画像表示ソフト)がそう見せてくれているにすぎない。

これを解消するには、投稿前に縦に直してからアップロードする。

 

まずは例を見てみます。

Exif01 図-1

この画像は、吉田建工株式会社様のブログの一つから、許可を得て掲載しています。この記事で使わせていただいた画像もご協力いただいています。ありがとうございました。

スマホやタブレット端末、(最近の)デジカメ(→これらのデジタル撮影機器を、これ以降、単に「カメラ」と表記)で撮影した画像で、ブログに直接掲載すると、端末の画面では縦になっていたものが、ブログでは横になってしまうということがたびたびあるようです。

これは、実は、ブログに掲載すると横に倒れてしまうのではなく、本来は横向きの画像なのに、“縦向きに撮影した”というデータを画像に持っているため、タブレット端末やWindows8(8.1)などの画面上では縦にして見せてくれているだけなのです。このデータを「Exif(イグジフ)データ」などと呼びます。

 

 

Exifとは

一般的にカメラで撮影された画像データはjpeg(またはjpg/ジェイペグ/Joint Photographic Experts Group=この規格を作った団体名が形式名になっている)という形式になっています。これに撮影情報(日付やカメラの機種、露出、絞り、等)が付加されていますが、この情報の形式は「Exif(イグジフ/Exchangeable Image File)形式」という規格に統一されています。

最近のカメラはカメラの向きを感知するセンサーが付いていて、縦長の画像を撮りたくてカメラを時計回りに90度傾けて撮った場合、「向き」=例えば「(右回りに)90度回転して撮影した」というような情報が画像に書き込まれます。

これも具体的に見てみます。

■Picasaを使用して

Exif04 図-2

PicasaはGoogleの提供する無料の画像管理ソフトで、簡単なレタッチや各種エフェクト(効果)をつけられるので利用していますが、図-2のようにExif情報を見ることができます。これを見ると、「方向 90度回転」と表示されています。(Picasaのエフェクト機能については、『【Picasa 3.9】無料のレタッチソフトで画像に効果を与える』で記事にしてあります。)

■Firefoxブラウザのアドオン(Exif Viewer)を使用して

Exif02 図-3

ここでも「画像方向 90度回転」と表示されています。

アドオン(Add-on)とは「追加する(した)機能」という意味で、ここではブラウザ(Firefox)に追加した拡張機能です。このアドオンは「Exif Viewer」というもので、http://araskin.webs.com/exif/exif.htmlからダウンロードしてFirefoxに追加することができます。

このアプリをインストールすると、画像の上で右クリックしたときに表示されるメニューに、「画像のExifデータを表示」という項目(図-4)が加わり、それを選択すると、図-3のようなウィンドウが表示されます。なお、図-3を見ると分かりますが、「ローカルファイル」という項目があるので、ブラウザ上で表示している画像だけでなく、自分のPC(=ローカル)にある画像も指定することができます。

Exif03 図-4

 

Windows8やWindows8.1のExif情報の扱い方

多分、“ブログに掲載した縦向きの画像が横になってしまう”という問題は、特にWindows8になってから経験した方も多いと思います。(ブログ主はメールに添付された画像をフォルダに保存して見ると、自動的に縦に回転してくれるので気づきました。)

カメラで撮影した画像をPCに取り込んだ場合、どこかのフォルダ、例えば「ピクチャ」というフォルダ(※1)に入れることになりますが、Exifの撮影情報を読み込んで自動回転して表示するという機能はWindow8から追加された機能だからです。(→マイナビニュース『OSの使い勝手を左右し、重要な存在となる"エクスプローラー"改良ポイント - Windows 8レポート』)

しかし、この情報を読み取って自動的に回転させてくれないWindows7以前のフォルダ(※2)やブログでは、“元の横向きの画像”のまま表示されてしまうわけです。

Exif15 ※1、※2:「フォルダ」と書いていますが、正確には「エクスプローラー」というアプリ(左のアイコン)でPC内のフォルダを閲覧しています。上の記事はWindows8以降のエクスプローラーが自動回転して表示するようになったと書いています。

試しに、図-2に表示されている画像をココログのウェブページにアップしてみると、既に編集画面で横向きになります。

Exif05 図-5

 

これを解消するには?-概論-

ここまでお読みになって、Exif情報、特に「画像の方向」が縦を“正位置”として保存し直すツールが必要だということはおわかりになると思います。これは通常、そのような機能がある画像編集アプリで行います。

現代では、使っている端末(PC、スマホ、タブレット)だけでなく、OSも様々で、例えば、タブレット端末だけでもiPad(アイパッド)、Android(アンドロイド)、Windows(ウィンドウズ)のタブレットがあります。 そこにインストールされている、あるいはインストールできるアプリも異なるので、自分の環境に合った方法を見つけるしかありません。

残念ながらブログ主はタブレット端末を所有していないので、以下、Windows8.1の環境で、Exif情報が付加されている画像を使って検証し、外部の『タブレットで納得のいく写真に仕上げよう!』という画像アプリを紹介する記事だけご紹介しておきます。(これらのアプリでExif情報の書き換えができるかどうかは分かりません。また2013年10月22日の記事なので、今では他にも良いアプリがあるかと思います。)

あと、ブログに掲載したときに横に倒れたり倒れなかったりする、というのは、センサーが誤操作?しているのかも知れません。実際にきっちり90度傾けて撮影するとは思えないので、許容範囲みたいなのがありそうです。

いずれにしても、Exif情報を自分で確認するのが最も正確ですね。

 

これを解消するには?-各種アプリのテスト-

先にアプリ毎のテスト結果をまとめておきます。(○は成功、×は不成功、×?の理由は後述)

  • ペイント(Windows PCに入っているソフト) ・・・○
  • Adobe Photoshop Elements 11(有料) ・・・○
  • Picasa(無料) ・・・○
  • Jtrim(無料) ・・・○
  • Microsoft フォトギャラリー(無料) ・・・×?
  • Windowsの機能で画像のプロパティを削除/回転 ・・・×

基本的には、画像ソフトに読み込んで、そのまま保存するだけです。読み込んだ際はExif情報に基づいて縦向きになっていますが、保存した画像のExif情報は書き換わっています。

【説明】

■ペイント

これは、Windows パソコンの黎明期からアクセサリとしてインストールされているアプリです。(図-6)これを使うと、縦向きのままExif情報を書き換えてくれます。

下はペイントの操作方法なので、ご存じの方は読み飛ばして下さい。

Exif06 図-6

フォルダから画像を開くときに、直接ペイントを指定することもできます。(図-7)

Exif07 図-7

画像の上で右クリックして表示されるメニューから「プログラムから開く」を選択すると、画像を扱えるアプリの一覧が表示されるので、「ペイント」を選択します。

なお、「規定のプログラムの選択」を選択すると、JPGファイルと紐付けるアプリが選択でき(図-8)、次回から画像をダブルクリックするだけで、毎回そのアプリで開くことができます。

Exif08 図-8

ペイントで画像を開いたあとは、メニューから「名前をつけて保存」→「JPEG画像」で保存します。

ちなみに下はペイントでなにも編集せず、単に別名(exif_paint.jpg)を付けて保存した画像をPicasaで見たところです。Exif情報が「方向 ノーマル」となっており(図-9)、更に下の方を見ると、サムネイルも縦になっています。(図-10)

Exif09 図-9

Exif10 図-10

図-10は図-2の画像(元画像=exif_org.jpg)のサムネイル部分を合成したのですが、Picasa上で縦になっていても、本来は横向きだというのが分かります。

操作方法の違いなので、詳細は省きますが、「Adobe Photoshop Elements 11」(※)や「Picasa」も同様の処理をしてくれます。

※Photoshop Elements公式サイトでは、「EXIF データは、撮影したJPEG形式自体に保存され、また Photoshop Elements で上書き保存してもデータは消去されません。」と記載されているように「画像の方向」以外の撮影データは保持されます。

http://helpx.adobe.com/jp/photoshop-elements/kb/224171.html

■JTrim

これは、無料でダウンロードできるアプリで、例えば下記の場所からダウンロードすることができます。(「窓の社」のJtrimのページ)

http://www.forest.impress.co.jp/library/software/jtrim/

このアプリを使う際は、保存の前に「ファイル」→「保存オプション」で「Exifデータを保持する」のチェックを外しておく必要があります。(図-11)これで保存した画像をPicasaで見ると、図-12のように、画像の向き以外のExif情報も消えているのが分かります。(JTrimは画像を読み込むと縦ではなく、本来の横向きに表示されるので、画像を回転させてから保存します。)

Exif11 図-11

Exif12 図-12

 

■Microsoft フォトギャラリー

MSのアプリで、以前のPicture Managerの後継として、画像や動画ファイル管理の他、簡単なレタッチもできるソフトです。

公式サイトFAQでは、下記のような記述があり、フォトギャラリーを開いてから画像を読み込む場合、“画像の自動回転をオフ”することもできると読み取れますが、オリジナル画像をUSBメモリーに保存して読み込むテストをしてみても、(オフにしてもしなくても)必ず縦向きに表示され、想像しているような結果が得られないので、このアプリの評価は保留とします。

http://windows.microsoft.com/ja-JP/windows-vista/Windows-Photo-Gallery-frequently-asked-questions

「保存した画像が回転してしまいます。回転しないようにできますか?」

写真を縦に撮ったか、横に撮ったかを (通常はカメラの向きを感知するセンサを使用して) 検出できるカメラをお使いの場合、JPEG 画像を保存するとコンピュータで自動的に回転して、向きを修正できます。このオプションを使用する場合、横向きに表示される画像を手動で回転する必要はなく、画像の品質にも影響を及ぼしません。

 

■Windowsの機能で画像のプロパティを削除/回転

これは、Exif情報も一部削除してくれるのですが、試したところ、画像の向きは削除できませんでした。ただ、情報として提示しておきます。

Exif13 図-13

これは、Windows のフォルダで、画像の上で右クリックして表示されるメニューから「プロパティ」を選択して、「このファイルから次のプロパティを削除」を選択(図-14)すると、Exif情報も一部消せるようだったので試してみたものです。(画像は、Picasaの画像と合成してあります。)

Exif14 図-14

Exif情報の一部も削除できますが、主目的ではないようです。

 

 


« 2014年6月 | トップページ | 2014年8月 »

最近のコメント

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2019年7月
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

sponsored link


ドールハウス工作おすすめ参考図書

ドールハウス工作おすすめアイテム(材料・工具)

カテゴリー

無料ブログはココログ