タグ

WordPressとWeb制作に関するsulgraphicaのブックマーク (12)

  • 自分のwebサイト作る工程 - MEMOGRAPHIX

    2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ

    自分のwebサイト作る工程 - MEMOGRAPHIX
  • WordPressのSEOを強化する!プロが教える8つの設定 | 知らないと損をするサーバーの話

    (この記事は2022年9月29日に更新されました) こんにちは。 京都のWebプランニング会社「ウェブライダー」の松尾です。 最近、某社からCPIサーバーに乗り換えたことがきっかけで、このコラムを書かせていただく機会を得ました。 現在、ウェブライダーでは、CPIの専用サーバーと共用サーバーのふたつを借り、さまざまなWebサイトを運営しています。 今回は、サイト制作に不可欠ともいえるCMS(コンテンツマネジメントシステム)の中から、「WordPress」にフォーカスを当て、「WordPressを使ったSEOに強いサイト制作の手順」についてお話しします。 WordPressはその導入の手軽さから、年々ユーザーを増やしており、今、全世界の1/4のサイトがWordPressで作られているといわれています。 また、拡張性にも優れており、たとえば、「沈黙のWebマーケティング」「沈黙のWebライティン

    WordPressのSEOを強化する!プロが教える8つの設定 | 知らないと損をするサーバーの話
  • 【WordPress】見出しから目次を自動生成。プラグイン不要!コピペでOK

    ブログ記事で目次を自動的に見出しから生成する方法を紹介します。WordPressプラグインは使わないで、自力でJavaScriptで設置してみました。 ゆめぴょんです。こんちはっ(^^)/ 私のブログでは文字数の多い記事もあるため、目次を設置したいと思ってました。一時期WordPressプラグインを用いて設置していましたが、意外と簡単に自前設置できるので制作してみました。 目次は上に表示されていると思います。クリックするとゆっくりとその見出しまでスクロールしていきます。読者にも便利なナビゲーションになります。 今回は「WordPressプラグインはずし特集」の第8弾です。今までの特集記事は全て下のリンクにまとめています。 今回、不要になるWordPressプラグイン これまた昨年くらいから、いろんなブログで紹介されている有名プラグイン「Table of Contents Plus」です。

    【WordPress】見出しから目次を自動生成。プラグイン不要!コピペでOK
  • 開発者向けプラグイン 25+

    WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。 ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け(表向き)の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPressにはこういったプラグインだけでなく、何かと捗る開発者向けの裏方タイプのプラグインも便利なものが数多くあるので、それらの中から自分が覚えておいて損はないと思うものを紹介します。 全部のプラグインを普段の開発時に使用しているというわけではありませんが、以下で紹介しているものはいずれも個人的に開発時に便利だと思ったプラグインです。 有名なデバッグ系プラグインをはじめ、テンプレートファイルやIDを容

    開発者向けプラグイン 25+
  • Vagrant Shareを使ってVagrant上で構築中のWordPressを一時的にネットに公開! | Firegoby

    Vagrant Shareを使ってVagrant上で構築中のWordPressを一時的にネットに公開! Vagrant Cloudとは? 先日リリースされたばかりのVagrant 1.5と連動して動作する新サービスで、これを利用すると自動的に仮のドメイン名が割り当てられて、Vagrant上の仮想マシンにインターネット経由でアクセスできるようになります。 https://vagrantcloud.com/ これがおどろくほど簡単で、インターネット経由で見れるようにするには、vagrant shareとコマンドを入力するだけです。 $ vagrant share ==> default: Detecting network information for machine... default: Local machine address: 192.168.33.10 default: Loca

    Vagrant Shareを使ってVagrant上で構築中のWordPressを一時的にネットに公開! | Firegoby
  • 503エラーを防ぐ!Web屋が知っておくべき503エラーの原因と対処 | 知らないと損をするサーバーの話

    (この記事は2022年9月29日に更新されました) こんにちは。 京都のWebプランニング会社「ウェブライダー」の松尾です。 某社のレンタルサーバーからCPIのサーバーに乗り換えたことがきっかけで、このコラムを書かせていただく機会を得ました。 現在、ウェブライダーでは、CPIの専用サーバーと共用サーバーのふたつを借り、さまざまなWebサイトを運営しています。 さて、このコラムでは、Web集客を成功させるためのレンタルサーバーの選び方について、いろいろな視点からお話ししていきます。 今回は、Webサイトにアクセスが殺到した際、ページが見られなくなる「503エラー」についてのお話です。 あなたはどこかのWebサイトを見ようとした際、「503 Service Unavailable」「Service Temporarily Unavailable」などのエラーメッセージが表示されているのを見たこ

    503エラーを防ぐ!Web屋が知っておくべき503エラーの原因と対処 | 知らないと損をするサーバーの話
  • なにこれ超便利!レスポンシブデザインのサイトが各デバイスでどう見えるかが一目瞭然!Adsenseの確認にもなるよ! | なまら春友流

    当サイトはレスポンシブデザインを採用している。 それに合わせて最近GoogleAdsenseのコードをレスポンシブ対応のものに変更した。 その際に面倒なのが、広告が自分のサイトでどう表示されているのかの確認。 キャッシュが残ってたり表示させるガジェットを持っていなかったりという問題があってなかなか簡単に確認できなかったけれど、そんな悩みを一発で解決してくれる便利サイトがあったのでご紹介。 http://mattkersley.com/responsive/ ↑ 上記サイトで自分のサイトのURLを入力すれば各デバイスでどのように表示されるか確認できる。 レスポンシブ対応のAdsenseもそれぞれの大きさに合わせて表示されるのでわかりやすい。 個別ページのURLを入力すればそれぞれのページも表示されるので、トップページと投稿ページのカラムや表示を変えている人にとっても重宝する。 うん、これは便

    なにこれ超便利!レスポンシブデザインのサイトが各デバイスでどう見えるかが一目瞭然!Adsenseの確認にもなるよ! | なまら春友流
  • プラグインまとめ20選 | 株式会社LIG

    1月が終わってしまった・・・・・ どうも正月が恋しい段田です。 今回はWordPressサイトを構築している時に役に立つプラグインを紹介したいと思います。タイプ別で分けて紹介します。 目次 デバッグ系プラグイン 記事操作系プラグイン パーマリンク系プラグイン データ移行・操作系プラグイン その他 デバッグ系プラグイン WordPress構築時にWordPress内の情報を確認したい場合に利用すると便利なプラグインです。 Debug Bar 開発時のデバッグで利用するとても有名なプラグインです。パラメータ情報やエラー情報を確認できたりします。 また、このプラグインの拡張用プラグインもいくつかあるので、多機能です。 必須プラグインと言っていいでしょう。 Debug Bar Debug-Bar-Extender 先ほど紹介したDebug Barを拡張するプラグインになります。利用するときはDeb

    プラグインまとめ20選 | 株式会社LIG
  • 完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)

    作成:2014/01/27 更新:2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 1.仕様書の確認 2.入稿データの確認・スケジューリング HTML5 マークアップ 3.テンプレート作成 4.条件付きコメント 5.GCF+キャッシュクリア 6.OGP記述 7.ファビコン 8.アウトライン作成 9.バリデーターをチェック CSS の設定 10.ノーマライズスタイル レスポンシブデザイン設計 11.モバイルファーストを基準に設計 12.プログレッ

    完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
  • これで完璧!Webサービスの情報設計をカンタンにする設計用テンプレート完全版

    はいこんにちは。最近なぜか風邪が治らないナカムラです。何ったら健康になれるんでしょうか。誰か教えてください。 さて、サイトを作って!とザックリ投げっぱなされた依頼について、何を掲載するべきで何をどう設計するべきなのか。悩みますよねぇ・・・。 今回は日ディレクション協会の人気講座「0からのWebディレクション講座:設計編」で、DCHSの高瀬さんが非常に分かりやすい見解と考えまとめ用のテンプレを公開してくれましたので紹介してみます。 以前からこのサイトでもその重要性についてブツブツ言っている感情設計についての考えとも重なる部分多めでしたので、両方読んでいただけると理解が深まるかもしれません。 感動設計テンプレート&講演資料 ユーザーが感動するウェブサイトを実現するために必要な情報設計とは? 高瀬さんいわく全てのWebサイト、サービスは「ユーザーを感動させるため」に存在しているし、そうあるべ

    これで完璧!Webサービスの情報設計をカンタンにする設計用テンプレート完全版
  • ごりゅご.com

    ごりゅご.com

    ごりゅご.com
  • もはやStingerには見えない!参考にしたいWordPressカスタマイズブログ集

    巷で話題のWordPress無料テーマ『Stinger』。このブログも愛用させて頂いてますが、Stingerを愛して止まないカスタマイズブロガーが大量発生中です。カスタマイズの参考にしたくても、たくさんStingerブログが増えすぎて、探すのが大変になってきました。 ということで今回は、数あるStingerブログの中から厳選した“素敵すぎるStingerブログ”をご紹介します。 中には「これ当にStingerなの?」と思うほどカスタマイズされたブログもあります。それでは、オリジナリティ溢れる素敵なStingerブログをご覧あれ! スポンサーリンク Stinger上級者ブログ編 ENJILOG(エンジログ) おすすめ情報ブログ ENJILOG(エンジログ) まずはこの人!Stinger制作者、@ENJILOGさんのブログ。 今さら説明する必要はありませんね。Stingerテーマを使ってみた

    もはやStingerには見えない!参考にしたいWordPressカスタマイズブログ集
  • 1