アメブロデザインカスタム | WEBデザイナー「スイ」のオリジナルアメブロデザイン -20ページ目

アメブロデザインカスタム | WEBデザイナー「スイ」のオリジナルアメブロデザイン

アメブロデザインを魅力的に♪[アメブロカスタム受付中]

今日のカスタムは、過去記事を編集したいなと思ったときに、
その記事からワンクリックで編集画面に飛べるリンクの設置です。

『過去記事ワンクリック編集リンク設置』
$アメブロデザインカスタム


上記画像のように各記事フッターに編集するリンクが設置されますので
ワンクリックでその記事の編集ができるようになります。

一度投稿が完了してから読み直すと誤字脱字があったり・・・。
書き直したくなることもしばしばありますので、すぐに編集出来るリンクが
あると便利ですね!

設置方法
フリープラグインへ下記のソースをそのままいれてみてください。
フリープラグイン画面はこちら
<script type="text/javascript"><!--
$(function(){
$('.entry .foot a:first-child').each(function(){
var myAA=$(this).attr('href');
$(this).after('<a style="margin-right:10px;margin-left:10px;" href="http://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+myAA.substr(myAA.length-16,11)+'">この記事を編集</a>');
});
});
//-->
</script>


以上で設置できるかと思います。
是非お試し下さいね!
今日は文章を書くに当たって、一番気を使いながらブログを書くことにします。
なぜなら、この記事は読みやすさについて言及する記事だからです。

せっかく書いたブログの記事が、文字の大きさだったりフォントの指定だったり、
行間の問題で読みにくいものとなっていたらとても損をしています。
それは、“思った以上にユーザーの皆さんは流し読みをしている”ために、
読みにくい文字だと読むことをやめてしまうからです。

ブログを書いている本人は丹誠込めて、想いを文章にしていきますが、読む側からすると
良い記事かどうかは最期まで読んでみないとわからないのです。

今回は記事の内容についてではなく、記事を読みやすくするための『文字』について、
私なりに色々と調べて分かってきたことを書きたいと思います。

ブログを構成する文字と文章の要素として大きく6つの要素があります。

(1)文字の大きさ
(2)文字のフォント
(3)文字のカラー
(4)文章の行間
(5)改行
(6)見出しのつけ方

この6つの要素によって文章が読みやすいかどうかが決まってくるのです。

早速この6つの要素について、一つずつ私なりの解説をしていきたいと思います。

(1)文字の大きさ
文字の大きさはフォントサイズで12pxが標準的な大きさで良く使われているようです。
文字の大きさは主観的要素が強いために、人それぞれ読みやすさが異なる
要素ですがコンパクトタイプのノートパソコンで12pxの文字を見ると、
少し小さくて読みにくい感じを受けます。

そこで14pxで試してみたところ、違和感なくしっくりと文章を読むことが
出来ました。(あくまで私の主観です)
今度は16pxで試してみたところ、少し大きいかな?と感じる大きさでした。

一般的な意見はどうなのだろうと、検索してみたところフォントサイズに
ついての読みやすさアンケート集計を行っているサイトを発見。

読みやすさアンケート結果 (1)文字サイズ

14pxが一番多くの人が読みやすいと答えていました。次いで15px。
これはもう14pxか15pxで作っておいたほうがいいということですね。

一つフォントサイズについて解決しました。



(2)文字のフォント
ホームページでもブログでもフォントの種類をCSSで指定して
表示することができます。どんなフォントが読みやすいのか。
ネット上で色々検索していたところ、『メイリオ』が読みやすい
という記事が幾つも出てきました。『メイリオ』とはWindows Vista
以降で標準搭載された新しいフォントでWindows XPより前のPCでは
別途インストールする必要があります。
『メイリオ』の語源は「明瞭」からきているようです。
まさに明瞭なフォントですね。

私の構築するブログでも『メイリオ』表示するようCSS指定をしています。



(3)文字のカラー
カラーの使い方は基本、はっきりとしたカラーをメインに使い、
強調したい箇所を赤や濃い目の別カラーで配色をするというのが
一般的です。これで私も良いと思います。一番伝えたい箇所に
配色してあげる。これをセオリーとすることにしました。

間違ってもむやみにカラフルにしたり、薄いフォントカラーで
読みにくくしてしまったりしないように心がけたいところです。



(4)文章の行間
行間については先ほど取り上げた、ミノタウロスさんのアンケートで
実施されていました。こちらは%表示で取り上げられていますが、
140%が一番。次に160%。そして150%となっていました。ということは、
平均をとって150%にて作成しておけば間違いなさそうです。

ちなみに150%という表示方法は1.5emと表示するのと同じ値となります。

読みやすさアンケート結果 (2)余白、行間



(5)改行
ブログを書くときに最も気をつけたいことが『改行』です。
文字の大きさやフォントは、予めCSSで指定していれば固定されます。
毎回記事を書くごとに気をつける必要はあまり無いのですが、
改行はCSSでは指定できません。

これこそ、文章を綺麗に読みやすくするために、心がけないといけないこと
なのかもしれませんね。

一般的に一行の文字数は25文字から30文字が読みやすいとされているようです。
これはブログのサイズや文字の大きさによっても左右されますので、一概に
25文字から30文字に合わせるというよりも、サイトの幅に合わせて読みやすい
改行を自分で見つけることが良いと思います。

幅が細いサイトであれば25文字も入らない可能性もありますし、幅広のサイトで
25文字だとあまりにも短く感じるかもしれません。
バランスが大切だと思います。

ちなみに改行を意識して今回の文章は買いてみましたが、なかなか綺麗に
まとめることって難しいですね・・。



(6)見出し
他の人のブログを読んでいるとき違和感なく読みやすいな、と思うサイトが
あります。このサイトをよくよく見ていると、見出しのつけ方がとっても上手で
なるほどなと感心させられます。

見出しをうまく使えば文章がすっきり見えますし、目次的に途中から読みたい
箇所だけを見つけて読むこともでき、とても効果的です。

全く見出しがないと、最初からずっと読みすすめなければいけないので、
最後にとっておきの情報を盛り込んだとしても、途中で読むことをやめ、
とっておきの情報に辿り着く前にすでにサイトから離脱してしまっていた、
ということもしばしばあるのです。

見出しは有効的に使い、読者の方に優しい作りを目指したいですね!

最後にこの文章、本当にうまく書けているのかどうか不明です。
この記事がより読みやすい文章を作るための、心がけにつながれば、
それでいいなと思っております。

今日も真面目な文章をお届けしました。















木村様、ご依頼ありがとうございました!

☆製作したアメブロカスタムデザインはこちら☆
http://ameblo.jp/rightbj/

$アメブロデザインカスタム


木村様のご紹介
ストーリー戦略を使ったブランディングのコンサルをしているコピーライターの方です。

FaceBook
http://www.facebook.com/tamotsu.kimura?sk=info
Twitter
http://twitter.com/#!/kimutamo



【声】木村様より制作に関してに感想をお客様の声としていただきました☆
お忙しい中ありがとうございます。

木村様『スイさんのアメブロサービスに出会ったとき、ピンときて、背筋に電流が走りました。
探していたのは、この人だ!と…。実際にブログを通じてお仕事依頼をしてみて、その期待は、150%叶えられました。
こちらの要望・ニュアンスを汲み取っていただいたうえで、スイさんのセンスが加わることで、さらに完成度の高い仕上がりでブログがカスタマイズされました!
製作スピードもこちらの依頼が追いつかないほど早く「プロだなぁ~」と。
ブログに“駆け出し”なんて書いてありますが「本当の顧客満足」
ということを知っている稀有なWEBデザイナーだなぁ…と感心いたしました。


ほ、ほめすぎです。。
木村様この度はご依頼ありがとうございました。
また、ブログでの情報交換お願いいたします☆
人生とは・・。について学ばせてください。

こんにちは☆スイです。
アメブロのカスタムサービスポイントを更新しました。

11のアメブロのカスタムポイント
を基本にカスタムします!

そこでサイトのキャプチャー画面を使って11のポイントをご紹介致します。


$アメブロデザインカスタム




①ヘッダー
・ヘッダーの画像作成
・ブログタイトルのカスタム
・メンバーメニューのカスタム

②全体の背景
・全体背景の背景作成/カスタム

③メインメニューバー
・メニューバーの設置(お好きなリンクが付けられます)

④サイドメニュータイトル
・サイドメニュータイトルの背景作成/カスタム

⑤投稿タイトル
・投稿タイトルの背景作成/カスタム

⑥読者登録ボタン
・読者登録ボタンをオリジナルに変更します。

⑦ソーシャルボタン
・Twitter・FaceBookへのリンクボタンを設置

⑧フッター
・通常アメブロにはないフッターを設置

⑨投稿本文
・本文の文字フォントカスタム
・本文の文字サイズカスタム

⑩広告
・広告ノ文字サイズフォント/幅調整のカスタム
※広告を非表示にするにはアメブロのプレミアムに申し込む必要あり

⑪サイトの幅
・サイトの幅のカスタム
※画面の大きさによって伸縮するカスタムも可能!


以上大きな11のカスタムポイントでした!


さらにこんなこともしたいんだけど・・・
という方のためにこんなサービスもオプションで用意しました。

気になるワンランク上を目指すアメブロカスタムオプション

ヘッダー画象のみ・パーツ画象のみのアメブロパーツ作成サービスも

ブログレイアウト
アメブロカスタムではレイアウトを下記の5つの中からお選び頂きます。

アメブロカスタム[受付中] アメブロカスタム[受付中] アメブロカスタム[受付中] アメブロカスタム[受付中] アメブロカスタム[受付中]



その他細かい調整やレイアウトの幅の調整カスタムなども行っております。

全部込みでスイの特別価格??でご提供します。

アメブロカスタム価格とご依頼の流れ



$アメブロカスタム[受付中]