ウェブデザイン【Y_Y】

Cocoonを使ったデモサイトです。

Cocoonというテーマを使っています
Customize

Smash Balloon Social Post Feedで写真を表示させる方法

WordPressとFacebookを連携させるためのプラグイン「Smash Balloon Social Post Feed 2.18.2」のカスタマイズ方法です。通常版ではサムネイルを表示させることはできませんが、一部を改変することで、画像付きの記事を埋め込むことが可能になります。以前紹介したカスタマイズ方法が古くなってしまったので、記事を書き直しました。
Tips

Facebook グラフAPI v8.0 でページアクセストークンを取得する

FacebookとWordPressの連携を考えます。Facebookのタイムライン(Feed)を取得してWordPress上に表示させるために、無期限のページアクセストークンを取得します。FacebookのグラフAPIがv8.0の場合の取得方法をチェックしてみました。
Theme

OnePressのコード研究ー2.トップページの構造

WordPressのテーマ「OnePress」をカスタマイズするにあたって、調べてみたコードの内容を解説していきます。今回はトップページの構造と各セクションの読み込みかた、セクションの内容の書き換えについて検討します。
Theme

OnePressのコード研究ー1.sectionの順序

WordPressのテーマ「OnePress」をカスタマイズするにあたって、調べてみたコードの内容を解説していきます。今回はセクションの順序の変更に関して、フィルターフックがどの部分に作用するのかを調べてみます。
Theme

OnePressのカスタマイズ-7. 任意の固定ページを表示

WordPressのテーマ「OnePress」のカスタマイズの方法です。任意の固定ページを、トップページのHeroセクション直下に表示させてみます。 【デモサイト】 add_action( 'onepress_after_section_...
Theme

OnePressのカスタマイズ-6. コピーライトの変更

WordPressのテーマ「OnePress」のカスタマイズの続編です。フッターにある著作権表示(コピーライト)の内容を変更してみます。 もともとの著作権表示は、「Copyright © ****(年)********(サイト名) – ...
Theme

OnePressのカスタマイズ-5. 大幅なカスタマイズ

皆様からよくお問い合わせいただく「OnePress」のカスタマイズですが、いろいろと最近の勉強も含めて、かなりカスタマイズしたデモサイトを作ってみました。新たなセクションを追加し、カスタマイザー画面から管理できるようにしてあります。
Theme

OnePressのカスタマイズ-4. ヘッダに連絡先を追加する

WordPressのテーマ「OnePress」で作るウェブサイトのヘッダ部分の上部に、会社の電話番号などの連絡先を表示させるカスタマイズ方法です。 まず、OnePressのヘッダ部分がどのようになっているのか、OnePressのテーマフォ...
Customize

Smash Balloon Social Post Feed(旧Custom Facebook Feed)プラグインについて

(2021-02-09 追記) こちらの記事は内容が古くなっています。バージョン2.18.2に対応する新しいカスタマイズ方法を紹介しましたので、参考にしてください。 Custom Facebook Feedプラグインの改変方法について...
Customize

Smash Balloon Social Post Feedで写真を表示させる方法

WordPressとFacebookを連携させるためのプラグイン「Smash Balloon Social Post Feed 2.18.2」のカスタマイズ方法です。通常版ではサムネイルを表示させることはできませんが、一部を改変することで、画像付きの記事を埋め込むことが可能になります。以前紹介したカスタマイズ方法が古くなってしまったので、記事を書き直しました。
Customize

Smash Balloon Social Post Feed(旧Custom Facebook Feed)プラグインについて

(2021-02-09 追記) こちらの記事は内容が古くなっています。バージョン2.18.2に対応する新しいカスタマイズ方法を紹介しましたので、参考にしてください。 Custom Facebook Feedプラグインの改変方法について...
Customize

TwitterのタイムラインをAPIで取得してサイトに表示してみる

TwitterのDeveloper accountを作成したので、アプリケーション登録をして各種APIキーを取得し、タイムライン表示をアレンジしてみることにしました。 詳しいことは後程ご説明するとして、このようなことができます、という例を...
Customize

Twitterのタイムラインを埋め込んでみる

FacebookページをWordPressのウェブサイトに表示する方法をあれこれやってきましたが、今度はTwitterのタイムラインをサイト内に表示してみましょう。タイムラインを表示するだけなら以下の方法で取得したコードを貼りつけるだけでO...
Customize

固定ページの子ページ一覧をカルーセル表示する

いろいろなものをSwiper.jsを使ってカルーセル表示してみるシリーズの、第4弾です(笑) 固定ページの子ページ一覧を、「アイキャッチ画像・タイトル・本文(抜粋)」を取得してカルーセル表示にしてみます。スライド要素に背景色を入れて、見た...
Customize

Swiper.jsでフォトギャラリーを作る

今度は、Swiper.jsを使って、立体的なキューブが回転するような効果のあるフォトギャラリーを作成してみます。「effect: 'cube',」をscriptに追加するだけでOKです。 Swiper.jsの導入については以下の記...
Customize

Swiper.jsを使って新着記事一覧を表示してみる

せっかくSwiper.jsを導入したので、さまざまなカルーセル表示を試してみたいと思います。 新着記事一覧はプラグイン等で簡単に実装できるのですが、自分の思い通りのデザインや動きを実現させるために、自力でコードを書いてみて基本を知って...
Customize

FacebookのFeedとSwiper.jsを使ってタイムライン表示をアレンジ

Facebookページのタイムラインを、Swiper.jsを利用してWordPressのウェブサイト上にスライダー表示させてみました。画像の上への文字載せは、cssを利用しています。facebookのアクセストークンを取得してjson形式でfeedを取り出し、phpで表示を処理します。
Customize

人気の記事一覧をトップページにカルーセル表示する

WP Posts CarouselプラグインとWordPress Popular Postsプラグインを合わせて使うことで、よく読まれている記事(人気記事)一覧をサイトのトップページにカルーセル表示させてみます。
Customize

Smash Balloon Social Post Feedで写真を表示させる方法

WordPressとFacebookを連携させるためのプラグイン「Smash Balloon Social Post Feed 2.18.2」のカスタマイズ方法です。通常版ではサムネイルを表示させることはできませんが、一部を改変することで、画像付きの記事を埋め込むことが可能になります。以前紹介したカスタマイズ方法が古くなってしまったので、記事を書き直しました。
Customize

Smash Balloon Social Post Feed(旧Custom Facebook Feed)プラグインについて

(2021-02-09 追記) こちらの記事は内容が古くなっています。バージョン2.18.2に対応する新しいカスタマイズ方法を紹介しましたので、参考にしてください。 Custom Facebook Feedプラグインの改変方法について...
Customize

人気の記事一覧をトップページにカルーセル表示する

WP Posts CarouselプラグインとWordPress Popular Postsプラグインを合わせて使うことで、よく読まれている記事(人気記事)一覧をサイトのトップページにカルーセル表示させてみます。
Customize

WP Posts CarouselでCOLORS風のカルーセルスライダー

WordPressのカルーセルスライダーWP Posts Carouselプラグインを使って、DigiPressのCOLORSのようなコンテンツスライダーを作ります。スタイルシートの変更のみで対応しました。
Customize

WP Posts Carouselを真面目に改変してみる(プラグインの改変)

カルーセルタイプのコンテンツスライダープラグインWP Posts Carouselは、Advanced post sliderよりもカルーセル時の動きがよい感じ(ちゃんと一コマずつ動く)なので、導入してみたいと思っています。ただ、やはり表示が自分の好みではない部分もあるので、すこし真面目に改変してみたいと思います。
Plugin

Advanced post sliderもあえて動かさないで使ってみる(笑)

「Advanced post slider」というコンテンツスライダー作成プラグインを使って、WordPressのホームページに新着記事一覧を表示します。今回はあえてオートスライドにせずに記事一覧をカルーセル表示する方法を考えてみました。
Plugin

Custom Facebook Feedプラグインを本サイトにも導入してみました

先のエントリーで、Custom Facebook Feedプラグインの改造版を使ってデモサイトにFacebookのタイムラインを表示させてみました。うまくいったので、こちらの本サイトのトップページにもFacebookのタイムラインを表示する...
Plugin

Facebookページをウェブサイトに埋め込む(Custom Facebook Feedプラグイン)

※2021-02-09追記 この記事の内容は古くなっています。 最新の情報は、以下のページをご覧ください。 Smash Balloon Social Post Feedで写真を表示させる方法 なんとかプラグインを使用せずにFaceboo...
Plugin

さくらサーバー+WordPressでSSL化する

さくらインターネット(さくらサーバー)とさくらの独自ドメインで運用しているWordPressのサイトを、さくらの無料SSLを利用して常時SSL化してみました。いくつかの点で手動で修正が必要でした。
Theme

OnePressのコード研究ー2.トップページの構造

WordPressのテーマ「OnePress」をカスタマイズするにあたって、調べてみたコードの内容を解説していきます。今回はトップページの構造と各セクションの読み込みかた、セクションの内容の書き換えについて検討します。
Theme

OnePressのコード研究ー1.sectionの順序

WordPressのテーマ「OnePress」をカスタマイズするにあたって、調べてみたコードの内容を解説していきます。今回はセクションの順序の変更に関して、フィルターフックがどの部分に作用するのかを調べてみます。
Theme

OnePressのカスタマイズ-7. 任意の固定ページを表示

WordPressのテーマ「OnePress」のカスタマイズの方法です。任意の固定ページを、トップページのHeroセクション直下に表示させてみます。 【デモサイト】 add_action( 'onepress_after_section_...
Theme

OnePressのカスタマイズ-6. コピーライトの変更

WordPressのテーマ「OnePress」のカスタマイズの続編です。フッターにある著作権表示(コピーライト)の内容を変更してみます。 もともとの著作権表示は、「Copyright © ****(年)********(サイト名) – ...
Theme

OnePressのカスタマイズ-5. 大幅なカスタマイズ

皆様からよくお問い合わせいただく「OnePress」のカスタマイズですが、いろいろと最近の勉強も含めて、かなりカスタマイズしたデモサイトを作ってみました。新たなセクションを追加し、カスタマイザー画面から管理できるようにしてあります。
Theme

OnePressのカスタマイズ-4. ヘッダに連絡先を追加する

WordPressのテーマ「OnePress」で作るウェブサイトのヘッダ部分の上部に、会社の電話番号などの連絡先を表示させるカスタマイズ方法です。 まず、OnePressのヘッダ部分がどのようになっているのか、OnePressのテーマフォ...
Theme

OnePressのカスタマイズ-3. スタイルシートの変更

WordPressのテーマ「OnePress」は、それだけで完成されたデザインであるだけに、変化をつけるのが難しいような気がします。他のサイトと似たような見た目になるのを避けたいなあと思った場合、子テーマのスタイルシートを使って、使用するフ...
Theme

OnePressのカスタマイズ-2. セクションの追加

WordPressのテーマ「OnePress」のトップページには、あらかじめ10個のセクションが用意されています。ここに、新たなセクションを追加してみます。 まず、OnePressの子テーマをインストールして有効化します。 次に、Wor...
Theme

OnePressのカスタマイズ-1. セクションの順序の入れ替え

WordPressのテーマ「OnePress」の無料版は、フィルターフックを利用したカスタマイズが可能です。まず、セクションの入れ替えをやってみたいと思います。
タイトルとURLをコピーしました