技術系ブログやプログラミングについて解説したサイトを運営していると、ソースコードを記事内に書く機会もあると思います。しかしそのまま記事内にソースコードをただ羅列するだけでは、デザイン的にもまとまりがなく、どれく... 【SSL化ロリポップ編】SSLとは？という話とWordPressサイトをSSL（…, 技術サイト制作に役立つ！ を丸っとコピペしてください。, 最後に規約に同意にチェックを入れて Sign up ボタンをクリック。これで第一段階、ユーザー登録は完了です。, 画面が戻っていると思います。次は Resister a New Client をクリック。, Alpine PhotoTile for Instagram WordPress plugin これをコピペ。, 赤文字部分をコピペしてね、とのこと。なので私の場合は “http://kouji.pinonon.com/wp/wp-admin/options-general.php?page=alpine-photo-tile-for-instagram-settings&tab=add” を貼り付けました。もちろんこれはサイトによって異なりますで注意してください。, あとは認証文字入れて画面下部にある Resister をクリックです。するとようやく CLIENT ID と CLIENT SECRET が発行されました。, ページ下部に CLIENT ID と CLIENT SECRET を入力するスペースがあります。取りたてホヤホヤのコードをコピペしたら、Add and Authorize New User をクリック。, また認証。げんなりしますが挫けずに Authorize をクリックして進みましょう。, プラグイン設定ページには、もしも上記の方法での認証がうまくいかなかった場合の手法も掲載されています。私はすんなり行きましたのでこの方法についてはスルーしますが、詳しいやり方は下記サイトが大変参考になります。, さっそくサイドバーにドラッグすると、いろいろと自由に設定できるようになっています。, たとえばこんな塩梅。この状態だと、小さい画像にマウスオンすると、上に大きく表示されるようになります。素敵ですね。, これを実現するためにはどうやら Shortcode Generator を使えば良さそうです。プラグインのタブから Shortcode Generator をクリックします。, ここは説明するよりも実際に自分でいじってみた方が絶対良いので省略します。何度でもやり直しがきくので安心してください。, ひとまずはデフォルトでも構いませんので、下部にある Generate Shortcode をクリックしましょう。, このプラグインが素敵なのは、左下にある Preview ボタンで確認できること。何度でもやり直しがききますので、設定変更→プレビューの繰り返しで自分が考えていることに近い表示方法を探してみてください。, で、最後にワードプレスで固定ページを新規作成。本文にできあがったショートコードを貼り付けます。, ・・・が、デフォルト2カラムだと収まりが悪かったので、急いでカスタマイズ！STINGER LADYS を1カラムにしました。カスタマイズについてのあれこれは省略。, だいぶ変わりましたね。確認はこちらから→http://kouji.pinonon.com/, 以上がプラグイン “Alpine PhotoTile for Instagram” のインストールから実際の設定まででした。まだ細かい修正はやるにせよ、ひとまず私が思い描いていた形に近い仕上がりとなり大満足。, 以降はワードプレス側では更新の手はかけず、インスタグラムからビシバシ更新していきます。, […] メモ。 参考サイト 簡単にできた。 ※このサイトには置いてないけど。。 […], メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, 五反田ひろしと申します。都内で働く社会人。興味があることは、ファッション／音楽／グルメ／便利なWebサービスなどなど。トラディショナルなものも好きだし、新しいものも好き。, Alpine PhotoTile for Instagram WordPress plugin, http://kouji.pinonon.com/wp/wp-admin/options-general.php?page=alpine-photo-tile-for-instagram-settings&tab=add, Instagramを表示させる高機能なWordPressプラグイン「Alpine PhotoTile for Instagram」, Facebook アプリを削除したらメール攻勢激化するも、やっぱり削除して正解だった, さくらサーバー上のワードプレスサイトを https 化する手順（注：グダグダです）, IFTTT を使ってブログフィード (Feed) を Twitter / Facebook へ投稿させる, 【備忘録】WordpressにInstagramのギャラリーを表示させる | みずきち備忘録/情しす日報, ニューバランススニーカー公式の修理・ソール交換実例（before-afterあり）.
Word Pressでページ内リンクを設定したい時ってありますよね。 もくじとは違って、単純にテキストにリンクを貼ってページ内のある場所に移動させたい。 その方法についてまとめました。 ページ内リンク作成のステップ 必要なのはたったの2ステップです。 (adsbygoogle = window.adsbygoogle || []).push(); 各ユーザのInstagramのURLは下記の通り。 ユーザID部分を置き換えて入力してください。, さて、それでは適当な画像を選択してみましょう。 こんな感じで個別に写真が開かれます。, いいね！数とかコメントがここでチェック可能です。 ログインすると、Web上でもコメントができるようになってるんですね。, 画像の右下の「…」ボタンをクリックすると、こんな感じのメニューに「埋め込み」という項目が表示されるので、ここをクリック。, これで、埋め込み用のタグが表示されます。 あとはこれをコピーペーストで自分のブログ記事などに貼り付ければ、完了です。, Ymbk Borraginolさん(@slyellow2)が投稿した写真 - 2015 9月 14 2:05午前 PDT, Ymbk Borraginolさん(@slyellow2)が投稿した動画 - 2015 7月 31 6:45午後 PDT, この方法なら、サーバ上に写真を置かなくても貼り付けることが可能です。 また、動画を置くのにも最適ですね。, 動画は15秒までなので使い道は限られてしまうけど、有効活用すれば便利な埋め込みタグでした。, インスタライブと同じ感覚で配信できて、しかもお金も稼げるアプリ「Hakuna Live」が話題です。, スマホだけで配信OK、顔出しなし・声だけの配信でも人気獲得できる、注目の配信プラットフォームです。, YouTube動画アップロードのテンプレート設定(デフォルト)を変更する方法(2015年10月版), 【YouTube】収益化ストップしたチャンネルを「再収益化申請」する方法【2019年版】, Microsoftが公式で配布しているWindowsのISOファイル/仮想マシンのリンクまとめ(2015年10月版), SoundCloudのアップロード済みの音源を更新(リプレース)する方法(2014年10月版), 【YouTube】見たくないチャンネル・不快なサムネを検索結果からミュート(非表示)する方法【2020年最新版】, おかげさまでTipstourは2020年5月、
月間100万PVに到達いたしました。, 【動画】ブルーレイを動画に変換してパソコンにバックアップする方法とオススメソフトを解説, 【Zoom】×ボタンだけではオンラインのままアプリは終了しないので要注意！Zoomアプリを完全に終了させる方法【Win/Mac両方】, 【Zoom】主催者(ホスト)限定、Web会議を録画する方法【標準機能で映像を保存】, 【節約】フリーWiFiを地図上で簡単に検索＆自動接続できる無料アプリ「タウンWiFi」【iPhone/Android】, 2015年10月にITエンジニア職を退職後、1年弱ほどワーキングホリデーのためにニュージーランドに移住、帰国後はフリーランスのブロガーとして活動中。, 【Zoom】Web会議中にURL(テキスト)を参加者全員に送る方法【2020年最新版】, 【Python】テキストファイルを読み込んで１行ずつ配列に入れていく方法【最短・3行だけでOK】, 【ネットフリックス】映画のスタッフロールで勝手に次の作品の予告が流れるのを止める方法【スマホ版】, 【副業】ビジネス用ロゴ作成は依頼不要、５分で作れる！名刺や書類フォーマットなどを即日作成出来る「Logaster」, 【Zoom】ログインパスワードを忘れてしまった際の対処方法・パスワードの初期化方法まとめ【2020年最新版】, Instagram写真をブログ上に貼り付け(埋め込み)する方法(2015年10月版), インスタをもっと好きになる本！ ～Instagram女子のためのハッピーマニュアル～ (マイナビムック), 広告除去、高速読込、ループ機能… オールインワンでYouTubeに便利機能を沢山追加できるChromeアドオン「Magic Action」, 黒画面に白カーソルが点滅してWindowsが起動しない問題を解決してみた(Boot順の変更), 【インスタグラム】足跡をつけないで他の人のストーリーを見る３つの方法まとめ！【2020年最新版】, 【インスタグラム】自分のアカウントのプロフィール写真を変更する方法まとめ【2020年最新版】, 【インスタグラム】パソコンからログインして投稿を見る方法まとめ【パソコンから出来ること・出来ないこと】. WordPress最大の特徴の一つとして「プラグイン」があります。標準のWordPressにはない機能（プログラム）が「プラグイン」という形で配布されており、それらを追加インストールする事によって、ウェブサイトに様々な機能を持たせる事が出来ます。
ムービーファイルを表示させる InDesignドキュメントには画像ファイルと同様にムービーファイルを配置することができます。動画表示はPublish Onlineだけでなく、EPUB（フィックスレイアウト）やインタラクティブPDFでも表示ができます。 使用できるファイル形式は、出力によって変わってきます。 刺激的なタイトルだったにも関わらず、たいしてアクセスが集まらなかった前回のこちらのエントリー。, 半分ネタですが半分本気。当該エントリー内でも書いたように、ここ数日は Instagram アカウントで投稿を始めつつ、WordPress と Instagram の連携についても調べていました。, photo credit: ralphbijker via photopin cc, 記事単位でポストしていく形。インスタグラムで1画像アップしたら都度ワードプレスでも記事が追加されていく形ですね。, 更新はインスタグラムで行い、ワードプレスでは一覧で見れるようにしたいので、今回は後者の “Alpine PhotoTile for Instagram” を使うことにします。, プラグインを見てみると、通常のプラグインとは異なり色々と表示されています。むむ、これは。, まずはワードプレスとインスタグラムの連携をしないと始まらないので、Add User ＝ ユーザー追加をクリックしましょう。プラグインの設定画面に移ります。, 設定画面ではプラグインを有効化するための手順が英語で書かれています。またここから先はほぼ英語オンリーに。簡単な英語ですので Google 翻訳を使えばいけると思いますが、私も初めてですので実際にやりながら説明します。, まずは下記 URL （インスタグラムのデベロッパーサイト）からインスタグラムの API 利用申請をする必要があります。少し面倒な申請程度に考えてください。, リンク先に飛んだら、Residter your Application をクリック。, ここでインスタグラムにログインしてないと「先にログインしてから来いやボケ」と表示されてしまいます。画面右上にログインボタンがあるのでクリックし、ID と PASS を入れてログインしましょう。, ※つまり当然ですがインスタグラムのアカウントが無いと、以降の作業はできません。必ず事前にアカウントは取っておきましょう。, リンクをクリックすると下記の画面が立ち上がるはずです。英語ですけど大丈夫、簡単ですよ。, Instagram 連携させたいウェブサイトの URL を記載します。私の場合は http://kouji.pinonon.com/ となります。, 電話番号入力です。海外から認証電話が～ということは無いのでご安心を。私のとこにも来てません。, この API 使って何するの？と。これは設定画面ヘルプにも書かれているとおり、A plugin for my wordPress website. 当該エントリー内でも書いたように、ここ数日は Instagram アカウントで投稿を始めつつ、WordPress と Instagram の連携についても調べていました。 ... 2019.03.31 Sun ... 時間にルーズな営業マンに価値はなし ©2020 The choice is yours. webに関わるハウツーの記事を書く時は、ソースコードそのものを記事内に記述したい時があります。ソースコードを記事内に記述する時に使えるプラグインはモチロンありますが…プラグインを導入せずに運用したいという方も多いのではないでしょうか。 wing（affinger5）と併用すると効率がupするお薦めプラグインから知っておくと便利なプラグインなどのご紹介です。 他社製プラグインに関してはバージョンや環境により正常に動作しない場合は未確認
プラグインなしでソースコードを記事内に表示できるツール3選, 記事内にソースコードをキレイに表示するWordPressプラグイン「Crayon Syntax Highlighter」, WEB系ハウツー記事に重宝間違いなし！プラグインを使わずにソースコードを記載する方法. 画像をブログで引用したいときのルール・方法について解説しています。画像を引用する際は、著作権、肖像権、パプリシティー権などにも注意してしっかりとルールを守るよう心がけることがポイントで …
WordPressのプラグインは無料なものも有料なものも多く、一番便利なのを見つけるのは時間がかかりそうな作業です。そこで、当社の厳選リストをご参照ください。 久しぶりにInstagramの話題。 Instagramの写真をWebサイトやブログに貼り付けようとする場合、方法はふたつあります。 写真そのものをブログに貼り付ける方法 Instagramのタグを使
WEBに関わるハウツーの記事を書く時は、ソースコードそのものを記事内に記述したい時があります。Wordpressにはプラグインが多数揃っているので、ソースコードを記事内に記述する時に使えるプラグインはもちろんありますが…プラグインを導入せずに運用したいという方も多いのではないでしょうか。, そこで今回は、プラグインを使わずにソースコードを記事内に配置する方法をご紹介します。ソースコードを記事内で使っている方はぜひ試してみてください。これを機に乗り換えを検討してみることも良いかもしれませんね。, プラグインを使わずにソースコードを記事内に表示する方法は、ズバリ外部のWebサービスに頼ることです。これにより、プラグインによって引き起こされるページ速度の遅延を事前に防ぐことができます。では具体的にどういったツールが存在するのでしょうか。ここではプラグインなしでソースコードを記事内に入れることができるツールを3つご紹介します。, まず最初にご紹介するのは、貼り付けたソース言語をそのままHTML形式に変換してくれるツール「srctohtml」です。このツールでは、HTMLはもちろんJavascriptやPHPといったソースコードをすべてHTMLに変換して出力してくれます。そのためHTML変換した言語は、そのままWordPressのテキストエディタに貼り付けることで、記事内にソースコードを表示することが可能です。, 使い方はいたって簡単。表示したいソースコードを記載し、「HTMLに変換」ボタンをクリックするだけ。, すると記事内に貼り付ける用のソースコードが出力されるので、それらをコピーしてテキストエディタに貼り付けてしまいましょう。, あとは保存してプレビュー画面で確認すればこの通り。迷うことなくキレイなソースコードが記述できましたね。, 次にご紹介するのは、エンジニア御用達ツールGithubで利用できるGistです。このツールでは、Githubならではのシンプルなソースコードエディタを記事内に貼り付けることが可能。またGistでは、Githubのアカウントと連携したエディタを出力するので、埋め込んだコード経由で自身のGithubアカウントのブランディングにも役立ちます。, そんなGistの使い方も簡単。まずGithubアカウントをアカウント開設手順に沿って作成します。, 次に画面右上の「New gist」をクリック。するとソースコードを入力できる画面が表示されるので、記事内に入れたいコードを書いていきます。, コードが書き終わったら一度コードを保存するために「Create public gist」でコードを公開保存しましょう。, コードを公開できたら、「your gists」の画面で自分のコードが見れるようになっているので、画面右上にある「Embed」という項目から埋め込みコードをコピーして、WordPressのテキストエディタに貼り付けます。, あとは先ほど同様、記事を保存してプレビュー画面で確認してみれば、コードの貼り付けは完了です。, ちなみにGistでは、どのファイルに使われるコードなのかを判別するため、「ファイル名」の設定もできるようになっています。そのため記事内に複数のソースコードエディタを使う際は、必ず「ファイル名」を入れるようにしましょう。, 最後にご紹介するのは、エンジニアやアーティストなど世界中のクリエイターが手がける作品のソースコードを一覧表示できるWebサービスCodePenを使った方法です。このサービスでは、ソースコードを記事内に表示させる以外にも実際のソースコードの実行結果をプレビュー画面で表示してくれます。そのため読者はソースコードを見ながら、どういう実行結果をもたらすのかを事前に確認することができます。, 次に「New Pen」でコードを記述。一度コードを保存しましょう。すると右下にある「Embed」欄より埋め込みコードを出力できるようになるので、コピーしてWordPressのテキストエディタに貼り付けましょう。, Gist同様に、CodePenならではのテキストエディタを記事内に挿入できました。, 今回は、プラグインを使わずにソースコードを記事内へ挿入する方法を3つご紹介しました。プラグインはたしかにあると便利ですが、プラグインは入れすぎるとWordPressの動作速度にも影響を与えかねません。そのためプラグインを使う際は、サーバースペックと相談しつつ、速度の低下を招かないように注意しましょう。, 今回はプラグインを使わない方法をご案内しましたが、プラグインを使う方法ももちろんあります。「Crayon Syntax Highlighter」もご紹介しているので、気になった方は合わせてこちらもチェックしてみてください↓. Instagramの写真をWebサイトやブログに貼り付けようとする場合、方法はふたつあります。, 今回は、Instagramのタグを使ってWebページ上やブログ記事上に写真を埋め込む方法について、メモしておきます。.