Web制作

jQuery「wavify」で波のようなデザインを作る方法【コピペ用】

jQuery「wavify」で波のようなデザイン wavify実装に必要なファイルをダウンロード https://github.com/peacepostman/wavifyを開く。上記サイトからzipフォルダをダウンロード（画像参照）。「wavify-master」の中で必要なファイルは次のふたつ。 jquery.wavify.js wavify.js これをjsフォルダにコピー。読み込み位置については下記のコピペコードを参照。フォルダ階層の構成が違う場合は調整してください。 wavifyのコー ...

《html》スマホで電話番号のリンクをタップして電話発信する方法（htmlのコピペ）

便利なClick to Callとはスマホなど通話機能を備えた端末では、ユーザーはウェブサイトや広告に表示された電話番号をタップするだけで、簡単に電話をかけることができます。この機能は一般にClick to Call呼ばれます。リンクタグにtel: スキームを使用 tel: スキームを使用して、電話番号にハイパーリンクを設定します。 htmlに電話番号を入力するためのタグのコピペ tel:の部分には半角数字で電話番号を入力。通常のハイパーリンクタグと同じで、リンク文字には「電話番号」や「今すぐ電話 ...

html+CSS☆dl dt ddの説明リスト（旧定義リスト）で作る2列のレスポンシブテーブルのコピペ

dl dt ddとはまずはdl dt ddとは何かということについて簡単におさらい。 dl dt ddとは、1つ以上のdt要素とそれを説明するdd要素のグループです。定義リスト(dl dt dd) HTML5以前は、dl（=definition listの略）は定義リストを表す要素でした。要素名意味 dl 定義リスト(description list) dt 定義する用語(description term) dd 定義の説明(discription difinition) 用語説明型リスト(dl ...

色番号のCSSコピペ！誰でもおしゃれに使える配色のカラーパレット

誰でもおしゃれに使える色番号のまとめです。 Word Pressの配色・色番号

#e4d1d1

#e4d1d1

#e4dad1

#e4dad1

#eeeade

#eeeade

#d1e4dd

#d1e4dd

#d1dfe4

#d1dfe4

#d0d2e3

#d0d2e3

[crayon-67567c1d7 ...

スマホ表示のときにサイドバーが消えてしまったときの直し方！ACTION / AFFINGER6EX(アフィンガー)

アフィンガーでスマホ表示のときにサイドバーが消えてしまったときの直し方 ACTION / AFFINGER6EX(アフィンガー)でスマホ表示のときにサイドバーが消えてしまったときの直し方です。逆に、スマホ表示のときにサイドバーを消したい人もこの方法で消すことができます。アフィンガーでスマホ表示のときにサイドバーが消えてしまったときの直し方は簡単。アフィンガー管理 > 全体設定 > サイト全体のレイアウト一括設定 > スマホのサイドバーを非表示にするにチェクマークを入れるサイト全体のレイアウト一括設 ...

【コピペOK】ページ内リンクのhtml！ユーザビリティアップの方法

リンク先の設定見出しなどに半角スペースをあけて、下記のhtmlを追加。

id="ここにキーワード"

1	id="ここにキーワード"

「ここにキーワード」の部分に半角英数字の好きなワードを入れます。見出しに追加する場合はこんな感じになります。

<h2 id="cafe">カフェとは</h2>

1	<h2 id="cafe">カフェとは</h2>

リンク元の設定 idで指定した単語に#をつけます。

<a href="#cafe">idで指定した位置へリンク</a>

1	<a href="#cafe">idで指定した位置へリンク</a>

WING（アフィンガー5 EX）の記事スライドショーまとめ

カテゴリ記事の一覧任意のカテゴリの一覧を所定内であれば好きな位置に表示できます。表示する記事数やカテゴリの除外、閲覧サイズによる列数の指定（3~1）などが可能です。カテゴリ一覧スライドショー WING（アフィンガー5）EX版では、カテゴリ一覧を簡易にスライドショーに変えることが可能です。 slides_to_show="3,3,2"の数字を変えることで、画面に表示するスライドの枚数を変えることができます。 5列スライドショー

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="5,5,2" slide_date="" slide_more="ReadMore"]

1	[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="5,5,2" slide_date="" slide_more="ReadMore"]

3列スラ ...

WING（アフィンガー5 EX）のテキスト装飾のまとめ

フォントのスタイル Word Pressテンプレート「WING（アフィンガー5 EX）」のテキスト装飾のまとめです。他のWord Pressテンプレートでは利用できないのでご注意ください。アイコンアイコンマークは「カスタマイザー」の「オプション」でカラーを設定できます。 ※通常エディタ上では表示されませんこれは「はてな」マークです

<span class="hatenamark2 on-color">これは「はてな」マークです</span>

1	<span class="hatenamark2 on-color">これは「はてな」マークです</span>

これは「注意」マークです

<span class="attentionmark2 on-color">これは「注意」マークです</span>

1	<span class="attentionmark2 on-color">これは「注意」マークです</span>

これは「人 ...

《html+CSS》箇条書きリストの・を変更するlist-style-typeのコピペ

箇条書きリストのCSS 今回は、何かと出番の多い「ul li」で作った箇条書きリストの「・」の部分をlist-style-typeで変えるCSSのまとめなり(´ω`)✧ 箇条書きリストとは ul liの基本のhtml ul liの箇条書きリストです。 ul liの場合はこのように「・」が付きます。

<ul>
 	<li>ul liの箇条書きリストです。</li>
 	<li>ul liの場合はこのように「・」が付きます。</li>
</ul>

<ul>

<li>ul liの箇条書きリストです。</li>

<li>ul liの場合はこのように「・」が付きます。</li>

</ul>

ol liの基本のhtml ol liの箇条書きリストです。 ol liの場合はこのように「数字」が付きます。 [crayon-67567c1d ...

ボックスデザインコピペ用ショートコード《AFFINGER（アフィンガー）》

AFFINGER（アフィンガー）では様々なボックスデザインを作成できるのが便利！だけど、ショートコードが迷子になることが。シンプルなポイントボックス

[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold"]

（基本）これはダミーです

[/st-mybox]

[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold"]

（基本）これはダミーです

[/st-mybox]

しかく枠のみ

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold"]

（しかく枠のみ）これはダミーです

[/st-mybox]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold"]

（しかく枠のみ）これはダミーです

[/st-mybox]

薄グレー背景丸み枠

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#BDBDBD" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold"]

（まるみ）これはダミーです

[/st-mybox]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#BDBDBD" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold"]

（まるみ）これはダミーです

[/st-mybox]

参考とかメモに使えるボックス st-mybox title="メモ"の部分を書き換えればOK。 [crayon-67567c ...

スマホヘッダーデザインの変更の方法《AFFINGER（アフィンガー）》

カスタマイズ　＞　メニューのカラー設定　＞　スマホスライドメニュースライドメニューバー背景色スライドメニューバー背景色（グラデーション上部※向きはヘッダーエリア連動）を変更。つまり、スライドメニューバー＝スマホヘッダーということ。ヘッダーの色を変えてもスマホで反映されないので困っていたら、そういうことでした笑

《AFFINGER（アフィンガー）》よく使う画像コメントのコピペ用ショートコード

AFFINGERの画像コメントのショートコード多機能すぎて時々どこにショートコードがあるのかわからなくなるAFFINGER（アフィンガー）。背景なしコメントの完成イメージこれはダミーのテキストですショートコードのコピペ

[st-user-comment-box title="タイトル" user_text="◯代男性" color="" star="5"]<img class="alignnone size-st_kaiwa_image wp-image-6206" src="ここに画像URL" alt="" width="60" height="60" />[/st-user-comment-box]

これはダミーのテキストです

[st-user-comment-box title="タイトル" user_text="◯代男性" color="" star="5"]<img class="alignnone size-st_kaiwa_image wp-image-6206" src="ここに画像URL" alt="" width="60" height="60" />[/st-user-comment-box]

これはダミーのテキストです

背景ありコメントの完成イメージショートコードのコピペ背景の色は、 bgcolor="#edbbcf" にお好みの色番号を入れて変更してね。文字が見やすい薄めの色がおすすめ！枠線の色は、 bordercolor ...

Font Awesome 4.7.0アイコンを変更する方法《AFFINGER（アフィンガー）》

Font Awesome 4.7.0アイコンでAffinger（アフィンガー5 EX）をカスタマイズ Affinger（アフィンガー5 EX）では、ショートコードにFont Awesome 4.7.0のアイコンが使用されています。 Font Awesome 4.7.0のアイコン「資料請求をする」の左側のチェックマークのアイコンがFont Awesome 4.7.0のアイコンです。この箇所のアイコンは下記のリンクにあるアイコンならどれにでも変更することが可能です。 https://fontawesome ...

【Bootstrap】レスポンシブ対応のYouTube埋め込みメモ

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div><!-- 16:9 aspect ratio -->

</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="..."></iframe></div>
<!-- 4:3 aspect ratio -->

何故かこれだと埋め込みができず。参照 http://getbootstrap.com/components/#responsive-embed これで解決ヽ(•̀ω•́ )ゝ✧

<iframe class="embed-responsive-item" src="#" frameborder="0" allowfullscreen></iframe>

1	<iframe class="embed-responsive-item" src="#" frameborder="0" allowfullscreen></iframe>

追記：Word Pressだと、引用のタグで問題がない様子結論：ダメだったら、frameborder="0" allowfulls ...