こんにちは、まるです。
ここでは、googleの無料ブログサービスbloggerのカスタマイズまとめ、他のブログからの引っ越しのやり方について記します。
スポンサーリンク
livedoor・忍者ブログ seesaaからbloggerへの引っ越し
どちらもやってみましたが、ほぼ同じ方法でした。手順は以下の通りです。
データをエクスポート→記事の時間順の修正→xmlファイルに変換
1.まずはlivedoor・ninjaブログでそれぞれブログデータをエクスポートします。
MT形式でファイルの名前は「ninja_blog_export・txt」のようになります。
2.次に、拡張子が・txtのファイルは、bloggerでそのままインポートできませんので、これを拡張子が・xmlになるように変換をします。
ただし、変換をするだけでは、記事の時間順が投稿順とは逆になってしまいます。
通常のブログなら新しい記事がいちばん上に来ますが、古い記事が上ということになってしまうので、その前にその修正を行います。
Blogger ブログ移行用、MovableType 形式のエクスポートデータの日付を変換するツール
こちらの枠内に、txtファイルを開いて、記述されているものをコピーして変換ボタンを押します。
修正されたものを再度メモ帳に貼り付けをします。
3.次にそれをxmlになるように再度変換をします。
下のサイトさんでファイルをアップロードして、変換されたものをダウンロードします。
これで、得たファイルをbloggerにインポートをして完成です。
インポート、エクスポートは「設定→その他」の項目にあります。
ソースはこちら。
タイトルの背景色と文字色を変える
タイトルの背景色 ブログの幅 タイトルの背景画像 タイトルの文字色 など。
テーマ、エスリアルでの説明です。
●背景をすべて白にする
テーマデザイナー→上級者向け→背景
で、背景のカラーコードをすべて「#ffffff」にしています。
●ブログの幅を変える
同じくテーマデザイナー→幅
で、お好きな幅にしてください。
●ブログタイトルに画像をつける
レイアウト→ガジェット→ヘッダー
で、好きな画像を指定して、画像をつけることができます。 自動で調整もされます。
●タイトルの文字色を白にする
テーマデザイナー→上級者向け→ブログのタイトル
で、背景の写真に合わせた色にタイトルの文字色を変えられます。
タイトル下のブログの説明文も同様にします。
カラーコードの作成は下のサイトさんがたいそう便利です。ありがとうございます。
記事とサイドバーの間を広げる
記事部分と右サイドバーの間が狭かったので、広げてみました。
元の記述
body .main-inner .Blog { padding: 0; background-color: transparent; border: none; }
該当ブログ
body .main-inner .Blog { padding: 0 40px; background-color: transparent; border: none; }
ブログ全体の幅は、これは「テーマデザイナー⇒幅」で「960 230」にしてみました。
画像の大きさは幅が900pxとしました。
行間と文字サイズの変更
行と行との間が狭いと文字が見づらいので、少しだけ広げてみました。
・行間の変更
entry-content{ line-height:1.7em; }
記事冒頭の日付を消す
記事の頭の日付を省きました。
・記事の冒頭の日付を消し、記事の末尾のタイムスタンプを表示する
ダッシュボードのレイアウト→メイン 「ブログの投稿の編集」のチェックを入れたり外したりするだけで、表示をする形式を選べます。
更に、記事下にラインを入れて、空間を調整しました。 その際のcssの変更箇所です。
.post-footer { margin: 2.0em 0px 0; padding-bottom: 20px; border-bottom: 1px solid #DDDDDD; }
bloggerのblockquoteをcssでデザインを変える
複数のブログで同時に同じデザインを試してみてやっと気が付きましたが、Bloggerの引用、blockquoteはデフォルトでは装飾されていないようです。
枠なし背景色なしで、段落が下がった形で表示されるだけになります。枠線か背景かのどちらかがないと、一見、引用とはわかりづらいです。
今までのcssの記述。
blockquote p { padding: 0; margin: 10px 0; line-height: 1.7; }
blockquote cite { display: block; text-align: right; color: #888888; font-size: 0.9em; }
下のサイトさんを参考にCSSにタグを追加。
追加したタグ。
.post-body blockquote { border: 1px solid #cbd4d7; padding: 16px 10px 15px 40px; margin:20px; }
もうひとつ、こちらのサイトのデザインも素晴らしい。
念のため、それまでのhtmlのバックアップは必ず取ってから行ってください。
「続きを読む」を移動
「続きを読む」を左側ではなく、右の端に移動してみました。
HTMLで、「続きを読む」のタグは「jump-link」のあるところです。
右寄せするタグ 「div align="right"」を足してみました。
<b:if cond="data:post.hasJumpLink"> </b:if><div align="right"> <div class="jump-link"> <a expr:href="data:post.url + "#more"" expr:title="data:post.title" href="https://www.blogger.com/null"> <span style="font-size: 12px;"><data:post .jumptext=""></data:post></span></a></div> </div>
囲む場所がちょっと心配ですが、ひとまず右に移動できました。
【blogger】ラベルの一括変更と削除
ラベルの一括変更とラベルの項目の削除です。
1.投稿記事一覧を表示します。
2.該当記事左の□にチェックを入れます。
3.変更したいラベル名をクリックして、編集のマークを押してラベルを追加します。
たとえばラベル「blogger」をラベル「テンプレート編集」にしたい場合は「テンプレート編集」をクリックします。
記事に「blogger・テンプレート編集」と2つラベルがつきます。
4.該当記事にチェックをして、今度は削除したいラベルの方を選択します。
それだけでラベルは削除になり、記事は該当カテゴリーの方に移動します。
5.そのラベルの記事が一つもなくなった場合、不要なラベル自体がラベルの一覧から消えます。
初期化タグ
テンプレートの編集中に、レイアウトが崩れてしまった場合、テンプレートを初期化するためのタグです。
・初期化タグ
<html> <head> <b:skin></b:skin> </head> <body> <b:section id="mainSection"> <b:widget id="Blog1" type="Blog"> <b:includable id="main"> </b:includable> </b:widget> </b:section> </body></html>
1.エラーを起こしたHTMLをすべて削除し、そこに上を貼り付けます。
2.次にテーマを再度読み込みします。
3.編集中のタグのバックアップがあれば、再度貼り付けをして、作業が続行できます。
下のサイトさんからです。ありがとうございました。
サイドバーのラベルのタイトルを整列させる
サイドバーにランダムに並んでいるラベルを、１行に1列ずつきれいに並べる方法です。
cssの「/* ラベル」より下を、下のように書き換えます。
.list-label-widget-content ul li a { font-size: 13px; color:$(label.color); transition:0.4s; /* 徐々に変化させる */ padding: 6px 10px; border: 1px solid $(label.border); background-color:$(label.background); width: 100%; max-width: 278px; display: inline-block; float: left; clear: both; margin-bottom: -1px; } .list-label-widget-content ul li a:hover{ color:$(label.color.hover); background-color:$(label.background.hover); text-decoration:none; } .list-label-widget-content ul{ list-style-type: none; padding:0; margin-top: -4px; line-height: 1.4em; }
この改変はひじょうに良かったのですが、項目が多くなってしまうと、サイドバーで場所を取ることになって、他のバナーや広告を加えたいときには、サイドバーが記事リストよりも長くなってしまいます。
なので、一つのブログの方は、元に戻し、もう一つの方はそのまま使っています。
表示する項目が少ない時には、おすすめです。 下のサイトさんです。ありがとうございます。
Bloggerでラベルガジェットを見やすくカスタマイズし、分類別に表示する方法
bloggerはブログ村もtwitterも自力でpingの設定が必要
twitterの場合
twitterに記事更新のお知らせが出るようにするには、他の無料ブログだと、たいていブログから設定ができるのですが、
bloggerの場合は、
というのを使うか、
Ping送信サービスPINGOO!｜ブログやウェブサイト・SNSの発信ツール
というのを使わなくてはなりません。
ブログ村も同じ
それから、ブログ村ですね。
ブログ村は外部からのリンク、つまり被リンクとして、「googleにも信頼が高い→検索順位が上がる」ということで、やってみましたが、これもpingがbloggerから直接にはは送れません。
なので、
Ping送信サービスPINGOO!｜ブログやウェブサイト・SNSの発信ツール
というサイトでping送信をしてもらうように、設定する必要があります。
今はwordpressでブログを書いていますが、他に方法はありそうですが、設定が大変そうなので、どちらもpingooで手動送信にしています。
ワンクリックで送れますので、それほど手間はないので、このままＰＩＮＧＯＯでお世話になろうかなと思っています。