Prepros導入しました

こんにちは。

前回なかなか梅雨が明けないといったら、一週間もしないで梅雨が明けたyasaiです!

みなさん甲子園見てましたか？

新潟県代表頑張りました！全国ベスト4ですよ、すごいですよね！

さて、最近はWPに触れる機会が多いです。

なかなか実戦で触る機会がなくて、勉強不足を痛感していたので、こういう機会に一気に覚えねば！

と目下、ええいっ！、もとい、鋭意勉強中です。

そんなわけで今回はWPのお話を、せずにSCSS関連のお話をw

こちらもずっと気になっていたものだったんですけど、ついに始めました！

おーCSSなのにネストできるーとか、まだまだ初歩的な部分で大喜びしてますが・・・

導入の障壁になっていたの一つに、僕の場合やっぱりあの黒い画面があったわけです。

あの黒い画面、なんか怖い・・・

そんな中であったのがPreprosというGUIコンパイラーでした！

インストールは簡単。

Preprosのサイトからインストーラーをダウンロードして実行。

Rubyなども同梱されているようなので、導入も簡単です！

そんなPreprosのよいところー

導入が容易
ドラッグ＆ドロップでファイル操作できる
メニューが英語だけど直観的に操作できる。
コンパイルに失敗したときのエラーがわかりやすい（画像はエラー）
フリーでダウンロードできる(有料版あり)

などなど。（画像はエラーです！といわれた画面です(汗)）

まだまだ使い始めたばかりなので、もっといろんなことができるんだと思いますが、

今回はご紹介までに。

今回参考にさせていただいたサイトです

ショッピングサイトのまとめ1

最近、友達に「言葉に表情がない！」といわれるhaneです。

今回からショッピングサイトの簡単な紹介を行っていこうと思います。

第1回目は「BASE」です。

特徴

BASE（ベイス）は、初期費用／月額費用が「無料」です。

管理画面からアクセス数や売上履歴を簡単に確認・管理することができます。

決済方法は、クレジットカード決済、コンビニ決済、代引、銀行振込が使えます。

※クレジットカード決済、コンビニ決済に関しましては決済毎に手数料3.6%+40円がかかります。

メリット

●無料でクレジットカード決済機能が使えます。

(※決済毎にクレジットカード決済代行会社への手数料3.6%+40円がかかります)

●管理画面がシンプルで、初心者でも分かりやすいです。

●アクセス数や売上履歴を簡単に確認・管理することが可能です。

●必要最低限の機能は揃っているので、少ない商品を販売する場合は

無料プランで十分使えるレベルにあります。

●BASE Appsより追加機能をインストールできます。

●商品撮影サービスを無料で利用できます（送料のみ負担）。

デメリット

●ショップページに商品を検索するための検索窓／検索機能がありません

( 管理画面には商品検索機能がついています )。

●デザインの変更は、テーマから選択して背景色やリンク色の変更、

ロゴ画像や背景画像の挿入ができますが、それ以上の細かい設定ができません。

●HTMLやcssが直接編集できないので、デザインの自由度は低いです

＜こんな店舗におすすめ＞

●月額の費用や構築予算を抑えたい場合

●イベントやキャンペーンなどで、今すぐネットショップが必要な場合

●独自デザインにこだわらない場合

興味のある方はこちらまで

https://thebase.in/

WPでHPを制作する時の「チョイ足し」

私がWordPressを使ってホームページを制作する際に「チョイ足し」して”イイね!!”と思った物を紹介します。

チョイ足しコード

まずは、基本的なチョイ足しの『br』『p』タグを勝手に入れさせないようにするコード

【ページに記述する場合】

<?php

remove_filter('the_content', 'wpautop');

the_content();

add_filter('the_content', 'wpautop');

?>

【functions.phpに記述する場合】

// 自動挿入されるpやbrタグを削除

remove_filter('the_content', 'wpautop');

チョイ足しプラグイン

>> .html on PAGES

.htmlの拡張子を付けて.htmlファイルであるように見せかけるプラグインです。

各ページへのリンクも疑似的な名前でOK。

※あとで紹介する「WM WP Form」も使う場合は、「送信ありがとう」ページの制作に注意が必要です。

>> All In One SEO Pack

SEO関連の各種設定を行うことができる

title、description、keywordsの設定可能。

ちょい足しと言うよりも必須な感じでしょうか。

>> Custom Post Type UI

カスタム投稿、カスタムタクソノミー追加・編集。

こちらも、ある意味定番のプラグインかも知れません。

取り扱いが楽になります。

>> Google Analytics for WordPress

Analyticsを簡単に設置できます。

それぞれにソースコードを埋め込んでも良いんですが、プラグインで設置した方が簡単で確実です。

>> Google Maps v3 Shortcode

GoogleMapsをバージョン3の書式で吐き出し、ショートコードで設置する事が可能になります。

記事内にjavaがないので、スッキリと見やすくなります。

地図の差し替えやレイアウトの変更も楽に行えます。

>> MW WP Form

日本人の方が作っているプラグインです。

確認画面付きのメールフォームを設置できます。

自動返信、送信内容、入力値の引用が柔軟に設定できますので、感覚としてはメールのひな形を作る感じで作る事ができます。

フォーム自体はショートコードで設置しますので簡単。

※「.html on PAGES」を使った場合、「送信ありがとう」ページは

別に作るとページ推移が上手くいかなくなる場合があるので

管理画面内の完了画面メッセージで制作した方がいい。

>> WP Admin UI Customize

管理画面のカスタマイズ用のプラグインです。

ログイン画面からユーザー毎に項目の表示・非表示が細かいところまで指定できます。

WordPressでホームページを制作した場合は、ロゴも依頼された企業のマークに入れ替えただけでも見栄えしますね。

余計な所を触らせないためにも利用した方が良いと思います。

以上、使い方や最新の情報などは、各サイトで確認してください。

また、WPのバージョンによって使えなくなる場合もありますので

合わせて確認をしてからお使い下さい。

『暗い奴』を『明るい奴』にする

初めまして Kaz.A と申します。
仕事としてはWebサイトの構築をメインで行っていますが、その前が画像関係のフィニッシュをしていました。
ですので、画像関係とWebの便利な物を紹介する記事を書いて行こうかと思っています。

今回は、画像関係で効果的で簡単な調整をココだけの話的にお教え致します。

今回は…
　　
『暗い奴』を『明るい奴』になるまで調整・加工します!!

Illustratorで効率よく表組作成

はじめまして。AGN WebチームでWebデザインを担当しているsakaiといいます。

Webやデザインのことはもちろん、ソフトの使い方もまだまだ覚えることが沢山で、勉強の日々です。

Webデザインのカンプ作成ではPhotoshopを、アイコンや表などのパーツはIllustratorを使用して作業していますので、
それらを使っていて気づいたこと･便利な機能などを、こちらでご紹介できたらと思っています。よろしくお願いします。

今回はIllustratorのお話です。

Illustratorで効率よく表組作成

Illustratorでの表組作成の機能はCCの時点でまだサポートされていません。
Webデザインには表組を利用したデザインが多くありますので（会社概要や料金表、プランの比較などなど…）
作成にけっこう手間がかかってしまいます。

なにか効率のいい方法はないものかと、いろいろ調べたものを以下まとめてみました。

※IllustratorCS6を基準としてます

1 パスの段組み設定を利用する

外枠となる長方形を作成
メニューから「オブジェクト＞パス＞段組み設定」

あらかじめセルが個々にわかれた状態で作成されますので、セルの結合が「パスファインダー＞合体」で簡単にできます。

ただ、こちらの方法だと、列や行が増えてしまったときの修正がけっこう大変です。
列や行数があらかじめ決まっている時に、この方法はいいかもしれません。

2 長方形グリッドツールを利用する

ツールバーから長方形グリッドツールを選択
任意の場所でクリックし、設定

こちらはセルが個々にわかれてない、ラインで構成された表になります。
（「外枠長方形を使用」にチェックを入れた場合は外枠＋ライン）

なので、列や行数の変更も「パスの段組み設定の利用」したものに比べると、グッと作業がラクになります。

以下、表作成後の編集方法をまとめました。

2-1列･行数の変更

長方形グリッドツールオプションで「外枠長方形を使用」のチェックをはずして表を作成。
表のグループ設定を解除し、中のラインを削除。
ツールバーのブレンドツールをダブルクリックし、ブレンドオプションを表示。
間隔を「ステップ数」に変更。ステップ数に「列数（または行数）-1」の数を入力。
2辺をブレンドツールでクリックし、ブレンド作成

2-2セルを個々に分割･結合する

外枠のライン同士を結合させ、1つのパスにする。
外枠を「塗り･線あり」にした状態で全てを選択し、パスファインダー＞分割
結合したいセルを選択し、パスファインダー＞合体

番外編　InDesignを利用する

InDesignでは表組機能が搭載されていますので、セルの結合やセル内の文字組など編集が簡単に行えます。
EPS書き出しもできるので、Illustratorでも編集することが可能です。

InDesignが手元にあってもあまり使用されてなかった方は、試しに活用してみるのも１つの手かもしれません。

こちらのサイトを参考にさせていただきました。

新規設立法人のメールアドレスについて（ドメインの話）

新潟もそろそろ梅雨明けだそうです。今年は遅いですね。
WEBディレクターのSです。入社前に会社の設立などしたことがあります。
そのあたりの経験を踏まえ、法人の新規設立とホームページというテーマで数回書いてみようと思います。
初回は新規法人のメールアドレスについて、です。

弊社はホームページを作ってますが、一般的にホームページを作るタイミングというのは、店舗の新規オープン、商品の新規発売、新規事業の開始など商売上新しいタイミングでと言うケースが多く、そんな中、会社法人の新規設立時にというケースも珍しくありません。
ホームページの制作にはそれなりに時間がかかるため、実際に設立と同時にオープンできるケースは少ないようです。
しかし、ホームページは後回しでも、メールは営業開始と同時に使うことが多いと思います。

★ホームページを持たなくても自社メールアドレスは作れます。

そして、営業開始時に配る名刺には、メールアドレスを入れることになりますが、この際、せっかくなので自社独自のメールアドレスを入れたいとのご要望は多々あります。
新会社の名刺を作るのですから、フリーメールではなく自社独自のかっこいいアドレスにしたい物です。
その場合は、ホームページに先立ち、アドレスだけ先に決めてドメインを取得することになります。

ホームページがなくても自社ドメインのメールアドレスは使えるのです。
先行して自社のメールアドレスを利用しつつ、ホームページを準備する事が可能です。

★アドレスは早い者勝ち

では、実際どんなアドレスを取得するかですが、ドメインと呼ばれる、ネット上の番地を取得する所から始まります。（例　agn.co.jpなど）
ドメインはそのまま会社のホームページアドレス（http://agn.co.jp）、メールアドレス（info@agn.co.jp）になります。

通常は、社名＋.comや .co.jp などでとります。余所で使われていなければすぐ取得出来ます。早い者勝ちです。
しかし、あまりに一般的な名称・呼称だと既に他者に使われていて取れないことも多いのです。
そういうときは、地名やサービス名を付け足して取得したりします。

niigata-○○○.com とかですね。

もしくはユニークな社名であれば、問題ないでしょう。
強い希望が無い場合は、制作会社側で適当なアドレスを提示してくると思います。
ただし、電話番号と同じく一度決めたら、ずっと使う物になります。よく考えましょう。

★.comと.co.jpは何が違う。

.com と .co.jp
どちらを取るか、迷うケースも多いと思います。
本来の意味では、
.com はアメリカの企業
.co.jpは日本の企業
の為のドメインです。

ただ、comは個人法人問わず世界中で誰でも自由に取得出来るドメインのため、今では単なる一般的なドメイン、以上の意味を持ちません。
それに対しco.jpドメインは、属性型jpドメインと言って、日本国内に登記のある法人しか取得出来ません。
しかも1組織1ドメインのルールがあります。
信用面では、co.jpの方が高いとされています。
ただ、実用上ではどちらも、「なんとなく」使われているケースも多いようです。

弊社では、特別な理由が無い場合、お店やサービスのホームページには.comか.jpを会社法人の企業用ホームページ（コーポレートサイト）にはco.jpをオススメしています。

★co.jpは誰でも取れるわけではない、のです。

基本的にドメインは空いていればいつでも取れますが、co.jpの場合は、取得時に登記簿謄本の写しが必要になるケースもありますので会社設立後になる事があります。実際の営業開始時期とは異なり、あくまで登記簿上の話です。
営業開始時に、ホームページやメールアドレスが必要な場合は、早めに準備しておく必要があります。
このあたり、取得時期については事前に制作会社とよく相談しましょう。

★まとめ
ホームページの制作には時間がかかりますが、自社ドメインのメールアドレスはすぐ使えるようになります。
（実際は、サーバーの設定なり必要で、このあたりは別の機会にご説明します。）
ドメインの取得をホームページ制作会社にお願いする場合、
・希望するドメイン名
・必要になる時期
・登記簿謄本の用意できる時期
を確認してから依頼するとスムーズです。

なんだかよくわからない場合は、全部まとめてご用命下さい。
新規立ち上げ企業の経営者は多忙です。主たる業務がIT事業でないなら、このような文章は読まずに、まとめて依頼して時間を節約して下さい。他にやることがあると思います。（笑

弊社では、ホームページの作成時にドメインの取得もセットで対応しております。
WEBだけでなくロゴの作成や名刺や封筒、会社案内など印刷物までセット対応可能です。
企業新規立ち上げ時のホームページ制作はアートグラフィック新潟までご用命下さい。

WordPressで無料テーマAttitudeを使ってのサイト制作

前回、WordPressをインストールまで行いましたので、
今回は、サイト構築を行ってみようと思います。

もちろん、私は普段から制作は行いませんので、
内容は超初心者向けです。

制作サイト

業種：歯科医院
ページ数：10ページ程度

ほかの内容は全然決めていない状態でスタートしました。

まず、初めに行ったのは、テーマの選定です。
テーマとは、一般的なブログで「テンプレート」と呼ばれるものに当たります。
サイトのレイアウト（1カラム、2カラム、3カラムなど）や表示する画像、
使える機能まで変わってきます。
WordPressのテーマは、無料のものが非常にたくさん公開されています。自分に合いそうなテーマを探してみてください。

何も内容を決めないままスタートしていますので、
もちろんテーマが決まりません。

なので、せめてメニュー構成を決めました。
グローバルメニュー
・診療方針
・診療科目
一般歯科
小児歯科
口臭歯科
予防歯科
歯周病
ホワイトニング
・初めての患者様
・アクセス

グローバルメニューを決めたところで、
再度テーマ探しを行いました。
テーマの設定は「外観」の「テーマ」で検索して設定できます。

テーマを選んだ手順としては、
1.デザインでテーマを選ぶ。
2.インストールしてテーマ有効にする。
3.触ってみて使いやすいか判断する。
この1～3を繰り返して選びました。
もしかすると、もっといい選定方法があるかもしれませんが、
初心者の私にはこの方法しか思いつきませんでした。

色々見た結果、今回は「Attitude」というテーマを使用しました。
h_blog2_1
評判もよさそうなので、使用してみました。

参考までにダウンロードしたテーマ名も上げます。
・Customizr
・i-transform
・isis
・Minamaze
・Nictitate
・Pinboard
・Sugar and Spice
・WPMEMO basic

ここからは、「Attitude」というテーマ使い方になります。

もう少し詳しく説明を３回に分けて行います。

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方（固定ページ活用方法）
3.WordPressの無料テーマAttitudeの使い方（フッターエリア使用方法）

今回行った作業
1.メニュー項目の設置
2.スライダーの設置
3.診療科目をトップページへ掲載

1.メニュー項目の設置
事前に決めたグローバルメニューを登録します。
ダッシュボードの「外観」→「メニュー」から登録します。
デフォルトですので、テーマによって登録方法は変わっていません。

2.スライダーの設置
このテーマでスライダーを設置するには、
投稿を使います。

記事でスライダー？と思う方がいると思いますが、
記事のアイキャッチを使用してスライドショーに画像を設定します。

記事の設定が終わったら、
テーマの機能を使いスライダーの設定を行います。
「外観」→「Theme Options」→「Featured Post/Page Slider」
を選択します。
「Featured Post/Page Slider Options」の中に
投稿のIDを設定できますので、
スライダー用に投稿したIDを設定します。

以上で、スライダーの設定は終了です。

3.診療科目をトップページへ掲載
トップページに紹介したい診療科目を作ることにします。
診療科目のページを固定ページで作成します。

ページを作るときにアイキャッチを設定すると、
トップページでアイコンとして表示されます。

掲載したい固定ページができたら、
「外観」→「ウィジェット」を開きます。
テーマの独自機能の
「Business Page Sidebar」→「Theme Horse: Services」
に登録した固定ページを選ぶことができるので、
選択します。

これだけで、トップページにも情報を掲載できます。

以上の作業をした結果がこちらです。

なんとなく、ホームページらしくなっています。
ここまで、たどり着くまでにコードを一つも書いてませんので、
素人の方も、ぜひトライしてみてください。

記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)

ちょっと自己紹介

こんにちは？皆さんのところはもう夏ですか？？

僕の住む新潟はまだ梅雨明けしていないので、もう少ししたら夏が来るのだと思います。
新潟では夏になると色々なところで夏祭りがあって、花火が上がります。

有名なところだけでも長岡の花火や、片貝の花火、柏崎の花火も有名ですね！

さて、自己紹介が遅れましたが…

はじめまして、yasaiです。基本的にHTML書いたり、CSS書いたり、jQuery書いたりしてます。

ムズカシイことはできないので、日々勉強中です！(できるようになりたいのです)

ここでは日々ハマったことや、ちょっと気が付いたことを書いていこうと思います。

今日はWordpressのお話です。

記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)

トップページなんかで、カテゴリー記事の一覧を表示する、よくあるパターンです。

文字だけだとさみしいので画像も載せたいなと思ったので、調べてみました。

アイキャッチ画像使うと簡単なんでしょうが、クライアントワークだとアイキャッチの設定をしてもらうより、記事の一番最初の画像を表示してしまった方がよいことってありませんか？

まずはfunction.phpに以下を加えます。


function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
     $output = preg_match_all('/&lt;img.+src=['"]([^'"]+)['"].*&gt;/i', $post->post_content, $matches);

    $first_img = $matches [1][0];

if(empty($first_img)){ //Defines a default image
        $first_img = "dummy.jpg"; 
    }
    return $first_img;
}

function catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);

$first_img = $matches [1][0];

if(empty($first_img)){ //Defines a default image

$first_img = "dummy.jpg";

}

return $first_img;

}

まず投稿内に画像があるかどうかを調べます。ある場合には$first_imgに最初の画像を格納します。

画像がなかった場合は、$first_imgにdummy.jpgを格納します。(※dummy.jpgは用意してください。)

これであとはcatch_that_imagedeで呼び出すことができました。


&lt;img src="&lt;?php echo catch_that_image(); ?&gt;" alt=""&gt;

参考にさせていただいたサイトです。

このように参考にさせていただいたものや、自分で思いついたことを備忘録のように書いていきます。これからもお付き合いください。よろしくお願いします！

WordPress超初心者がインストールしてみました。

AGNのwebチームでブログを始めることにしました。

制作実績や面白そうな情報、制作上の体験談などを更新していきます。

いろいろな方が更新していきますので読みにくいことがあるかもしれませんがご了承ください。

普段はディレクター？をしている「H」が初めて、このブログを作るためにWordPressをインストールしてみました。
「今更～！？」って声はあるでしょうが、お客様に説明する立場の私がWordPressをいじったことがないというのもいかがなものかと思い。トライしてみました。
もちろん、初めてインストールしていますので、すべてデフォルトのままです。テーマなどは設定はしておりません。のちに機会があれば設定してみようと思います。

WordPress超初心者の私が手動インストールで手順をまとめます。

WordPressを設定するのに準備するもの
・PHPとMySQLが使えるwebサーバー
・ドメイン
・WordPressのファイル

●PHPとMySQLが使えるwebサーバー

レンタルサーバーのことです。ただし、どこでもいいわけではありません。

PHPとMySQLが使えるという条件がつきます。
（バージョンの確認も必要）
※PHP・・・汎用スクリプト言語　　　MySQL・・・データベース
元々、使えないサーバーもありますし、契約プランによっては使用できないものもあります。
サーバーによっては「WordPress簡単インストール」みたいなサービスを行っているところがありますので、サーバーとプランを確認上で、契約しください。（※ここで説明している手順は手動でインストールする方法です。）

レンタルサーバーの紹介は、機会があればしてみたいと思います。

レンタルサーバーと契約を行ったらMySQLの設定を行う必要があります。契約のレンタルサーバーによって設定方法が違いますので、別途確認してください。
WordPress設定時に必要となるデータベースの情報
・データベース名
・ユーザー名
・パスワード
・データベースのホスト名

●ドメイン

レンタルサーバーの契約をしたらドメインを取得しなければいけません。
お名前.comなどで取得して契約したレンタルサーバーの情報をドメインに設定します。

●WordPressのファイル

ここまで準備できたら、やっとWordPressのインストールを行えます。

1.WordPressファイルのダウンロード
まず、WordPressで検索して、WordPress日本語版公式サイトからダウンロードします。
http://ja.wordpress.org/

2. 契約したレンタルサーバーにアップロード

ダウンロードしたデータを解凍し、wordpressという名前のフォルダを、
契約したレンタルサーバーにFTPでアップロード。
wordpressフォルダは容量大きいので（10MB以上）ffftpでアップロードするとデータが全部上がりきらなかったりする事もあります。

3.WordPressにデータベースの設定をしてログインする。
ブラウザで http://自分のURL/wordpress/ を開きます。

設定画面が表示されるので、入力を進めます。

レンタルサーバーで行ったMySQLの設定を入力します。
・データベース名
・ユーザー名
・パスワード
・データベースのホスト名

5番目の枠は今はこのままでいいです。
複数個 WordPressを設置したい時は、設定毎にここを変えてください。

サイト情報を入力します。

ここで設定する「ユーザー」と「パスワード」はログイン時に必要となりますので、必ずメモしておきましょう。
サイトが完成するまでは、プライバシーのチェックを外しておきます。
未完成でリンク切れが沢山あったり、表示も変な状態の時にGoogleに見られて評価を下げられるのは嫌なのでそうしています。
完成したら管理画面から戻せるので、忘れず戻しておきましょう。

初期の設定は終了です。

先ほど設定した「ユーザー」と「パスワード」で
WordPressにログインいたします。

4.管理画面で最低限の設定をする。

これでインストールは完了しています。
すべてデフォルトの状態ですが、ブログとしては公開できます。
最低限の設定、日本語を表示させる設定をだけはしましょう。

左メニューの「プラグイン」を押します。
インストール時に3つ入っていると思いますが
「WP Multibyte Patch」というのを「有効化」します。
これで、最低限の設定は終わりです。

今の段階では、最低限の設定しかしていませんので、
自分好みのサイトにしていくには
テーマの編集やプラグインの設定のなど
まだまだ、やることは沢山あります。

興味がある方がいましたら、ぜひトライしてみてください。