ブログ投稿における注意点とマークアップ方法をまとめ

16020501
良い感じのイメージ画像を設置すると素敵な感じになります。
できれば記事内容に沿ったものを入れると効果的ですね（＾ν＾）

イメージ画像を入れたいけど、どうしたらいいの！？

フリーで使えるサイトを2つほど紹介いたします。
他にも探せばたくさんあるので用途に合わせて使用してみてください。

ぱくたそ – フリー写真素材・無料ダウンロード
みんな大好き「ぱくたそ」。
web上でよく見る画像がたくさんあります。基本的にクレジット表記なしで使える上に、使いやすそうで使いにくい写真盛りだくさん！
※ただし、写真や使用用途によってはクレジット表記が必要な場合がありますのでご注意下さい。
写真素材 足成【フリーフォト、無料写真素材サイト】
同じく人気の足成。
アマチュアカメラマンが撮影した写真を素材として無料で提供しているようです。
※モデルリリースしていない写真の使用については規約を読み問題ない範囲で使用してください。

上記2つにない、もしくは使用したい写真のイメージがある場合は自身の投稿内容に記載してください。
運営側の方で画像の挿入など記事制作補助を行います。

例：>など。

イメージ画像を準備したけど…それからそれから？

16020502
アップロードには2MBのファイルサイズ制限があります。。。
サイズが大きくアップロードできない場合は運営側へ相談なりメールなど送ってください。もしくは画像編集ソフトでリサイズなどを行うことにより制限内に収まるサイズになるかもしれません。

また、ブログに掲載する理想のカタチとしては横長の画像がベストです。
リサイズ出来る方であれば横640px-縦420pxくらいで調整して頂けると綺麗に表示されます。

マークアップって何？？

↑これ、この見出しってどうやって作るの？？

<h2>マークアップって何？？</h2>

h2タグで囲うと見出しデザインが適用されます。
h2見出しより下の小見出しを使用する場合はh3タグで囲うようお願いします。

文章を引用する場合は？

記事を引用する場合はblockquoteタグで囲います。

タラバガニ（鱈場蟹、学名：Paralithodes camtschaticus、英語：Red king crab）は、十脚目（エビ目）- 異尾下目（ヤドカリ下目）- タラバガニ科 (en) – タラバガニ属 (en) に分類される甲殻類の一種（1種）である。タラバガニ属はタラバガニを含む5種からなる。和名に「カニ」の名があるが、生物学上はヤドカリの仲間である。食用に珍重され、分布域の沿岸では重要な水産資源の一つとなっている。

タラバガニ – Wikipediaより引用

こちらの内容をコピペして使うと便利かと思います。

<blockquote cite=“https://ja.wikipedia.org/wiki/タラバガニ” title=“タラバガニ”>
<p>タラバガニ（鱈場蟹、学名：Paralithodes camtschaticus、英語：Red king crab）は、十脚目（エビ目）- 異尾下目（ヤドカリ下目）- タラバガニ科 (en) – タラバガニ属 (en) に分類される甲殻類の一種（1種）である。タラバガニ属はタラバガニを含む5種からなる。和名に「カニ」の名があるが、生物学上はヤドカリの仲間である。食用に珍重され、分布域の沿岸では重要な水産資源の一つとなっている。</p>
</blockquote>
<p><cite><a href="https://ja.wikipedia.org/wiki/タラバガニ target="_blank">タラバガニ - Wikipediaより引用</a></cite></p>

画像を引用する場合は？

d

出典：タラバガニ – Wikipedia

https://ja.wikipedia.org/wiki/タラバガニ

こちらの内容をコピペして使うと便利かと思います。
※注意点として画像はK1ブログにアップロードして使用してください。直リンクしないようにお願いします。 

<img src="https://k-1blog.com/wp-content/uploads/2016/02/d.jpg" alt="d" width="620" height="465" class="alignnone size-full wp-image-357" />
<cite>
<div>出典：タラバガニ - Wikipedia</div>
<a target="_blank" href="https://ja.wikipedia.org/wiki/タラバガニ" class="link">https://ja.wikipedia.org/wiki/タラバガニ</a>
</cite>

文章を定義する場合に使おう

定義リスト
これはこういう内容ですよ～といった用途に使用します。
運営側の方で必要であれば実装しますので、あまり気にせず記事を投稿してください。 
<dl>
<dt><strong>定義リスト</strong></dt>
<dd>
これはこういう内容ですよ～といった用途に使用します。
運営側の方で必要であれば実装しますので、あまり気にせず記事を投稿してください。
</dd>
</dl>

このように検索エンジンにでも文書の構造が認識出来るように記述していくことをマークアップと言います。
マークアップや、色・表現などの装飾に関しても運営側の方で対応いたしますので記事投稿に集中して頂きたいと思います！

テキストの装飾

テキストの色を赤に変えたい！
テキストの色を緑に変えたい！
テキストの色をグレーに変えたい！
テキストの色をピンクに変えたい！

テキストの色を<span class="txt-red">赤</span>に変えたい！
テキストの色を<span class="txt-green">緑</span>に変えたい！
テキストの色を<span class="txt-gray">グレー</span>に変えたい！
テキストの色を<span class="txt-pink">ピンク</span>に変えたい！

必要であればspan class=”txt-○○”で囲うと文字色が変更されます。

テキストを小さい文字に変えたい！
テキストを大きい文字に変えたい！

テキストを<span class="fs-s">小さい文字</span>に変えたい！
テキストを<span class="fs-l">大きい文字</span>に変えたい！

必要であればspan class=”txt-○○”で囲うと文字色が変更されます。

テキストを太文字に変えたい！

テキストを<span class="bold">太文字</span>に変えたい！

必要であればspan class=”bold”で囲うと文字色が変更されます。

合わせ技としてテキストを<span class="fs-l txt-red bold">大きい赤い太文字</span>に変えたい！

合わせ技としてテキストを大きい赤い太文字に変えたい！

最後に

記事投稿に集中できるよう運営側の方で制作補助を行っていきますので不明点や困った点などありましたら気軽にご相談ください。
また、こんな機能が欲しい、あんな見せ方をしたい！など何でも良いのでご意見・要望もお待ちしております。