アメブロの字を濃くしたい

内藤です

文字の色を濃くする(黒)にするだけでも読みやすさ、読まれやすさは違ってきます。

アメブロでは、最初濃いグレー(#333333)が設定されています。特に記事とメッセージボード(トップページの記事の上)は、黒にすると反応も変わります

「CSS編集用デザイン」を選択している場合、CSSに

.articleText,.skinMessageBoard{
color:#000000;
}

を入れると記事内とメッセージボード内の文字が黒(#000000)になります。

アメブロの記事をバックアップする方法

内藤です

万が一アメブロのアカウントが削除されてしまったら…

せっかく書き溜めた記事は、大事な資産です。それをまた1から書いていくのは大変です。
ですから、バックアップは取っておきたいのですが、アメブロには元々バックアップ機能がありません。

そこで、いくつかバックアップを取る方法を紹介します。


1.メモ帳などにバックアップを取っておく

メモ帳などパソコン上で記事を書き、それをアメブロにコピーすれば、アメブロがなくなってしまってもパソコン上には残ります。
※画像は別でパソコン内に保存しておく必要があります。

すぐに簡単にできる方法ですね。


2.wordpressを使ってバックアップする

wordpress(ワードプレス)のプラグインを使って、アメブロの更新情報を読み込ませてバックアップする方法です。

ⅰ.「feedwordpress」をインストール

ワードプレスの管理画面の [プラグイン] ⇒ [新規追加] からfeedwordpressを検索します。



見つかったら、インストール ⇒ 有効化します。

有効化すると、管理画面のメニューに「Syndication」という項目が追加されます


ⅱ.取り込むブログの設定

[Syndication] ⇒ [Syndication]から設定画面に移ります。

「New source」の部分に、取り込みたいブログのURLもしくは、フィードのURLを入力し、「Add→」をクリックします。

■フィードのURLはアメブロのサイドバーにあるRSSボタンをクリックして、表示されるページのURLです。



※アメブロの場合、PRも一緒に読み込んでしまいます。こちらの「RSS広告削除社」さんでPR投稿をなくしたURLにすると良いでしょう 

feedが見つかると、どのfeedを使うか聞いてきますので、RSS2.0などを選び「Use this feed」をクリックします。

すると、取り込み可能なブログとして表示されます。

ⅲ.feedを読み込む

「いますぐ更新」を押して、読み込むことが可能ですが、Settingから詳細を設定しておきましょう

Settingの Feed、投稿、カテゴリで詳細設定も可能です。

■feed

アップデート(更新チェック)のスケジュールを設定したり、既に読み込み済みの投稿がある場合の設定などが可能です

※[Syndication] ⇒ [Feed&Updates] から



Update SchedulingのUpdatesを『automatically check for updates after pages load』に切り替えます。



これで、自動アップデートがオンになります。最後に『変更の保存』を忘れないように。

※自動アップデートができない場合

[Syndication] ⇒ [Syndication] のページで、このようなグレーの背景の注意がでていると自動アップデートがされません



「自動アップデートの設定がオフになってますよ」というお知らせです。

お知らせのなかにある『Feed & Update Settings.』をクリックして確認してみてください

■投稿

読み込んだ記事を公開、下書き等にするかを設定できます。
記事タイトルをクリックした時に、元のブログへ移動するか、wordpress内の個別記事に移動させるかなども設定できます

※[Syndication] ⇒ [Posts&Links] からでも可能です



『Save syndicated posts as drafts』を選択すると、下書きとして保存されます


■カテゴリ

カテゴリ(アメブロのテーマ)をどうするか設定できます

[Syndication] ⇒ [Categories&Tags] からでも可能です


アメブロのテーマと、wordpressのカテゴリで正しく整合性がとれません。

『バックアップ』など、カテゴリを作って、そこに投稿されるようにしておくと良いでしょう

これで定期的に、元のブログを読み込んでくれます。

●この方法は、新しい投稿を読み込む方法です。古い過去記事は読み込まれません。

古い過去記事もバックアップさせる場合は、FC2ブログの引っ越しサービスを使います。
アメブロ ⇒ FC2 ⇒ wordpress という流れでバックアップします。


FC2お引越しツール

まずはこちらから申込みます。



ただ使うには、FC2ブログを持っていなければいけませんので、まだない場合は上記リンク先から新規登録すればOKです。

データの移行は数日かかります。

FC2ブログにデータが移行したら、今度はwordpressにデータを移行します。

●FC2ブログの管理画面から [ツール] ⇒ [データバックアップ]

●バックアップの全ての記事の『ダウンロード』をクリックします



●次に画像ファイルをバックアップします
『リストを開く』をクリックします。



画像が1つ1つ表示されます。



1つ1つ面倒ですが、右クリックから、『名前を付けて保存』から、名前は変えずにパソコン内の分かりやすい場所にまとめて保存します。

●画像URLの変換

次に、ダウンロードした記事ファイルの中で画像を指定しているURLが、FC2ブログ用のアドレスになっているので、wordpress用に変換します

Meryなどのエディターで開きます

↓の赤文字になっているところが、画像URLになっています。

例えば http://blog-imgs-55.fc2.com/o/m/g/omgrhanabi/2012090814552025c.png がFC2用のURLですので、これをワードプレスように置き換えます。

最後のファイル名は変えずに、 http://自分のドメイン/wp-content/uploads/2012090814552025c.png のように。

※この場合、自分のワードプレスの画像ファイルが  自分のドメイン/wp-content/uploads/ 内にあるという事です

最後に保存する際に、文字コードを『UTF-8』にします。

●画像をワードプレスが入っているサーバーにアップロードする

FFFTPなどの、FTPソフトで、画像をサーバーにアップします。
※FFFTPについてはこちら

先ほど、画像URLで書き換えたサーバー内を指定して、そこに画像をアップロードしていきます

●記事ファイルをワードプレスにインポートする
今度は、FC2からダウンロードした記事亜フィルをワードプレス内にインポートします。

ワードプレスの管理画面から  [ツール] ⇒ [インポート] 


「Movable TypeとType Pad」をクリックします。



『インポートツールのインストール』とでてきますので、インストールします。

ツールを実行して、『ファイルを選択』して、ダウンロードしたファイルを選択します



インポートする記事の投稿者を選択します。



新しい投稿者を作ることもできますし、既存(すでに使っている自分)の投稿者を選択することもできます。

最後に『Submit』をおして完了です。

以上で、古い記事も アメブロ ⇒ FC2 ⇒ ワードプレス と移行できました。
ただし、アメブロのテーマと、ワードプレスのカテゴリが一致しなかったり、一部インポートできないような記事(アメンバー記事など)もありますので、同期をとるというよりも、万が一のバックアップとしてとらえておいた方が良いでしょう。

3.ツールでバックアップ

有料ですが、バックアップ機能が付いたツールもあります

◆アメブロ記事バックアップ、読者登録管理

アメーバキング

ボタン1つで全記事、全写真をパソコン内に保存してくれます。

月額2980円


◆アメブロ×WordPress自動連動ツール



アメプレス

1クリックでwordpressとアメブロを連動できるます。wordpressで書いた記事をアメブロに自動投稿することも可能です

月額2980円~


いずれかの方法でバックアップ取ってみてくださいね

相手に伝えるURL間違っていませんか?

内藤です


ブログの記事を見てもらおうと思ったときに、記事のURLをかきますよね?

時々、このようなURLを知らされることがあります。

http://blog.ameba.jp/ucs/entry/srventrypreview.do

これは、記事を書くページある 「表示を確認する」 をクリックしたときのURLです。

つまり、プレビュー画面。

プレビュー画面は、ログインしているブログのものになりますので、僕がクリックすれば僕の管理画面が表示されます。


自分のブログのURLには、必ず自分のアカウントがつきます。

例えば
http://ameblo.jp/analognet/entry-11506575617.html

という記事ならば、 僕のアカウントの 「analognet」 がつきます。


相手に知らせるときには、自分のアカウントが入っているURLか確認しましょう

ブログに使う画像の幅って?

内藤です。


「ブログに使う画像の幅って、どれくらいだろう?」

こんな風に思われたことはありませんか?


●今の新しいデザインの場合ですと(カスタマイズしない場合)

記事内の画像幅(3カラム) 405px
記事内の画像幅(2カラム) 600px

サイドバーのフリースペースに入れる画像幅(通常側) 180px
サイドバーのフリースペースに入れる画像幅(ワイド側) 300px

画像を使う場合覚えておくと便利ですね。


こちらの画像縮小サイトで画像の大きさを調整すれば、フルサイズとして挿入することができますね。

フリースペースに画像を入れるには

内藤です。


サイドバーのフリースペース。

文字や画像も自由に貼り付けることができます。

ただ、フリースペースの編集から、画像がアップロードできません。


そこでつまづいてしまう方は少なくありません。

「HTMLタグわかんないし…」と。


なので、通常のように記事を書く要領で、記事の編集画面を開きます。

フリースペースに入れたい画像も画像ボタンからアップロード、記事に追加で入れていきます。

画像の横幅はフリースペースの幅を考慮したサイズの画像をアップロードします。(ワイドサイドバーは300px程度、狭い方は180px程度)

編集が終わったらHMTL表示にして、HTMLタグをコピーします。
タグ編集エディタなら、そのままコピーします。

[アメーバのサービス一覧] ⇒ [フリースペース編集] に切り替え、貼り付けます。
これでフリースペースに画像を貼り付ける事も簡単になります^^

センスがなくても分かる配色

内藤です。


ブログをカスタマイズする時に、悩めるのが色使いです。

色が与える印象は大きく、ちょっと変えただけで、反応が大きく変わるものです。

でも、なかなか配色というのはセンスが求められて難しいですよね。

そんな方にとても参考になるのがこちら

色彩センスのいらない配色講座

凄くわかりやすくて、配色の参考になります


是非見てみてくださいね

旧デザインの記事タイトルがリンクになっています

内藤です。


旧カスタム可能デザインの「ベーシック」をお使いの方は、最近記事タイトルの色が変わっていませんか?


記事タイトルがクリックできるようになり、個別記事へ飛ぶようになりました。

そして、記事下にあった「記事URL」がなくなっています。

新しいデザインと同じ仕様になっています。


で、記事タイトルの文字色を変えたい場合ですが


CSSに

.entry h3.title a{
color:#000000;
}


を追加すると、黒字になります。


色が変わってやだな~ と思っている方は修正してみてくださいね。

※「CSS編集用デザイン」などの新デザインの方には関係ありません。

定型文を枠で囲って見やすくするには

内藤です

記事の最後やサイドバーのフリースペースには、営業の案内や営業に関する記事へのリンクを表示させておきたいものです。

定型文を用意しておくと便利です。

こちらを、記事の場合はタグ編集エディタ、またはHTML表示に切り替えて、貼り付けてみてください。 フリースペースにも使う事ができます

<div style="background-color:#EEEEEE;border:1px solid #666666;padding:10px;">
<a href="ここにメニュー記事のURL">メニュー一覧</a>
<a href="ここにアクセス記事のURL">お店までの道のり</a>
<a href="tel:ここに電話番号">表示させる電話番号</a>
【営業時間】
【住所】
</div>


『ここにメニュー記事のURL』 などの部分は、リンクさせたい記事のURLを代入します。

このように表示されます。

メニュー一覧
お店までの道のり
表示させる番号
【営業時間】8:00~20:00
【住所】○○県○○市





背景色、線の種類や色も変更ができます。

■背景色
background-color:#EEEEEE;

#EEEEEEが色を表します。このカラーコードを変更すると色を変えられます。
カラーコードはこちらを参考にしてみてください

■線の種類や色
border:1px solid #666666;

border:線の太さ 種類 色; を表しています。

代表的な線の種類は

solid 実線



double 二重線(doubleの場合は3px以上で)



dashed 破線



dotted 点線



記事下や、フリースペースで使ってみてくださいね

なぜか太字に… 始まりと終わりは必ずセットにしてください

内藤です


記事の途中から文字がすべて太字になった。
サイドバーのフリースペースの下からサイドバーがすべて太字になった。



こんな状況になったことはありませんか?

このような不具合は、HTMLタグのミスによるものです。


例えば、アメブロで太字になるBボタンを押すと

<strong>太字</strong>

という形で、<strong>という太字の始まりを表すHTMLタグと、</strong>という太字の終わりを表すHTMLタグが挿入されます。

始まりと終わりは必ずセットでなければいけません。


標準エディタや、新エディタを使って編集を何度もしていると、この数があわなくなってしまう事があります。

終わりのタグが少ないと、太字が続いてしまいます。

これが、最初にあげた問題の原因です。


HTML表示、または、タグ編集エディタにして、始まりと終わりがセットになっているか確認するようにしてみてくださいね

アメンバー記事の文字を読みやすくする

内藤です

ブログをカスタマイズしていても、アメンバー記事はカスタマイズされません。

アメンバー記事はブログとURLも違っていて、独立しています。
サイドバーもありませんしね。



でも、ブログをカスタマイズしてると、アメンバー記事が読みにくく感じます。
文字も小さいままですから。


そこでアメンバー記事でも文字を大きくしたい場合。

1つは、記事を書くときに「文字サイズ」を使うという事。
通常のブログ記事では、部分的だけ使いましょうと言っていますが、アメンバー記事では編集したCSSが反映されませんので、使うのもありかなと。


もう1つは、HTML表示にして文章を

<div style="font-size:15px;line-height:1.5"> と </div>


で囲むという方法があります。


リンク文字をわかりやすくするには


<a href="リンク先URL" style="color:#0000ff;text-decoration:underline;font-weight:bold;">


のように 

style="color:#0000ff;text-decoration:underline;font-weight:bold;"

を追加すればOKです


参考にしてみてくださいね