SIRIUSで簡単ホームページ~サイドバーをカスタムしよう

SIRIUS(シリウス)を使えば、サイドバーの編集もあっという間です。
ホームページビルダーで面倒な思いをした人には、
信じられない便利さかもです。

まずは、サイドバーのメニュー部分を編集する方法です。

詳しい解説は動画にしましたのでご覧くださいね。

次いで、サイドバーに任意のコーナーを設置する方法。

こちらも、動画で解説していますので、
ご覧くださいね。

SIRIUSで簡単ホームページ~ロゴ編集機能をマスターしよう

SIRIUS(シリウス)には、自由にロゴ文字を編集する機能があります。
この機能を使えば、ヘッダー画像に文字を入れたり、
ちょっとした画像に文字を入れるのはもちろん、
サイトのアクセントとしてキャッチコピーを入れることも容易です。

詳しい操作方法は動画で解説しています。

コツは、あくまでも、キャッチコピーを目立たせて、
サイトを読んでもらうための添え物、という考え方と、
全体のバランスを取る、ということですね。

でも、ロゴ機能を使えば、できることが幅広くなりますから、
積極的に使っていきましょう^^

SIRIUSで簡単ホームページ~ヘッダーを作ってみよう

ここでは、SIRIUS(シリウス)を使って、
ヘッダー画像を極めるためのあれこれを解説します。

  • ヘッダータイトルや説明文を編集する
  • ヘッダー作成機能を使ってロゴや画像を入れる
  • オリジナル画像を使ってヘッダーを作成する

この3段階でお話をすすめます。

step1 ヘッダータイトルや説明文を編集する

まずはこの部分。ヘッダーのタイトルや説明文を、
ロゴ機能を使わず、シリウスのデフォルト設定で使用する場合。

  • ヘッダータイトルや説明文の仕組み
  • 色やフォント、サイズを変更する方法

step2 ヘッダー作成機能を使ってロゴや画像を入れる

  • シリウスであらかじめ用意されているヘッダー画像を編集し、
    オリジナルロゴや画像を入れる方法
  • ヘッダーのロゴを使うためにデフォルトのサイトタイトルや
    説明文を非表示にする方法

こんな感じのヘッダー画像を作成していく方法です。
詳しくは動画にしています。

※(追記)作ったオリジナルヘッダー画像をシリウスで使用するときは、
必ず、「header」という文字を頭に入れてください。
頭に「header」という文字が無いと、
シリウスでヘッダー画像であると認識しませんのでご注意。
header1」「headersakana」など、最初に「header」さえあればあとは自由です。

step3 オリジナル画像を使ってヘッダーを作成する

いよいよ、オリジナルヘッダーの作成法。

この機能を操れば、自在にかっこいいヘッダー画像が作れます。

やり方は動画にしています。

今回は、あくまでもデモサイトで解説したのですが、
サイトのヘッダーに入れるキャッチコピーは、
サイトの命そのものです。

しっかり練って、言葉を選んで、
そのキャッチコピーを思いっきり際立たせる画像を使い、
デザインを組み立てましょう。

SIRIUSで簡単ホームページ~かっこよく装飾する飾り枠

SIRIUS(シリウス)には、飾り枠をボタンひとつで作る機能があります。

これを使えば、さらにかっこいいサイトを作成することが出来ます。
詳しい使い方は動画にしています。

ポイントは、段落を分ける「記事タブ」を活用することです。

いろんな飾り枠があるので試してみてね。

SIRIUSで簡単ホームページ~ボタンを作ってみよう

SIRIUS(シリウス)には、ボタンを作成する機能がついています。

SIRIUSのボタン作成機能を使えば、
こんなボタンもあっというま。

このボタン、いっぱい作っておいて、
自分のブログに使う人もいるんですよ。
手軽だし、きれいだし。

で、そんなボタンの作り方、設置方法はこちらです。

SIRIUSで簡単ホームページ~リンクを貼ってみよう

SIRIUS(シリウス)なら、URLリンクを貼るのもあっという間です。
外部URL、同一サイト内、SIRIUSで作ったほかのサイトなどなど、
自由にリンクさせることが出来ます。

ここから、テキストリンク(文字リンク)や画像リンクなど、
自在に設定できますよ。

SIRIUSで簡単ホームページ~画像を入れてみよう

SIRIUS(シリウス)なら画像の挿入もあっというま。
サイズ変更や回り込みもらくらくです。
まずは、動画にしていますのでご覧ください。

この画面で、細かい設定もできますよ。
(動画で解説しています)

SIRIUSで簡単ホームページ~サイトの記事を書いてみよう

SIRIUS(シリウス)は、初めての人でも、直感的な操作だけで、
きれいなサイトができるように設計されています。

まるで、無料ブログでも書くようなイメージで、
ごく簡単な操作だけで、このような感じに出来上がります。

SIRIUSを使って記事を書く方法を、動画にしていますので、
こちらをみていただければ、と思います。

文字装飾をしてみよう

文字を太くする・斜体・取り消し線・下線

文字を太くしたり、斜体にしたり、取り消し線や下線を引くのはここ。

見出しをつける

文字を寄せる

箇条書きリストにする

箇条書きにしたい部分を全部選択しておいてボタンを押すと
自動的に箇条書きになります。

文字を大きくする

文字サイズ「大」は18ピクセル、
文字サイズ「特大」は26ピクセルに設定されています。

<span style=”font-size:18px;”>文字を大きくする</span>

このピクセルの数字を変更することで、任意の大きさにすることが可能。
もちろん、大きくした文字を太くする、色をつける、マーカーを引くなど、
装飾だって思いのままです。

文字の色を変える・マーカーを引く

文字色は、自分でいろいろな色を選ぶことが出来ます。
ボタンを押したら表示されるこの画面から、
好きな色をチョイスしてOKをクリックします。

ポイントアイコンを活用する

こういうポイントアイコンをうまく使えば、
キャッチーなサイトが出来ますね。

これも、装飾したい文字を選んでボタンを押し、
好みの装飾を選ぶだけで作れます。

ランキングアイコンを活用する

こんなランキングも自在です。
なんか、アフィリエイトサイトとか作りたくなってきますね。

引用ボックスを活用する

こういう、引用や注意書き、口コミ情報なども
SIRIUSなら選ぶだけ。
あとで、CSSファイルを操作してカスタマイズすることも出来ます。

SIRIUSで簡単ホームページ~新規サイトの基本設定

さっそくSIRIUS(シリウス)でサイトを作っていきましょう。

まずは、SIRIUS(シリウス)の管理画面を開き、
「新規作成」をクリックします。

すると、サイトの基本設定を決める画面が開きますので、
必要事項を入力します。

step1 サイト名を入力する

これから作成するサイトのタイトルを入れましょう。

step2 サイトのタイトル、説明文、H1タイトルを入力する

続いて、実際に読者の目に映るサイトのタイトル、説明文を加えます。
実際のサイトと比べながらどこに何が表示されるかを確認してね。

step3 metaキーワード、meta説明文を入力する

metaキーワードは、どんなキーワードで表示されたいか、
このサイトはどんなサイトかをキーワード化したもの、です。

実際のサイトのオモテには見えないのですが、
ちゃんとサイトの中に仕込まれていて、
検索エンジンのクローラーという巡回ロボットに対して、
このサイトは何が言いたいサイトなのか、を知らせてくれます。

次いで、meta説明文。
ここは、検索エンジンの検索結果に反映される部分で、
非常に重要です。

あちゃー。手抜きだな…w

このmeta説明文が興味を惹くような面白いものかどうかで
アクセスが変わってきますから、しっかり書きましょう。

step4 サイトURLの記載

SIRIUSでは、サイトの作成から公開(アップロード)まで、
一直線に全部をツールの中で行えます。
実際に公開する予定のURLを記入しておきます。

後から書き加えることもできますので、
まだURLが決まっていない場合は空白でもOKです。

step5 アクセス解析タグを設置しよう

アクセス解析を設置する場合は、ここに記載します。
これも、後から書き加えることが出来ますので、
まだタグを取得していない場合は空白でもOKです。

step6 テンプレートを決めよう

「参照」ボタンを押すと、SIRIUS(シリウス)で用意されている、
豊富なテンプレート一覧が表示されます。

ここから、お好きなタイプを選びましょう。
テンプレートの選択は必須ですので、
ここで必ずひとつは選ばなければいけませんが、

後でイメージと違う場合には、
いくらでも着せ替えることが出来ますので、
まずはひとつ、選んでくださいね。

step7 ヘッダー画像を選ぼう

SIRIUS(シリウス)には、豊富なバリエーションのヘッダー画像が用意されています。
ヘッダー画像の欄の「参照」ボタンを押すと、

このように、たくさんのバリエーションのヘッダー画像が選べます。
ヘッダー画像は後から選ぶこともできるし、このまま何も選ばずに、
「ヘッダー画像なし」でも出来ます。

この、SIRIUSのヘッダー画像に、ロゴ文字を入れて表示させることも出来れば、
まったく違う画像からサイトを作ることも出来ます。

ヘッダー画像のカスタマイズは別途取り上げますので、
そちらを参考してくださいね。

step8 タイプの選択をする

SIRIUS(シリウス)は、PCサイトと携帯サイトを同時生成できます。
上位版ならiphonサイトも生成できるんです。

まずは、ここで、PCサイトか携帯サイトかを選択。
同時に、ブログ形式か、サイト形式かも選択します。

step9 OKボタンを押して初期設定終了!

いよいよ、サイトのメインの部分を構築します。

でも、もしも、後から設定を変更したい場合は、いつでも、

こちらから変更することができます。

引用「枠」の常識と常識に負けない「枠」を作る

ワードプレスのエディタには、最初から、「blockquote」という、
引用枠が用意されています。

一般的には、グレーの四角い枠ができて、
引用した文章を囲んで表現するんです。
このサイトでは、色や枠を変更してあります。
続きを読む