SlideShare une entreprise Scribd logo
1  sur  141
Télécharger pour lire hors ligne
10分で作るオリジナルサイト
Powered by adiary
1. インストール
1. インストール
● インストールはたったの 4 行
※ コンソールが使えない場合はファイルをコピー
$ git clone https://github.com/nabe-abk/adiary
$ cd adiary
$ chmod 777 __cache/ pub/ data/
$ cp adiary.conf.cgi.sample adiary.conf.cgi
2. 初期設定
2. 初期設定
2. 初期設定
最初から入力済
2. 初期設定
自分を管理者として追加
2. 初期設定
設定したパスワードを入力
2. 初期設定
2. 初期設定
2. 初期設定
2. 初期設定
サイト名を設定
サイトの説明
2. 初期設定
2. 初期設定
2. 初期設定
サイトが使える状態になりました
3. 試しに記事を書いてみる
3. 試しに記事を書く
3. 試しに記事を書く
記事のタイトル
記事の本文
3. 試しに記事を書く
記事のタイトル
記事の本文
記事入力にも色々な機能があり、
例えば Markdown 入力もできます
3. 試しに記事を書く
3. 試しに記事を書く
記事が公開されました
4. デザインの変更(前編)
4. デザインの変更(前編)
● よくあるサイトデザイン方法
– HTML や CSS を書き換え
– テンプレートという特殊なファイルを書き換え
4. デザインの変更(前編)
● よくあるサイトデザイン方法
– HTML や CSS を書き換え
– テンプレートという特殊なファイルを書き換え
adiary なら面倒な作業は不要!
専門知識も不要!
4.1 ベースデザイン選択
4.1 ベースデザイン選択
4.1 ベースデザイン選択
4.1 ベースデザイン選択
4.1 ベースデザイン選択
テーマと呼ばれる基本デザインが
13 種類附属
※2016 年 1 月現在
4.1 ベースデザイン選択
テーマ bigblue
4.1 ベースデザイン選択
テーマ hatena2
4.1 ベースデザイン選択
テーマ nature-forest
4.1 ベースデザイン選択
テーマ yuu
4.1 ベースデザイン選択
テーマ wp
4.1 ベースデザイン選択
テーマ wp
Wordpress 風のシンプルなデザイン
(カスタマイズ前提のテーマです)
4.1 ベースデザイン選択
テーマ konomi
4.1 ベースデザイン選択
テーマ konomi
このようなポップなテーマも
何種類か入ってます
4.1 ベースデザイン選択
テーマ mikky
4.1 ベースデザイン選択
このテーマをいったん保存します。
4.1 ベースデザイン選択
4.1 ベースデザイン選択
テーマが切り替わりました
4.2 配色の変更
再びデザイン編集を開き、
今度は H バーを操作します。
4.2 配色の変更
4.2 配色の変更
4.2 配色の変更
4.2 配色の変更
配色をマウスで簡単に変更できます
※ 個別に色を設定することもできます
4.2 配色の変更
以上でテーマ選択が
終わりました
4.2 配色の変更
テーマや配色は、
スマホ画面にも
反映されます
※ 一部非対応のテーマがあります。
4.3 テーマ機能まとめ
● 13 種類からテーマを選択できた。 (2016/1 時点 )
● 配色をマウスで簡単に変更。
– 非対応のテーマもあります。
4.3 テーマ機能まとめ
● 13 種類からテーマを選択できた。 (2016/1 時点 )
● 配色をマウスで簡単に変更。
– 非対応のテーマもあります。
CSS の知識があれば
テーマを作ることもできます。
詳細資料 http://adiary.org/devman/theme/
5. デザインの変更(後編)
5.1 デザイン編集
5.1 デザイン編集
5.1 デザイン編集
見慣れないボタンが……?
5.1 デザイン編集
表示をクリックすると
色が変わるブロックが……
5.1 デザイン編集
サイト要素はモジュールの
組み合わせで成り立っている
タグ一覧
サイト情報
記事一覧
コメント
一覧
検索
記事ヘッダ
記事フッタ
ページ送り
5.1 デザイン編集
マウスで位置を変更
5.1 デザイン編集
位置が入れ替わりました
5.1 デザイン編集
☓ ボタンをクリック
5.1 デザイン編集
system info が
消えました
5.1 デザイン編集
モジュールを
追加してみましょう。
5.1 デザイン編集
カレンダーが
追加されました
5.1 デザイン編集
フリー入力を追加
5.1 デザイン編集
設定ボタン
5.1 デザイン編集
タイトル
本文
HTML も入力できます
5.1 デザイン編集
すぐに反映されました
※ すぐ反映されない物もあります
5.1 デザイン編集
今度はページタイトルの
デザインを変えてみます。
5.1 デザイン編集
デザイン編集ツールが表示されました。
5.1 デザイン編集
タイトルの文字色変更
5.1 デザイン編集
タイトルの装飾を設定
5.1 デザイン編集
反映されました
5.1 デザイン編集
背景画像の変更
5.1 デザイン編集
背景画像の変更
5.1 デザイン編集
5.1 デザイン編集
ヘッダや
画面全体の設定
5.1 デザイン編集
全体の横幅も
設定できます。
(今回はそのまま)
5.1 デザイン編集
5.1 デザイン編集
この後、ヘッダ背景色と
記事部を少し設定して
保存しました
5.1 デザイン編集
5.2 デザイン編集まとめ
● モジュールを組み合わせデザインを変更できた。
● HTML を書かずにサイトの構成を変更できた。
● CSS を書かずに細かい見た目を変更できた。
5.2 デザイン編集まとめ
● モジュールを組み合わせデザインを変更できた。
● HTML を書かずにサイトの構成を変更できた。
● CSS を書かずに細かい見た目を変更できた。
10 分でオリジナルサイトが
完成した。
6.adiary の便利な機能
6 adiary の便利な機能
● サイトを運営する上で役立つ機能が沢山ある。
● そのような機能をいくつか紹介。
6.1 画像アルバム機能
6.1 画像アルバム
6.1 画像アルバム
画像ビュー
フォルダ
6.1 画像アルバム
アップロード
OS の
エクスプローラーから
ドロップ
6.1 画像アルバム
6.1 画像アルバム
ダブルクリック
6.1 画像アルバム
6.1 画像アルバム
Lightbox2.js による拡大表示
キーボード、マウス、
スワイプ操作(タッチ)
で画像をめくれます
6.1 画像アルバム
選択してドラッグ
6.1 画像アルバム
6.1 画像アルバム
6.1 画像アルバム
画像を選択して
6.1 画像アルバム
画像を選択して
6.1 画像アルバム
6.1 画像アルバム
画像使って記事を
作成できました
6.1 画像アルバム
記事編集画面に
ファイルを直接ドロップすること
もできます
6.2 コンテンツ管理機能
6.2 コンテンツ管理
● いわゆる固定ページ機能。
● コンテンツページはすべて階層構造を持つ。
6.2 コンテンツ管理
6.2 コンテンツ管理
記事 URL の一部となる
記事 key を設定
6.2 コンテンツ管理
6.2 コンテンツ管理
先ほどの記事を
親に指定します
6.2 コンテンツ管理
6.2 コンテンツ管理
ツリーをたどるリンクが
表示されます
6.2 コンテンツ管理
先ほどの記事には
子の一覧が表示されます
6.2 コンテンツ管理
同様に
いくつかコンテンツページを
作成しました
6.2 コンテンツ管理
6.2 コンテンツ管理
コンテンツの状態を
確認してみます
6.2 コンテンツ管理
6.2 コンテンツ管理
6.2 コンテンツ管理
コンテンツページが一覧で
確認できます
6.2 コンテンツ管理
コンテンツページが一覧で
確認できます
マウス操作で
ツリーや順番を
変更できます
6.2 コンテンツ管理
コンテンツの一覧を
分かりやすく表示してみましょう
6.2 コンテンツ管理
6.2 コンテンツ管理
6.2 コンテンツ管理
6.2 コンテンツ管理
6.2 コンテンツ管理
6.2 コンテンツ管理
6.2 コンテンツ管理
コンテンツ一覧
ドロップダウン
メニュー
6.2 コンテンツ管理
● コンテンツのツリーが『自動反映』される。
– ツリーを使いサイトを構築できる。
– ツリー構造のメモ代わりに使える。
6.2 コンテンツ管理
● コンテンツのツリーが『自動反映』される。
– ツリーを使いサイトを構築できる。
– ツリー構造のメモ代わりに使える。
「マルチユーザー機能」
「同時編集ロック機能」
情報共有メモに便利
6.3 スマホ完全対応
6.3 スマホ完全対応
設定不要で
スマホ表示に対応
6.3 スマホ完全対応
記事の編集もできる
6.3 スマホ完全対応
管理画面も大丈夫
6.3 スマホ完全対応
設定画面も大丈夫
6.3 スマホ完全対応
タッチ操作で
画像管理もできる
6.3 スマホ完全対応
タッチ操作で
画像管理もできる
アップロード、記事貼り付け
だけではなく全操作 ok !
フォルダ管理、ファイル移動、
スライドショー、サムネイル再生成
…… 等々
6.3 スマホ完全対応
手持ち画像をアルバムに入れて、
出先から画像サーバとして
使うと超便利!
6.3 スマホ完全対応
● 設定しなくてもスマホ対応!
● しかもただ表示するだけではない!
6.3 スマホ完全対応
● 設定しなくてもスマホ対応!
● しかもただ表示するだけではない!
– 記事を書いたり画像をアップしたりできる。
– 管理機能のほとんどを使用できる。
– テーマ設定が、スマホ画面にも反映される。
6.4 その他の特徴
6.4 その他の特徴
● マルチユーザー、マルチサイト対応
● 超高速動作!
● Markdown やさつき記法(はてな記法風 )
● 外部 DB 不要( PostgreSQL/MySQL にも対応)
● 階層化されたタグ(カテゴリ)機能
● プライベートモード(非公開サイト、会員制など)
● Facebook OGP/Twitter Cards 標準対応
…… などなど
7. まとめ
7. まとめ
● 10 分でオリジナルサイトを作成できた。
● それ以外もに便利な機能がたくさんあった。
● 使いやすい管理画面。
7. まとめ
W○rdpress
なんて投げ捨てて
adiary を使おう!
7. まとめ
● http://adiary.org/
● https://github.com/nabe-abk/adiary
– adiary は日本製オープンソース CMS です

Contenu connexe

Tendances

Dadlaga khicheel 11 excel home
Dadlaga khicheel 11 excel homeDadlaga khicheel 11 excel home
Dadlaga khicheel 11 excel home
henjii
 
1. интернетийн хурдаа 20 хувь нэмэх
1. интернетийн хурдаа 20 хувь нэмэх1. интернетийн хурдаа 20 хувь нэмэх
1. интернетийн хурдаа 20 хувь нэмэх
Munkhtsetseg Myagmar
 
Power point 2007 програмын тухай
Power point 2007 програмын тухайPower point 2007 програмын тухай
Power point 2007 програмын тухай
nyamsuren nergui
 

Tendances (20)

Excel Lesson
Excel  LessonExcel  Lesson
Excel Lesson
 
Ansible with oci
Ansible with ociAnsible with oci
Ansible with oci
 
Ms word insert
Ms word insertMs word insert
Ms word insert
 
Dadlaga khicheel 11 excel home
Dadlaga khicheel 11 excel homeDadlaga khicheel 11 excel home
Dadlaga khicheel 11 excel home
 
Redis
RedisRedis
Redis
 
Usando efeitos, animações e transições no FireMonkey
Usando efeitos, animações e transições no FireMonkey Usando efeitos, animações e transições no FireMonkey
Usando efeitos, animações e transições no FireMonkey
 
Windows 10 Nt Heap Exploitation (English version)
Windows 10 Nt Heap Exploitation (English version)Windows 10 Nt Heap Exploitation (English version)
Windows 10 Nt Heap Exploitation (English version)
 
JAWS-UG CLI #25 LT - AWS Tools for Windows PowerShellでログを取得
JAWS-UG CLI #25 LT - AWS Tools for Windows PowerShellでログを取得JAWS-UG CLI #25 LT - AWS Tools for Windows PowerShellでログを取得
JAWS-UG CLI #25 LT - AWS Tools for Windows PowerShellでログを取得
 
Memcache Injection (Hacktrick'15)
Memcache Injection (Hacktrick'15)Memcache Injection (Hacktrick'15)
Memcache Injection (Hacktrick'15)
 
Lecture 4 нийлмэл удамшил
Lecture 4 нийлмэл удамшилLecture 4 нийлмэл удамшил
Lecture 4 нийлмэл удамшил
 
Lecture 3 os
Lecture 3 osLecture 3 os
Lecture 3 os
 
Interview questions
Interview questionsInterview questions
Interview questions
 
Linux Binary Exploitation - Return-oritend Programing
Linux Binary Exploitation - Return-oritend ProgramingLinux Binary Exploitation - Return-oritend Programing
Linux Binary Exploitation - Return-oritend Programing
 
1. интернетийн хурдаа 20 хувь нэмэх
1. интернетийн хурдаа 20 хувь нэмэх1. интернетийн хурдаа 20 хувь нэмэх
1. интернетийн хурдаа 20 хувь нэмэх
 
Using JSON with MariaDB and MySQL
Using JSON with MariaDB and MySQLUsing JSON with MariaDB and MySQL
Using JSON with MariaDB and MySQL
 
Power shell training
Power shell trainingPower shell training
Power shell training
 
Lecture1
Lecture1Lecture1
Lecture1
 
Power point 2007 програмын тухай
Power point 2007 програмын тухайPower point 2007 програмын тухай
Power point 2007 програмын тухай
 
Understanding domino memory 2017
Understanding domino memory 2017Understanding domino memory 2017
Understanding domino memory 2017
 
아라한사의 스프링 시큐리티 정리
아라한사의 스프링 시큐리티 정리아라한사의 스프링 시큐리티 정리
아라한사의 스프링 시큐리티 정리
 

Similaire à 10分で作るオリジナルサイト - CMS/blog/adiary/Wordpress

ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
 
第2回こけむさズword press部
第2回こけむさズword press部第2回こけむさズword press部
第2回こけむさズword press部
Yuki Suzuki
 
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
ericsagnes
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
 
再構築ハンズオン
再構築ハンズオン再構築ハンズオン
再構築ハンズオン
Yoshitaka KATO
 

Similaire à 10分で作るオリジナルサイト - CMS/blog/adiary/Wordpress (20)

eZ Publish勉強会10月〜Wysiwygエディター〜
eZ Publish勉強会10月〜Wysiwygエディター〜eZ Publish勉強会10月〜Wysiwygエディター〜
eZ Publish勉強会10月〜Wysiwygエディター〜
 
WordBench熊本第3回勉強会
WordBench熊本第3回勉強会WordBench熊本第3回勉強会
WordBench熊本第3回勉強会
 
Sitecore におけるレイアウトの考え方
Sitecore におけるレイアウトの考え方Sitecore におけるレイアウトの考え方
Sitecore におけるレイアウトの考え方
 
Wp html5
Wp html5Wp html5
Wp html5
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
 
第2回こけむさズword press部
第2回こけむさズword press部第2回こけむさズword press部
第2回こけむさズword press部
 
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
 
リリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみようリリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみよう
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
 
DebianとWordPressでハッピーになろう!
DebianとWordPressでハッピーになろう!DebianとWordPressでハッピーになろう!
DebianとWordPressでハッピーになろう!
 
20141101 handson
20141101 handson20141101 handson
20141101 handson
 
愛と涙のWordPress無理やりカスタマイズ事例集
愛と涙のWordPress無理やりカスタマイズ事例集愛と涙のWordPress無理やりカスタマイズ事例集
愛と涙のWordPress無理やりカスタマイズ事例集
 
再構築ハンズオン
再構築ハンズオン再構築ハンズオン
再構築ハンズオン
 
Team Foundation Server 2015 による テスト工数削減
Team Foundation Server 2015 によるテスト工数削減Team Foundation Server 2015 によるテスト工数削減
Team Foundation Server 2015 による テスト工数削減
 
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
 

10分で作るオリジナルサイト - CMS/blog/adiary/Wordpress