サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
hubworks.jp
Instagramにアップしている写真をWEBサイトに読み込んで表示できたら便利ですね。 例えば次の画像のように最新画像から降順にギャラリー表示させれば、ページ更新の手間が省けます。 このような表示を実現させる方法として「SnapWidget」というサービスがありますが、読み込まれた画像のリンク先がInstagramではなく、SnapWidgetで用意されたページとなるためオススメできません。 そこで今回はjavascriptプラグイン「instafeed.js」をInstagram APIと連携することで、Instagramの写真をサイトにギャラリー表示させる方法をまとめます。 まずはInstagram APIについて Instagram APIは2016年6月から登録制ではなく、承認制に変更になりました。 ところが今回のようにWEBサイトに表示させる目的では審査依頼を出しても承認されま
WordPressを使ってサイトをCMS化する場合はナビゲーションはカスタムメニュー機能を使用して表示させると便利です。 当サイトでは、そのカスタムメニューの説明機能を利用してナビゲーションのテキストを2段表示にしています。 2段表示のグローバルナビゲーション ダッシュボードの外観→メニューを開いて右上の表示オプションをクリックします。 表示する項目にある説明にチェックを入れて説明の利用を有効化します。 作成済みのカスタムメニューの各項目を開くと説明入力欄があるので、2段目となるテキストを入れます。 function.phpに以下のように記述します。 add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4); function description_in_nav_menu($item_output,
YouTube動画をWEBサイトやブログに埋め込むには、特に複雑な作業は必要ありません。 動画の下に表示されている共有から埋め込みコードを選択して、吐き出されるコードを表示させたい場所に貼り付ければOKです。 埋め込みコードは、サイズも自由に設定できますし、用意されたチェックボックスを使って、「動画が終わったら関連動画を表示する」「プレーヤーのコントロールを表示する」「動画のタイトルとプレーヤーの操作を表示する」「プライバシー強化モードを有効にする」の項目を設定することができます。 また、「自動的に動画を再生」や「繰り返し再生」、「コントロールバーとシークバーの色の変更」など細かいカスタマイズも埋め込みコードを追加修正すれば可能です。 詳しくは下記の情報を参考にどうぞ。 しかし、埋め込みコードでは「自動的に動画を再生」とセットで使うケースが多い動画再生時に音声をミュートさせる設定ができませ
当サイトではグローバルナビゲーションを上部に固定表示させるスティッキーヘッダーを実装しています。 スティッキーヘッダーを設定すると、縦に長いページでもナビゲーションが隠れてページ移動が不便になることはありません。特にスマートフォンサイトでは有効です。 スティッキーヘッダーはjQueryでスクロールの量に応じて、HTMLのclass属性を操作することで実現させます。 class属性を操作するHTMLの確認 ナビゲーション部分のコードは以下のようになっています。このコードのnav要素をスクロールしても上部に固定表示させます。 <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- 省略 --> </div> </nav> スティッキーヘッダーを実装するjQueryのコード $(docu
WordPressでホームページを制作する場合はXAMPPなどを利用して構築したローカル環境でテストした後、本サーバーにアップロードする方が多いと思います。 そこでホームページをWEB上に公開するときにローカル環境からサーバー環境に移行する手順をまとめます。 ローカル環境からサーバー環境への移行手順 テーマ、画像、プラグインの移行 サーバーにWordPressがインストールされている前提です。(※デフォルトの固定ページ、投稿は削除しておきます。) まず、「wp-content」フォルダの「uploads」フォルダ、「themes」フォルダ、「plugins」フォルダをサーバー上の「wp-content」フォルダにアップします。 データベースの移行 wp-config.phpにあるデータベースへの接続情報を本番環境の情報へ書き換えておきます。 /** WordPress のためのデータベース
このページを最初にブックマークしてみませんか?
『福岡 ホームページ制作 | ハブワークスは那珂川市のWEBデザイン事務所』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く