BLOG﻿メニューとウィジェットFacebookTwitter検索:ABOUT当サイトは株式会社アートグラフィック新潟WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。Museの便利な機能「ウィジェット」を実際に使用した作成例を、何回かにわけてご紹介します。今回は「コンタクトフォームの作り方」です。コメントを残すPrepros導入しましたこんにちは。前回なかなか梅雨が明けないといったら、一週間もしないで梅雨が明けたyasaiです!みなさん甲子園見てましたか?新潟県代表頑張りました!全国ベスト4ですよ、すごいですよね!さて、最近はWPに触れる機会が多いです。実戦で触る機会がなくて、勉強不足を痛感していたので、こういう機会に一気に覚えねば!と目下、ええいっ!、もとい、鋭意勉強中です。導入の障壁になっていたの一つに、僕の場合やっぱりあの黒い画面があったわけです。あの黒い画面、なんか怖い・・・そんな中であったのがPreprosというGUIコンパイラーでした!インストールは簡単。Preprosのサイトからインストーラーをダウンロードして実行。導入が容易ドラッグ&ドロップでファイル操作できるメニューが英語だけど直観的に操作できる。コンパイルに失敗したときのエラーがわかりやすい(画像はエラー)フリーでダウンロードできる(有料版あり)などなど。コメントを残すショッピングサイトのまとめ1最近、友達に「言葉に表情がない!」といわれるhaneです。今回からショッピングサイトの簡単な紹介を行っていこうと思います。第1回目は「BASE」です。特徴BASE(ベイス)は、初期費用/月額費用が「無料」です。管理画面からアクセス数や売上履歴を簡単に確認・管理することができます。※クレジットカード決済、コンビニ決済に関しましては決済毎に手数料3.6%+40円がかかります。メリット●無料でクレジットカード決済機能が使えます。(※決済毎にクレジットカード決済代行会社への手数料3.6%+40円がかかります)●管理画面がシンプルで、初心者でも分かりやすいです。●アクセス数や売上履歴を簡単に確認・管理することが可能です。●必要最低限の機能は揃っているので、少ない商品を販売する場合は無料プランで十分使えるレベルにあります。Appsより追加機能をインストールできます。●商品撮影サービスを無料で利用できます(送料のみ負担)。●デザインの変更は、テーマから選択して背景色やリンク色の変更、ロゴ画像や背景画像の挿入ができますが、それ以上の細かい設定ができません。私がWordPressを使ってホームページを制作する際に「チョイ足し」して”イイね!!”と思った物を紹介します。PAGES.htmlの拡張子を付けて.htmlファイルであるように見せかけるプラグインです。各ページへのリンクも疑似的な名前でOK。Form」も使う場合は、「送信ありがとう」ページの制作に注意が必要です。PackSEO関連の各種設定を行うことができるtitle、description、keywordsの設定可能。足しと言うよりも必須な感じでしょうか。UIカスタム投稿、カスタムタクソノミー追加・編集。こちらも、ある意味定番のプラグインかも知れません。取り扱いが楽になります。WordPressAnalyticsを簡単に設置できます。それぞれにソースコードを埋め込んでも良いんですが、プラグインで設置した方が簡単で確実です。ShortcodeGoogleMapsをバージョン3の書式で吐き出し、ショートコードで設置する事が可能になります。記事内にjavaがないので、スッキリと見やすくなります。地図の差し替えやレイアウトの変更も楽に行えます。Form日本人の方が作っているプラグインです。引用が柔軟に設定できますので、感覚としてはメールのひな形を作る感じで作る事ができます。フォーム自体はショートコードで設置しますので簡単。PAGES」を使った場合、「送信ありがとう」ページは別に作るとページ推移が上手くいかなくなる場合があるので管理画面内の完了画面メッセージで制作した方がいい。Customize管理画面のカスタマイズ用のプラグインです。ログイン画面からユーザー毎に項目の表示・非表示が細かいところまで指定できます。WordPressでホームページを制作した場合は、ロゴも依頼された企業のマークに入れ替えただけでも見栄えしますね。余計な所を触らせないためにも利用した方が良いと思います。以上、使い方や最新の情報などは、各サイトで確認してください。WPのバージョンによって使えなくなる場合もありますので合わせて確認をしてからお使い下さい。仕事としてはWebサイトの構築をメインで行っていますが、その前が画像関係のフィニッシュをしていました。画像関係とWebの便利な物を紹介する記事を書いて行こうかと思っています。今回は、画像関係で効果的で簡単な調整をココだけの話的にお教え致します。コメントを残すIllustratorで効率よく表組作成はじめまして。WebチームでWebデザインを担当しているsakaiといいます。Webやデザインのことはもちろん、ソフトの使い方もまだまだ覚えることが沢山で、勉強の日々です。Webデザインのカンプ作成ではPhotoshopを、アイコンや表などのパーツはIllustratorを使用して作業していますので、それらを使っていて気づいたこと・便利な機能などを、こちらでご紹介できたらと思っています。今回はIllustratorのお話です。Illustratorで効率よく表組作成Illustratorでの表組作成の機能はCCの時点でまだサポートされていません。Webデザインには表組を利用したデザインが多くありますので(会社概要や料金表、プランの比較などなど...)作成にけっこう手間がかかってしまいます。なにか効率のいい方法はないものかと、いろいろ調べたものを以下まとめてみました。パスの段組み設定を利用する外枠となる長方形を作成メニューから「オブジェクト>パス>段組み設定」あらかじめセルが個々にわかれた状態で作成されますので、セルの結合が「パスファインダー>合体」で簡単にできます。こちらの方法だと、列や行が増えてしまったときの修正がけっこう大変です。列や行数があらかじめ決まっている時に、この方法はいいかもしれません。任意の場所でクリックし、設定こちらはセルが個々にわかれてない、ラインで構成された表になります。(「外枠長方形を使用」にチェックを入れた場合は外枠+ライン)なので、列や行数の変更も「パスの段組み設定の利用」したものに比べると、グッと作業がラクになります。以下、表作成後の編集方法をまとめました。長方形グリッドツールオプションで「外枠長方形を使用」のチェックをはずして表を作成。表のグループ設定を解除し、中のラインを削除。ツールバーのブレンドツールをダブルクリックし、ブレンドオプションを表示。間隔を「ステップ数」に変更。ステップ数に「列数(または行数)-1」の数を入力。2辺をブレンドツールでクリックし、ブレンド作成2-2セルを個々に分割・結合する外枠のライン同士を結合させ、1つのパスにする。InDesignを利用するInDesignでは表組機能が搭載されていますので、セルの結合やセル内の文字組など編集が簡単に行えます。EPS書き出しもできるので、Illustratorでも編集することが可能です。InDesignが手元にあってもあまり使用されてなかった方は、試しに活用してみるのも1つの手かもしれません。こちらのサイトを参考にさせていただきました。コメントを残す新規設立法人のメールアドレスについて(ドメインの話)新潟もそろそろ梅雨明けだそうです。WEBディレクターのSです。入社前に会社の設立などしたことがあります。そのあたりの経験を踏まえ、法人の新規設立とホームページというテーマで数回書いてみようと思います。初回は新規法人のメールアドレスについて、です。開始など商売上新しいタイミングでと言うケースが多く、そんな中、会社法人の新規設立時にというケースも珍しくありません。ホームページの制作にはそれなりに時間がかかるため、実際に設立と同時にオープンできるケースは少ないようです。ホームページは後回しでも、メールは営業開始と同時に使うことが多いと思います。★ホームページを持たなくても自社メールアドレスは作れます。営業開始時に配る名刺には、メールアドレスを入れることになりますが、この際、せっかくなので自社独自のメールアドレスを入れたいとのご要望は多々あります。新会社の名刺を作るのですから、フリーメールではなく自社独自のかっこいいアドレスにしたい物です。その場合は、ホームページに先立ち、アドレスだけ先に決めてドメインを取得することになります。ホームページがなくても自社ドメインのメールアドレスは使えるのです。先行して自社のメールアドレスを利用しつつ、ホームページを準備する事が可能です。★アドレスは早い者勝ちでは、実際どんなアドレスを取得するかですが、ドメインと呼ばれる、ネット上の番地を取得する所から始まります。agn.co.jpなど)ドメインはそのまま会社のホームページアドレス(http://agn.co.jp)、メールアドレス(info@agn.co.jp)になります。余所で使われていなければすぐ取得出来ます。あまりに一般的な名称・呼称だと既に他者に使われていて取れないことも多いのです。いうときは、地名やサービス名を付け足して取得したりします。ユニークな社名であれば、問題ないでしょう。強い希望が無い場合は、制作会社側で適当なアドレスを提示してくると思います。電話番号と同じく一度決めたら、ずっと使う物になります。★.comと.co.jpは何が違う。.co.jpどちらを取るか、迷うケースも多いと思います。アメリカの企業.co.jpは日本の企業の為のドメインです。comは個人法人問わず世界中で誰でも自由に取得出来るドメインのため、今では単なる一般的なドメイン、以上の意味を持ちません。それに対しco.jpドメインは、属性型jpドメインと言って、日本国内に登記のある法人しか取得出来ません。1組織1ドメインのルールがあります。信用面では、co.jpの方が高いとされています。実用上ではどちらも、「なんとなく」使われているケースも多いようです。弊社では、特別な理由が無い場合、お店やサービスのホームページには.comか.jpを会社法人の企業用ホームページ(コーポレートサイト)にはco.jpをオススメしています。★co.jpは誰でも取れるわけではない、のです。基本的にドメインは空いていればいつでも取れますが、co.jpの場合は、取得時に登記簿謄本の写しが必要になるケースもありますので会社設立後になる事があります。実際の営業開始時期とは異なり、あくまで登記簿上の話です。営業開始時に、ホームページやメールアドレスが必要な場合は、早めに準備しておく必要があります。このあたり、取得時期については事前に制作会社とよく相談しましょう。★まとめホームページの制作には時間がかかりますが、自社ドメインのメールアドレスはすぐ使えるようになります。(実際は、サーバーの設定なり必要で、このあたりは別の機会にご説明します。・登記簿謄本の用意できる時期を確認してから依頼するとスムーズです。なんだかよくわからない場合は、全部まとめてご用命下さい。新規立ち上げ企業の経営者は多忙です。主たる業務がIT事業でないなら、このような文章は読まずに、まとめて依頼して時間を節約して下さい。他にやることがあると思います。弊社では、ホームページの作成時にドメインの取得もセットで対応しております。WEBだけでなくロゴの作成や名刺や封筒、会社案内など印刷物までセット対応可能です。企業新規立ち上げ時のホームページ制作はアートグラフィック新潟までご用命下さい。今回は、サイト構築を行ってみようと思います。内容は超初心者向けです。制作サイト業種:歯科医院ページ数:10ページ程度ほかの内容は全然決めていない状態でスタートしました。初めに行ったのは、テーマの選定です。テーマとは、一般的なブログで「テンプレート」と呼ばれるものに当たります。使える機能まで変わってきます。WordPressのテーマは、無料のものが非常にたくさん公開されています。自分に合いそうなテーマを探してみてください。何も内容を決めないままスタートしていますので、もちろんテーマが決まりません。メニュー構成を決めました。再度テーマ探しを行いました。テーマの設定は「外観」の「テーマ」で検索して設定できます。テーマを選んだ手順としては、1.デザインでテーマを選ぶ。2.インストールしてテーマ有効にする。3.触ってみて使いやすいか判断する。この1~3を繰り返して選びました。初心者の私にはこの方法しか思いつきませんでした。見た結果、今回は「Attitude」というテーマを使用しました。評判もよさそうなので、使用してみました。参考までにダウンロードしたテーマ名も上げます。basicここからは、「Attitude」というテーマ使い方になります。詳しく説明を3回に分けて行います。事前に決めたグローバルメニューを登録します。ダッシュボードの「外観」→「メニュー」から登録します。デフォルトですので、テーマによって登録方法は変わっていません。記事のアイキャッチを使用してスライドショーに画像を設定します。記事の設定が終わったら、テーマの機能を使いスライダーの設定を行います。Slider」を選択します。Options」の中に投稿のIDを設定できますので、スライダー用に投稿したIDを設定します。以上で、スライダーの設定は終了です。3.診療科目をトップページへ掲載トップページに紹介したい診療科目を作ることにします。診療科目のページを固定ページで作成します。ページを作るときにアイキャッチを設定すると、トップページでアイコンとして表示されます。「外観」→「ウィジェット」を開きます。これだけで、トップページにも情報を掲載できます。以上の作業をした結果がこちらです。なんとなく、ホームページらしくなっています。素人の方も、ぜひトライしてみてください。2件のコメント記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)ちょっと自己紹介こんにちは?皆さんのところはもう夏ですか??僕の住む新潟はまだ梅雨明けしていないので、もう少ししたら夏が来るのだと思います。新潟では夏になると色々なところで夏祭りがあって、花火が上がります。有名なところだけでも長岡の花火や、片貝の花火、柏崎の花火も有名ですね!さて、自己紹介が遅れましたが...はじめまして、yasaiです。基本的にHTML書いたり、CSS書いたり、jQuery書いたりしてます。ムズカシイことはできないので、日々勉強中です!(できるようになりたいのです)ここでは日々ハマったことや、ちょっと気が付いたことを書いていこうと思います。今日はWordpressのお話です。記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)トップページなんかで、カテゴリー記事の一覧を表示する、よくあるパターンです。文字だけだとさみしいので画像も載せたいなと思ったので、調べてみました。アイキャッチ画像使うと簡単なんでしょうが、クライアントワークだとアイキャッチの設定をしてもらうより、記事の一番最初の画像を表示してしまった方がよいことってありませんか?まずはfunction.phpに以下を加えます。$first_img;}まず投稿内に画像があるかどうかを調べます。ある場合には$first_imgに最初の画像を格納します。画像がなかった場合は、$first_imgにdummy.jpgを格納します。(※dummy.jpgは用意してください。)これであとはcatch_that_imagedeで呼び出すことができました。alt=""&gt;参考にさせていただいたサイトです。記事内の一番最初の画像を取得してサムネイル画像表示このように参考にさせていただいたものや、自分で思いついたことを備忘録のように書いていきます。これからもお付き合いください。コメントを残すWordPress超初心者がインストールしてみました。AGNのwebチームでブログを始めることにしました。制作実績や面白そうな情報、制作上の体験談などを更新していきます。いろいろな方が更新していきますので読みにくいことがあるかもしれませんがご了承ください。普段はディレクター?をしている「H」が初めて、このブログを作るためにWordPressをインストールしてみました。「今更~!?」って声はあるでしょうが、お客様に説明する立場の私がWordPressをいじったことがないというのもいかがなものかと思い。インストールしていますので、すべてデフォルトのままです。テーマなどは設定はしておりません。のちに機会があれば設定してみようと思います。WordPress超初心者の私が手動インストールで手順をまとめます。・ドメイン・WordPressのファイル●PHPとMySQLが使えるwebサーバーレンタルサーバーのことです。どこでもいいわけではありません。PHPとMySQLが使えるという条件がつきます。MySQL・・・データベース元々、使えないサーバーもありますし、契約プランによっては使用できないものもあります。サーバーによっては「WordPress簡単インストール」みたいなサービスを行っているところがありますので、サーバーとプランを確認上で、契約しください。(※ここで説明している手順は手動でインストールする方法です。)レンタルサーバーの紹介は、機会があればしてみたいと思います。レンタルサーバーと契約を行ったらMySQLの設定を行う必要があります。レンタルサーバーによって設定方法が違いますので、別途確認してください。●ドメインレンタルサーバーの契約をしたらドメインを取得しなければいけません。お名前.comなどで取得して契約したレンタルサーバーの情報をドメインに設定します。●WordPressのファイルここまで準備できたら、やっとWordPressのインストールを行えます。1.WordPressファイルのダウンロードまず、WordPressで検索して、WordPress日本語版公式サイトからダウンロードします。契約したレンタルサーバーにFTPでアップロード。wordpressフォルダは容量大きいので(10MB以上)ffftpでアップロードするとデータが全部上がりきらなかったりする事もあります。データベースの設定をしてログインする。設定画面が表示されるので、入力を進めます。レンタルサーバーで行ったMySQLの設定を入力します。・パスワード・データベースのホスト名5番目の枠は今はこのままでいいです。WordPressを設置したい時は、設定毎にここを変えてください。サイト情報を入力します。ここで設定する「ユーザー」と「パスワード」はログイン時に必要となりますので、必ずメモしておきましょう。サイトが完成するまでは、プライバシーのチェックを外しておきます。未完成でリンク切れが沢山あったり、表示も変な状態の時にGoogleに見られて評価を下げられるのは嫌なのでそうしています。完成したら管理画面から戻せるので、忘れず戻しておきましょう。初期の設定は終了です。先ほど設定した「ユーザー」と「パスワード」でWordPressにログインいたします。4.管理画面で最低限の設定をする。これでインストールは完了しています。すべてデフォルトの状態ですが、ブログとしては公開できます。最低限の設定、日本語を表示させる設定をだけはしましょう。左メニューの「プラグイン」を押します。Patch」というのを「有効化」します。これで、最低限の設定は終わりです。自分好みのサイトにしていくにはテーマの編集やプラグインの設定のなどまだまだ、やることは沢山あります。興味がある方がいましたら、ぜひトライしてみてください。未分類WordPress超初心者がインストールしてみました。