記事一覧(3ページ目)
ハンバーガーメニューはもういらない

顧客視点で考えた結果、ハンバーガーメニューをやめました

昨日私はハンバーガーを食べました。モスバーガーのオニオンリングが私の好物です。そして、このサイトではハンバーガーメニューをやめました。お客様のサイトを含め、このサイトでもハンバーガーメニューのクリック率が悪かったことが原因です。ハンバーガーメニューはUIとして良いのかGIGAZINE...

middleman blog

middlemanでブログを作ろう。インストールから初期設定まで(slimも少々)

Wordpressで始めたブログを管理画面がいらないという理由で静的サイトジェネレータのmiddlemanに乗り換えて早3ヶ月。CMS案件やWebアプリケーションのHTML/CSS制作にmiddlemanを使っていたのですが、ブログ機能はこの移行で初めて取り組みました。今回はこのブログ機能に絞って書いていきます。というわけで、以下のような方におすすめの内容でお届けします。middlemanを使ったことがある方middlemanでブログを作りたい方middlemanでのブログ初期設定をやろうとしている方なんとなく見てしまっているという奇特な方 ← どうもありがとうmiddlemanを初めて使う方は、まずは過去記事をご覧ください。インストールからサーバーの起動までブログサイト制作するには、上記ページ内のmiddlemanを起動してみようのスケルトン作成の箇所に補足として記載している、$ bundle exec middleman init --template blogをターミナルに入力し、ブログテンプレートの初期ファイルを作成します。(後述します。)レイアウトとパーシャルについて今回はあまり触れませんが、ここも見ておくと良いかも。開発環境を用意する過去記事のインストールからサーバ起動までのインストールしてみようを行った上で進めていくのが理想ですが、念の為に再掲しておきます。すでに初期セットの作成が完了している方は飛ばしていただいて大丈夫です。ブログ用の初期セットを作成するmiddlemanのインストールが完了していると、下記のようなディレクトリ構造になっています。この状態では、middlemanが使えるようになっただけで、スケルトン自体は生成されていません。生成するにはmiddleman initを行うのですが、今回はブログを作るのでgem "middleman-blog"をGemfileに追加しておく必要があります。source "https://rubygems.org"gem "middleman"gem "middleman-blog"追加後は、有効にするためにbundle installを実行します。middleman-blog は middleman の拡張機能でタグや記事抽出などブログに必要な機能を提供してくれます。middleman-blogをインストール後はbundle exec middleman init --template blogでスケルトンを作成します。もしかすると、Could not find gem 'builder (~> 3.0) ruby' in any of the gem sources listed in your Gemfile or available on this machine.のエラー(赤字)が出るかもしれません。これは、gemのbuilderが見つからないと言うことなので、Gemfile にgem "builder", "~> 3.0"が追加されているかvendor/bundle/ruby/ 以下にbuilderがあるかを確認し、無ければbundle updateしておいてください。ここまで来れば、bundle exec middlemanでサーバを起動してブログの初期セットを確認します。ブラウザから http://localhost:4567 にアクセスし、以下のページが表示されていれば、初期セットが正しく生成されています。復習のつもりが長くなりましたが、ここからブログの設定作業です。現状の初期セットではあまりにも簡素で、ディレクトリ構成もちょいと使いづらそうです。なので、以降は下記の2点について記載していきます。config.rbでカスタム設定Slimの初期セット生成config.rbで自分だけのカスタム設定config.rbは設定ファイルで、以下のような内容を設定することができます。ブログ設定ディレクトリ設定リンクパスの設定ビルド時の出力形式公式サイトにはヘルパーや相対パス設定など、他にもたくさん紹介されていますが、ブログ作成という観点で上記をピックアップしています。前項で実際に生成された config.rbを見ながらご覧いただくとわかりやすいと思います。ブログの設定activate :blog do |blog|...endactivate :blog do |blog|からendまでの内容がブログ設定の記述箇所となり、ここを適宜変更したり、有効化していくことで詳細に設定することが可能となります。#はコメントアウトとなり、これを外すと設定を有効化できます。↓ サンプルとして自分の設定内容を掲載しました。activate :blog do |blog| blog.prefix = "blog" blog.permalink = "{category}/{title}.html" blog.sources = "{year}-{month}-{day}-{title}.html" blog.taglink = "tags/{tag}.html" blog.layout = "layouts/layout" # blog.summary_separator = /(

オススメのガジェット

今年買った、自信を持っておすすめできるアイテム3選。(少ないけど)

Withings Activite Pop関連の検索が相変わらず多いのですが、実はそれと同じくらい活用しまくりのガジェットやアイテムがあることを思い出しまして、今年に入って買ったデバイスやその関連アイテムでおすすめできるやつだけ公開してみます。(絞ると3つだけになってしまった……。)スマー...

初心者のためのSCSS

初心者のためのSCSS。変数とパーシャルを覚えて統一性のあるコードを書こう

ハンバーガーメニューを使っているサイトをよく見かけますが、見た目先行で効果が出にくいようです。GIGAZINEの記事 - なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?クライアントにハンバーガーメニューを実装して欲しいと言われることもありますが、ターゲット層によっては...

CSS flexible box(フレキシブルデザインボックス)

Flexboxを使いこなして柔軟過ぎるCSSレイアウトを実現しよう。

毎朝アクセス解析を見ていると、IE8 以前のバージョンからの流入が激減しており、喜びを隠せない日々を過ごしています。実際、クライアント先の学習塾の 4 月から 7 月の IE だけの平均を見ると、IE9 が 10%、IE11 が 75%、残りが IE7、8、10 という割合です。そして、IE...

Withings Activite Pop

Withings Activite Popを1週間使ってみた感想。

Withings Activite Popを購入したので、「スマートウォッチはこれでしょ。やっと日本で発売されたWithings Activite Popを購入。」というレポートを書いたら「Withings Activite Pop」でかなりの数の検索流入がありました。で、今回は1週間経っ...

MVNOでコストダウン

MVNOに乗り換えて3ヶ月。携帯代が2,000円以下になって、通信コストが大幅に下がった。

「Android ダサい」で検索結果1ページ目に居ましたが、なんだかんだで今は下位に転落です。そもそも「Android ダサくない」という趣旨の記事を書いてたんですけどね。多くの方が過去のダメドロイドの悪い印象を持っているようですが、最近のAndroid、特にnexus6は良い。自分は脱Apple...

scss

初心者Webデザイナー・コーダーこそSCSSを使ってみよう。

久しぶりにWeb関連の話題を。初心者デザイナーはcssやhtmlを書くのが苦手、初心者コーダーも感覚的に作成されたデザインを見ると辟易する、ということはないでしょうか。ちなみに私は、超感覚なデザインファイルを送られると、壮絶なダメ出しをします。自分が思うに、cssが苦手、難しいと思うの...

軽量CSSフレームワーク「Skeleton」

必要な分だけの構成。CSSフレームワークは軽量でミニマルなものが良い。

Chromeの拡張機能で、Wappalyzer というものを使っておりまして、閲覧しているサイトがどんな言語や仕組みで構築されているかをよく見てます。アドレスバーの右端にアイコンが表示されるので、これをクリックするだけで丸わかりです。このWebサイトは上の画像のように少量構成ですが、Wordpress...