「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法

数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS

縦長のwebデザインをがむしゃらに集めています。

スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"

商品ごとにラッピング可否が異なりますので、各商品ページの「ギフトラッピングを選択」から追加し、ご注文ください。

スクロールして対象要素が画面に出てきたときにいい感じでフェードインして表示させるjQueryプラグイン「jquery.scrollFade.js」を作りました。文章だとわかりにくいかと思いますので、下記のデモを参照ください。 サンプルコード jQuery本体、jquery.easing、jquery.scrollFade.jsの3つを読み込みます。そして、フェードさせたい要素に対してscrollFadeメソッドを実行させます。下記の例では「.scrollFade」というクラスを持つ要素を対象にしています。scrollFadeメソッドは、フェードアウト前の透明度（out）、フェードにかける時間：ミリ秒（duration）を引数として設定できます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/

@wokamoto さん作の WordPress へのログイン履歴を保存するプラグインを使ってみたら、そこそこブルートフォースアタックの形跡があったので、良い機会でしたので WordPress の管理画面にアクセス制限をかけてみました。 WordPress へのログイン履歴を保存するプラグイン「Crazy Bone(狂骨)」 「Crazy Bone(狂骨)」は @wokamoto さん作のWordPressへのログイン履歴を保存し、ダッシュボード上で可視化できるプラグインです。 WordPress のログイン履歴を保存するプラグイン「狂骨」 | dogmap.jp. WordPress › Crazy Bone « WordPress Plugins もちろん、サーバー上のログを解析するのが本筋なのですが、ログイン履歴（WordPress管理画面へのブルートフォースアタック）だけ分かれば良

Wordpressで記事の一番最初の画像を取得し、サムネイルとして使う方法をご紹介します。 当サイトもトップページの記事一覧はサムネイル画像と、文章出だしの一覧になっていると思いますが、構造としては記事の一番最初に画像を挿入し、文章出だしを書いてmoreタグをつけるという手順を踏んでいます。 ただ、この方法だと画像が一番上にきて、つづきの文章があり、という形を変えることは難しいです。 もちろん、抜粋などを利用して頑張れば色々出来ることはあると思いますが、今回紹介する方法であればサムネイル画像を自由に設置することができます。 以下手順。 functions.phpの設定 コードはこちらの記事を参考にさせて頂いてます。 まずは、functions.phpに以下のコードを追加します。 function catch_that_image() { global $post, $posts; $fir

コーポレートサイトを制作する際、ページのタイトルを画像で表示させたり、投稿のカテゴリーごとにアイコンをつけたりすることがあります。 条件分岐で振り分けたり、テンプレートを個別に制作することで対応することも可能ですが、できればHTMLやCSSで表示をコントロールできた方が私の心が安らかなので、カテゴリースラッグを取得してclass名に指定します。 目次 私がやりたかったことテンプレートタグ<? php get_the_category(); ?>を使って取得何でこうなった？参考ページ 私がやりたかったこと <div class=”news”> <h1 class=”page_title”>おしらせ</h1> </div> 1行目のclass名「news（カテゴリースラッグ）」と、2行目の見出しの中身「おしらせ（カテゴリー名）」を なんとかうまいこと取り出して、楽したい。 後々カテゴリーが増え

ループは、WordPressで作成した投稿を表示するために使われます。ループの仕組みを理解することは、テーマをカスタマイズする上でとても役立ちます。ここでは、WordPressループの基本について紹介します。 WordPressループとは そもそも「ループ」とは何でしょうか？英語の「loop」を直訳すると、「輪」という意味です。そして、プログラミング言語では、繰り返し実行するための命令を意味します。 つまり、WordPressループとは、WordPressで作成した投稿を繰り返し表示するための記述を指します。 例えば、WordPressで作ったサイトのトップページにいくつかの最新記事が並んでいるのを見かけたことはありませんか？このように、最新記事を繰り返し表示させるための命令にも、WordPressループが使われています。 WordPressループの記述には、PHPを使います。ここでは、P

Google Analytics（グーグルアナリティクス）とは、米グーグルが提供する無償のWebアクセス解析ツールのこと。「現場でプロが培ったGoogle Analyticsの使い方」は、ASCII.jpの担当者が蓄積してきた「Google Analytics」によるアクセス解析のノウハウを具体的なケースをもとに、Google Analyticsの使い方を学び、指標の意味を深く読み取るための方法を紹介する。 <cj:inc template="792" element_id="498083" />