Tips
GhostのエディタではCardsという機能を使って記事本文中に様々な要素を埋め込むことができます。 Editor cardsJump to a card * Images * Markdown * HTML * Gallery * Divider * Bookmark * Email content * Email call to action * Public preview * Button * Callout * GIF * Toggle * Audio * Video * File * Product * Header * Embeds * Signup Card The Ghost editor includes rich media objects called Cards, which can be inserted into your content to add
Tips
以前Sourceテーマのファイルを編集して、タグ一覧のページを作りました。 Ghostブログにタグ一覧ページを作る (Sourceテーマの場合)記事を分類するのにタグをつけているのですが、いくらタグをつけたところで絞り込みに使えないのであれば何の意味もないですよね。 僕はSourceというGhostのデフォルトのテーマを使っているのですが、このテーマだと、それぞれのタグをそのままナビゲーションバーに設置することはできるんですが、ドロップダウンでタグを選んだり、タグの一覧を表示したりはすぐにはできないようです。 そこで今回は、Sourceテーマを使ってタグ一覧のページを作ってみましたという記事です。 Sourceテーマを使ってタグ絞り込みをしたいときにできること 上でも述べましたが、このテーマだと、ドロップダウンとか一覧ページはそのままだと出せません。 できるのは、それぞれのタグをナビゲーションバーに置くくらいです。 これは例えば、「ブログ」というタグをつけた記事があって、そのタグを持っている記事一覧を出せるようにしようと思ったら、ナビゲーションバーに「ブログ」という項目をわざわざ作ら
Tips
Three.jsを使って作られた3Dモデルをブログ記事の中にCode injectionを使って埋め込めるのかなとふと思ったので試してみました。 本文中でHTMLカードに<canvas>タグ、Code injectionのヘッダに<style>タグでCSSを、<script>タグでJavaScriptを貼り付けると、ちゃんと動かすことができました。 埋め込んだのはThree.jsのマニュアルにあった以下の例です。 three.js manual コードの中身は全く理解できていませんが、3Dって面白いですね。 Three.jsでは3Dモデルをインポートして使用することもできるようですが、以下のようなところから素材を使わせてもらうこともできるみたいですね。 OpenGameArt.orgというサイトで、ゲーム制作をしている人には有名なのかもしれませんが、僕は初めて知りました。 OpenGameArt.orgOpenGameArt.org 素材によってライセンス形態が異なるようですが、先日の記事で描いたCC0みたいなライセンスにしてある3D素材もあって、Three.j
Tips
僕は特別アートに詳しいわけでもないですが、たまに絵を見たくなることもあります。 そういうとき、思い切って美術館に行くこともあるにはあるんですが、基本的に出不精なのでネットで調べて満足してしまうことが大半です。 ただやっぱり画面の中で見るのはその一瞬だけですし、なんだか味気ないってのも正直あります。 この記事は、そんなときはパブリックドメインになっている絵画データを印刷するとなんかいいよってことを伝えたくて書きました。 こういう自由に利用可能な素材はブログの画像なんかにも使えるのもいいですよね。この記事のトップにもパブリックドメインの絵画をお借りして載せてみました。 パブリックドメインってなんぞや 高画質な絵画データでもパブリックドメインで無償でダウンロード可能になってるものが結構あったりします。 パブリックドメインとは、誰でも自由に利用可能(商用利用含む)な素材です。 パブリックドメインになっている素材は大きく分けて、 1. 著作権が切れたもの 2. 著作者がパブリックドメインにしたもの(CC0と表記されている) の２種類があるようです。 💡僕は
Walkthrough
記事を分類するのにタグをつけているのですが、いくらタグをつけたところで絞り込みに使えないのであれば何の意味もないですよね。 僕はSourceというGhostのデフォルトのテーマを使っているのですが、このテーマだと、それぞれのタグをそのままナビゲーションバーに設置することはできるんですが、ドロップダウンでタグを選んだり、タグの一覧を表示したりはすぐにはできないようです。 そこで今回は、Sourceテーマを使ってタグ一覧のページを作ってみましたという記事です。 Sourceテーマを使ってタグ絞り込みをしたいときにできること 上でも述べましたが、このテーマだと、ドロップダウンとか一覧ページはそのままだと出せません。 できるのは、それぞれのタグをナビゲーションバーに置くくらいです。 これは例えば、「ブログ」というタグをつけた記事があって、そのタグを持っている記事一覧を出せるようにしようと思ったら、ナビゲーションバーに「ブログ」という項目をわざわざ作らないといけないということです。 これだとタグが増えてくると全部を載せるのは不可能ですし、それ以前に記事のタグをメニューに
Learn
以前の記事でも紹介しましたが、Udemyは僕が何か新しいことを学びたいと思ったときにYouTubeと並んでとりあえず検索するサービスの一つです。 ♦️この記事はアフィリエイトリンクを含みますお金をかけずに勉強しよう (1) MOOCとOCW最近は新しいことを学ぶハードルが本当に低くなりました。 インターネット接続環境と視聴デバイス、あとは自分の学ぶ意欲さえあれば、いつでもどこでも世界最高水準の教育にアクセスすることができます。 しかも無料で。(もちろん通信費はかかりますが) これは何の記事？ この記事では、僕が実際に使ったことのある海外サービスを中心に、無料(または低価格)で学ぶことができるWebサイトを２回に分けて紹介します。 基本的には英語なので、英語ができる方はぜひチャレンジしてみてください。 ただあんまり英語が得意じゃないという方でも、一部サービスは日本語版を提供していたり、日本語字幕をつけることもできます。 これから英語ができるようになりたいという方には、「英語を」学ぶコースが用意されているものもありますし、何より「英語で」学ぶということは英語力アップに面白いくらい効果があ
Learn
前回の記事では、MOOCとOCWを活用して無料で学習する方法を紹介しました。 お金をかけずに勉強しよう (1) MOOCとOCW最近は新しいことを学ぶハードルが本当に低くなりました。 インターネット接続環境と視聴デバイス、あとは自分の学ぶ意欲さえあれば、いつでもどこでも世界最高水準の教育にアクセスすることができます。 しかも無料で。(もちろん通信費はかかりますが) これは何の記事？ この記事では、僕が実際に使ったことのある海外サービスを中心に、無料(または低価格)で学ぶことができるWebサイトを２回に分けて紹介します。 基本的には英語なので、英語ができる方はぜひチャレンジしてみてください。 ただあんまり英語が得意じゃないという方でも、一部サービスは日本語版を提供していたり、日本語字幕をつけることもできます。 これから英語ができるようになりたいという方には、「英語を」学ぶコースが用意されているものもありますし、何より「英語で」学ぶということは英語力アップに面白いくらい効果があります。 ここで紹介するものはすべて基本無料か低価格のものなので、試しに受講してみようなんてことも気軽にできるか
以前の記事でも紹介しましたが、Udemyは僕が何か新しいことを学びたいと思ったときにYouTubeと並んでとりあえず検索するサービスの一つです。 ♦️この記事はアフィリエイトリンクを含みますお金をかけずに勉強しよう (1) MOOCとOCW最近は新しいことを学ぶハードルが本当に低くなりました。 インターネット接続環境と視聴デバイス、あとは自分の学ぶ意欲さえあれば、いつでもどこでも世界最高水準の教育にアクセスすることができます。 しかも無料で。(もちろん通信費はかかりますが) これは何の記事？ この記事では、僕が実際に使ったことのある海外サービスを中心に、無料(または低価格)で学ぶことができるWebサイトを２回に分けて紹介します。 基本的には英語なので、英語ができる方はぜひチャレンジしてみてください。 ただあんまり英語が得意じゃないという方でも、一部サービスは日本語版を提供していたり、日本語字幕をつけることもできます。 これから英語ができるようになりたいという方には、「英語を」学ぶコースが用意されているものもありますし、何より「英語で」学ぶということは英語力アップに面白いくらい効果があ
前回の記事では、MOOCとOCWを活用して無料で学習する方法を紹介しました。 お金をかけずに勉強しよう (1) MOOCとOCW最近は新しいことを学ぶハードルが本当に低くなりました。 インターネット接続環境と視聴デバイス、あとは自分の学ぶ意欲さえあれば、いつでもどこでも世界最高水準の教育にアクセスすることができます。 しかも無料で。(もちろん通信費はかかりますが) これは何の記事？ この記事では、僕が実際に使ったことのある海外サービスを中心に、無料(または低価格)で学ぶことができるWebサイトを２回に分けて紹介します。 基本的には英語なので、英語ができる方はぜひチャレンジしてみてください。 ただあんまり英語が得意じゃないという方でも、一部サービスは日本語版を提供していたり、日本語字幕をつけることもできます。 これから英語ができるようになりたいという方には、「英語を」学ぶコースが用意されているものもありますし、何より「英語で」学ぶということは英語力アップに面白いくらい効果があります。 ここで紹介するものはすべて基本無料か低価格のものなので、試しに受講してみようなんてことも気軽にできるか
最近は新しいことを学ぶハードルが本当に低くなりました。 インターネット接続環境と視聴デバイス、あとは自分の学ぶ意欲さえあれば、いつでもどこでも世界最高水準の教育にアクセスすることができます。 しかも無料で。(もちろん通信費はかかりますが) ♦️この記事はアフィリエイトリンクを含みます これは何の記事？ この記事では、僕が実際に使ったことのある海外サービスを中心に、無料(または低価格)で学ぶことができるWebサイトを２回に分けて紹介します。 基本的には英語なので、英語ができる方はぜひチャレンジしてみてください。 ただあんまり英語が得意じゃないという方でも、一部サービスは日本語版を提供していたり、日本語字幕をつけることもできます。 これから英語ができるようになりたいという方には、「英語を」学ぶコースが用意されているものもありますし、何より「英語で」学ぶということは英語力アップに面白いくらい効果があります。 ここで紹介するものはすべて基本無料か低価格のものなので、試しに受講してみようなんてことも気軽にできるかと思います。 もしかしたらちょっと覗いてみると今まで
Ulyssesの試用期間の1週間が過ぎて、明日から課金が始まるという段階でこの記事を書いています。 ここでは1週間使っている間によくわからなくて調べたことをメモがわりに置いておきます。 Ulyssesを使い始めた経緯 先日、Ghostでブログを書くためのエディタを探していて、iA Writerとどっちにするか迷った上でUlyssesを使ってみることに決めたという記事を書きました。 Ghostでブログを書くときのエディタの話 (Ghost editor, iA Writer, Ulysses)Ghostでブログを始めるにあたり、記事を書いたりメモをしたりするのに使えるエディタを探した時の記録です。記事の管理や投稿にストレスの少ない環境を作って、ブログを継続しやすくできれば良いなと思っていくつかエディタを試してみました。 エディタの条件 そもそもGhostには記事を書く際のエディタ(以下Ghost editor)が標準で用意されています。 Intro to the editorGhost has a powerful visual editor with familia
最近は新しいことを学ぶハードルが本当に低くなりました。 インターネット接続環境と視聴デバイス、あとは自分の学ぶ意欲さえあれば、いつでもどこでも世界最高水準の教育にアクセスすることができます。 しかも無料で。(もちろん通信費はかかりますが) ♦️この記事はアフィリエイトリンクを含みます これは何の記事？ この記事では、僕が実際に使ったことのある海外サービスを中心に、無料(または低価格)で学ぶことができるWebサイトを２回に分けて紹介します。 基本的には英語なので、英語ができる方はぜひチャレンジしてみてください。 ただあんまり英語が得意じゃないという方でも、一部サービスは日本語版を提供していたり、日本語字幕をつけることもできます。 これから英語ができるようになりたいという方には、「英語を」学ぶコースが用意されているものもありますし、何より「英語で」学ぶということは英語力アップに面白いくらい効果があります。 ここで紹介するものはすべて基本無料か低価格のものなので、試しに受講してみようなんてことも気軽にできるかと思います。 もしかしたらちょっと覗いてみると今まで
Ulyssesの試用期間の1週間が過ぎて、明日から課金が始まるという段階でこの記事を書いています。 ここでは1週間使っている間によくわからなくて調べたことをメモがわりに置いておきます。 Ulyssesを使い始めた経緯 先日、Ghostでブログを書くためのエディタを探していて、iA Writerとどっちにするか迷った上でUlyssesを使ってみることに決めたという記事を書きました。 Ghostでブログを書くときのエディタの話 (Ghost editor, iA Writer, Ulysses)Ghostでブログを始めるにあたり、記事を書いたりメモをしたりするのに使えるエディタを探した時の記録です。記事の管理や投稿にストレスの少ない環境を作って、ブログを継続しやすくできれば良いなと思っていくつかエディタを試してみました。 エディタの条件 そもそもGhostには記事を書く際のエディタ(以下Ghost editor)が標準で用意されています。 Intro to the editorGhost has a powerful visual editor with familia
Ghostをインストールするとすぐにブログを書き始めることができますが、テーマを変えたりCode injectionを利用することで、デザインや機能を自分の好みにカスタマイズすることもできます。 この記事では、僕がブログ開始時に行った設定やカスタマイズをまとめておこうと思います。 設定 一般的なデザインや機能については、GhostダッシュボードのSettingから設定することができます。 基本的にはSettingの項目を上から順に見ていって、自分に必要なものを設定するだけなので、ここでは少し時間がかかったり、分からなくて調べたところだけ書いておきます。 テーマの選択と簡単なカスタマイズ 無料テーマと有料テーマ テーマは公式が用意している無料のものでも18個あって、目的に応じて選択することができます。 正直、今の僕は無料のものでも十分満足したので、有料のものはそれほど詳しく見ていないのですが、GhostのMarketplaceから色々なテーマを購入して使用することもできます。 Ghost Themes - The MarketplaceDiscover b
Ghostでブログを始めるにあたり、記事を書いたりメモをしたりするのに使えるエディタを探した時の記録です。記事の管理や投稿にストレスの少ない環境を作って、ブログを継続しやすくできれば良いなと思っていくつかエディタを試してみました。 エディタの条件 そもそもGhostには記事を書く際のエディタ(以下Ghost editor)が標準で用意されています。 Intro to the editorGhost has a powerful visual editor with familiar formatting options. Designed to get out of the way and let you do your best work, the editor delivers power and flexibility, with the ability to quickly add dynamic content
ブログには問い合わせフォームがあった方が良さそうなので、設置することにします。Formspreeというサービスを使うと、生成されるHTMLコードをコピペするだけでいいので簡単でした。 Custom Forms with No Server Code | FormspreeFormspree is a form backend, API, and email service for HTML & JavaScript forms. It’s the simplest way to embed custom contact us forms, order forms, or email capture forms on your static website.Formspree この記事では以下リンクでGhostが提供する設定ガイドを参考に進め、その手順を記録しておきます。現在のFormspreeの登録画面と少し違いますが、問題なく設置できました。
GhostでGoogle Analyticsを使う方法は、以下のリンクに記載があります。Ghost側の管理画面で、Settings -> Code injection と進み、ヘッダにGoogle Analyticsのコードを埋め込むと使えるようになります。 Official Ghost + Google Analytics IntegrationIntegrate your Ghost publication directly with Google Analytics using sensible code injection for in-depth site metrics in realtime 👉📈Ghost - The Professional Publishing Platform この記事では、上記のリンクに沿って設定した手順を記録しておきます。 Google Analyticsの設定 新しくアカウントを作る際には、Google Analyticsのサイトに行き、指示に従って新しいPropertyを作成する。 すでにアカウントを持っている場合
VPSサービスのLinodeと、オープンソースCMSのGhostを使って、このブログサイトを立ち上げました。この記事ではそのときに考えていたことや、実際の手順についてまとめています。 手順だけ見たいという方は以下からどうぞ 1. Linodeの設定 2. Ghostの設定 基本的に以下の公式の情報をもとに進めていますが、微妙にうまくいかないところがあったので、その辺りについては自分が動かすことができた方法を付け加えています。 * Linodeのガイド * アカウントの作成 Platform - Getting Started on the Linode Platform * インスタンスの作成 Guides - Create a Compute Instance * インスタンスの設定 Guides - Setting Up and Securing a Compute Instance * Ghostのガイド * LinodeでGhostを設定する流れ How to install Ghost on Linode * UbuntuにGhostをイ