WEBサイトの画像素材サイトの紹介です。
アイキャッチ画像や背景、ロゴなどに使える無料の素材サイトで利用規約を守ればロイヤルティー等は不要で利用できます。
（一部の画像は有料です。）
サイト：写真素材なら「写真AC」無料（フリー）ダウンロードOK (photo-ac.com)
使い方は以下の通り。
欲しい画像のキーワードを検索する。
画像を選んでクリックする。
右側の「ダウンロード」ボタンをクリックすると、アンケートまたは広告が表示されます。
どちらかを終えるとダウンロードボタンが表示されます。
利用する前に素材についての利用方法や禁止事項を確認しておきましょう。
写真のフリー素材サイトです。
基本的に無料ですが、１日のDL制限・検索制限があります。
めんどくさい方は有料のサービスを選択することも可能です。
特定のWEBサイトのRSSを取得して表示するためのブログパーツです。
使い方は、「コード発行」を押してRSSを取得したURLを入力してHTMLタグを貼り付けるだけです。
プランによって表示回数の違いはありますが、無料版でも十分に使えます。
サイト：RSSリスティング – ブログの更新をホームページに表示する無料ツール (berss.com)
「コード発行」ボタンをクリック。
RSSを取得したいWEBサイトのURLを入力し、スタートボタンをクリック。
表示件数等の指定がなければ、作成されたHTMLタグをご自身のホームーページへ貼り付けてください。
とりあえず自分のブログのRSSを取得して表示することができました。
使い方は人それぞれですが覚えておくと今後便利です。
ホームページやブログにご自身のRSSを簡単に表示できるツールです。
オンライン上で「画像拡大・トリミング・バーナー作成・モザイク・合成」など88項目のWEBサイト作成に役立つツールが利用できるサイトです。
登録不要で無料で使えるツール集です。
サイト：画像加工編集サイト – 無料で画像を加工、編集するならバナー工房 (bannerkoubou.com)
使い方は、画像を選択して「画像を加工する」をクリックし使いたい機能を選ぶだけ。
操作性や詳しい使い方を知りたい方は「サンプル画像で試す」で試用できます。
使える機能がいっぱいでWEBサイトに必要なツールが揃っています。
オンライン上で様々なツールを無料で使うことができるサイトです。
約88項目のWEBで役立つツールが利用できます。
以下のタグは全て「<head>〜</head>」内へ追加するタグです。
<html lang="ja">
<meta charset="UTF-8">
<meta name="author" content="管理者名">
<meta name="description" content="ここにWEBサイトの説明を入れる。約１５０文字。" />
<meta name="keywords" content="キーワード１,キーワード２,キーワード３">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="sitemap" href="sitemap.xml">
<link rel="stylesheet" href="/sample.css">
<meta name="robots" content="noindex,nofollow">
<link rel="canonical" href="（サイトのURL）">
<meta name="viewport" content="width=device-width,initial-scale=1">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="og:title" content="WEBサイトのタイトル" />
<meta property="og:type" content="WEBサイトのタイプ（website または blog）" />
<meta property="og:url" content="WEBサイトのURL" />
<meta property="og:image" content="WEBサイトのロゴまたは特徴づけるもの。（/sample.png）" />
<meta property="og:site_name" content="WEBサイトの名前" />
<meta property="og:description" content="WEBサイトの説明" />
<meta http-equiv="refresh" content="5;URL=転送したいURL">
ホームページや無料ブログでパンくずリストを表示する方法をご紹介します。
パンくずリストとは、WEBサイトの記事ページによくある現在の位置を見える化したものです。
【パンくずリストの例】
トップ ＞ カテゴリ１ ＞ 記事タイトル訪問者が「自分のいる階層を知りたい時、一つ前のカテゴリへ戻りたい時」に便利にすることができます。
ホームページやブログを作っているなら必須なタグです。
パンくずリストは、HTMLとCSSを追加することで作成できます。
以下にライブドアブログ用に作成したパンくずリストのコードを載せます。
（ライブドアブログはPCページのみしか対応していません。）
以下のコードを「個別記事ページ」の「<body>〜</body>」へ追加して下さい。
<!--パンくずリストここから-->
<ul id="BreadCrumbs">
<li><a href="<$BlogUrl$>">トップ</a> ＞ </li>
<li><IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>（<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a>）</IfArticleCategory2> ＞ </li>
<li><$ArticleTitle ESCAPE$></li>
</ul>
<!--パンくずリストここまで-->
ライブドアブログの場合は選択したテンプレートによって追加位置が異なります。
おかしなところに表示されるようならその都度、追加位置を変えてみて下さい。
独自タグについて調べたい方はこちらで確認して下さい
ライブドアブログの独自タグ：独自タグ一覧（変数） – ライブドアブログのヘルプ（PC向け） (blogpark.jp)
もし出来ない人は以下を参考にしてみて下さい。
【CSS】
以下のコードをCSSの一番下に追加して下さい。
#BreadCrumbs {
margin: 4px;
padding: 4px;
text-align: left;
}
#BreadCrumbs li {
display:inline;
line-height:100%;
list-style-type:none;
}
他の自作ホームページやライブドアブログ以外のブログを使っている方は、以下のコードを参考にして追加してみて下さい。無料ブログ（ライブドアブログ 、FC2ブログ等）の場合は「独自・変数タグ」が使えるのでそれぞれ修正できると思います。
ライブドアブログの独自タグ：独自タグ一覧（変数） – ライブドアブログのヘルプ（PC向け） (blogpark.jp)
FC2ブログの変数タグ：テンプレート用 変数一覧 | マニュアル | FC2ブログヘルプ
【HTML】
<!--パンくずリストここから-->
<ul id="BreadCrumbs">
<li><a href="（トップページのURL）">トップページ</a> ＞ </li>
<li><a href="（カテゴリのURL）"></a> ＞ </li>
<li>（記事ページのタイトル）</li>
</ul>
<!--パンくずリストここまで-->
【CSS】
#BreadCrumbs {
margin: 4px;
padding: 4px;
text-align: left;
}
#BreadCrumbs li {
display:inline;
line-height:100%;
list-style-type:none;
}
オンライン上で複数の画像やイラストを結合できるサイトです。
ややこしくてめんどくさい画像の結合をクリックするだけで行える便利なサイトです。
WEBサイトだけでなく、オークションやメリカリなどで画像を見てもらう時にも重宝します。
サイト：画像結合ツール｜フォトコンバイン (photocombine.net)
使い方は以下の通り。
画像やイラストを準備します。
「ドラッグドロップエリア」へ画像をドラッグします。
今回は画像が4枚なので、4枚が収まるパターンを選択します。
4枚が収まるものであれば、どのパターンを選んでも構いません。
4枚の画像が結合されて1枚になりました。
「保存」ボタンを押して完了です。
「フォトコンバイン」様の画像結合ツールです。
複数の画像を手間いらずで結合できる便利なサイトです。
文字列やリストなどをワンクリックで並び替えてくれるサイトです。
50音順、ランダム、逆順などに対応しています。
サイト：リスト並び替え：文字列を50音順、ランダム、逆順、文字列長順にソート | ラッコツールズ🔧 (rakko.tools)
使用例）リストを貼り付けて、アルファベット順にします。
「ラッコツールズ工房」様のホームページで使える様々なツール集サイトです。
この他にもドメインやサイト売買、キーワードツールなどがあります。
画像や写真を超解像度で拡大して出力できるサイトです。
URLまたはファイルを選択して実行ボタンを押すだけです。
小さいな画像を大きく綺麗に拡大したい時に便利なサイトです。
サイト：waifu2x (udp.jp)
主に2次元画像の拡大に使われることを想定したシステムです。
標準の設定は、2次元画像（イラスト）向けになっていますので、写真の方はスタイルを変更してください。
ノイズ除去や倍率（最大2倍まで）を選択できます。
「waifu2x」様の画像拡大出力サイト。
主に二次元画像の拡大に特化したサイト。
オンライン上でHTMLコードをプレビューを見ながら修正・編集ができるサイトです。
ホームページを自作で構築している方やコードの確認がしたい方におすすめです。
英語サイトですが、管理画面はよくあるブログサイトのものと似ていますので直感的に使えると思います。
サイト：HTML Editor – Online Web Content Composer (html5-editor.net)
HTMLのコードや右揃え、テーブル、リストなどのコードを忘れた時に役立ちます。
HTMLコードをプレビューを見ながら編集できるサイトです。
3サイトは英語ですが、コードを確認したりするだけなら問題ないと思います。
お好きなサイトで試して見てください。
自作したロゴやイメージをファビコンに変換するサイトです。
全7サイズに対応しています。
サイト：Favicon ジェネレーター (mintsu-dev.com)
変換したい画像を選択したら、画像変換するだけです。
出力された「favicon.ico」をホームページやブログへアップロードします。
これでお終いではなく、HTMLのヘッダー内（<head>〜</head>）に以下のコードを追加して下さい。
<link rel="shortcut icon" href="（アップロード先URL）/favicon.ico">
ファビコンをワンクリックで作成できるサイトです。
最近のコメント