アメブロにアップロードした画像のURLの確認の仕方

どうもこんにちわ！

爪を切るときについつい深爪をしてしまうタマネギボムです。

今回の記事ではアメブロにアップロードした画像のURLがどこにあるのか？

これを今回は解説したいと思います。

CSSでアメブロデザインを作るといった時、これを知っておくと便利ですよ＾＾

デザインの変更→CSS編集から編集画面を開いたことがある方はわかると思いますが

そこに画像をアップロードした場合、画像の下にURLが出ています。

じゃあ画像フォルダにアップロードした場合どこから確認するのか？

『ブログを書く』で記事を編集したことがある方なら知っていると思いますが

右上に『画像』というアイコンがあって、そこから記事に画像を挿入できます。

ここに画像を挿入すると記事内に画像が表示されると思うのですが

その記事の下の部分にHTMLタグを表示という項目があると思います。

そこを押すと記事がHTMLで書かれた表示に変わります。

そうするとずら～っと記号で書かれた文章になると思うのですが

そこの『http～』で始まる記述があると思います。

上の画像の青い部分で『""』で括られた『http://』から始まる部分が

画像のURLなのでこれをコピーしてやればCSS等で使えるというわけですね。

細かいことですが意外としらなかったり、知ってて得することだと思うので

覚えておいて損はないですよ♪

それでは最後まで読んで頂きどうもありがとうございました＾＾

タイトルを編集してみる

どうもこんにちわ＾＾

ブログを管理しているタマネギボムです！

いよいよCSSを編集するということで、今回の記事では

ブログタイトルの編集をしたいと思います！

やはりブログの一番上にあるタイトルというのは目立ちますし

読んでくれている人が絶対に見るところで、ブログの顔とも呼べるところです。

なので、今回はブログタイトルを編集したいと思います。

それではまずはデザインの変更→CSSの編集からCSS編集画面を開きます。

そうするとこういった画面が出てくると思います。

そこから以下のような部分を探してください

/* (1-2) ブログタイトル文字
--------------------------------------------*/

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;/*←タイトル文字の色*/
font-weight:bold;/*←タイトル文字の太さ*/
font-size:2.11em;/*←タイトル文字の大きさ*/
}

これらを編集することで、タイトルが色々と変えられます。

『color』の部分はカラーコードと呼ばれる『#』と６つの数字で色を表します。

これだけでなくred・blue・green・Orange・Yellow など文字での指定も出来ます。

このサイトで色を確認して使いたい色を探して見て下さい。

『font-weight』の部分は文字の太さなのですが

アメブロでは細かく指定することができず、太いか細いかしか選べません。

『font-size』の部分はを数値を大きくすることで文字が大きくなります。

数値を色々入れてみて自分好みの文字の大きさを探してみてください＾＾

今編集しているCSSがどういった感じになっているかを確認するには

画面下の方にある表示を確認するを押してみてください。

ちなみに僕はこういう感じに変えてみました

/* (1-2) ブログタイトル文字
--------------------------------------------*/

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#00BFFF;
font-weight:bold;
font-size:4.5em;
}

これが変更した後のブログ画像です。

自分好みのタイトルになって編集し終わったら、最後に保存ボタンを押します。

CSS編集画面にこれらcolor・font-weight・font-sizeと書かれているところは

すべて、同じように設定できますので、他の場所も試してみてくださいね＾＾

ここでCSSを編集するにあたっての注意点なのですが

まず、colorの後の『：』『；』と半角で書かれた記号がありますよね。

CSSの記述をする際は、この間に必ず数値を指定するようにして下さい。

この間じゃなかったり、または片方が欠けていたりとすると

いくら数値を指定してもブログに反映されません。

癖がつかないうちは、よくありがちなミスなので注意しましょう。

それともうひとつ、編集し終わって保存を押した時

『リクエストは既に処理中であるか無効です』と出るときがあります。

これが出た場合、CSSの編集をしてもブログが変更されていません！

なので、保存を押したから変更されているとすぐに画面を閉じず

この表示がでてないことを確認したうえで、画面を閉じるようにしましょう。

いかかでしょう、タイトルの編集はできましたか？

覚えることが多いですが、何度も記事を読み返してもられば

着実にあなたのスキルになっていくので頑張ってください♪

それでは今日はこの辺で、最後まで読んで頂きありがとうございました＾＾

５つのアメブロレイアウトの特徴

どうもこんにちわ！

ブログを管理しているタマネギボムです＾＾

今回はアメブロに５つある大枠のレイアウトについて解説したいと思います。

CSSの編集はまだ？と思う方もいるかもしれませんが

この大枠を最初に決めておくということはかなり重要なことです。

後からCSSを編集するというのは簡単ではないですし

それにレイアウトの選択によってブログの印象がガラッと変わってくるんです。

なので、あなたが読者数を増やしたい！記事を読んでもらいたい！

と思っているのであれば、おろそかにできない部分なんです。

知っておいて損は無いどころか、得するような記事ですので

是非読んでもらえれば幸いです。

さて本題に入りますが、アメブロデザインには５つのカラムがあります。

ここでいうカラムとは、いわゆるデザインの構成みたいなもので

大きく分けて1カラム、2カラム、3カラムと３つの種類があります。

1カラムとはサイドメニューがなく記事だけのレイアウトで

特定のものを印象強く見せたい、伝えたいといった時に使われます。

サイドメニューがないので、記事以外に何かをすることが難しいです。

2カラムとはサイドメニューもある上で記事をはっきりと伝えたい

そういった時に使われます。

サイドメニューがありながら、読んでくれている人のマウスの移動が少なく、

言いたいことをはっきりと伝えやすいので使いやすいレイアウトです。

ただ、どうしても縦長になりやすいのでページスクロールが大変です。

3カラムとはサイドメニューを両サイドにもってきて、そこに情報を

色々載せたいという時に使うレイアウトです。

全体的に情報が多くなるのでごちゃごちゃしてしまうという印象があり、

記事よりサイドメニューをメインに上手く使う為のレイアウトといえます。

芸能人のブログにはこの３カラムが良く採用されていますね。

アメブロでは1カラムは採用していないのですが一応作ることは可能です。

ここではそういったレイアウトもあるんだ程度に思っておいてください。

さて、次に５つのレイアウトについて解説していこうと思うのですが

その話しの前に読者の目線ということについてお話しします。

例えば、横書きのブログ見た時、基本は左上・右上・左下・右下という

『Ｚ型』の目線の動き方が一般的にすると思います。

そしてもうひとつ、左上を基準に右へいったり、そのまま下にいったりする

『F型』または『E型』の目線の動き方というのがあります。

右下から左上なんていうひねくれた読み方をする人はいないですよね？(笑)

なので、ブログのデザインを作る時に読んでいる人が見やすいよう

レイアウトを選ぶ過程で読者の目線を意識して考えながら

それにそった配慮というのが必要になってくるわけです。

それではそれを踏まえてそれぞれの特徴を解説したいと思います。

■２カラム・メニュー左

このレイアウトはさきほど話した読者の目線を考えると

まずサイドメニューが左にあるので一番最初に読者の目に入ってきます。

なので、サイドメニューから記事を選んでもらうといったスタイルになるので

専門的なことを書いたり、知りたい情報を探すというアーカイブ（書庫）的な

側面が強く、ブログ全体で情報を伝えるといった時に使いやすいです。

イメージ的には図書館を想像してもらえればわかりやすいと思います。

その為に最新記事を更新しても若干わかりにくいのですが

画像を多用することによってパッと見て、記事が更新しましたと

伝えることができるので、画像を使った記事更新が効果的です。

そして画像を多く使った場合、自然と文字数が少なるともいえます。

■２カラム・メニュー右

サイドメニューが右側にあるレイアウトで読者の目線は最新記事にいきます。

ということは最新記事の更新したということが読者に伝わりやすく

なおかつ記事の内容が濃く、文字数が多くなるようなブログに最適です。

最新の情報をメインにおいているので、２カラム・メニュー左が図書館だとしたら

２カラム・メニュー右は新聞というイメージですね。

つまり最新情報をどんどん更新して内容の濃い記事を発信する、または

高めの頻度で読者との繋がりを意識するブログスタイルに向いてます。

■３カラム・メニュー左

２カラム・メニュー左と似たようなところがあり、これも専門性の高い

そういったブログに向いています。

Yahooにもこの形式が採用されていて、機能性の高さから

ブログをホームページ代わりに使いたいといった時に最適なレイアウトです。

ただ、記事の内容が専門性のあるしっかりとしたものでないと

情報量の多さから記事が薄く見えて歯ごたえの無いブログになってしまいます。

なので、例えば新しいアフィリエイト情報をただ載せるだけのような記事では

効果的とは言えず、有益なことを記事に盛り込むことは必須となります。

ライティングに自信がある、有益な情報を提供できるといったことをできる

そういった方に向いているレイアウトだと思います。

■３カラム・メニュー右

一般的なブログに使われるレイアウトで、よく見かけると思います。

読者の目線からバナーリンク（いわゆる広告）等を左にもってきて

それにクリックに誘導することや、twitterやfacebook等のメディアに

アクセスを増やしていくというサイドメニューを上手く使いたいといった時に

重宝するレイアウトだと思います。

３カラム・メニュー左にも言えることですが、記事の書くスペースが

必然的に狭くなってくるので、記事内容が濃いものであるか

狭いことを読者に強いることのできる、ある程度の集客力が求められます。

記事更新がページを開いたときにパッと見わかりにくいので

画像などを使ってアイキャッチして知らせるのが効果的といえます。

■３カラム・右メニュー

これは３カラムなのですが、２カラム・メニュー右と似ている部分があります。

なので、基本的に最新記事を更新していくということがメインで

挟まれているわけではないので記事を読みやすいと言えます。

そしてサイドメニューの規模から他の３カラムと同じく

他のメディアに誘導させやすく文字数が少なくてもそこまでは気になりません。

ただもちろん記事の内容が濃くしないといけないというのと

更新頻度は高くしなければいけないということです。

なので、サイドメニューにアクセスを繋げ、そこから何かに結びつける

手段を持っている方に最適なレイアウトだと思います。

さて、長文になってしまいましたが、ここまでご購読頂きお疲れ様です。

そして読んで頂き誠にありがとうございます。

こうやって初めの大枠のレイアウトを考えるだけでも、自分のブログに

アクセスを増やす手段というのは多く隠されていることがわかりますよね。

自分が作りたいと思っているアメブロサイトに最適なレイアウトを選んで

着実に地盤の固まったデザインを作っていきましょう＾＾

次回からはいよいよCSSを編集していきたいと思います！

それでは最後まで読んで頂き誠にどうもありがとうございました♪