HTMLの知識がなくてもOK！簡単にできる二次創作サイトの作り方

夢女の世界からこんにちは、ゆぱんだ（@marr1age）です。

HTMLを弄るの面倒くさい…けど自分の個人サイト持ちたい…という方向けに、簡単にHPが作れるサービスをご紹介します。

また、こちらの記事ではAmeba Owndで簡単に自分のHPが持てるやり方などもご説明しているので、よければ参考にどうぞ！

自分で一から作るんじゃ！という方向けはこちらの記事を御覧ください。

スポンサーリンク

簡単に作れるホームページサービス

どのサイトも色んなテンプレートが用意されていて、それを元に画像を入れ替えたりテキストを入れ替えて簡単にHPを作ることができます。

タグが使えるところなら、ある程度自由度も高いので、ここはこうしたデザインにしたい！というものもできるのですが、細かいところに手が届かない…という点もあるので、ある程度妥協も必要だったりします。

 

有名所だと、Tumblr（無料テンプレート一覧）・WiX・JIMDO・Ameba Ownd（無料テンプレート一覧）・BiNDupなどがあります。

イラストやブログがメインの場合は特に問題はないのですが、小説を取り扱う場合、ブログシステムを利用することになるので、小説用のメニューページなどを別で作ってリンク先のカスタマイズをしていくことになるかと思います。（特に気にならないなら問題はありません）

 

もし小説を取り扱いたいけどHTML難しい…となる場合は、Privatter※や投稿サイト（それこそpixiv・pictBLand・pictMalFem※・dream novel※）を利用するか、

モバイル向けで簡単にHPが作れるサーバー（nano※・ALICE+※・フォレストページ＋※）の方が自由に作れるので合わせてご検討ください。（テンプレートも豊富）

タグが少し使えるようでしたら、モバイル向けサーバーでの運営がぴったりかと思います。

※夢小説（名前変換）を取り扱いたい場合も利用できます。Privatterでの変換については本家様をどうぞ。

スポンサーリンク

Ameba Owndでの個人サイトの作り方

ここからはAmeba Owndを利用したHPの作り方をご紹介します。

編集はPC・スマホどちらからでも可能なのですが、スマホの場合、アプリからの編集のみで、iOSは細かな設定も変えられるのですが、androidの場合は記事の投稿のみしかできないそうです。（もしかしたら今後追加されるかもしれませんが）

androidの方はPCから編集するのがよろしいかと思います。CSSを変えたり、その他の細かい修正などはパソコンからのみできるようです。

AmebaOwndはこちら

 

※最終的にはこんな感じのページが作れます。（スマホでの見え方）

 

トップページ

About

PHOTO（イラストじゃないので…）

STORY

サンプルサイトはこちら

アプリから編集する

※以下はiOS版での説明となりますが、編集部分はPC版とそんなに変わらないかと思います。

iOSアプリをダウンロード

AmebaOwndはこちら

 

アプリをインストールしたら、【サイトを制作する】ボタンからスタートします。

色んなデザインがあるので、そこから自分の好きなデザインを選んでください。（私はナチュラルカテゴリーにあるこちらにしました）

 

デザインを選ぶと、サイト名やヘッダー、アイコンの編集画面に移ります。

サイト名は後からでも変えらます。

私はこんな感じにしました！

URLの変更

編集画面にはスタートガイドも出てくるので、その通りに制作していっても構いません。

まずはスタートガイドの流れにそってURLを決めてみましょう。（※一度しか変更できませんので慎重に）

 

ドメインの変更で色んな種類から好きなものを選べます。

URLはサイト名に揃えたり、ちょこちょこサイト名を変えたりする人はTwitterのIDや自分の名前などにするといいかもしれません。

その他のドメイン

お店のHPも作れるので、そういったドメインも多いのですが、気に入ったものをつけるのが一番です！

検索避けの設定

サイト設定のページで【SEO設定】の項目をクリックします。

 

SEO設定ページの一番下にある【検索エンジンを回避】をONにします。（緑色で設定完了）

 

上のSNSシェア用のサイト画像は、TwitterなどにURLを貼った際に表示される画像なのですが（以下のツイートのようなもの）、検索避け設定をするとこの機能が使えないので設定しなくても構いません。

検索避けをしない方は画像をいれた方がSNSにあげた時に目を引くので、お好きな画像で設定してみてください。

ブログ更新🍁
映画「グレイテスト・ショーマン」の感想

Twitterで呟いてた感想をまとめただけ（´-`）.｡oOhttps://t.co/s0772hqSBF

— ゆぱんだ (@marr1age) February 22, 2019

基本設定でサイトの紹介文など

基本設定のページでは、サイトの説明やサイト名の変更ができます。

 

Aboutに詳細に書く場合は、『詳しくはAboutをご覧ください』などの文言を追加します。

サイトのロゴはアイコンと同じものをいれても別の画像を入れても構いません。

Aboutを変更する

編集トップの『ページ管理』からAboutの項目をクリックしてサイトの詳細を記載します。

 

編集画面

注意事項や管理人のプロフィール、SNSへのリンクなどを貼るとよいと思います。

画像はディフォルトで入れてあったものをそのまま使いましたが、削除 or 入れ替えはお好きに！

記事ページからイラストや小説を投稿する

編集トップの下にある投稿の管理から【記事一覧】をクリックして記事を新規作成します。

 

タイトル右にある歯車のマークをクリックすると、カテゴリを指定することができます。（新規作成もできます）

ディフォルトのカテゴリは【編集】ボタンで削除できます。

そして新しくカテゴリを追加します。イラストの場合は【Illustration】、小説は【Text】などお好きに決めてください。

決定ボタンをクリック後、記事画面に戻ってイラスト（写真マークから）を追加したり、小説の本文などを追加します。

 

イラストや写真はこんな感じ

 

小説はこんな感じ

小説は写真など入れなくてもOKですが、一覧のサムネイル（表紙のようなもの）になるので、入れたい場合は挿入してもOKです。

なくても問題ありません。

 

そして【次へ】をクリックして投稿します。

メニューにコンテンツページのリンクを追加する

編集トップの『ページ管理』から一番下のページ追加ボタンをクリック。

色んな項目がありますが、【記事一覧】を選択します。

【ページ名】がメニューで表示される名前やタイトルになります。

カテゴリから先ほど設定した【PHOTO（やillustrationなど）】【TEXT】などを選択すると、そのカテゴリだけが表示されます。

レイアウトは、写真やイラストなどはGrid（グリッド）形式、小説の場合はList（リスト）形式にすれば問題ないかと思います。

トップページを更新履歴だけにする

更新履歴も記事一覧から更新します。

更新の仕方はイラストなどと同じようにできますが、カテゴリを【UPDATE】などに変更して、

先ほどのページ管理の『ホーム』のカテゴリを【すべての記事】から【UPDATE】に変更すると、履歴だけが表示されるようになります。

そして完成した個人サイトがこちら。

サンプルサイトはこちら

 

Androidでも上に書いたような設定をしたら、あとはスマホから簡単に更新できるようになります。

【番外編】小説ページを長編と短編に分けたい

スマホからだとかなり無理やりなやり方ですが、自分でリンクなどを張り付ける方法があります。

サンプルサイトのTEXT（スマホで表示が隠れている場合、メニューバーの右のマークをクリックで出てくると思います）がその例です。

 

長編用のカテゴリを同じように作り、そこに投稿していきます。

※最終的にページのリンクを貼りつけるので、カテゴリが一緒でも構わない方は分ける必要はありません

 

ページ追加の画面でページをクリックします。

好きなタイトルや文章を入力していきます。

小説タイトルを大きくしたい時は、キーボードの上にある【Aa】をクリックするとH4やH3などに切り替わります。

いったんページを保存して、投稿した記事の画面へいきます。

 

このままでは貼りたいリンク先のURLがわからないので、SNSのシェア用のリンクをコピペします。

記事一覧の三点リーダー【…】をクリックすると、SNSシェアの項目が出ます。

そこからページのリンクをコピ－します。（ツイートを押すとツイートするので注意）

 

ページ管理のTEXTページに戻り、【＋】マークのボタンをクリックします。

【リンク】が別であるのですが、そちらだとブログの記事一覧のような貼り方になってしまうようなので、ボタンリンクにしています。

 

そこから先ほどコピーしたURLを貼り付けます。

ボタンテキストは自由に決められるので、小説のタイトルなどを入れてください。

追加で入れていくとこんな感じに。

ページを公開するとこんな感じです。

普通のリンクが貼れないので無理やり気味ですが、こういった方法も可能です。

 

ということで、Owndでの個人サイト作りはこんな感じになります。

イラストサイトなどの場合はスマホからでも簡単に作れますが、小説レイアウトの変更などはPCから細かく変更できます。

PCの場合、カスタマイズが結構自由にできるので、HTMLタグからテキストリンクを横並びにしたり、CSSの編集も可能となるので、色々と試してみてください！

 

PCでリンクを貼りたい場合のコード