初心者でもシリウス2でホームページ自作|できる!SIRIUS2

検索結果

「 #デザイン 」の検索結果
  • SIRIUS2のロゴ作成機能
    SIRIUS2には簡易的な画像編集ツールやロゴ用の素材が内蔵しており、簡単な操作でロゴを作ることができます。ここでは、SIRIUS2のロゴ作成機能の使い方と、実際にサイトに設定するまでを紹介します。どの程度のクオリティのロゴが作れるのか、その辺りも分かると思いますのでぜひご覧ください。SIRIUS2でロゴ画像を作る際の注意点SIRIUS2では手軽にサクッとサイトロゴを作れますが、あくまでもおまけの機能としてとらえておいた方が良いと思います。その理由は主に次の2点。操作性があまり良くなく、素材配置の微調整がしにくいビジネスサイト用ロゴを作るには素材の種類が少ない画像編集ツールとしての作り込み度はあまり高くなく、文字に影をつけたり袋文字を作ったりは出来るものの、画像やテキストを上下、あるいは左右の中央に寄せて配置するといった基本的な機能も無し。用意されているロゴ用素材は、SIRIUS2を使用している他社や個人ブログとかぶってしまう可能性があるので、ビジネス用には向いていないと言わざるを得ません。ただし、アフィリエイトサイト用や仮のロゴを作るには十分だとは思いますし、SIRIUS2とよく比較される「ホームページビルダー」や「WIX」のロゴ作成機能も大差ないので、ロゴ作成機能の弱さだけでSIRIUS2を選択肢から外す理由にはならないでしょう。SIRIUS2のロゴ作成手順SIRIUS2のロゴ作成からサイトへの設定手順をまとめると次の通り。Image Creator2を起動させる画像とテキストを組み合わせてロゴを作成自サイトにロゴを設定する次項で順番に見ていきましょう!1:Image Creator2を起動させるロゴ作成にはSIRIUS2に内蔵されている画像編集ソフト「Image Creator2」を使用します。Image Creator2の立ち上げ方「編集」→「ロゴ/テキスト画像」をクリックすると、Image Creator2が起動します。2:画像とテキストを組み合わせてロゴを作成まずは、「ロゴ/テキスト画像」を選択して「新規作成」をクリック。横幅・縦幅はサイトに合わせて微調整できますが、とりあえずはそのまま触らないほうが無難でしょう。特に事情がなければ「背景を透明色にする」は、チェックを付けたままでOKだと思います。そして現れるのが次のロゴ編集画面。SIRIUS2にはあらかじめロゴ用素材が55種類収録されています。↓この画像以外にも自分で用意した画像を取り込んで使用することも可能ですが、今回はとりあえず収録されている画像で作ってみました。(下記画像参照。)画像+テキスト+図形のシンプルな組み合わせです。私もですがノンデザイナーがロゴを作るなら、あまり色を使いすぎないほうがそれっぽく仕上がると思います。画像からカラーコード(#333333みたいなやつ)を調べるには、カラーピッカーツールが役立ちます。*新しいロゴを保存する際に、既に使用しているロゴ画像のファイル名を上書きしないように注意しましょう。(デフォルトの状態では「logo.png」というファイルが生成されるので、先に同じファイルで作っていたら名前を変えて保存しましょう。もし同じ名前で保存して上書きされたら、古いほうの画像ファイルは消えてしまいます。)使ってみた感想ロゴ素材やテキストの位置を移動させるのがマウス操作でしかできないので、中央寄せなどのレイアウトを全てフリーハンドで行わないといけないのが不便だと思いました。あくまでも仮のロゴをサクッと作りたいといった用途にとどめておくのが良いかもしれません。ちなみに作りかけのロゴは、「設定を保存」をクリックして後で呼び出すこともできます。今回の作例では使用していませんが、文字を縁取りにしたりグラデーション機能もあります。詳しい機能の説明は、公式オンラインマニュアルの「サイト上部にロゴ画像を表示させる(要ログイン)」のページを参照してください。3:自サイトにロゴを設定する作成したロゴを自サイトに設定するには、記事編集画面上部メニューの「全体設定」をクリックし、「ロゴ画像」の欄でロゴ画像を選んで設定します。ロゴを設定できたかどうかはプレビュー機能で確認しましょう。できましたね!作ったロゴの場所たった今作ったロゴですが、どこに行ったか分かりにくい所に保存されていると思います。その場合は、フォルダ選択画面で下記のフォルダまで行って作成済みのロゴを探してみましょう。作成したロゴの保存場所C:(あるいはD:など) > ACES WEB > SIRIUS2 > あなたのサイト名 > imgアップロードしてもロゴが更新されない場合は?プレビューで確認してロゴが表示されているのに、サーバーにアップしてもロゴが変わらないという事がたまにあります。その場合は、「キャッシュ」というブラウザの表示を早くするための機能が悪さをしている可能性が高いので、サイトをブラウザで表示させた状態で「スーパーリロード」をかけてみましょう。スーパーリロードって何?というかたは、「お使いのブラウザ名+スーパーリロード」で検索してください。あるいは、まだそのサイトを表示したことのないブラウザでアクセスしてみて、正しく表示されていたらそのまま放置していればそのうち勝手に直ると思います。ここまでの説明で分からないことが有りましたら、SIRIUS2 Q&A助け合い広場(無料)に投稿していただけましたら回答させていただきますので、お気軽にご利用ください。ロゴが変更できたけど、「なんかやっぱり素人くさいなぁ」という方は、次の項目も参考にしてみてください。よりクオリティの高いロゴを作るには?というわけで、SIRIUS2のロゴ作成機能は趣味のサイトやアフィリエイトサイト用のロゴくらいならこなせますが、ビジネスサイトにはあまりお勧めではありません。なぜなら、「人は見た目が9割」ではありませんが、サイトロゴがしっかりしているとビジネスそのものもしっかりしているように見えるものだからです。もっと凝ったロゴを作りたいならココナラのようなクラウドソーシングサイトで格安価格のデザイナーさんに依頼をしてみるのもいいと思います。依頼費用はピンキリで数千円からでも依頼できますが、1万5千円~2万円程度でも十分信頼度が高く、名刺や看板に使用できるロゴが作れますので、一度覗いてみてはいかがでしょうか。サービスをさがす
    Read More
  • ヘッダー画像の作り方と設定方法
    SIRIUS2のヘッダー画像の作り方と設定方法を徹底解説
    「ヘッダー画像ってどうやって作るの?」「SIRIUS2のヘッダー画像ってどうやって設定するの?」ここではSIRIUS2のヘッダー作成機能を含めたヘッダー画像の作り方と設定方法を解説しています。SIRIUS2内蔵ソフトでのヘッダー画像作成方法SIRIUS2には、画像編集ツール「ImageCreator2」が内蔵されておりヘッダーやロゴ画像を自作することが可能です。まずは、このSIRIUS2内の「ImageCreator2」での画像作成方法をみていきましょう。ツールの起動方法サイト編集画面上部「編集」→「ヘッダー画像」をクリックで、画像編集ツールが起動します。SIRIUS2に付属するヘッダー用画像素材や、自分で用意した画像も使用できます。ヘッダー画像の作り方まずは「新規作成」をクリックすると、ヘッダー画像編集用キャンバスが立ち上がり、シリウス2にあらかじめ用意してあるヘッダー素材のフォルダが表示されます。(ヘッダー画像のデザインについては、このページ内の「ヘッダー素材詳細」を参照してくださいね!)自分で用意した画像をベースにヘッダーを作ることもできますが、今回はシリウス2に付属しているフリー素材で作成してみました。ベースとなる画像はシリウス2のもので、文字装飾の「袋文字」・「グラデーション」・「シャドウ」もデフォルトで使用できるものです。*テキスト右肩の三角形の飾りだけフリー素材を読み込ませて配置しました。作りかけの画像は、「設定を保存」でセーブしておくことができるので、いったん作業を中断しても途中からやり直せます。5分もあればこの程度の画像なら作れるので、たくさん活用したいですね!収録ヘッダー素材詳細シリウス2に付属しているヘッダー素材画像は、多種多様なデザインが用意されています。その数なんと473種類!内蔵する画像編集ソフトで文字や素材を組み合わせると様々な業種・テイストのバナーが簡単に作れてしまいます♪シリウス2収録ヘッダー画像素材一覧使い勝手の良い素材が豊富に収録されているので、Canvaなどの外部ツールに取り込んで、さらにこだわりのヘッダーを作っても良いですね。ちなみにデフォルトヘッダーの画像サイズは「1400 x 600px」・「1400 x 440px」で作成されています。SIRIUS2のヘッダー設定方法作成したヘッダー画像をサイトに表示させるための設定方法をご説明いたします。「全てのページで共通のヘッダー画像」・「パートごとにヘッダー画像を変更する」パターンがありますので、それぞれ見てみましょう!「全てのページで共通のヘッダー画像」の設定方法「全てのページで共通のヘッダー画像」を設定するには、次の2つの手順で設定・微調整します。STEP「全体設定」でヘッダー画像を指定する編集画面上部リボンバーの「全体設定」をクリックし、表示設定の欄の「ヘッダー画像」で作成したヘッダー画像を指定します。これですべてのページにヘッダー画像が設定されました。プレビューで確認してみましょう。細かな表示設定を変更するには、STEP2をご覧ください。STEPヘッダー表示設定の微調整ヘッダー画像に関する微調整は次の手順で行いましょう。まずはSTEP1で表示させた「全体設定」の画面の左下に現れる「レイアウト」から「レイアウト設定」画面を呼び出します。「レイアウト設定」の画面の左下の「ヘッダー」を選択すると、ヘッダー画像に関する設定を変更することが可能です。パートごとにヘッダー画像を表示・非表示・変更する方法「トップページだけヘッダー画像を表示させたい」、「個別ページやカテゴリーページのみ別のヘッダー画像にしたい」、あるいは「その時々でヘッダー画像を変えたり、非表示にしたい」など様々な要望があると思いますが、SIRIUS2ならすべてのパターンに対応しています。それでは見てみましょう。STEPレイアウト設定画面を開く記事編集画面上部の「全体設定」をクリック(画像の1)し、現れるメニューの左下の「レイアウト設定」をクリック(画像の2)すると、レイアウト設定画面を開きます。STEPパート別に設定する「レイアウト設定」では、「カテゴリーページ」・「エントリーページ」・「独立ページ」・「スマホ用サイト」ごとにヘッダー画像を表示・非表示を選べます。(スマホ用サイトは別途設定していない場合、生成されないので無視しても大丈夫です。)上記画像の例では、「カテゴリー」のヘッダー画像を指定していますが、「カテゴリー」の横の「エントリー」・「独立ページ」・「スマホ」を選ぶと、該当するページテンプレートのヘッダーの扱いをどうするか設定できます。その都度ヘッダーを変更したり、非表示にする方法上記の方法は、テンプレートの概念が理解できていれば一括でヘッダー画像を管理できるため便利ですが、ややこしく感じる方も多いと思います。そんなときは、難しい事は考えずに、ページを作るごとに毎回表示設定するのがシンプルなのでおすすめです。ページごとにヘッダー画像の表示・非表示を切り替える手順ページごとにヘッダー画像の表示・非表示を切り替える設定は、「ページの設定」で行います。ページごとに異なるヘッダー画像を設定するページごとに異なるヘッダー画像を設定するには、上記の「ページごとにヘッダー画像の表示・非表示を切り替える手順」でヘッダー画像を表示する設定にしたうえで、「ページ設定」上で新たなヘッダー画像を読み込ませましょう。よくわからないという場合は?助け合い広場に質問してみて!シリウス2 Q&A助け合い広場とは当サイトが運営しているシリウス2の疑問が解消する質問サイト。もしこのページでシリウス2のヘッダー設定に関する疑問が解決されなければ、助け合い広場を使ってみてください!助け合い広場に質問してみる!
    Read More
  • シリウス2の吹き出し機能の使い方と画像の作り方
    ウェブサイトにおける吹き出し(ふきだし・フキダシ)は、伝えたい情報をより強調することによって訪問者の目が留まり、ページへの滞在時間が延びることでSEOへの効果を期待できます。SIRIUS2にも吹き出し機能は標準搭載されており、かんたんな操作でいろいろなスタイルの吹き出しを作ることが可能です。ここでは、SIRIUS2の吹き出し機能の基本的な使い方・カスタマイズ方法と、吹き出しに使用する画像の作り方を紹介します。くま先生シリウス2の基本的な吹き出し機能の使い方から画像の作り方まで動画でまるわかり!SIRIUS2の吹き出しの作り方 お使いのブラウザがビデオ再生に対応していません。*再生中に音声は出ません。SIRIUS2の吹き出し機能は、「種類」x「パターン」x「カラー」x「向き」などを組み合わせて様々なデザインの吹き出しが作れます。シリウス2の吹き出しデザイン例「種類:シンプル」 x 「パターン:枠線(細)」 x 「カラー:グレー」「種類:考え中」 x 「パターン:太線」 x 「カラー:オレンジ」「種類:チャット」 x 「パターン:シンプル(デフォルト)」 x 「カラー:グリーン」「種類:強調」 x 「パターン:太線+背景」 x 「カラー:レッド」「種類:ポップ」 x 「パターン:ストライプ」 x 「カラー:ピンク」*「横幅を自動調整」にチェックを入れて幅をテキストに合わせています。「種類:ツールチップ」 x 「パターン:太線」 x 「カラー:ネイビー」*「枠を角丸で表示」のチェックを外して吹き出しの角を付けました。*向きは左右どちらにでも設定できます。吹き出しの設定方法吹き出しを作る方法は簡単です!SIRIUS2の記事編集画面の「ボックス」⇒「吹き出しの作成」を選択し、デザインとテキストを設定すれば完成!STEP吹き出し作成画面を出す「ボックス」 ⇒ 「吹き出しの作成」を選択して吹き出しの作成画面を呼び出しましょう!STEPデザインを決める!デザインを組み合わせてから、下部の入力欄にセリフを書き込みましょう。STEPキャラ登録吹き出しに使用する画像を選択しましょう。*キャラを登録せずに単発で画像を選択する場合は、「画像の選択」で画像を選びましょう。*吹き出し画像の下に名前を表示させたい場合は、「画像下テキスト」に入力しましょう。(長くて2列になる場合は、詳細設定で画像サイズを大きめにすると良くなることが有ります。)STEP詳細設定文字や画像のサイズの調整。分からない場合はそのままでOKです。*フォントサイズ・・・文字の大きさ。*画像の横幅の最大値・・・キャラ画像のサイズを変更できます。*吹き出しの縦幅の上限・・・吹き出しの縦幅の上限を指定します。たとえば60pxに指定されている場合、最大60pxの縦幅の吹き出しとなり、それを超えるテキストはスクロールで表示させることができます。STEPHTMLタグの生成各種設定が完了したら最後に画面下部の「OK」ボタンをクリックしましょう。吹き出しのhtmlタグが生成されます。完了。生成した吹き出しを編集したい時は?吹き出しは一度生成するとhtmlコードになってしまい、専門知識がないと設定を変更できません。しかし上記の画像のように<!-- ★吹き出しここから★ -->から<!-- ★吹き出しここまで★ -->までを選択して、「ボックス」⇒「吹き出しの作成」を選ぶと再度編集画面を呼び出すことできます。より詳細な説明をお求めの方は、SIRIUS2オンラインマニュアル「吹き出しを追加する」をご覧ください。(要ログイン)便利な機能見落としがちですが、活用すると便利な機能に「前回の設定を読込」と「現在の設定をパターン登録」があります。前回の設定を読込この機能は直前に作った吹き出しデザインを再度呼び出して利用することができます。履歴は直前のものだけしか呼び出せないので、毎回使いたいデザインがあるときは次の「現在の設定をパターン登録」を使いましょう。現在の設定をパターン登録この機能はよく使うデザインの組み合わせを登録して、後で呼び出すことができる機能です。デザインが決まったら「現在の設定をパターン登録」で保存し、「パターンの読み込み」で呼び出せます。SIRIUS2の吹き出し用画像を用意するには?SIRIUS2の吹き出し用の画像を用意するには次の手順が必要となります。画像を選ぶ適切なサイズに加工するSIRIUS2に読み込ませる1:画像を選ぶSIRIUS2にも使えそうな画像は内蔵していますが、ここでは素材サイトから探してきた画像を設定する作業に挑戦してみましょう。ちょっと難しいかもしれませんが、気に入った画像を探してきて使用するほうがだんぜん満足度が違いますよ!というわけで、前提知識として店舗やアフィリエイトサイトに使用する画像には、次のような注意点や条件がありますのでこれを踏まえて素材を探しましょう。著作権・肖像権を侵害していないこと商業利用可能なこと同じキャラで複数の表情のパターンが用意できると使いやすい通常であれば、そういった条件をクリアできる画像はAdobeStockやPIXTAといった有料素材サイトから購入することになります。しかしそれらの有料サイトに引けを取らない無料素材サイトもありますので紹介します。\オススメ/イラストAC商用利用OKの無料素材!公式サイトを見てみるイラストACは総会員数900万人以上を誇る無料素材サイト。2万人以上のイラストレーターが作品を登録しており、様々なテイストのイラストがダウンロード可能です。吹き出しに使いやすいキャラ画像も、表情パターン豊富なものが多くてとても便利です。イラストACは無料版だと一日の検索回数に制限がありますが、「キャラ + 動物名」、「指差し + 女性」、「先生 + 笑顔」といったキーワードを組み合わせて検索するといい感じの画像が見つかりますよ!Canva画像編集機能も超充実!公式サイトを見てみるCanvaはフリー素材が豊富なだけでなく、デザインに自信がない人でもテンプレートを利用してかんたんにヘッダー画像やアイキャッチ画像を作れる便利なサイト。発祥が海外なのでちょっと海外風味の大味な素材が多い印象です。無料で使える基本機能だけでも十分以上に役立つのでぜひ一度覗いてみてください。くま先生当サイトのマスコット「くま先生」もイラストACの無料素材を使わせていただいています!とりあえずイラストACであなたのお気に入り画像を見つけてから次の項目に進みましょう!(当サイトとおそろいでもOKですよ😊)2:画像を加工する吹き出しのキャラに使用したい画像が決まったら最適なサイズに加工していきます。今回は当サイトでも愛用しているイラストACで加工します。吹き出し画像加工の手順動画 お使いのブラウザが動画再生をサポートしていません。*再生中に音声は出ません。STEP画像を選んで編集イラストACの中から気に入った画像が見つかったら、「PNG」の「無料編集ツールで開く」を選択しましょう。STEPキャンバスサイズを変更ちょっと位置がわかりにくいですが、画面右下あたりにある「サイズ変更」をクリックして、「幅100x高さ100px」にサイズを設定する。STEP画像サイズをキャンバスに合わせる画像の角のポイントをドラッグして画像サイズをキャンバスに合わせましょう。STEPサイズ合わせのコツ表情があるものはある程度拡大して、どんな感情か分かるようにした方が吹き出しの効果が上がります。また、丸く切り抜いて表示させることもできるので四隅にかからないように調整しましょう。STEPダウンロード位置合わせがばっちり決まったら、右上のダウンロードボタンで画像を保存しましょう。ファイル名全角でも画像は表示されますが、たまにエラーになるブラウザがあるので半角英数字でファイル名を付けましょう。ファイルタイプ背景透過が使えてサイズも若干軽くなるPNGを選ぶのが良いでしょう。サイズ変更なしでOK。透明な背景画像を使用する背景が白以外の場合、透明背景の方が便利だと思うので「透明な背景」にチェックを入れましょう。サイズをオブジェクトに合わせるこちらはチェックを入れなくてOK。STEP反転画像もあると便利左右反転バージョンもあると会話風にする際や、吹き出しを左右どちら向きにも使えて便利です。◆左右反転画像の作り方反転させたい画像をクリックして、右上メニューの「反転」⇒「左右反転」を選択すると作れます。画像とテキストにまとめると以下の通りです。くまお意外と簡単にできた!SIRIUS2の吹き出しに最適なサイズSIRIUS2の横並び吹き出しに最適なサイズは「60x60px」~「100x100px」程度の正方形の画像です。(「px(読み:ピクセル)」とはwebデザインで一般的に使われる単位。解像度にもよりますが1pxで大体1~3ドット程度を指します。)詳細設定では横幅最大800pxまで変更できますが、これは画像とテキストを上下に配置させる時に使用するサイズです。キャラの横幅を60pxにするとこのくらい。あまりおちゃらけた感じにしたくない場合は、これくらいさりげないほうが良いね!横幅100pxはこれ!こっちの方がポップな感じになるよね!吹き出しの向きを「下向き」にして、画像の横幅を250pxにしたらこうなるよ!まとめ以上、SIRIUS2の吹き出しの使い方と、画像の作り方や適切な画像サイズなどを紹介でした。今回紹介したイラストACは、無料版だと一日のダウンロード数や検索回数に制限がありますが、Canvaに比べてとてもかわいいイラストがたくさんあるので非常におすすめです。もし制限なく利用したい方は映画一回分程度で使える有料版も検討してみましょう。イラストACの無料版の制限についてはこちら
    Read More