SlideShare a Scribd company logo
1 of 141
Download to read offline
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 です

More Related Content

What's hot

今日こそわかる、安全なWebアプリの作り方2010
今日こそわかる、安全なWebアプリの作り方2010今日こそわかる、安全なWebアプリの作り方2010
今日こそわかる、安全なWebアプリの作り方2010Hiroshi Tokumaru
 
Writing php extensions in golang
Writing php extensions in golangWriting php extensions in golang
Writing php extensions in golangdo_aki
 
Nested List Comprehension and Binary Search
Nested List Comprehension and Binary SearchNested List Comprehension and Binary Search
Nested List Comprehension and Binary SearchColin Su
 
Polymorphism in C# Function overloading in C#
Polymorphism in C# Function overloading in C#Polymorphism in C# Function overloading in C#
Polymorphism in C# Function overloading in C#Abid Kohistani
 
Refactoring 101
Refactoring 101Refactoring 101
Refactoring 101Adam Culp
 
Tuto comment pirater un compte facebook
Tuto comment pirater un compte facebookTuto comment pirater un compte facebook
Tuto comment pirater un compte facebookLeo Bonnet
 
Remote Method Invocation (Java RMI)
Remote Method Invocation (Java RMI)Remote Method Invocation (Java RMI)
Remote Method Invocation (Java RMI)Sonali Parab
 
Polymorphism in java
Polymorphism in java Polymorphism in java
Polymorphism in java Janu Jahnavi
 
Basic unix commands
Basic unix commandsBasic unix commands
Basic unix commandsswtjerin4u
 
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―shinjiigarashi
 
08 c++ Operator Overloading.ppt
08 c++ Operator Overloading.ppt08 c++ Operator Overloading.ppt
08 c++ Operator Overloading.pptTareq Hasan
 
超簡単!Subversion入門 準備編
超簡単!Subversion入門 準備編超簡単!Subversion入門 準備編
超簡単!Subversion入門 準備編Shin Tanigawa
 
陽明大學/FHIR 快速跳坑指南
陽明大學/FHIR 快速跳坑指南陽明大學/FHIR 快速跳坑指南
陽明大學/FHIR 快速跳坑指南Lorex L. Yang
 

What's hot (20)

Java servlets
Java servletsJava servlets
Java servlets
 
Uploading a file with php
Uploading a file with phpUploading a file with php
Uploading a file with php
 
今日こそわかる、安全なWebアプリの作り方2010
今日こそわかる、安全なWebアプリの作り方2010今日こそわかる、安全なWebアプリの作り方2010
今日こそわかる、安全なWebアプリの作り方2010
 
Writing php extensions in golang
Writing php extensions in golangWriting php extensions in golang
Writing php extensions in golang
 
Nested List Comprehension and Binary Search
Nested List Comprehension and Binary SearchNested List Comprehension and Binary Search
Nested List Comprehension and Binary Search
 
Polymorphism in C# Function overloading in C#
Polymorphism in C# Function overloading in C#Polymorphism in C# Function overloading in C#
Polymorphism in C# Function overloading in C#
 
Refactoring 101
Refactoring 101Refactoring 101
Refactoring 101
 
Tuto comment pirater un compte facebook
Tuto comment pirater un compte facebookTuto comment pirater un compte facebook
Tuto comment pirater un compte facebook
 
Remote Method Invocation (Java RMI)
Remote Method Invocation (Java RMI)Remote Method Invocation (Java RMI)
Remote Method Invocation (Java RMI)
 
Polymorphism in java
Polymorphism in java Polymorphism in java
Polymorphism in java
 
Basic unix commands
Basic unix commandsBasic unix commands
Basic unix commands
 
Php course-syllabus
Php course-syllabusPhp course-syllabus
Php course-syllabus
 
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
 
08 c++ Operator Overloading.ppt
08 c++ Operator Overloading.ppt08 c++ Operator Overloading.ppt
08 c++ Operator Overloading.ppt
 
超簡単!Subversion入門 準備編
超簡単!Subversion入門 準備編超簡単!Subversion入門 準備編
超簡単!Subversion入門 準備編
 
陽明大學/FHIR 快速跳坑指南
陽明大學/FHIR 快速跳坑指南陽明大學/FHIR 快速跳坑指南
陽明大學/FHIR 快速跳坑指南
 
JAVA OOP
JAVA OOPJAVA OOP
JAVA OOP
 
Know the UNIX Commands
Know the UNIX CommandsKnow the UNIX Commands
Know the UNIX Commands
 
File handling in C
File handling in CFile handling in C
File handling in C
 
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
 

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

eZ Publish勉強会10月〜Wysiwygエディター〜
eZ Publish勉強会10月〜Wysiwygエディター〜eZ Publish勉強会10月〜Wysiwygエディター〜
eZ Publish勉強会10月〜Wysiwygエディター〜ericsagnes
 
WordBench熊本第3回勉強会
WordBench熊本第3回勉強会WordBench熊本第3回勉強会
WordBench熊本第3回勉強会Akinori Tateyama
 
Sitecore におけるレイアウトの考え方
Sitecore におけるレイアウトの考え方Sitecore におけるレイアウトの考え方
Sitecore におけるレイアウトの考え方サイトコア株式会社
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5Andy Hall
 
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回Hitsuji
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshoptakashi ono
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn SeminarSix Apart
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126webourgeon
 
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
 
リリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみようリリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみようSeto Takahiro
 
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
 
DebianとWordPressでハッピーになろう!
DebianとWordPressでハッピーになろう!DebianとWordPressでハッピーになろう!
DebianとWordPressでハッピーになろう!Jun Nogata
 
20141101 handson
20141101 handson20141101 handson
20141101 handsonSix Apart
 
愛と涙のWordPress無理やりカスタマイズ事例集
愛と涙のWordPress無理やりカスタマイズ事例集愛と涙のWordPress無理やりカスタマイズ事例集
愛と涙のWordPress無理やりカスタマイズ事例集Hidekazu Ishikawa
 
再構築ハンズオン
再構築ハンズオン再構築ハンズオン
再構築ハンズオンYoshitaka KATO
 
Team Foundation Server 2015 による テスト工数削減
Team Foundation Server 2015 によるテスト工数削減Team Foundation Server 2015 によるテスト工数削減
Team Foundation Server 2015 による テスト工数削減Masaki Takeda
 
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成Yoshie Nakayama
 

Similar to 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