サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
tetra-themes.com
カラーミーショップ独自タグの書き方 マニュアルにも掲載されているように独自タグを使うには特殊な書き方をする必要があります。 例えばショップ名を出力したい場合は、表示したい場所に以下のように記述します。マニュアルではshop_nameとだけ書かれていますが、その前後に記号をつける必要があるのです。また、リンクの場合はaタグのhref属性の中に記述します。 <!-- テキストとして出力 --> <{ $shop_name }> <!-- h1に入れる場合 --> <h1><{ $shop_name }></h1> <!-- aタグ追加しトップページのリンクを作成 --> <h1><a href="<{ $home_url }>"><{ $shop_name }></a></h1> カラーミーショップのループの書き方 先ほどは単に値を出力するだけでしたが、商品一覧の場合ループを作る必要があります
新しい年度も始まり（ちょっと遅いですが）心機一転！デザイン力をさらに向上させるためのイラストレーターチュートリアルを紹介します。 普段Webデザインを行うときはPhotoshopを使うことが多いのですが、DTP系のデザインでは基本的にイラストレーターをつかいますよね。そのイラレもCCにアップデートしてからはどんどん新しい機能が追加されてちょっと追いつけない・・・ そんなときにオススメなのが、こちらで紹介するようなチュートリアルを一通りやってみることです。仕事の合間や自宅で小一時間もあればできてしまうものなので、自分の技術力を上げるためにも是非チャレンジしてみて下さい。 最新イラストレーターチュートリアルまとめ Create a Detailed Dynamite Illustration このような曲線や影の感じ、うまく出せますか？やっぱり影って重要なんです。 Working With I
EC-CUBE3で新しいページの作り方を紹介します。 全て管理画面から作れてしまうので、操作自体は非常に簡単。特設ページなどをWordpressの固定ページの感覚で作成することができます。 EC-CUBE3 新しいページの作り方 新規ページの作成 まずは管理画面メニューのコンテンツ管理>ページ管理を開き、「新規入力」ボタンを押します。 フォームの名称、ページのURL、ファイル名を入力し、テキストエリアにページ内容を入力。URLとファイル名は、-（ハイフン）を入れるとエラーになるため、アンダーバーで代用します。 ページ内容はWordpressのようにコンテンツだけではなく、ベーステンプレートの読み込みなども含めて入力する必要あり。手書きでは大変なので、「当サイトについて」など、すでにあるページからコピーしてくると楽です。 デフォルトテンプレートなら以下のようなコード内容になります。 {% e
Webに必須の高品質な写真素材を無料でダウンロードできるサイトを１０本集めてみました。 Web制作に限らずWebライティングでも必ず必要なのが写真素材。テキストコンテンツに画像を挟むことは、もはやWebライティング界隈では当たり前のこととなっています。 このページではありあまるほど大量にアップされている超高品質な写真素材（ベクター含む）を無料でダウンロードできるフォトストックサイトを紹介します。どれも高品質なのでWeb制作でも十分使えるレベルです！ web屋ならチェックしておきたい、無料写真素材サイトまとめ 1.Rawpixel 個人使用だけでなく商用利用も可能な無料のフォトストックサイト。非常に高品質で、検索可能な画像枚数も多いため大変実用的。とにかく高画質で高品質な画像を無料でダウンロードしたい！という方はブックマークしておきましょう。 Rawpixel 2.CC Search 複数の
やればできるよ！ you got it, C'mon just do it, you can do it, Okay… 学生の頃から英語は苦手な方で３０歳になるまでほとんど英語に触れることなく暮らしてきたんですが、フリーランスとして独立したことをきっかけにどうしても英語が必要になったので英語を再勉強。結果として時間はかかったものの意外とあっさりできるようになったので、その方法を書いてみたいと思います。 いろいろ試行錯誤した結果、この方法が誰でもできて一番成功率高いだろうと思えるので、これから英語学びたい方は是非参考にしてみてください。 英語学習の概要 ここでは３つのSTEPに分けて進めていきます。必要経費は本を数冊買うだけ。目安として１万円くらいでしょうか。勉強は毎日３０分くらいでOKですが英語できるようになるまでには結構時間かかります。僕の場合２年かかってますが、効率よくやれば１年に短縮
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
tetra-themes.com 2023 著作権. 不許複製 プライバシーポリシー
もう一度間違ってないか確認しておきましょう。 I've made a huge mistake Bootstrap3に限らず、レスポンシブデザインはGoogle検索のSEO効果もあるということで一気に広がっていったわけですが、制作会社ごとの独自フレームワークによる中途半端な実装などの理由もあり、結構対応が大変だそうです。 そういうのを聞くとやっぱりBootstrap3のような安定したフレームワーク使っておくのが楽だよね〜ってことで、ここではもう一度Bootstrap3を使ったレスポンシブレイアウトの作り方を確認しておきたいと思います。 Bootstrap3のレスポンシブレイアウトの作り方 Bootstrap3では前回作ったようなグリッドレイアウトにレスポンシブclassを追加するだけで簡単にレスポンシブレイアウトを作成することができます。 前回はレイアウトを作成する際に以下のようなコードを
I've got it デザインはグリッドに始まりグリッドに終わるといわれるように、Bootstrap3でもグリッドシステムは単なるコーディングにとどまらず、デザインの一部として非常に重要な要素となっています。 グリッドをうまく使えるかどうかがデザイナーとしての評価の分かれ道にもなるため、デザイナーとしてしっかり覚えておきたいBootstrap3のグリッドシステムの使い方を確認しておきましょう。 Bootstrap3のグリッドレイアウトとは？ Bootstrap3にはモバイルファーストで作られたレスポンシブなグリッドシステムが搭載されています。 Bootstrap3のグリッドシステムは、画面幅を１２分割して作られており、１〜１２のカラムを指定することでレイアウトを作っていきます。 グリッドを作るにはHTMLタグ（divなど）にclassを追加するだけ。 <!-- グリッドレイアウトの例 -
One owl to rule them all Bootstrap4が公開されていますが、まだα版ということもあり、まだまだ現役バリバリのBootstrap3。レスポンシブデザインをやるなら必ずと言っていいほどCSSフレームワークが取り入れられていますが、その中でも特に人気の高いフレームワークでもあります。 この記事ではこれからBootstrap3を始めるWebクリエイターさんから、Web系に転身された元Lisp使いの方まで、神ってるWebデザイナーになるためのBootstrap3の始め方をやさしく解説していきたいと思います。 Bootstrap3をさくっとインストール Bootstrap3に必要なファイルのダウンロード まずはBootstrap3の公式サイトにアクセスします。 トップにDownloadボタンがあるのでこれをクリックしてダウンロードページへ移動。ダウンロードページでは３つ
Bootstrap3はCSSフレームワークとして定着してきており、情報量も豊富なので、初心者のWebデザイナーさんでも簡単に使い始めることができるのが嬉しいところ。 すでにTetraThemesでもBootstrap3の使い方をたくさん書いてきましたが、以前のものはバージョンが古くなっているということもあり、最新版の内容を改めてまとめていきたいと思います。 今からBootstrap3を始める方でも簡単に使えるのですが、まずはCSSフレームワークってなんなの？という基本的なところから確認しておきたいと思います。 CSSフレームワークとは？ Confused pug Bootstrap3の前にCSSフレームワークについて理解しておいた方がいいでしょう。 Web制作（コーディング）を経験した人はわかると思いますが、PSDなどで作られたデザインをHTMLとCSSに置き換える作業で毎回似たような作業
Symfony2初心者のための簡単な使い方、インストール編。 2015年の夏頃に公開されたEC-CUBE3でSymfonyが使われているということで、注目度も大幅アップ（？）なSymfony。実際使ってみるとわかりますが、結構使いやすいフレームワークなんです。 ターミナルからコマンド入力で出力されたコードをベースに、ちょこっと追記するだけで大抵のことができてしまうため、非プログラマーでも扱いが簡単な印象です。 このページではこれからSymfony始める方向けにSymfony2の使い方をさくっとまとめてみたいと思います。 Symfony2の簡単な使い方 インストール編 Symfony2とは？ 一言で言うとプログラマーでなくても簡単に使えるPHPフレームワーク。強力なテンプレートエンジンのTwigや、分かりやすいルーティング設定などとにかく使いやすい印象です。 また、Symfony2は英語だけ
現在プレビュー版が公開されているAdobe製のプロトタイプツール。 単にデザインを作るだけでなく、実際の画面の動きを含めてより本番に近い状態で確認できるツールです。 しかも、Photoshopのような複雑な操作なしに簡単に画面遷移やレイアウトを作成できるため、簡易的なWebデザインツールとしても優秀。 この記事ではAdobeXDのレビューと使い方を紹介します。 AdobeXD、それは意識高いFireworks！ Fireworksが消えてから数年。Web制作業界では未だに現役で動いてるとこも多いと聞きます。FireworksはWebに最適化されたPhotoshopみたいなもので、すごくシンプルで初心者でも使いやすかったんですよね。 AdobeXDを使ってるとそのFireworksが意識高くなって帰ってきた！と直感的に感じました。 まずそのシンプルな機能と操作性。Photoshopみたいにで
進化しすぎたPowerPointテンプレートでかっこいいプレゼンが簡単に作れるようです。 テンプレートといえばよくあるレイアウトが用意されただけでほとんど使い物にならないという印象ですが、以下で紹介するテンプレは４万以上のスライドパターンが用意されていたり、高品質なインフォグラフィックが多数デザインされていたりと、かなり進化しているようです。 パワポのデフォルトテンプレートしか使ったことがない方にもオススメできる、高品質なものばかり。価格もかなり安いので気になるものがあれば使ってみてはいかが？ PowerPointの高品質なテンプレート Motagua – Multipurpose PowerPoint Template ４万以上のスライドパターンと３０００以上のベクターアイコンが同梱された、パワーポイントテンプレートのメガパッケージ。シンプルなものからしっかりデザインされたインフォグラフ
Wordpressでブログを作っている際によく使う機能が前の記事・次の記事の表示。現在の記事ページに表示して、前後の記事のタイトルとリンクを取得することができます。 基本的には以下のようなコードで簡単に取得・表示可能。 <?php $prev_post = get_previous_post(); if (!empty( $prev_post )): ?> <a href="<?php echo get_permalink( $prev_post->ID ); ?>"> <?php echo $prev_post->post_title; ?> </a> <?php endif; ?> しかしこの状態だと全ての投稿に対して前後の記事を取得してしまうため、同じカテゴリーやタクソノミー内に絞り込むことがでません。その方法は以下の通りです。 前後の記事を同じカテゴリ内で取得・表示する方法 現在の
Bootstrap3とHTML5で作られた高品質なLPテンプレートまとめ。 最近よくみるランディングページでは、ヘッダーの背景に動画が流れていたり、パララックスエフェクトをうまく使ってアニメーションさせたりと非常に高度のテクニックが使われます。 これらを独自に実装しようとすると結構大変なんですが、テンプレートなら最初から用意されているため誰でも簡単に高品質なLPを作成可能。 ここでは作業効率をアップさせるための、高品質なLPテンプレートを紹介します。 Bootstrap3対応 LPテンプレートまとめ ServerEast フラットでシンプルなデザインのBootstrapテーマ。W3C対応でPHPで作られたコンタクトフォームも用意されてます。 GoodGrowth 青色を基調にしたビジネス向けにでサインされたBootstrap対応LPテーマ。W3C対応済みのHTMLページが３５ページ用意され
先日Googleが発表したように、スマートフォンからのアクセスでスマホ対応できていないページは掲載順位が下がる可能性があります。このため、スマホからのアクセスが多いサイトほど最適化を行うのは必須になってきてます。 でもスマホ向けに新しくデザインを作るとコストもかかるし、そんな余裕ないんですよね．．．っていうときに使いたいのがスマホ化プラグイン。インストールするだけでスマホ用テーマを自動的に設定してくれるので、使い方も非常に簡単。最近のアップデートでデザインも改善されてきているので、十分実用的なレベルになっています。 このページではWordpressのサイトを簡単にスマートフォンに最適化できる無料のプラグインを集めてみました。 WordPressをスマホサイトに最適化できるプラグイン WPtouch Mobile Plugin まずはこちら。Wordpressのスマホサイト化プラグインの中で
Webサイトの表示速度を改善する10の技まとめ。 Webサイトの表示速度（ページスピード）の改善はSEOにも影響を及ぼす重要な要素。読み込み速度が遅いと離脱につながることもあるため、サイト改善の優先順位も高めに設定されることが多いようです。 ここではWebサイトの表示速度を改善するためにプロの現場で使われる10のテクニックをまとめてみました。 Webサイト表示速度改善方法 10選 Google PageSpeedの活用 Webサイトの表示速度を改善するならまずチェックしておきたいのがこちら。 PageSpeed Insights 現在のサイトのURLを入力するだけで修正すべきポイントを細かく提示してくれます。ページスピードはスコア表示されるため１つ１つ解決していくことでスコアも改善する仕組み。 画像サイズの最適化 画像はCSSでサイズを調整できるため、かなり大きなサイズの画像でもサムネイル
めちゃくちゃ便利で使いやすくなった最新UXデザインツールを見つけたので紹介します。 一昔前のUXデザインといえばワイヤーフレーム使ったり、ペーパープロトタイプやったり、無駄な作業が増えるだけで誰もやらないイメージ。ところが最近公開されたAdobeXDのように、Photoshopとの連携はもちろん、より実用的なUIコンポーネント（リアルに動く！）が用意されていたりとかなり進化しています。 ここまで進化していれば、ツールとしてもかなり実用的。新しいWeb制作のワークフローに組み込んでみるのも悪くないかも。 最新UXデザインツールまとめ 10選 Adobe XD 最近出たばかりのAdobe XD。まだプレビュー版ですが、機能も豊富ですごく使いやすくできてます。画面ごとのアートボードの作成や、Illustratorのようなオブジェクトツール、画像のマスキングなどこれまでのツールにはなかったような機
WordPressの管理画面をDreamweaverのようなエディター化できる「SiteOriginCSS」がすごいので使ってみました。 WordpressでブログやWeb制作をしていますが、ゼロから作るにしても、既存のテンプレートを使うにしても、スタイルの変更はコードエディターで行うことになります。 SiteOriginCSSを使うと管理画面でスタイルの変更が可能になるので、テンプレートでサイトを構築した後はコードエディター開かずに管理画面上でWeb制作が完結してしまいます。 ということで早速使ってみました。 WordPressをエディター化できる SiteOrigin CSS SiteOriginCSSは無料でダウンロードできるという太っ腹ツール。 このプラグインがすごいのはテンプレート側で特にコードの追加や設定などしなくても簡単に使えるという点です。普通にプラグインとしてインストール
WordPressでコードを書かずにオリジナルサイトが作れるページビルダーを使ってみました。 Wordpressを使ったサイト制作では、テンプレートを使用するかゼロからコードを書いていく方法があります。どちらにしてもページのレイアウトを変更するにはコードを修正する必要があり、HTMLやPHPの知識がないとかなり大変なことに。 そんな時はこのページビルダープラグインを使うといいかも。ドラッグ&ドロップでコンテンツを配置していくだけで自由にサイト構築できてしまいます。 WordPressでコード書かずにサイトを作れるプラグイン とはいえ最初からWordpressにそのような機能が搭載されているわけではなく、「Page Builder」というプラグインを使って機能を追加する必要があります。 Page Builder by SiteOriginをインストール PageBuilderは他のプラグイン
EC-CUBEは無料で公開されているネットショップ構築のためのCMS。無料で使えて、レンタルサーバーにも対応していることもあり、自分でショップを作りたいという方も多いようです。 EC-CUBEの最新版である3.0.10では機能の追加や不具合の修正など、初期のバージョンに比べて使いやすくなっており、2.13系やそれ以前のバージョンを使っている方もそろそろ乗り換えタイミングかも。 ということでこのサイトでは初心者でもできるEC-CUBE3.0の簡単なカスタマイズ方法についてまとめていこうと思います。 EC-CUBE3.0のテンプレートをカスタマイズする EC-CUBE3のインストール方法についてはこちらをご覧ください。 EC-CUBE3.0をインストールする方法 EC-CUBE3.0はインストーラーが用意されており、レンタルサーバーでは簡単インストール機能もあるのでとくに問題なくインストールで
Atomにターミナル入れると作業が捗ったので感動のあまりブログ化してみる。今まで別窓でアプリ切り替えてたがこれだとすごく楽になった。 Atom内でターミナルコマンドを実行してみる Atomにterminal-plusのインストール Atomでターミナルを実行するには、terminal-plusをインストールする。インストール方法は簡単、環境設定画面でterminal-plusを検索してインストールボタンを押すだけ。 terminal-plusの使い方 Atomにterminal-plusのインストールが完了するとエディター下部にステータスバーが追加される。 このボタンをクリックするか、ショートカットのshift+control+@を押せば、Atom内でターミナル画面が開く。（ドキュメントページのショートカットだとなぜか起動しなかった） あとはいつも通りの使い方でOK。今までターミナル立ち上
SEOに強く今すぐ使えて高品質なWordpressのブログ向けテーマを集めてみました。 ブログを作る上でSEO対策は必須の条件となっています。いくらデザインがカッコ良くても上位表示されなければ意味がありませんからね。一方、SEOに強いアフィリエイト向けのテンプレートは見た目が同じで一瞬でアフィサイトと分かるレベル。 この記事ではSEO対策済みでしかもデザイン性も高いWordpressテーマを集めてみました。 SEO対策済みのWordpressテーマ ブログ編 Tomas & Daisy – A Stylish Blog for Him & Her スタイリッシュなデザインが欲しいときはこのテーマがおすすめ。男性向け、女性向けのデザインが用意されています。もちろんSEO対策済み。 The REX – WordPress Magazine and Blog Theme ブログの他にポータルサイ
高品質なBootstrapテンプレートを無料でダウンロードできるサイトを集めてみました。 BootstrapのようなCSSフレームワークを使っているといくつか気付くところがあります。その１つが使い回し可能ということ。フレームワークなんだから当たり前といえば当たり前なんですが、HTMLコードをコピペするだけでページレイアウトの作成が完了してしまうっていうのは数年前までありえなかったことです。 HTMLコードもよくあるレイアウトパターンがテンプレートとして大量に公開されてます。このページではBootstrapテンプレートとして公開されている中からとくにおすすめのダウンロードサイトを集めてみました。 Bootstrapテンプレート 無料ダウンロードできるサイト shapebootstrap プレミアムクオリティのBootstrapテンプレートを無料でダウンロードし放題なサイトです。フリーテンプレ
次のページ
このページを最初にブックマークしてみませんか？
『TetraThemesブログ - Web制作、サイトの作り方やWordpress、カラーミーショップの...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
