Amazonや楽天などはカエレバのようなアフィリエイト商品リンクをお洒落に見やすくするツールが存在するのですが、 A8やアクセストレードのようなアフィリエイトASPや、アフィリエイトじゃない普通の公式サイトへの紹介リンクなどのスタイルを綺麗にしてくれるものがあまりなかったため、自分で作ったので公開します。 HTML CSS 今後もアイテムパーツ公開してきます ■これからWordpressでサイトを作るなら ▽レンタルサーバー ▽ドメイン取得 ■あなたにオススメの記事 大したものではないのですが、もし私と同じように「商品リンクをそれっぽくはりたい」と思っている方がいれば使ってください。 こんな感じで貼れるようになります（下のやつはスクショです。育毛系のアフィをやってることがバレますね）。 ■PCの場合 ■スマホの場合 カード型のデザインで、どんなアフィリエイトサイトでも問題なく溶け込めるよう

小さいころから占いに興味があって、色々と勉強しているうちにどんどん好きになり、皆さんにも占いの良さを知ってほしくて記事を書いています。 知り合いに占い師や霊能力者、お寺の住職がたくさんいるので、その方たちにインタビューして記事を書いています。

また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って

jQueryを使えば色々と便利なことがあります、今回はjQueryを使って要素をボタン化して、それにアクションを加えてやるというものです TENPARA.NETで現在作成中のテンプレートで作成しているスマートフォンでボタンをクリックしたらメニューが出来るものです、これもjQueryでボタン化してそれにアクションを加えています 初期状態 左上のボタンをクリックして展開 仕組み 左上のボタンはdivですクラスがbutton-toggleのやつです、このdivにアクションを付けることでボタン化しています アクションは、他の要素がslideup、slidedownを交互に繰り替えるslideToggleを使うことで表現しています HTML コード <header> <div class="title"><h1><a href="">創造WEB</a></h1></div> <div class="

jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 投稿日2015年12月09日 更新日2015年12月09日 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ

SNSなどのアイコンをWebフォントにするサイトが増えていると思います。Webフォントにするということはアイコンの色はこちらで指定する必要があります。ということでFont Awesome Iconsにあるアイコンの色を調べてみました。 で、調べていくうちに止まらなくなってきたので、Font Awesomeに限らず有名なロゴカラーを調べてみました。 Font Awesome Iconsの使い方等はこちらの記事もご参考に。 これは便利！アイコン型WebフォントのCDN「Font Awesome」｜Webpark アイコン型WebフォントをCSSでデザインしたボタン10個｜Webpark ということで、ブランドカラーを調べて並べてみたのがこちらです。 ボタンはそのサイトにリンクしています。 「参考」は公式サイト内にあるロゴの利用規約等のページにリンクしています。 「参考」のリンクがない場合は公式

ソーシャルシェアボタンをオリジナルデザインにしたかったり、いいね！数のデータを元にランキングシステムなどを作りたい場合に役立つ「ソーシャルカウントの取得方法」をまとめました。取得方法はサーバーサイド(PHP)、クライアントサイド(Javascript)の両パターンを取り上げています。よろしければ参考にしてみて下さい！なお、Twitterのカウントは2015年11月20日以降、取得できなくなりました。

サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <

レスポンシブサイトのHTML、CSSの作成方法を、初心者にも分かるように説明。サンプルコード、テクニックなど。

皆さんには思い出のレストランってありますか？ 今回は私と妻の思い出の味、神戸三宮にあるスパゲッチハウス　ボルカノのについて書きたいと思います。 “スパゲッチ”と表記したのはタイプミスではないです。看板にも“スパゲッチ”と書いてあります。もうこれだけで美味しそうでしょ？ （でもメニューには普通にパスタって書いてあって「どないやねん！」とツッコみたくなります。） 少し調べてみますとボルカノのスパゲッチには随分長い歴史があるようです。 ソースはwikipediaですが、スパゲッティの項目にも登場しています。 1928年、日本で初めての国産スパゲッティ「ボルカノ」は兵庫県尼崎市南塚口町（現在のピッコロシアター）にあった高橋マカロニ（髙橋胖氏）によって製造された。この商品名は彼がイタリアでスパゲティに出会い、その時見たヴェスヴィオ火山からネーミングした。当時は「スパゲッチ」と称した。（現在は日本製麻