静的HTMLサイトをWordPress化するときの具体的な手順をまとめました。色々な手順が必要です。 範囲が広すぎるため、深くまで掘り下げていない部分もありますがご了承いただければと思います。ザックリとした全体像を把握できることを目的としています。 下記の静的HTMLサイトを実際にWordPress化していきます(ちなみに以下のサイトは「おしゃれなWebサイトテンプレート集」の付録テンプレートです。)
![静的HTMLサイトをWordPress化するときの具体的な移行手順 | HPcode(えいちぴーこーど)](https://cdn-ak-scissors.b.st-hatena.com/image/square/260c320b19be5f20dd565a0758744ec0aaa37962/height=288;version=1;width=512/https%3A%2F%2Fhaniwaman.com%2Fcms%2Fwp-content%2Fuploads%2F2018%2F06%2Fstatic-to-wordpress0.png)
「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。(英語ですが公式サイトのイメージよりもわかりやすいです) このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo(※スマホからアクセスしてください) 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル
トレタCOOのkengochi氏がUIデザイナーについての記事を書いてた。 UIデザインの価値 | Parallelminds BASEでも、ずっとこの辺の職種も募集していて、来月1人入るんだけど、実はUIデザイナーの募集はすごく困っている。 というのも、今、BASEでほしいUIデザイナーとは、 ・いわゆるWebデザイナーではないし、 ・いわゆるフロントエンドエンジニア(JavaScript実装特化型)の人でもない。 というところ。まさしくkengochi氏が書いてる「のりしろ」重要 じゃぁコアスキルって何?ってのを、経験者採用の理想を言えば、 1.D.A.ノーマンの本ぐらいは読んだことがあって、ユーザインターフェースを意識しながらユーザビリティの高い設計ができて 2.ビジュアルデザインのスキルもあって、カッコいサイト、サービスが作れて、 3.ちゃんとユーザーさんのことを意識できて(つまり
アメーバブログ(Ameba アメーバ)をCSSでカスタマイズしてオリジナルブログにしてみませんか? CSSでどこまでスキンをカスタマイズできるかチャレンジ! 初心者でもオリジナルなスキンで個性的なアメーバブログ(Ameba)に! これも問い合わせが多いです 取り消し線(打ち消し線)・・・・・ 色違いの取り消し線はどうやるのですか? コレについては http://ameblo.jp/exlink/entry-10132377749.html ここにありますので参考にしてください ・・・・・じゃあ・・・普段よく使う二重の取り消し線は? これはHTMLにもCSSにも残念ながらありません・・・・ googleで二重取消し線、二重取消線、二重打ち消し線 などで調べても出てきません 諦めてください・・・・ えっ?・・・・ じゃあ・・・・ ↑は? うっふっふ・・・・ 残念ながら二重の取り消し線でも二重
Home Subscribe UTF-8? utf-8? UTF8? utf8? 気になったので調べてみました。 結論 公式名称は "UTF-8" である。 UTF-8, a transformation format of ISO 10646 大文字小文字は区別されない。 UTF-8でもutf-8でもどちらでもいいようです。 " HTTP character sets are identified by case-insensitive tokens. " Hypertext Transfer Protocol -- HTTP/1.1 したがって、 Shift_JIS/shift_jis EUC-JP/euc-jp どちらでもOKということになります。 気になるあのサイトでは? 世の中的にはこうなっていました。(2011/8/17現在)
テーブルの中に画像を表示させる際、幅か高さをぴったりあわせて均等縮小でおさめたいときに。 (追記:記事と別コード追加 2011-12-15) サンプルはこちら→W7工廠分室|トップページ サイズを変更できるようにしました。(変更の必要がない場合はinputとか不要です) HTML(head) <script src="jquery.js"></script> <script type="text/javascript" src="jq_imgSizeControl.js"></script> <script> $(function(){ $('input#tbutton').click(function(){ imgSizeControl($('input#twidth').val(),$('input#theight').val()); }); }); </script> HTML(bo
人力検索はてなの質問(http://www.hatena.ne.jp/1140032618)の回答が現時点(2006/02/17 00:45)で1件開かれています。そこで示されているサンプルで、およそ希望していることは出来そうな雰囲気なのですが、個人的に引っかかる部分があったので試行錯誤しながらJavaScriptを書いてみました。何が気になったのかと言うと、リサイズの仕方です。縦横比を維持せずにリサイズするのがどうも生理的にダメなのです。そこで、画像の縦と横のどちらが画面に収まらないのかをチェックし、縦横比を(ほぼ)維持したまま画像をリサイズするJavaScriptにしてみました。IE6.0とFirefox1.5で稼動確認いたしました。もちろん画面表示上のサイズを小さくするだけですので、画像のファイルサイズは一切変わりません。本来、ウィンドウサイズをあらかじめ考慮しておき、そのサイズにふ
はじめに 以前、JavaScriptでtableタグをスクレイピングして値を取り出す方法 というエントリを書きました。 先日、コメント欄でjQueryで書きなおすとどうなりますか?と聞かれたので、jQueryで書いてみました。 jQuery最高の教科書posted with amazlet at 14.01.23株式会社シフトブレイン SBクリエイティブ 売り上げランキング: 17,130 Amazon.co.jpで詳細を見る jQueryでTableタグをスクレイピングしてみる テーブルタグをもつHTMLを作成します。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>tableタグのサンプル</title> <style type="tex
ブラウザの判別や携帯の機種判別に利用するためのユーザーエージェント一覧です。ただし、ユーザーエージェントは詐称(偽物)される場合があるため、完全にユーザーエージェントでブラウザなどの判別ができるわけではありません(詐称の方法のページを参照)。ここに掲載されているものは、このサーバーなどに対してアクセスしてきたユーザーエージェント名などを抽出したものなどです。あまりに古いブラウザおよびマイナーなブラウザに関してはアクセスログがないため掲載できていません。 [トップページに戻る] ■iPhone ●iOS Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3 ●iOS2 Mozilla/5.0 (iPhone
前回のエントリー「携帯サイト(html)の制作に入る前に確認しておきたいチェック項目」では、tableを使わずにできるデザインでサンプルページを作成しました。 今回は「tableを使用してよい」という条件のもとで制作した場合、で考えてみます。 ただ、table非対応機種で見てもそこまでむごい崩れ方をしないように考慮して制作します。 デザイン、条件は前のエントリーと同様です。 前提条件は、 ・3キャリア1ソース ・html(CSSは使用不可) ・文字コード:Shift-JIS ・改行コード:CR LF 対応端末は、 ・docomo 901以降 ・au WIN端末 ・sb 3G です。 ※table非対応端末が含まれているがtableは使用してよいこととする。ただし、table非対応機種でもサイトの閲覧に支障がないようにすること。 チェックポイント tableが使えることによって前よりもチェッ
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答する リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。 メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。 異なるドメインからのリソースをダウンロードすることによって、同時
Overview The Internet Explorer Developer Toolbar provides several features for exploring and understanding Web pages. These features enable you to: Explore and modify the document object model (DOM) of a Web page. Locate and select specific elements on a Web page through a variety of techniques. Selectively disable Internet Explorer settings. View HTML object class names, ID's, and details such as
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる(?)と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
技術屋さんの視点からは「結構キツイな~」と思うことでも、お客様からは「えっ!?それぐらいできないの?」なんて思われることが結構あります。 その代表格はtableをExcelっぽくして欲しい、という要望ではないでしょうか。 なまじっかGooleDocsなんてものがあったりするのでExcelを日常的に使用されているお客様はWEBでもそのようなI/Fを求められます。 ExcelっぽいHTMLテーブル、、 結構キツイのよね・・・。 Flash使える場合はその方向になりますが、1画面だけ、なんて要件でしたらJavascriptで何とかしたい。 JSでテーブルをExcelっぽくするライブラリには、まとまったものではYahooUIやDojoがありますが、行列を固定したスクロールは調べた限りでは出来なさそうでした。 そんな時のJSライブラリ。 ・Super Tables http://www.matts4
■ クリッカブルマップ クリッカブルマップを使うと、1つの画像や写真(イメージ・ファイル)から複数のリンクを張ることができます。 クリッカブルマップにはクライアントサイド・クリッカブルマップとサーバサイド・クリッカブルマップの2種類があります。 クライアントサイドはブラウザで実行するので超初心者でも簡単に作ることができます。一方、サーバサイドの方は文字通りサーバが実行することになるので、そのためのソフトが必要になるし、サーバにプログラム(CGI)を作る必要があるので、超初心者には作ることはできません。もちろん34号もわかりません。ということでこの講座ではクライアントサイド・クリッカブルマップを勉強します。 ちなみに、クリッカブルマップではなくイメージマップという場合もあります。クライアントサイド・クリッカブルマップはクライアント・イメージマップということになります。 能書きはこれくらいにし
white-spaceプロパティは、ソース中のホワイトスペース(連続する半角スペース・タブ)・改行の表示方法を指定する際に使用します。 white-spaceプロパティは、 1.ソース中のホワイトスペース(連続する半角スペース・タブ)の表示方法 2.ソース中の改行の表示方法 の2点を指定するプロパティです。 この2つの表示方法の組み合わせパターンの数だけ値が用意されている、と考えると理解しやすいかもしれません。 ■値 normal ソース中のホワイトスペースを無視 ソース中の改行を1つの半角スペースとして表示 ボックスサイズが指定されている場合にはそれに合わせて自動改行する(初期値) pre ソース中のホワイトスペースをそのまま表示 ソース中の改行をそのまま表示 ボックスサイズが指定されている場合にも自動改行しない nowrap ソース中のホワイトスペースを無視 ソース中の改行を1つの半角
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く