無料版はてなブログのスマートフォンデザインCSSを変更してみる
スマートフォンデザインCSSを変更するには、はてなブログproに登録して「ダッシュボード」－「デザイン」ー「スマートフォン（アイコン）」ー「記事」ー「スマートフォン用にHTMLを設定する」でCSSを記述するのが通常である。
しかし、最近のブラウザの特性やHTMLの知識を使って無料版はてなブログでもスマートフォンデザインCSSを変更することができる。
ページ毎にデザインを変更したい場合
ページの編集画面が「見たままモード」である必要があります。各ページのHTML編集画面にCSSを<style>タグを使用して記述します。
<style>
<!--
/* h3タグの文字列を青にする例 */
.entry-content h3{
color:blue;
}
-->
</style>
この方法の場合、記事を書くたびにCSSをHTML編集画面に貼り付けるので手間がかかります。また、デザインの一括変更ができません。
ページのソースコードを見れば分かりますが、<body>タグ内に<style>タグが出力され、HTMLのお作法に反したページとなります。しかし、最近のブラウザは高機能と言うべきか、融通が利き、<body>タグ内に<style>タグがあっても、ちゃんとデザインに反映してくれます。
PC版とスマートフォンのデザインを統一して一括変更したい場合
一般的にCSSをhtml文章内に記述する方法の1つとして、<head>タグ内に<style>タグを使用して記述する方法があります。
(一般的なタグの記述例)
<html>
<head>
<style>
<!--
/* h3タグの文字列を青にする例 */
.entry-content h3{
color:blue;
}
-->
</style>
</head>
<body>
コンテンツ
</body>
</html>
はてなブログの設定で「ダッシュボード」－「設定」－「詳細設定」－「headに要素を追加」で<head>タグの編集が可能です。ここにCSSを記述することで、PC版デザイン、スマートフォン版デザインを統一することができます。
ページをソースコードを見ると分かりますが、「headに要素を追加」で編集した内容が<head>タグに出力されるため、HTMLのお作法に則ったCSS表記になります。
無料写真、イラスト、素材サイトをまとめ中
印象に残るWebコンテンツの作成に欠かせないイメージコンテンツ。
写真やイラストが入ると記事が一段と分かり易くなります。
無料で利用できるサイトをまとめてみました。少しづつ増やしていきます。
写真AC
| 登録 | 必要 |
| 商用利用 | 可能 |
| クレジット表記 | 不要 |
| 加工・編集 | 可能 |
抽象的なキーワードに対する写真、イラスト、テクスチャが豊富。
無料会員は1日20点まで、ダウンロードするのにウェイト時間がある。Smallサイズは無料であるが、素材によってMedium、Largeサイズは有料。
写真素材 足成
| 登録 | 不要 |
| 商用利用 | 可能 |
| クレジット表記 | 不要 |
| 加工・編集 | 可能 |
アマチュアカメラマンによる素材のためか、具体的キーワードに対する写真が多い。
利用規約にある免責事項も気になる。
当サイトの写真はアマチュアカメラマンが撮影したものによるため、著作権・肖像権に侵害に抵触する可能性のあるものも含まれます。 被写体への許諾が必要と思われる写真については、利用者自らが許諾を得てご利用ください。
ぱくたそ
| 登録 | 不要 |
| 商用利用 | 可能 |
| クレジット表記 | 不要 |
| 加工・編集 | 可能 |
写真数は10,000枚以下であるが、個人運営のサイト主様が選別して、写真の構成、色味、光など、高い品質のものが多い。また、全体的に人物写真が多い。
クレジット表記することで、二次的著作物に対する利用も可能である。詳細は「ぱくたそのご利用規約 | ぱくたそフリー写真素材」を。
ぱくたそでは、少しでも多くの皆様にご利用していただきたいと考え、別途ライセンス費用が発生しやすい、"写真素材そのものが商品価値を決めてしまう販売物（利益をうむ商品）"と、"テンプレートなどの二次配布物"の利用をクレジット表記などで対応しています。 費用は一切かかりません。
