タグ

ブックマーク / www.webdesignleaves.com (7)

  • WordPress のテーマ:Avada のカスタマイズ | Web Design Leaves

    WordPress の有料テーマ($55):Avada の使い方やカスタマイズに関しての個人的なメモ。 Avada のオンライン・ドキュメント Avada のダウンロード(購入)、インストールやサンプルページのインポートに関しては以下のページをご参照ください。 関連ページ:WordPress テーマ:Avada のダウンロードとインストール 目次 スタイルの設定 Avada には「Light」と「Dark」の2種類のスキンが用意されていて、どちらかを選択することにより他の色のオプションもそれに合わせて変更される。また定義済みのカラースキーム(Predefined Color Scheme)も用意されていて、こちらもどれかを選択することでそれにあわせて要素の色や背景色等が変更されるようになっている。 スキンの選択は「外観」→「Theme Options」で表示されるページ(テーマオプション)

  • WordPress テーマ:Avada のダウンロードとインストール | Web Design Leaves

    ThemeForest で一番売れている(販売数70,000を超える)WordPress の有料テーマ:Avada(3.5.1) のダウンロードやインストール等に関して。 価格:$55 レスポンシブ対応 レティナディスプレイ対応 豊富なスライダー(Layer Slider, Revolution Slider, Fusion Slider, etc) 5種類のヘッダデザイン等多様なカスタマイズオプション 目次 themeforest からのダウンロード(購入) themeforest にアクセス 検索ボックスに「avada」と入力して検索 検索結果から「Avada | Responsive Multi-Purpose Theme」を選択。 または、themeforest にアクセスして、 メニューの「WordPress」から「Popular Items」を選択(Avada 以外にもたくさん

  • wp_nav_menu の出力をドロップダウンメニューで表示 | Web Design Leaves

    wp_nav_menu 関数は、デフォルトでは以下のように ul 要素( li 要素)を使ってメニューの各項目を出力する。 <div class="menu-XX-container"> <ul id="menu-XX" class="menu"> <li id="menu-item-YY" class="menu-item menu-item-type-ZZ menu-item-YY"> <a href="リンク先のアドレス">メニューのラベル</a></li> <li id="menu-item-YY" class="menu-item menu-item-type-ZZ menu-item-YY"> <a href="リンク先のアドレス">メニューのラベル</a></li> ・・・ <ul class="sub-menu"> <li id="menu-item-YY" class="

  • 背景画像を使ったパララックス | Web Design Leaves

    参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, #third, #end)に背景画像(960 x 800)を用意 「background-attachment プロパティ」の値を「fixed」に指定(背景画像はブラウザの表示領域に対して固定される) 「background-position プロパティ」の水平位置の値を「50%」または「center」に指定 「background-position プロパティ」の垂直位置の値を「0(0%)」または「top」に指定(値の指定が1つだけの場合、水平位置のみに適用され、垂直位置は50

  • WordPress でのカスタムメニューの利用 | Web Design Leaves

    ★最新の情報は以下のページをご覧ください。 WordPress ナビゲーションメニュー(カスタムメニュー) 2019年3月31日 カスタムメニューを使うと複数の投稿タイプを組み合わせたり、表示する順番を変更したり、階層関係をつけたりと、柔軟にメニューが作成できる。 カスタムメニューを利用する方法 カスタムメニューの機能を有効にするには以下の3つの方法がある。 register_nav_menus() でカスタムメニューの機能を有効にし、メニューを表示するロケーションを作成する方法。functions.php に以下を記述。 パラメータのキー:半角英数字のロケーション名 (カスタムメニューの識別名) パラメータの値:管理画面に表示するロケーション名(日語可)→カスタムメニューの設定画面の「テーマの場所」に表示される名前 register_nav_menus(array( 'topnav'

  • Bootstrap 3 を WordPress で使ってみる | Web Design Leaves

    コンポーネントをカスタマイズ(色やラウンドコーナーの値を変更)してダウンロードするには、「Customize」のページでそれぞれの値をカスタマイズして、ページ最下部の「Compile and Download」をクリックする。 jQuery の読み込み Bootstrap 3 を使用するには jQuery が必要なので、 jQuery を header.php や functions.php で読み込む。WordPress はデフォルトで jQuery ライブラリが同梱されているが、以下は functions.php で CDN から読み込む場合。(同梱されている jQuery ライブラリを使っても問題はない) 訂正 この場合「add_action()」で wp_print_scripts フックを使うとバージョン 3.6 からはデバグモードでは Notice エラーが表示されるので、代わ

  • WordPress プラグイン Google Calendar Events | Web Design Leaves

    WordPress プラグイン Google Calendar Events CATEGORY: WordPress | TAG: プラグイン 2014年5月21日 Google Calendar のフィードを読み込み、カレンダー表示やリスト表示できる WordPress のプラグイン Google Calendar Events の使い方や設定に関するメモ。 追加情報 以下の記事は2014年5月21日の時点でのもので、その後大幅な変更があり、現在のバージョンとは異なっています。(つまり今のバージョンに関しては以下の記事は役に立ちません。。。。) 目次 インストール 「プラグイン」 → 「新規追加」の「検索」で「Google Calendar Events」と入れて検索 「いますぐインストール」をクリックしてその後「有効化」をクリック 設定 Google カレンダーのフィードを表示するには

  • 1