blogtop.jpg

インラインSVGの基本まとめ

jQuery 3D画像スライドエフェクト

今回で2回目になりますが、 
弊社サイトのリニューアルに際し、wordpressを使用し、 
つまづいたコトを書かせて頂きます。
今回は、 
「関連記事の表示」です。
<h2>関連記事の表示</h3>
まずは、関連記事の表示ですが、 
これは下のプラグインを使いました。
<a href="http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/" target="_blank">Yet Another Related Posts Plugin</a>
人気があり、評価も高いプラグインです。
<h3>設定方法</h4>
インストール自体はとても簡単で、
メニュー　＞　プラグイン
からインストールできます。
プラグインを有効化した後は、
メニュー　＞　設定　＞　関連記事(YARPP)
からいろいろと設定できます。
<a href="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png"><img decoding="async" loading="lazy" class="alignnone wp-image-760" title="スクリーンショット（2012-11-14 15.17.06）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png" alt="" width="645" height="406" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png 727w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）-300x188.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）-228x143.png 228w" sizes="(max-width: 645px) 100vw, 645px" /></a>
自動的に表示するか、表示記事数をいくつだすか、表示記事のHTML部分を変更したり、といった感じで 
いろいろと設定できます。 
(自動的に表示するをチェックしたい場合、おそらくの直後にでてくる設定になると思います。自分で位置を決めたい人は、を任意の箇所に記載してください。)
これでOK！
あとは記事がいくつかできれば、関連記事として表示してくれます。
と思ったんですが・・・・ 
記事が十分あり、似たような記事もあるにもかかわらず出てこない・・・
なぜだろうと思って調べたら、 
「関連スコア」というものを設定しているらしく、 
このスコアによって関連記事を表示をコントロールしているようです。
設定のページ上の右上の「表示オプション」を開くと、 
「関連スコア設定」という項目があります。 
そいつをチェックすると、
以下の画面が追加されます。
<a href="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png"><img decoding="async" loading="lazy" class="alignnone wp-image-762" title="スクリーンショット（2012-11-14 15.16.08）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png" alt="" width="645" height="329" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png 729w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）-300x153.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）-228x116.png 228w" sizes="(max-width: 645px) 100vw, 645px" /></a>
初期状態では、表示する最低関連スコアが5に設定されています。 
5っていうのは、そうとう一致していないと表示されないみたいなので、 
2か3ぐらいに設定すると良いかと思います。
スコアを下げたら、無事表示されました！！ 
結果的に非常に簡単な話でした・・・
ついでですが、 
その表示オプションには「フィルター設定」という項目もあり、 
それをチェックすると以下の画面が表示されます。
<a href="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png"><img decoding="async" loading="lazy" class="alignnone wp-image-767" title="スクリーンショット（2012-11-21 14.37.49）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png" alt="" width="644" height="237" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png 892w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-300x109.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-768x282.png 768w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-228x83.png 228w" sizes="(max-width: 644px) 100vw, 644px" /></a>
ここでは、その名の通り、関連記事の箇所に、表示させたくない、カテゴリーやタグを設定できるようです。
使用してみると、 
非常に便利ですね、このプラグイン。
これで、ブログを見た方が、さらに違うブログを見て、 
サイトを回遊してくれると、このサイトでブログをやっている冥利につきます。
<h4>〜おまけ〜</h6>
記事とは全然関係ないんですが、 
最近、おぉーすごいなぁ〜と思ったwebサイトをご紹介します。
<a href="http://ikuze-tohoku.jp/kitchen/" target="_blank">行くぜ、東北。2012 秋</a>
<a href="http://ikuze-tohoku.jp/kitchen/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-769" title="行くぜ、東北。2012 秋" src="/uploads-archive/2012/11/行くぜ、東北。2012-秋.jpg" alt="" width="644" height="483" srcset="/uploads-archive/2012/11/行くぜ、東北。2012-秋.jpg 1176w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-300x225.jpg 300w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-768x577.jpg 768w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-1024x769.jpg 1024w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-228x171.jpg 228w" sizes="(max-width: 644px) 100vw, 644px" /></a>
ちょっと重いですが、パララックス効果が駆使されてます。 
色使いやデザインなんか素敵です。

サイトリニューアルに際し、wordpressでつまづいたコト②　〜関連記事表示について〜

symfony2でcsvを出力してみた

facebookアプリ（iframe）を作成してみた（アプリ開発編）

サイトリニューアルに際し、wordpressでつまづいたコト　〜投稿者情報について〜

ナビゲーションを上部に隠すjQueryを実装してみました

jQueryでアコーディオンを横向きに開閉する。
HTMLを用意する
&lt;div&gt; 
　&lt;dl&gt; 
　　&lt;dt id=&#8221;step1&#8243;&gt;&lt;span&gt;Step.1&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step2&#8243;&gt;&lt;span&gt;Step.2&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step3&#8243;&gt;&lt;span&gt;Step.3&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　&lt;/dl&gt; 
 &lt;/div&gt;
&nbsp;
CSSを用意する
body{ 
 background:#252422; 
 } 
 div{ 
 width:800px; 
 height:300px; 
 margin:50px auto; 
 overflow:hidden; 
 } 
 dl{ 
 width:900px; 
 height:300px; 
 } 
 dt{ 
 width:35px; 
 height:300px; 
 float:left; 
 } 
 dt span{ 
 display:block; 
 width:100%; 
 height:100%; 
 text-indent:-9999px; 
 } 
 dt span.over{ 
 cursor:pointer; 
 } 
 dt span.selected{ 
 cursor:default; 
 } 
 dt#step1 span{ 
 background:url(&#8220;images/background-1.jpg&#8221;); 
 } 
 dt#step1 span.over{ 
 background:url(&#8220;images/background-1-over.jpg&#8221;); 
 } 
 dt#step1 span.selected{ 
 background:url(&#8220;images/background-1-selected.jpg&#8221;); 
 } 
 dt#step2 span{ 
 background:url(&#8220;images/background-2.jpg&#8221;); 
 } 
 dt#step2 span.over{ 
 background:url(&#8220;images/background-2-over.jpg&#8221;); 
 } 
 dt#step2 span.selected{ 
 background:url(&#8220;images/background-2-selected.jpg&#8221;); 
 } 
 dt#step3 span{ 
 background:url(&#8220;images/background-3.jpg&#8221;); 
 } 
 dt#step3 span.over{ 
 background:url(&#8220;images/background-3-over.jpg&#8221;); 
 } 
 dt#step3 span.selected{ 
 background:url(&#8220;images/background-3-selected.jpg&#8221;); 
 } 
 dd{ 
 margin:0; 
 width:695px; 
 height:300px; 
 float:left; 
 background:#D4D0C8; 
 overflow:hidden; 
 } 
 dd p{ 
 width:655px; 
 text-indent:1em; 
 padding:20px; 
 }
&nbsp;
jQueryを用意する
$(function(){ 
        $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;); 
        $(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;); 
        $(&#8220;dl dt&#8221;).click(function(){ 
                 if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){ 
                 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;}); 
                 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;}); 
                 $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
                 $(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;); 
                 } 
         }).mouseover(function(){ 
          $(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
         }).mouseout(function(){ 
          $(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
         }); 
 }); 
<a href="http://poe.ud-ac.com/JavaScript_SelfStudy/other/sample2/samp6.html" target="_blank">DEMOはコチラ</a>
「説明」
①　 $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;);
初期状表示態の設定では、１番目の以外のパネル(dd要素)のwidthを０pxに変更します。
②　$(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;);
１番目のdt要素に対してclass属性「selected」を追加し、展開中のラベルスタイルに
設定します。
③　if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){
if分で、クリックされたラベルに対応するパネル(dd要素）の横幅が0の場合の処理を
記述します。
④　 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;});
ラベルがクリックされたら、class属性が「selected」の要素を含むdt要素の次に登場する
dd要素の幅(width)を0に変更します。幅の変更には、任意のCSSプロパティの値を 
アニメーション付きで変化させるanimate()を使います。これで展開中のパネルが閉じます。
⑤　 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;});
同様に、クリックされた要素の次に登場するdd要素の幅(width)をanimate()で695pxに変更します。
これで、クリックされたラベルに対応するパネルが開きます。
⑥　  $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
$(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;);
クリックされたラベルを選択状態にするため、すべてのspan要素からclass属性「selected」
を取り除き、クリックされたdt要素内のspan要素にclass属性「selected」を再設定します。
⑦　}).mouseover(function(){ 
$(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
}).mouseout(function(){ 
$(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
});
最後にmouseover/mouseoutイベントでロールオーバーの処理を設定したら完成です。

アコーディオンを横向きに開閉する

HTML5のSVG + jQueryで画像の拡大縮小

案件でfacebookアプリ（iframe）を作成しましたから、その流れを軽くまとめてみたいと思います。
&nbsp;
１、アプリの作成
自分が持つfacebookアカウントで<a href="https://developers.facebook.com" target="_blank">開発者サイト</a>でアプリを作成できます。 
※１アプリ作成するのに、モバイル設定もしくは支払方法を設定する必要あります。
※２モバイル設定には、確認コードをもちいて携帯メールの認証を行います。
確認コードを受信できるため、迷惑メール解除する必要があります。
迷惑メール解除のドメインは、facebook.comではなく、facebookmail.comです。
アプリ作成完了したら、App IDとApp Secretがもらえます。
&nbsp;
２、アプリの設定
「Facebook上のアプリ」と「ページタブ」両項目のみ設定します（その前に、開発サーバを整備し、アプリのリンクを確定する必要です）。
ページタグはfacebookからアクセス用の設定項目です。
「アカウント権限」項目に、管理者の追加ができます。
&nbsp;
３、facebookページの作成＆設定
facebookの一番下（今は無限スクロールのせいで、なかなかたどり着けない）に「ページを作成」のリンクがあるから、それをクリックして、facebookページの作成ができます。
facebookページを作成できたら、ページの上方（管理者の場合）には「Facebookページを編集」のプルダウンメニューがあるから、そこから「権限の編集」でfacebookページを公開することができ、「管理人」で管理者の指定ができます。
&nbsp;
４、アプリfacebookページの関連付け（facebookページにタブ追加）
アプリの管理ページの左メニューの「App Details」には、「アプリのページ」のところに、先作成したfacebookページのプルダウンがでてくるはずですが、もし出てこなかった場合は、手動アクセスで下記URLをアクセスして、タブを追加します。
https://www.facebook.com/add.php?api_key=[App ID]&amp;pages=1
&nbsp;
以上でfacebook側の準備がすべて整いました。
&nbsp;
５、php-sdkをダウンロード
https://github.com/facebook/facebook-php-sdk　からダウンロードできます。
&nbsp;
アプリ開発編は次を期待してください。
IEとSafariでは、サードパーティ クッキーのSetが問題になっているから、次回で解説いたします。
&nbsp;
※app設定をするのに、Privacy Policy URLとTerms of Service URLがないと、後facebookが怒るから、忘れずにつけましょう。App Detailの下で設定できます。
&nbsp;

facebookアプリ（iframe）を作成してみた

弊社では、MTを利用して、お客さまのwebサイトを作成することがよくあります。
そしてその運用もすることが多いのですが、
いつも通り、新しい記事を作り、カテゴリをチェックし、公開したら・・・
カテゴリのチェックがすべて外れて保存がされておりました。
何回やってもダメなので、調べてみると、Firefoxのver16のバグとのこと。
MTのverは、MT4.12とMT5.02でした。
&nbsp;
解決方法がシックス・アパートのよくある質問に載っておりました。
<a href="http://www.movabletype.jp/faq/firefox-16-patches.html" target="_blank">Firefox 16 でカテゴリおよびフォルダの選択が保存できない。</a>
&nbsp;
verが４つしかなく、自分のverにあったものがないっっ！！
&nbsp;
と思いましたが、強行で、ver4.38のpatchをダウンロードし、アップしてみたところ、
無事修正されました！！
&nbsp;
&nbsp;
方法は簡単ですが、自分でサーバー情報いじれない場合は、
別のブラウザを使うしかないようですね。
&nbsp;
firefox早くバージョンアップしないかな〜 
最後に面白い記事を紹介。
デザインする自分にとって、ものすごく同意する記事です。
<a href="http://gori.me/it/22110">デザインをする人もデザインを依頼する人も見てもらいたい！「デザインができるまで」が話題に！ | gori.me</a> 
<a href="http://gori.me/it/22125">クライアントよ、お前の依頼の大変さを思い知れ！これが「デザイン修正」だ！ | gori.me</a>
&nbsp;

MTのカテゴリが指定しても反映されない・・・[Firefox]

IE対策 &#8211; IEと仲良く付き合う方法 &#8211;

写真を自動的に加工してくれるjQuery「vintage.js」

見出しはコンテンツの中でも重要な場所ですが、 
デザインを考えるときに、迷うことが多い場所です。
&nbsp;
特にシンプルなデザインが求められている場合、 
シンプルにしすぎて、軽すぎたり、寂しい印象になってしまったり、 
それを避けようとして、シンプルから離れてしまったりするなど、 
難しいと感じることが多いです。
&nbsp;
そこで今回は、シンプルな見出しのデザインで、 
一味違うと思うサイトを探してみることにしました。
&nbsp;
<hr />
<a href="http://www.menard.co.jp/" target="_blank">MENARD</a> 
<a href="http://www.menard.co.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img1.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_1.jpg" alt="" />
<img decoding="async" loading="lazy" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_2.jpg" alt="" width="779" height="60" />
&nbsp;
大きな見出し、小さな見出しともに、左端に緩やかなグラデーションのかかったマークがあります。 
これだけだと、よく見られる一般的なものですが、 
大きな見出しのほうは、マークの４つの角が、半透明程度に削られています。 
小さな見出しのほうも、上側だけが、2px程度の角丸になっていました。
&nbsp;
下に入れられたボーダーは、両者とも、グラデーションが入っています。 
大きなほうは、一直線なグラデーションではなく、ランダムなグラデーションがかかっていました。 
これによって、ただの線という感じから脱しています。
&nbsp;
ボーダーの下には少し幅のある淡いドロップシャドウがつけられていて、ほんのりと立体感が出ています。 
大きな見出しのほうは、ドロップシャドウが真ん中ほど幅広くなっていて、より質感が出されていました。
&nbsp;
大きな見出しは、タイトルと説明の文字色のトーンを微妙に変えてメリハリをつけ、 
右端に添えられた英語のタイトルは、グラデーションがかけられていました。
&nbsp;
<a href="http://madamefigaro.jp/" target="_blank">FIGARO.jp</a>
<a href="http://madamefigaro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img2.jpg" alt="" /></a>
&nbsp;
見出し画像
<img decoding="async" src="/uploads-archive/2012/10/header_img2.jpg" alt="" />
&nbsp;
とてもシンプルなのですが、フォントの使い方や、文字の配置の仕方が面白く、印象的です。
&nbsp;
<a href="http://coetoiro.jp/" target="_blank">コエトイロ</a>
<a href="http://coetoiro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img3.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" src="/uploads-archive/2012/10/header_img3.jpg" alt="" />
&nbsp;
見出しはシンプルなアイコンと３本線と筆文字風のフォントで構成されたシンプルなものですが、 
和の感じが十分伝わってきます。
 

和柄を感じさせる線の使い方と、ひっそり右端でフェイドアウトしているところが、 
より和の感じを出しているように思います。
&nbsp;
&nbsp;
<hr />
<h2></h2>
<h2>まとめ</h2>
今回シンプルな見出しを探してみたところ、 
文字だけだったり、 
点線や実践一本、１色ののマークやアイコンが左端にひとつあるなどのものが、 
大半を占めていました。
 

ケース・バイ・ケースではありますが、 
シンプルなデザインをする場合、装飾に頼らず、レイアウトによって 
見出しを引き立てる技術が、より重要になってくるのだということを、 
感じました。

シンプル系の見出しデザインの一味違うサイトを探す

流行りのスクロール効果を自作してみました。

フリックでの操作をjQueryで組む

webサイトの制作しているときに、毎回ではないんですが、
時々利用する便利なサイトをご紹介します。
&nbsp;
地味に役立つのでブックマークおすすめです！
&nbsp;
<h3>Metallic Ratio</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service01.jpg" alt="" width="656" />
&nbsp;
レイアウト等のバランスを決める時なんかに重宝します。
いわゆる黄金比、白銀比、はたまた、青銅比を、 いろいろなパターンで、教えてくれます。
簡単な図もありますので、視覚的にもわかりやすいです。
&nbsp;
<a href="http://ratio.b-shiki.com/" target="_blank">Metallic Ratio</a>
&nbsp;
<h3>PXtoEM.com</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service02.jpg" alt="" width="656" />
&nbsp;
主にフォントサイズですが、サイト制作にあたっていろんな単位で指定できますが、
単位毎で、大きさがわからないこともあります。
&nbsp;
それをわかりやすく表にしてくれています。
記入すると、変換してくれるフォームあるので便利です。
&nbsp;
<a href="http://pxtoem.com/" target="_blank">PXtoEM.com</a>
&nbsp;
<h3>css3clickchart</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service03.jpg" alt="" width="656" />
&nbsp;
CSS3のコードって長く、ちょっと複雑になったので、いちいち覚えていられません。。。
そんな時に、このCSS3のコードを教えてくれるサイトが便利です。(英語ですが)
&nbsp;
大きなページ遷移がなく、一画面で、
コード、デモ、サポートブラウザ等が表示されているので、
ありがたいサイトです。
&nbsp;
<a href="http://css3clickchart.com/" target="_blank">css3clickchart</a>
&nbsp;
<h3>j-snippet</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service04.jpg" alt="" width="656" />
&nbsp;
jQueryのプラグインを紹介しているサイトです。
プラグインないかな?って探す時に便利です。
カテゴリ別に分かれているので、検索も割りとしやすいです。
&nbsp;
<a href="http://jquery.kachibito.net/" target="_blank">j-snippet</a>
&nbsp;
<h3>WP code-snippet</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service05.jpg" alt="" width="656" />
&nbsp;
wordpressのコードのスニペットです。
日本語なのでわかりやすいです！
一覧しかないように見えて、
特徴やタグで検索できるので、
まずはこちらで探してみると見つかるかもしれません。
&nbsp;
<a href="http://kachibito.net/wp-code" target="_blank">WP code-snippet</a>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2012/11/22

2012/11/22

2012/11/22

2012/11/21

2012/11/15

2012/11/15

2012/11/08

2012/11/07

2012/11/01

2012/11/01

2012/11/01

2012/10/19

2012/10/18

2012/10/18

2012/10/11

2012/10/04

2012/10/04

2012/09/27