アメーバブログをホームページのようにデザインするTips その3

前回、前々回からの続きです。

保存したHTMLから投稿した内容などを元に本文のエリアを探してください。恐らく、divブロックなどになっているはずです。

わかりやすいように、コメント行などで前後を囲っておくと良いでしょう。

この中を通常のホームページと同様にデザインします。スタイルシートの記述は当然ながら新しく作成したCSSに行ってください。画像の挿入などもとりあえずいつも通りの方法で構いません。

納得いくデザインができたら再びアメブロにログインします。

ログイン後はまず、「デザインの変更」から「cssの編集」画面に行き、作成したCSSファイルの中身をまるごとコピー&ペーストします。

続いて「投稿・編集」から「画像フォルダ」を選び、使用する画像をすべてアップロードしてください。先に画像をアップロードしておかないと、画像へのパスが確認できません。

すべての画像をアップロードし終えたら、別のウィンドウで「ブログを書く」画面を開きます。別のウィンドウで開くのは、画像へのパスを確認しながら作業を行う必要があるため、いちいち戻ったり進んだりしなくて済むようにです。

「HTMLタグを表示」に切替えてください。※重要

デザインしたHTMLファイル内の記事部分(コメント行で囲った部分)をコピー&ペーストします。余分な部分を含めるとおかしくなるので、必ず記事部分のみを選択してコピーします。

画像へのパスを書き換えます。「画像フォルダ」画面でパスを書き換える画像の「記事に追加」を選択し、「HTMLタグを表示」に切替えて、リンク先になっている(a href=で始まるタグ内の)アドレスがアップされた画像へのパスなので、コピーします。そのまま投稿せずにブラウザで「画像フォルダ」画面に戻ります。

「ブログを書く」画面の該当する箇所を、今コピーしたアドレスに書き換えます。これをすべての画像に対して行います。

必要な作業は以上です。表示を確認するなどで確認したら投稿してください。

今回は記事のデザインについて紹介しましたが、サイドバーやトップページのデザインも基本は同じです。トップページをデザインするならメッセージボードを、サイドバーをデザインするならフリースペースなどを利用するのが良いでしょう。

最後に、この方法でデザインしたページの見本を紹介します。

見本のブログ

アメーバブログをホームページのようにデザインするTips その2

前回の続きです。

前回も言いましたが、管理人流のやり方なので、必ずしもこれに沿う必要はありません。各人がやりやすい方法を見つけてみてください。

それでは始めます。

まず、当然ながらアメブロのアカウントが必要となります。アカウントの取得やログイン方法などの解説は省きます。ブログのデザインをする準備ができているという前提で進めます。

ベースとなるテンプレートには「CSS編集用デザイン」を選びます。レイアウトの変更はお好きなものを選んで構いません。

デザインを適用したら、まず何でも良いので適当な記事を書きます。内容は「テスト投稿」などで構いません。

記事を投稿したらブラウザ読みこみ、適当な場所に保存します。この際、HTMLだけでなく、画像などのフォルダを含む完全な状態で保存してください。

以降の作業はこの保存したファイルおよびフォルダで行います。

保存したHTMLを普段、各人がホームページのデザインで使用しているツールやソフトなどで開きます。

わかりやすいところに、新しいCSSファイルを作成します。その新しいCSSファイルに保存したフォルダ内の「skin0000.css」の中身をコピーします。「skin0000.css」をコピーしてリネームしても構いません。直接、いじらないのはいつでも元通りに戻せるようにするためです。

HTMLファイルのHEAD内の記述から「skin0000.css」へのリンクを探して削除します。そして新しく作成したCSSファイルへのリンクを追加します。最終的にはこのCSSファイルの内容をブログにコピーすることになります。この先、記述するのはこのCSSと保存したHTMLのみです。

以下、次回に続きます。

アメーバブログをホームページのようにデザインするTips その1

アメーバブログなどを通常のホームページのようにデザインする方法を紹介します。

管理人流のやり方なので、必ずしもこの通りにする必要はありません。

ブログをホームページのように利用するメリットとしては、何と言ってもブログならではの機能がそのまま使えることが挙げられます。例えばコメントの投稿やアクセス解析、ランキングなどを一般的なホームページ上で実現しようと思えば、それなりの知識と手間がかかります。しかし、ブログなら簡単な設定をするだけで済んでしまいます。また、更新などもWEB上で行えて、HTMLの知識なども不要なため、雛形さえできてしまえば誰にでも管理しやすいもの大きなメリットです。

その一方で、デメリットも存在します。もっとも不便なのはデザイン性の低さと言えるでしょう。このアメブロではHTMLは基本的にできないため、CSSのみでデザインする必要があります。FC2ブログのようにHTMLを自由に変更できるサービスもありますが、いずれにしても同じテンプレートを使用するため、各記事毎に個別のデザインを反映させるのは非常に困難です。

つまり、ブログならではの機能をホームページ上で利用したい人にとってはブログのホームページ化は大変魅力的ですが、とくに必要性を感じない人にとっては通常のホームページを作成した方が良いということです。

ご自身の目的に合わせて使い分けてください。

次回から具体的な方法について紹介します。

FaceBook、1時間で退会

とある個人的な事情から、行方のわからない親類にコンタクトの必要が発生した。住民票などは個人情報の管理が厳しくなって、親戚とはいえ第三者には開示できない。そこでふと思いついたのが、SNSで探せないかという発想。まあ、ほとんど可能性はないだろうと思いつつも、ものは試しと思ってかの有名なフェイスブックに登録してみた。実名登録が基本ということで、何か本人確認の手続きが必要かと思いきや、そうしたものは一切なくてメールアドレスを登録するだけでアカウントが作成できた。これで実名登録が基本!?　いやいや、意味がないだろ。しかも、メールのインポートが原因不明のエラーになるわ、出身地などの基本情報が登録できているのかできていないのかよくわからないわ、それがシステム上のトラブルなのか使い方が間違っているのかさえわからない。とにかく使いづらいのだ。さらに当初の目的の友達検索も、出身地や出身校で上手く検索できなかったりで、1時間ほど使っただけで必要なしと判断。実名を晒しておくのは気持ち悪いのでアカウントの削除をしようと思ったら、「アカウントの利用解除」だけでは一旦停止になるだけで完全に削除できないと判明。削除するには登録とは正反対に面倒な手順が必要という悪質さである。これで世界で9億人のユーザーを抱えるソーシャルサービスだとは驚きいう話。