レスポンシブ、スライダー、SNSボタン標準装備のイケてるテーマi-MAX

この記事は約4分で読めます。

八王子で婚活や女性を応援する「所縁の会」のWebサイトを作らせていただきました。そのときに色々なテーマを試した結果、i-MAXというちょっとかっこいいテーマを見つけました。
レスポンシブデザインやスライダー、ぱんくず機能も付いていて機能も充実しています。このi-MAXについてご紹介します。

スポンサーリンク

i-MAXをインストールする

i-MAXの基本的なカスタマイズ方法について書きたいと思います。まず、インストールから。

ダッシュボード 外観>テーマ 新規登録で

i-max と入力してリターン

i-MAXテーマが表示されるので、インストール をクリックします。

有効化 をクリック

テーマ一覧ページの上部にこのように表示されます。i-MAXには必要なプラグインがあるようなので、

Begin Installing plugins をクリック

必要なプラグインは2つあるので一つずつ、Installをクリックして

Activateします。

これで準備が出来ましたので、表画面を見ると

このようにi-MAXテーマで表示されました(^^)/

スライダー部分をカスタマイズしてみる

このテーマで一番目に付くのは4枚あるスライダーです。この部分をカスタマイズしてみます。

ダッシュボード 外観>カスタマイズをクリック。

表示されたメニューから Sliderをクリック

スライダーは4つあります。まず Slide 1をクリックしてみます。

入力欄がこのようにありますがこれは、

このように対応しています。試しにちょっと変更してみます。

こんな感じに入力すると

右側にプレビューでどのようになるか表示されるので分かりやすいです。

これで良ければ、

保存して公開 をクリックします。

表画面を見ると、

変更されていました。

  • 写真は ぱくたそさんのものを使わせていただきましたm(_ _)m

電話番号、メールアドレス、サイトのロゴ、基本色、SNSボタンのカスタマイズ

電話番号、メールアドレス、サイトのロゴ、基本色、SNSボタンのカスタマイズをします。

ダッシュボード 外観>カスタマイズをクリック。

Basic Settings をクリック。ここで電話番号、メールアドレス、サイトのロゴを指定します。



Layout Options
をクリック。ここで基本的な色を指定します。


Social Linksをクリック。ここで各種SNSボタンなどの設定をします。

何か文字が入っているとボタンが表示される仕組みです。ここでFacebookページのURLやTwitterのURLなどを入力します。特にリンクすべきページが無ければ # を削除します。

変更を行った場合は、

保存して公開 をクリックして保存することを忘れないようにします。

テーマ i-MAXを使ってつくったサイト「所縁の会」

このような感じで実際につくったサイトがこちらになります。

所縁(ゆかり)の会

i-MAXの子テーマを作ってCSSで色を変えたり、blog「WordPress wp-content/languages/ja.po で翻訳されている日本語を変えたいとき」に書いた方法で文字を置き換えたりしました。

Jetpackを入れているのですがFacebookでシェアしたときに画像が空白になってしまう場合があったので、子テーマのfunctions.php

/**
 * Adds default OpenGraph image.
 * Christoph Nahr 2014-02-28
 * @param array $tags Array of OpenGraph tags.
 * @return Specified array, possibly modified.
 */
function add_default_image( $tags ) {
 
    // replace blank Jetpack default image with site header
    if ( $tags['og:image'][0] == "https://s0.wp.com/i/blank.jpg" ) {
        unset( $tags['og:image'][0] );
        $tags['og:image'][0] = 'http://yukari.attackline.jp/wp-content/uploads/2015/06/ogpimage.jpg';
    }
 
    // always remove useless HTTPS image tags
    unset( $tags['og:image:secure_url'] );
 
    return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'add_default_image' );

以前参考にさせてもらったfunctionをちょっと改造した、こんな記述を入れました。

i-MAXで作ったWebサイト 所縁(ゆかり)の会 も是非ご覧くださいm(_ _)m

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。