カテゴリー別アーカイブ: 記事

JimdoのTOKYOレイアウトでサブナビゲーションのバーを表示させ続ける方法

JimdoのTOKYOレイアウトがリリースされましたね!待ちに待った方、多いのではないでしょうか?

先日、WordPressで作っていた個人サイト(T-STUDIO.COM)をJimdo Businessに移行したので、早速TOKYOレイアウトにしてみました。この新しいTOKYOレイアウトは、Jimdoエキスパートでもある、服部制作室の服部さんがデザインされました。日本語が美しく見えるようにつくられたレイアウトです。 続きを読む JimdoのTOKYOレイアウトでサブナビゲーションのバーを表示させ続ける方法

Jimdoのレイアウトをカスタマイズしてオリジナルデザインにする方法

昨年夏に刷新されたJimdoのレイアウトは、そのまま使ってもきれいなサイトを作ることができますが、オリジナリティのあるデザインにしたい、そういうニーズも少なからずやあるかと思います。

先日、私が管理しているECサイトのキャンペーンサイトを急遽作ることになったのですが、更新性などを考えて誰でも扱えるようにしたほうが、私が不在の時でもスタッフが更新や新規ページの作成を行えると思い、Jimdoを選択しました。

ただし、ブランドイメージを損ないたくなく、現在運用中のECサイトのデザインを取り込めないモノか考えました。そこで考えたのが、Jimdoのレイアウトのスタイルを上書きする形をとって、運用中のECサイトのデザインに近づけることができないか?ということでした。 続きを読む Jimdoのレイアウトをカスタマイズしてオリジナルデザインにする方法

アクセシビリティについて考える日

今日は、Advent Calendarのアクセシビリティ担当の日。昨年は、

CSS NITE IN SHIZUOKA , VOL.3 -アクセシビリティ・ミーティング- から1年半経って

こんな記事を書きました。そして、同じくJimdoのAdvent Calendarでは、

お客さまの顔がみえますか?

という記事で、Jimdoのお客さま向けにアクセシビリティについて書きました。
そんな今年、何を書こうかとずっと悶々としていたのですが、この機会になんでそもそもアクセシビリティに向き合うようになったのかを思い出して書いてみようかと。 続きを読む アクセシビリティについて考える日

JimdoのNewレイアウトで3段カラムのレイアウトを作ってみる

8月に新しくなったJimdo。新しいユーザーインターフェースに加えて、これまでのテンプレートが刷新され、Newレイアウトとして利用できるようになりました。

このNewレイアウトの特徴は主に次の通り。

  1. レイアウトの名称がこれまでのナンバー表記から、世界の都市の名前になった
  2. レイアウトパターンは大きく分けてシングルカラムと2段カラムの2種類になった
  3. 背景画像を活かすデザインレイアウトになった
  4. 従来のテンプレートにあったヘッダーが無くなった(代わりに背景画像で活用)

細かいところを挙げるとキリがないのですが、わかりやすいところではこのあたりかなと思います。

さて、そんなNewレイアウトなのですが、2番のレイアウトパターンについて今日は注目してみたいと思います。
JimdoのNewレイアウトでは、ページレイアウトの基本としてシングルカラムのものとメインコンテンツエリア+サイドバー(サブメニュー含む)の2段カラムのものと大きく二つのレイアウトに分かれます。

シングルカラムは、横幅いっぱいに広がったコンテンツエリアでサイドバー的なものが無いレイアウトです。わかりやすい例が、Appleのサイト。横幅いっぱいにコンテンツがあり、昔ながらのサイドバー的な部分がありません。コンテンツエリア内に幾つか等間隔に分かれたコンテンツがあるものの、サイドバーでは無くあくまでもコンテンツとして扱われています。

かたや2段カラムのレイアウト。左ないし右に狭小のエリアがあり、並ぶようにメインコンテンツがあるレイアウト。いわゆる昔ながらのレイアウトパターンですね。今でも多くのサイトにはサイドバーと呼ばれている狭小エリアがあります。この狭小のエリア(以下サイドバー)には、下の階層のメニューがあったり、バナーがあったり、メニューでは無いけれど特筆した情報を載せたりといった、限られた画面の中で多くの情報を載せるために考えられたレイアウト。

どちらのレイアウトが良いのか悪いのかというのはここではさておき、先日こちらの本の監修をさせていただいた際に、打ち合わせの席で3段カラムって無いの?という問いをいただきました。3段カラムといえば、ポータルサイトによくある真ん中にメインコンテンツのエリアが有り、左右に狭小のサイドバーがあるレイアウトパターン。JimdoのNewレイアウトでは、この3段カラムのレイアウトパターンは用意されていないので、レイアウト選択で選べるものはありません。ただ、実際には3段カラムへの要望はあるようで、実際にそういう問い合わせもきています。

そんなNewレイアウトで3段カラムがどうしても使いたい!という方向けのちょっとしたTipsをここでご紹介しようと思います。前置きが大変長くなりました。

ホーム   test 3col ページ!

ページ自体は、書籍用に作ったダミーのサイトなので実際にこのようなポータルサイトは無いのですが、メインメニュー、メインビジュアル、ページタイトルとあって、その下が左右に狭小のサイドバーがあり真ん中にメインコンテンツといういわゆる3段カラムになっているレイアウトです。Newレイアウトで遂に3段カラムが!と思ったかたは、残念、違います。

実際にどんなレイアウトになっているのか、編集モードに切り替えてご紹介します。

まずはこのレイアウト、何を使っているのか?と聞かれれば、

スクリーンショット 2014-11-06 13.01.04

Shanghaiを使っています。
え?Shanghaiってシングルカラムだよね?と速攻で答えられるかたは、すばらしい!Jimdoファンの鏡です!
お!これは!?と思ったかたは鋭いっ!(謎)。これ、既存のシングルレイアウトであるShanghaiをベースにして、擬似的に3段カラムしたサンプルサイトです。

Shanghaiのレイアウトはとてもシンプルで、ページ最上部にメインメニューがあり、その下にメインビジュアルのエリア、ページタイトルのエリアと続きます。ここまでレイアウトの基本構造でプリセットされています。ポイントはその下からです。ここは基本的に自由にコンテンツを入れていくことが出来るのですが、そこに次の図の様にカラムを入れていて、3段にしているというたったこれだけのことです。

スクリーンショット 2014-11-06 14.25.08

カラムをコンテンツの追加で挿入したら、標準では2段のカラムが挿入されます。

スクリーンショット 2014-11-06 14.34.11 カラムをクリックします。

スクリーンショット 2014-11-06 14.34.27カラムが挿入されます。初期は2つのカラムです。

スクリーンショット 2014-11-06 14.34.42マウスを動かすとカラムを編集という画面に変わるので、クリックしてみましょう。

スクリーンショット 2014-11-06 14.34.56カラムの編集が出来るようになります。カラムの左右真ん中に「+」アイコンがあります。これをクリックするとカラムを追加することが出来ます。もしカラムを削除したい場合は、それぞれのカラムの下にあるゴミ箱アイコンをクリックします。

スクリーンショット 2014-11-06 14.35.10「+」アイコンをクリックしたので3カラムになりました。このままでは、3つのカラムが等間隔のサイズなので、真ん中のカラムを少し大きくします。各カラムの間にあるバー、画面では真ん中のカラムの左右に出ている薄いグレーのバーにマウスを載せて左右にドラッグすることでカラムの大きさを変更することが出来ます。

スクリーンショット 2014-11-06 14.36.35左右のバーをドラッグして調整したのがこの図。だいたい左右どちらのサイズも約20%にしました。

あとは、このカラムに必要なコンテンツを入れていくだけ。
ヤフーやその他ポータルサイトなどにあるような3段カラムのレイアウトをカラム機能を使って作れるようになりました。

ホーム   test 3col ページ!

JimdoのNewレイアウトは、そのまま使っていただいても素敵なサイトをすぐ作ることが出来ますが、こうしたちょっとした工夫をうすることで、さらに自分好みのサイトに仕上げていくことが出来ます。

さて、次回ですが(勝手に続き物にしてるw)、レイアウト内に配置するメインビジュアルについて、幾つかのレイアウトパターンに沿って画像のサイズや設定方法について紹介したいと思います。

いつになるかはわかりませんので気長にお待ちくださいね<(_ _)>

最後に

記事で少しご紹介した本ですが、小学館から出ているムック本です。完全New UI、New レイアウト対応で、この本ではNew レイアウトの「St.Petersburg」をベースに解説しています。お知り合いなどではじめてJimdoを使ってサイトを作りたいというかたがいらっしゃいましたら、是非ご紹介ください。

15分×7日間 無料でできる はじめてのホームページらくらく作成ガイド
Amazonではこちらから買えます

また、同じ時期にJimdo Expertの赤間さんが書籍を出版されましたので、ご紹介。

10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック
Amazonではこちらから買えます

10月25日に開催されたJimdo 5周年記念イベントでも販売したのですが、大人気で即完売してしまった人気書籍です。Jimdoを使い始めてもっとこうしたい、カッコイイページをつくりたい、そんなかたがいらっしゃいましたら、コチラを超・超オススメします。

ということで、突然始まったJimdoカスタマイズコーナーの第一回目はこれで終了です。

それでは!



WebSig会議 Vol.34でcorabbitのLTをしました

先日のWebSig会議 vol.34の懇親会で、corabbitのLTをしました。急遽参加させていただくこともあり、手元の資料をLT用にかなり強引にまとめてのプレゼンでしたが、終わった後に反応をいただき、ありがとうございました。

まだまだかゆいところに手が届いていないところもありますが、ペースを上げて改良しておりますので、これからも、そして初めてのかたも、corabbitをどうぞよろしくお願いいたします。

馮 富久さん撮影

コラボレーションを簡単に | corabbit

JimdoCafeの店員になったお話

先月の話ですが、渋谷ヒカリエで、みんビズセミナーが行われました。ほぼ満席の状態で、あらためてお越しいただいたお客さまには、長い時間お疲れさまでしたとお伝えしたいと思います。
セミナーは、講師の皆さんによる、みんビズ・Jimdoの活用について非常に為になるお話をたくさん聞くことができたかと思います。そのセミナーの最後のセッションがJimdoCafeというコーナーで、講師の皆さんやJimdoJapanのスタッフによる、相談コーナーを用意しました。 続きを読む JimdoCafeの店員になったお話

CSS Nite in SHIZUOKA , Vol.3 -アクセシビリティ・ミーティング- から1年半経って

勢い余ってAdvent Calendarの Web Accessibilityに参加表明してしまったものの、これまでの方の記事があまりにもすごすぎて、正直やめようかと思いましたが、企業に勤めて、自社サイトの責任者になったことで、ウェブアクセシビリティへの意識はこれまで以上に高まったわけで、やっぱり書こうかなと、まぁまとまりがないのですが、書くことにしました。内容は、昨年静岡で行われたCSS Nite in SHIZUOKA , Vol.3の後書き的な内容を1年半の今、書いてみます。 続きを読む CSS Nite in SHIZUOKA , Vol.3 -アクセシビリティ・ミーティング- から1年半経って

双剣は乱舞こそすべて

考えてみたら、ハンター歴もそろそろ丸3年になろうとしているわけですけど、TwitterやFacebookではHRがどうなったとか、ラージャン嫌いとか言っているのに、ブログには一切モンハンのこと書いてなかったなぁということで、初モンハンネタをアドベントカレンダーにかこつけて投下してみようと思いますw 続きを読む 双剣は乱舞こそすべて

10年ひと昔といいますが

早いもので、東京で仕事をするようになって、もうすぐ10年。Web界隈のテクノロジーの進化は早く、実装方法もかつてとは随分様変わりしてますね。
そんな変化の中で、自分自身も10年前はといえば、バリバリ実装している人だったりして、縁あってWeb Creatorsで連載させてもらっていたりしましたね。
当時のbAのようなイケてたコーディングをしていたわけではないけれど、一応それでご飯食べてたました(笑) 続きを読む 10年ひと昔といいますが

企業内クリエイティブ部署のチームマネジメントについて考える

なんとなく、もやもやしたものが吹っ切れてきたので、チームマネジメントについて考えていることを少しずつ書いていこうと思います。
とはいえ、チームマネジメントを語るには、当然のことながらまだまだ経験が浅いと思っているし、会社の規模や会社の所属部署などの状況によっても変わってくるところもあると思ってます。 続きを読む 企業内クリエイティブ部署のチームマネジメントについて考える