ホームページ制作なら神戸のWeb制作会社「株式会社ふわっと」

株式会社ふわっと

ふわっとブログはこちらへ☆

エントリーのOGP画像に任意のものをアップロードできるようにする方法


こちらの記事は a-blog cms Advent Calendar 2016 の19日目の記事です。

OGP画像って重要ですよね。
FacebookなどSNSでURLをシェアしたときに表示される画像です。あの画像の印象ひとつで、コンバージョンがずいぶん違います。
記事の内容に合った画像であるのはもちろんですが、もっと突っ込んで考えると、見てもらいたいターゲットに配慮した画像にしたり、ブランドのイメージを考慮したり、本来であればOGP画像にも、もっとUXやマーケティングのことまで考えて作った方が、より多くの成果を産むはずです。

また、Facebookに広告を出す場合の規定にも、このOGP画像が重要になってくるので注意が必要です。
Facebookが定めているルールでは、画像に占める文字エリアが20%以下でないと、表示されなかったり頻度が少なくなる。(※ルールがよく改定されるので要注意)
できれば全く文字を入れず、商品やサービスの内容がよく伝わる画像がベストのようですが、例えばセミナー開催情報など、全く文字を使わずに、写真だけで全て内容を伝えるのは多くの場合難しいはずです。
商品の場合は、パッケージに載っているロゴや商品名なども文字エリアとカウントされますから、全く文字がない画像というFacebook側の理想をクリアするのは非現実的ですよね。

ということで、a-blog cmsの記事で使うOGP画像について考えてみましょう。


ほとんどのことはコピペでOK!どこへペーストするかを理解して脱初心者 #ablogcms


a-blog cms Advent Calendar 2015 の19日目の記事です。初心者向けの記事になりますので、アップルップルの方やエバンジェリストの方、ヘビーユーザーの方は、軽く読み飛ばすどころか、絶対に読まないでください。仮に読もうという人がいるならば、最後の2段落だけ読んでいただければ結構です。(※出典:坂本さんのブログ

コピペをマスターしよう!

最近ではプログラマさんの世界でも、できるだけコードを書かないという発想でプログラミングをするそうです。 コードを書けば、ミスもある。バグも出る。フレームワークやライブラリを使い、自分で独自に書くことを減らすことで、効率よく品質を高められるということでしょうか。 a-blog cmsでWebサイト制作するときも同じようなことが言えます。

「a-blog cmsをカスタマイズするにあたって、一番重要なスキルは “コピペ” です!」 a-blog cmsのセミナーや企業での社内勉強会などで、わたしがよく使うセリフです。 実際に、PHPなどのコードを書くことは、通常まずないですし、a-blog cmsのカスタマイズに必要なコードは、スニペットとして用意されていますから、自分でHTMLを書く必要もありません。コピペでだいたいのことができてしまいます。

「そんなことないやろ!」って思ってますよね?

ちょっと試してみましょうか。

例その1 エントリーフォトのスニペットをコピペ

site2015 の お知らせのindexページの記事の上に、写真一覧のモジュールを挿入してみましょう。


Atom用のa-blog cmsスニペット #ablogcms


Atom用のスニペットです。
今どきは、Sublime Textを使ってコーディングしている方が多いと思います。a-blog cmsをダウンロードするとomakeフォルダの中に、SublimeText用のスニペットが用意されています。今のところ、a-blog cms 公式ではAtom用のスニペットはないので、よく使うものから登録してみました。

Atomを使ってa-blog cmsのコーディングをしている方はよかったら使ってください。管理画面内のスニペットを開いてコピペするよりもコーディングが早くなると思います。
スニペット出現後のカーソル位置は、モジュールIDのid名を入力する位置にフォーカスがきますので、最初にモジュールID名をコピーしてクリップボードに入れておくと便利です。
その後はTabキーで、classを入れたくなるような位置に順に送ります。

※本当は、Packageにして、a-blog cmsで使うスタイルガイドや組込みJS、グローバル変数なども、コードヒントとして出るようにしたいところですが、わたしの知識ではまだやり方がわからないので、どなたか協力してくださる人がいればご連絡いただきたく....。


Atomとは...


ちなみに、Atomとは、GitHubが開発したオープンソースのテキストエディタです。Sublime Textは70ドルするのに対しAtomは無料なので、Liteにコーディングされる方にはおすすめです。
また、「Package」とよばれるもので機能を追加でき、最近ではSublime Textに迫るほど使いやすいエディタになっています。
a-blog cmsのコーディングでは、マルチカーソルが使えるととても便利で、画像のアップロードのカスタムフィールドを追加するときなど、同じ変数名や文字列を一気に選択し同時に編集できるので、効率もよくなりますし、ミスも減ります。Atomでもこのあたりの機能は充実しているので、CMSを実装したり、プログラムを書く人にはおすすめです。

スニペットの追加方法


  1. 「snippets.cson」をダウンロードしAtomで開く
  2. Atomメニューから「Open Your Snipets(スニペットを開く)」でスニペット設定ファイルを開く
  3. 1を2にまるっとコピペする

納品後クライアントの担当者さんが、より使いやすく運用できるように... #ablogcms

この記事はa-blog cms Advent Calendar 2014の19日目の記事です。


a-blog cms Advent Calendar 2014


この夏、西宮市の多くのお店が参加してそのお店の逸品を紹介するサイトのCMSカスタマイズの部分をお手伝いしました。お店ごとに子ブログが作られるので、最終的に300店舗以上の子ブログができることになります。
その時にやった内容から、より更新する人の負担が減るようなことをご紹介します。

必ず同じ設定の子ブログをつくりたい時は...


「ゼロからはじめるa-blog cms」6月13日に開催 #ablogcms


a-blog cms全国ツアー2014が5月9・10日の合宿を皮切りに、スタートしています。大阪・仙台・山形・広島・静岡・東京・札幌・北九州・福岡・高知・高松・富山・青森....と各地で予定されています。
a-blog cmsを作っている名古屋のアップルップルの山本一道さんが、各地を回ってパートナーのみなさんとセミナー・勉強会・ハンズオンを開催し、より多くの制作者、サイト運営者のみなさんにa-blog cmsの良さを伝えようというイベントです。
ということで、神戸でも、長年ビジネスパートナーをしている弊社主催で「ゼロからはじめる a-blog cms」として開催することになりました。

CMSを採用検討、提案する立場の人

今までは、Webデザイナーやコーダー向けに、ハンズオンでa-blog cmsをカスタマイズするというような勉強会を開催しましたが、CMSを選択する立場ではないため、勉強会でせっかく触ってもその後に仕事で使う場面に至らないことが多いのではないかと考え、今回、前半はWebディレクター、プランナー、代理店の担当者、企業のWeb担当者さんなど、CMSを選んだり提案したりする立場の人向けに、a-blog cmsのライセンス形態などの概要や、記事更新のしやすさ、他のCMSとの違い、何故a-blog cmsが選ばれるのかなどを解説します。
WordPress以外に提案の選択肢を求めている方は色々と発見があるはずです。
また、現在のバージョン2.0と間もなくリリースされる2.1の新機能などの情報も説明しますので、すでに使っている人も楽しめると思います。