「インターネットで情報発信!」カテゴリーアーカイブ

説明用の図の作り方(LibreOffice Impress)

Webサイトの記事作成では文字ばかりではなく、説明用の図が多々必要になります。LibreOffice Impressを使用して、説明用の図の作成します。Impressを使用するメリットは、概念図等を簡単に作成することができ、PNG形式のファイルに簡単に保存できることです。

はじめに

LibreOffice Impressを使用して、説明用の図の作成します。

使用したシステム環境

ソフトウェア:LibreOffice / Version 4.4.4.3

Impressで図を作成

何もオブジェクトのないシンプルな状態にします。
create_images_impress_001

背景を設定します。
create_images_impress_002

自由に図を作成します。
create_images_impress_003

Impressで図をPNG形式で出力

「エクスポート」メニューを選択します。
create_images_impress_011

PNG形式を選択します。
create_images_impress_012

サイズを設定します。縦横比が、バランスの良い4:3になっているところがよい感じです。
create_images_impress_013

WordPressでアップロードすると、以下ように図を簡単に表示できます。
create_images_impress_sample

おわりに

LibreOffice Impressを使用して、説明用の図の作成しました。

関連記事(目次)

  1. インターネットで情報発信!

よく使用するスタイルシート(CSS)の書式

よく使用するスタイルシートの書式をまとめておきます。

はじめに

よく使用するスタイルシートの書式をまとめます。
・セレクタの書式(要素の親子関係)
・余白の書式(margin, padding)

セレクタの書式(要素の親子関係)

すべての子要素に有効となる指定方法です。
 指定方法: <親の要素名> <子の要素名>
<CSSの例>

pre.csstest11 span.csstest12 {
	color: #00ff00;
}

<HTMLの例>

<pre class="csstest11">
	<span>
今日は<span class="csstest12">よい天気です。</span>
	</span>
</pre>

<表示例>

	
今日はよい天気です。
	

親の直下の子孫のみ有効となる指定方法です。別の要素を挟むと対象になりません。
 指定方法: <親の要素名> > <子の要素名>
まずは、CSSが有効なケースの記述になります。
<CSSの例(CSS有効)>

pre.csstest21 > span.csstest22 {
	color: #00ff00;
}

<HTMLの例(CSS有効)>

<pre class="csstest21">
今日は<span class="csstest22">よい天気です。</span>
</pre>

<表示例(CSS有効)>

今日はよい天気です。

次に、CSSが無効のケースになります。
<CSSの例(CSS無効)>

pre.csstest21 > span.csstest22 {
	color: #00ff00;
}

<HTMLの例(CSS無効)> ※class指定なしのspan要素が挟まっています。

<pre class="csstest21">
	<span>
今日は<span class="csstest22">よい天気です。</span>
	</span>
</pre>

<表示例(CSS無効)>

	
今日はよい天気です。
	

余白の書式(margin, padding)

「margin」および「padding」で使用する余白の指定方法をまとめます。
・値1個:上下左右
・値2個:上下,左右
・値3個:上,左右,下  ※「間が左右」で覚えるよよいかも
・値4個:上,右,下,左 ※「時計回り」で覚えるとよいかも

おわりに

よく使用するスタイルシートの書式をまとめました。

関連記事(目次)

  1. インターネットで情報発信!

ファビコンとウェブクリップアイコンの作り方

Webサイトに表示するファビコンとウェブクリップアイコンの作成方法をまとめます。

はじめに

Webサイトに表示するファビコンとウェブクリップアイコンを作成し、表示します。

ファビコンとウェブクリップアイコンの代表的なサイズ

代表的なサイズは以下になります。

<ファビコン>
・16×16 もともとのファビコンのサイズ
・32×32 最近のブラウザで使用されているファビコンのサイズ

<ウェブクリップアイコン>※Androidでも表示できます。
・57×57 iPhone用のウェブクリップアイコンのサイズ(Retinaモデルより前)
・72×72 iPad用のウェブクリップアイコンのサイズ(Retinaモデルより前)
・114×114 iPhone用のウェブクリップアイコンのサイズ(Retinaモデル)
・144×144 iPad用のウェブクリップアイコンのサイズ(Retinaモデル)

作成するファビコンとウェブクリップアイコンのサイズ

究極の美しさを求めなければ、大は小を兼ねるので以下のサイズのファビコンとウェブクリップアイコンを作成します。

<ファビコン>
・32×32 最近のブラウザで使用されているファビコンのサイズ

<ウェブクリップアイコン>
・144×144 iPad用のウェブクリップアイコンのサイズ(Retinaモデル)

画像ファイルのico形式への変換

作成した画像(32×32)をPNG形式で作成し、ico形式で”favicon.ico”のファイル名で保存します。

ウェブクリップアイコンの作成

作成した画像(144×144)をPNG形式で作成し、”apple-touch-icon.png”のファイル名で保存します。

画像ファイルのアップロード

作成した画像ファイル(favicon.ico,apple-touch-icon.png)をイメージ用のフォルダ(images等)にアップロードします。

ファビコンとウェブクリップアイコンの指定

HTMLのheaderセクション内で、ファビコンとウェブクリップアイコンの指定を行います。

<ファビコン(例)>

<link rel="shortcut icon" href="http://expr.ictlab101.com/images/favicon.ico" />

<ウェブクリップアイコン(例)>

<link rel="apple-touch-icon" href="http://expr.ictlab101.com/images/apple-touch-icon.png" />

ファビコンとウェブクリップアイコンの表示確認

ファビコンとウェブクリップアイコンの表示確認を行います。表示されない場合は、ブラウザのキャッシュをクリアして再表示させてみます。

関連記事(目次)

  1. インターネットで情報発信!

おわりに

Webサイトで表示するファビコンとウェブクリップアイコンの作成方法についてまとめました。

ムームードメイン ロリポップ!レンタルサーバー

スクリーンショットを取得!

Webサイト作成時に必要となるスクリーンショットの取得方法をまとめます。

はじめに

各プラットフォームでのスクリーンショットの取得方法をまとめます。
・Windows
・Mac
・Linux
・Android
・iPhone/iPod touch/iPad

スクリーンショットの取得方法(Windows)

・全画面の取得方法
「PrtSc」キーをを押す。
・選択画面の取得方法
「Ctrl」-「Alt」-「PrtSc」キーを同時に押す。
・保管場所
Windowsのクリップボード

スクリーンショットの取得方法(Mac)

・全画面の取得方法
「command」+「shift」+「3」キーを同時に押す。
・選択範囲の取得方法
「command」+「shift」+「4」キーを押してから範囲選択を行う。
・選択画面の取得方法
「command」+「shift」+「4」キーを押してから「スペース」キーを押す。

スクリーンショットの取得方法(Linux)

・全画面の取得方法
「PrtSc」キーをを押す。
コマンド:gnome-screenshot
・選択範囲の取得方法
「Shift」+「PrtSc」キーをを押す。
コマンド:gnome-screenshot –area
・選択画面の取得方法
「Alt」+「PrtSc」キーをを押す。
コマンド:gnome-screenshot –window
・その他
※delay指定との組み合わせ技が可能。例えば、以下のコマンドで3秒後にフォーカスされているウィンドウを取得することができます。
コマンド:gnome-screenshot –window –delay=3

スクリーンショットの取得方法(Android)

・全画面の取得方法
スマートフォンの「電源ボタン」と「音量下げるボタン」を同時に1秒程度押す。
・保管場所
/sdcard/Screenshots/

スクリーンショットの取得方法(iPhone/iPod touch/iPad)

・全画面の取得方法
ホームボタンと電源ボタンが同時に押されると撮影される。
・保管場所
「写真」→「カメラロール」

スクリーンショットの取得方法(携帯電話)

・Webブラウザの画面
画面メモ

スクリーンショットを使用できない場合に・・・

コマンドでスクリーンショットを取得できない場合には、デジカメ(スマホ等)で取得すればよいのです。「デジカメ(スマホ)をスキャナの代わりに使用!」を参照いただきたく。

おわりに

各プラットフォームでのスクリーンショットの取得方法をまとめました。

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

WordPressサイトのバックアップを取得!

サイトの更新を開始したら、合わせてバックアップを取得します。今回は、パソコンに取得する方法を整理します。

はじめに

WordPressで作成した情報発信サイトのバックアップを取得します!

バックアップの取得対象

WordPressでサイト構築した場合のバックアップ対象は、以下になります。
・DBデータ
・WordPressのファイル群

DBデータのダウンロード(phpMyAdmin)

phpMyAdminにログインします。
db_backup_000m.png
バックアップするデータベースを選択します。
db_backup_001m.png
エクスポートをクリックします。
db_backup_002m.png
デフォルトの設定のまま、「実行」をクリックします。
db_backup_003m.png
エクスポートデータをダウンロードします。
db_backup_004m.png

データファイルのダウンロード

WinSCPを使用してダウンロードします。WordPressの各テーマの”wp-content”フォルダをバックアップします。
web_backup_002m.png

おわりに

バックアップは自動化したいところですが、常時起動しているマシンがない場合は、サイトの更新後、パソコンにバックアップを取得します。

関連記事(WordPressサイトの運用)

  1. WordPressサイトのバックアップをパソコンに取得!

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

Googleアナリティクスのトラッキングコードを設定

Googleアナリティクスのトラッキングコードを各ページに設定します。

はじめに

Googleアナリティクスのトラッキングコードを各ページに設定します。
・SEO All in Packを使用してトラッキングコードを設定
・ページに埋め込まれたトラッキングコードを確認

SEO All in Packを使用してトラッキングコードを設定

SEO All in Packを使用して、Googleアナリティクスのトラッキングコードを全ページに設定します。Google Settingsで、以下の通り設定します。
・GoogleアナリティクスID  :取得したトラッキングID
・Use Universal Analytics :チェックオン
・Advanced Analytics Option:使用
setup_googleanalytics_011

ページに埋め込まれたトラッキングコードを確認

ページのソースを確認すると、トラッキングコードが埋め込まれていることが分かります。
setup_googleanalytics_012

おわりに

Googleアナリティクスのトラッキングコードを各ページに設定しました。

関連記事(目次)

  1. インターネットで情報発信!

Googleアナリティクスのアカウントを作成

Googleアナリティクスのアカウントを作成します。作業に入る前に、Googleアナリティクスで使用するGoogleのアカウントを事前に作成するか、既存のアカウントを使用するか決めておきましょう。

はじめに

Googleアナリティクスのアカウントを作成します。

Googleアナリティクスのアカウントを作成

Googleアナリティクスのホームページから、Googleアナリティクスで使用するGoogleのアカウントでログインします。
setup_googleanalytics_001
ログイン後、Googleアナリティクスの使用を開始の「お申し込み」ボタンを押します。
setup_googleanalytics_003
分析対象のサイト情報を入力して「トラッキングIDを取得」ボタンを押します。
・アカウント名     :expr.ictlab101.com
・ウェブサイト名    :ICT実験室
・ウェブサイトのURL   :http://expr.ictlab101.com/
・業種         :なし
・レポートのタイムゾーン:日本
setup_googleanalytics_004
setup_googleanalytics_005
setup_googleanalytics_006
利用規約に同意すると、「トラッキングID」と「トラッキングコード」が表示されるので、テキストファイルに控えておきます。

おわりに

Googleアナリティクスのアカウントを作成しました。

関連記事(目次)

  1. インターネットで情報発信!

Googleウェブマスターツールの構造化データのエラーを回避

Googleウェブマスターツールの構造化データの画面を確認すると、大量にエラーが出力されていました。Twenty ThirteenのデフォルトのHTML出力が、HTMLの規約に沿っていない部分があるためとのことですが、きちんと対応するのは難しい模様。とりあえず、Googleウェブマスターツールで検知した構造化データのエラーを回避を試みます。
using_webmastertool_031

はじめに

Googleウェブマスターツールで検知された、以下の構造化データのエラーを回避します。
・「updatedがありません」
・「authorがありません」
・「ノードが空です」
※構造化データテストツールを使用すると、「updatedがありません」、「ノードが空です」ではなく、以下の「ノードが空です」のエラーが表示されます。
using_webmastertool_034
以下のテンプレートを変更して、構造化データのエラーを回避します。
・テンプレート(functions.php)の変更
・テンプレート(page.php)の変更

テンプレート(functions.php)の変更

テンプレート「functions.php」を変更して、固定ページと投稿ページで作成日と修正日を出力するようにします。修正日は、class名を「updated」にして出力します。

<修正日を表示>

	if ( ! has_post_format( 'link' ) && ( 'post' == get_post_type() || 'page' == get_post_type() ) ){
		echo '作成日 :';
		twentythirteen_entry_date();
		echo '<br />';
		echo '修正日 :';
		twentythirteen_entry_update();
	}

<作成者を修正>※クラス名「url fn n」を「url fn」に修正します。

	// Post author
	if ( 'post' == get_post_type() || 'page' == get_post_type() ) {
		echo '<br />';
		echo '作成者 :';
		printf( '<span class="author vcard"><a class="url fn" href="%1$s" title="%2$s" rel="author">%3$s</a></span>',
			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
			esc_attr( sprintf( __( 'View all posts by %s', 'twentythirteen' ), get_the_author() ) ),
			get_the_author()
		);
		echo get_the_author();
	}

<修正日を取得>※twentythirteen_entry_date関数をコピーして、twentythirteen_entry_update関数を新規に作成します。修正日は、get_the_modified_date関数で取得します。

if ( ! function_exists( 'twentythirteen_entry_update' ) ) :
/**
 * Print HTML with update information for current post.
 *
 * Create your own twentythirteen_entry_update() to override in a child theme.
 *
 * @since Twenty Thirteen 1.0
 *
 * @param boolean $echo (optional) Whether to echo the date. Default true.
 * @return string The HTML-formatted update date.
 */
function twentythirteen_entry_update( $echo = true ) {
	if ( has_post_format( array( 'chat', 'status' ) ) )
		$format_prefix = _x( '%1$s on %2$s', '1: post format name. 2: date', 'twentythirteen' );
	else
		$format_prefix = '%2$s';

	$date = sprintf( '<span class="updated"><a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s">%4$s</time></a></span>',
		esc_url( get_permalink() ),
		esc_attr( sprintf( __( 'Permalink to %s', 'twentythirteen' ), the_title_attribute( 'echo=0' ) ) ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( sprintf( $format_prefix, get_post_format_string( get_post_format() ), get_the_modified_date() ) )
	);

	if ( $echo )
		echo $date;

	return $date;
}
endif;

テンプレート(page.php)の変更

固定ページでも文書情報(作成日/修正日/作成者等)を表示するように、テンプレート「page.php」にtwentythirteen_entry_meta関数を追加します。

					<footer class="entry-meta">
						<hr class="hr-article-info-top" />
						<div class="article-info">
							<?php twentythirteen_entry_meta(); ?>
							<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
						</div><!-- .article-info -->
						<hr />
					</footer><!-- .entry-meta -->

結果は・・・

以下のグラフの赤線が示す通り、時間をかけてゆっくりと減っていきました。ページがクロールされるタイミング減っていくようです。
using_webmastertool_035

おわりに

文書情報(作成日/修正日/作成者等)の出力を修正して、Googleウェブマスターツールで検知された、構造化データのエラーを回避しました。

関連記事(目次)

  1. インターネットで情報発信!

Googleウェブマスターツールでインデックスを促進

Googleのロボットがクロールすることによって、サイトの内容が取得および解析され、Googleにインデックスされます。いつかは、Googleがサイトを発見してくれインデックスされそうですが、Googleウェブマスターツールを使用すれば、サイトマップを使用して直接Googleにクロールを依頼して、インデックスを促進することができます。

はじめに

Googleウェブマスターツールを使用して、インデックスを促進します。

Fetch as Google画面を表示

Fetch as Googleのメニューを選択して、Fetch as Googleの画面を表示し、「取得」ボタンをクリックします。
fetchasgoogle_001

ステータスを確認

スタータスが「完了」であることを確認し、「インデックスに送信」ボタンをクリックします。
fetchasgoogle_002

インデックスを送信

「このURLと直接リンクをクロールする」ボタンを選択してクリックします。
fetchasgoogle_003

インデックスの送信結果を確認

インデックスの送信結果を確認します。
fetchasgoogle_004

取得してレンダリングを実施

今度は、「取得してレンダリング」ボタンをクリックします。
fetchasgoogle_005

レンダリング結果を確認

レンダリング結果を確認します。表示が崩れていなければよいかと。
fetchasgoogle_006

おわりに

Googleウェブマスターツールを使用して、インデックスを促進しました。

関連記事(目次)

  1. インターネットで情報発信!

Googleウェブマスターツールでサイトマップを登録

Googleウェブマスターツールでサイトマップを登録します。

はじめに

Googleウェブマスターツールでサイトマップを登録します。

サイトマップの追加画面を選択

サイトマップのメニューを選択して、サイトマップの追加画面を表示し、「サイトマップの追加/テスト」ボタンをクリックします。
create_sitmap_021

サイトマップのファイル名の入力とテスト

ダイアログで、「sitemap.xml」を入力して「サイトマップをテスト」ボタンをクリックします。実際のサイトマップは、圧縮しているため「sitemap.xml.gz」ですが、Googleウェブマスターツールでは、「sitemap.xml」で問題なく使用できます。
create_sitmap_022

サイトマップのテスト結果を表示

サイトマップのテスト結果を表示します。エラーが無いことを確認します。
create_sitmap_024

サイトマップのファイル名の入力と送信

今度は、ダイアログで、「sitemap.xml」を入力して「サイトマップを送信」ボタンをクリックします。
create_sitmap_025

サイトマップの送信結果を確認

サイトマップの送信完了の画面が表示されたら、「ページを更新する。」のリンクをクリックします。
create_sitmap_026
サイトマップの登録結果が表示されることを確認します。
create_sitmap_027

おわりに

Googleウェブマスターツールでサイトマップを登録しました。

関連記事(目次)

  1. インターネットで情報発信!