【流行りのデザイン】Bootstrap用のエディタ(Mobirise)を使って、それっぽいサイトをぱぱっと作ってみる。【ホームページ作成】

スポンサーリンク
広告

WordPress全盛ですが・・・

僕のこのサイトもWordpressなんですけど、記事が大変増えてきたので、そろそろ、なんというかそれぞれのカテゴリー毎にトップページ形式にしようかな?なんて・・思っていて、デザインがかっこいいテンプレートでやってみるかな?なんて思ったのですが・・それはそれでめんどくさく。。一度やったことって、もう一回ちゃんとやるというのが苦手なタイプなので・・・
実際、Wordpressのテーマ何個か立ち上げてThe575小平環境の会のページも作っていたりしますが。。このサイトも含めて3つのWordpressテーマを使ってみて、いろんな相性問題があったり、でわざわざこういうCMS的なもの作らなくてもいいのかな?なんて思ってきています。最近だと、スマホではGoogleがCDNしてくれるAMPとかいうもっと軽量なHTMLが出てきたり・・していて、対応させようとするだけでも大変。このサイトは、Simplicityというテーマを使っているので、
ず~っと以前から気になっていたBootstrapという仕組みを使って、ちょっと遊んでみました。

Bootstrap って?

Twitterがはじめに作ったのかな?今のホームページって、特にスマホ対応などが出てきてから、レスポンシブとか言ってDesktopでもスマホでもきれいに見せるために、JavaScriptで出来ているっていっても過言ではないほどの代物になっていますね。HTMLだけ知ってればっていうような簡単なものじゃなくなってきている。デザインもCSSというもので定義されているし、Web0.1くらいから知ってる僕のような世代にはめんどくさくってしかたない。それでテンプレート形式で作ってくれたのがBootstrapってところなんですかね?僕にはよくわからないんですけど(笑)

概要は、これらが分かりやすいかな?僕も全部理解できてないけど・・

Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4)
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。
Bootstrap - Wikipedia

公式サイトは、こちら

Bootstrap
The most popular HTML, CSS, and JS library in the world.

だいたいキックスターターとか、最近のベンチャーとかのホームページは、これでできてそうな雰囲気で・・・ こじゃれた感じだけど、どれもよく似たデザインですよね(^^;

簡単におしゃれな感じに・・・・

で・・・こんなのを、簡単に、素早く勉強せずに・・・作ろうかと(笑)

思ってたら、ちょうどいいのを見つけました。

Bootstrap用のエディタ(Mobirise)です。

Mobiriseモバイルウェブサイトビルダー | ホームページ作成
無料Webサイトメーカー。素晴らしいレスポンシブWebサイトを制作。容易く高速 - コーディング不要! 無料で商用利用。

フォーラムがFAQになってるのかな?

Mobirise Forums

使い方は、とっても簡単で、ダウンロードして、ログインして・・

Sitesのところを、Createして適当なフォルダを指定しておきます。

あとは、赤い+印のところを、クリックして、いろんなブロックがあるので、それをドラッグして、ちょこっと編集するだけです。

ちょこちょこっとした機能は、ほとんど入っていそうなので、ほとんぼ勉強することなく・・今風のホームページがデザインできます。

で・・・ちょこっとDIYクリエーターズの表紙ページを作ってみました。

青梅 賢治の農楽校 DIY クリエーターズ ホームページ
DIY 青梅 成木 農楽校 ピザ窯 ゆっくり 自然農

どうでしょうか?

若干、見るブラウザによって違うようですけど、なかなか、簡単にできます。

ちなみに、自分のサイトへは、FFFTPなどのFTPを使ってもアップできますし、このエディターからも直接FTPでアップすることもできます。

むっちゃ便利な世の中になったもんだ。。

コメントを残していただけるとありがたいです

Loading Facebook Comments ...
%d人のブロガーが「いいね」をつけました。