【stinger8】のナビゲーション部分のハンバーガーメニュー(ドロワー)の見栄えや操作性などをカスタマイズする方法を書きたいと思います。はじめに【stinger8】は、カスタマイズを前提としているかのような、とてもシンプルなテーマです。な 今回はサイドバーを消して、1カラムにしてみます。 注:記事内において『サイト名を中央にする』におけるコードが、 スマホ用のアコーディオンメニューも残っているのでこれまでのメニューを活用出来ます。 本当にシンプルなのでWordPressテーマのカスタマイズ練習にはいいかもしれません! 当BlogでのStinger8カスタ … ↑のように、グローバルメニューに「 」のアイコンを表示させるには以下のステップで実施します。, 「メニュー構造」枠にある、「ホーム」横の▼をクリックし、「CSS class(オプション)」が存在することを確認。, アイコンは、https://fontawesome.comにて検索することができます。, 「click here to visit the Font Awesome website.」をクリック。, Font AwesomeのWEBサイトが表示され、このサイトで様々なアイコンを検索することが可能です。, wordpress画面に戻り、先ほどの画面で「CSS class(オプション)」欄に「fa-home」と入力します。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, 管理人のペペです。 3児の父親であり仕事と育児に追われる日々ですが、スキを見てサッカー観戦をすることが楽しみです。 主にDAZNでですが(笑) 好きなサッカーチームはアーセナル。 スマホゲームのウイニングイレブンカードコレクション(ウイコレ)、Jリーグクラブチャンピオンシップ(Jクラ)にはまっています。. メニューの設定方法 ... PCサイズ、タブレットサイズ、スマホサイズ別に表示列数を3~1で設定可能(注意点あり)。「日付」「カテゴリリンク」「矢印」の非表示や「ReadMore」のテキスト変更もできます。 ... STINGER8: STINGER PLUS2+ 【STINGER8】3種メニュー「header・accordion・footer」のデザインカスタム(アイコン有) 上記コードに変更後、スマホの方で見たデザインはこちらになります。 これで問題なく表示されているかと思いますが、念のために確認はしておくようお願いしますね。 WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、 記事を種類別に分類をしてみました。 STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。 その分非常にカスタマイズがやりやすく、H... 【WordPress】Stinger8のサイドバーを消してサイト全体を1カラムにする方法. メニューとはよくヘッダーの位置(ページの先頭)などに表示されている、ナビゲーションのことです。メニューを上手く使うことでユーザーがサイト内をスムーズに移動できるようになります。 ブログ形式で使用しても良いですが、普通の企業サイトのようなものを作成する場合でstinger8を使用したい場合は、1カラムにするのも良いかもしれません。 コツコツ頑張る | WordPressでブログ作成、PhotoShop、アフィリエイト , ヘッダー用メニューと同様のものを用意しましょう。, ↓メニュー画面に移動しましたら、これから作るメニュー名を入力して「メニューを作成」をクリックします。ここでは「ヘッダー用」と入力してみます。, ↓このような画面になります。 Mさん、初めまして、 知りたいねっと管理人です。 やりたいことは、wp-config.phpを探して、そこに「WPメモリーの制限を変更」というのは、PHPのメモリを変更したいと言うことでしょうかね... はじめまして。 このルートディレクトリにアクセスするには、そもそもどうすればいいのでしょうか? いろいろブログを確認したところ、.com/wordpressで終わるURLの対処法はあったのですが、... 中島 幹夫さん はじめまして、知りたいねっと管理人です。 コメントをいただいていたのに、見逃していました。 お返事遅れてしまい、申し訳ないです。 初心者の方には、stinger8はちょ... こんにちは。 上記サイトを立ちあげたいと思っております。 Stinger8のカスタマイズは、画像を入れる事ができましたが、公開したページを見ると その部分が「STINGER」という文字のままにな... RSSを使って自分のホームページに【アメブロ】などの外部ブログの新着記事を載せたい, SSL化で.htaccessにhttpからhttpsへリダイレクト設定してもうまくいかない、500エラー時に確認すること. <固定ページを自動追加>にチェックを入れると、作成している固定ページが全て自動で挿入されます。自由度が下がるのでチェックは外しておいて良いと思います。 2.スマホ版のアコーディオンメニュー. 「メニュー構造」 左右どちらにもボタンがあって、メニューが横にスライドして開きます。本文に重なることもないので、見やすいですね。設定も簡単でした。, Mobile Menuというプラグイン。作成者はTakanakuiさん。詳細を読むと、「ここまでは要らない」と思ったのですが、試しにインストールして有効化し、使ってみると、「最高!」だったので、絶対おススメです。*スライドとドロップダウンメニューは広告が隠れますので、Googleアドセンス広告には向きません。ご注意ください。. ページナビってどこかって? さらにウィジェットを使えばサイドバーにも表示させることが可能です。 STINGER8が公... 今回は記事一覧の中にアドセンスを挿入する方法です。 【stinger8】ではあらかじめスマホ用のメニューを表示させられるような仕組みがありますので、その設定を書きたいと思います。はじめに使用しているテーマによっても違いますが、【stinger8】ではスマホ用のメニューを表示させる仕組みを持っ タグが「最近」「すべて表示」「検索」とありますから、この中から追加したいメニューを探します。希望のメニューが見つかったら、チェックを入れて「メニューに追加」をクリックします。, ↓例として「ホーム」「お問い合わせ」「サイトマップ」を追加しました。右側のメニュー構造にこのように追加されます。(厳密にはホームは固定ページではなくカスタムリンクになりますが、ここで追加して問題ありません。), ↓項目の右側の逆三角マークをクリックすると、設定を変更することができます。 メニューの位置としてヘッダーメニュー、フッターメニュー、スマホ用メニューがある。表示する項目変更できるだけで、見せ方(アイキャッチ画像を表示する)などの選択・変更はできない。 6.ウェジェット. STINGER8では簡... 今回は記事一覧のところにあるページナビをカスタマイズします。 そこまで難しくはなくコピペでできますが、 一番下にあるあれです! stinger8 メニューの項目間の幅を変える より: 2017年8月2日 4:36 AM […] 【引用・参考サイト】 ・『Plus Plus』(【WordPress】STINGER8におけるヘッダーメニューの簡単カスタマイズ集)2017年5月7日検索 […] ※2016年11月15日にSTINGERの新テーマ「STINGER8」が配布されたのに伴い、「STINGER PLUS+」の配布は終了してしまいました。それに合わせて当サイトでも既存記事内容のSTIN ... 目次1 STINGER8対応箇所(※2016/11/18追記)2 WordPressのセキュリティ対策2.1 Acunetix Secure WordPressのインストール方法2.2 Acuneti ... 今回はPHPをバージョンアップさせて、サイトの安全性と処理速度を上げる方法を解説します。 PHPバージョンアップは手動で行わなけれないけないので、意外に見落としがちな作業です。 なお、サイト構築環境は ... 当ブログでのSTINGER8(スティンガーエイト)の使い方の記事をまとめてみました。 (途中まではSTINGER PLUS+ですが、STINGER8にも対応させています。) 基本的に「初心者向けの使い ... ブログを収益化するためには、どのように記事を書いたりサイトを作り上げていけばいいのでしょうか。 「ブログで稼いでみたいけど、やり方がさっぱり分からない」 そんな初心者の方の為にブログを開設してから、約 ... 目次1 STINGER8対応箇所(※2016/11/21追記)2 私がスティンガープラスで使っているプラグイン3 お勧めプラグイン3.1 最初に入れるプラグイン3.2 STINGER8におすすめのプラ ... [2017年度版] 近年(2016年ごろから)、Googleアドセンスの審査が非常に厳しくなっているようです。 また、審査時間もかなりかかるケースもあり、アドセンス審査によって疲弊してブログを辞めてし ... 当サイトで紹介している「元バーテンダーによるおすすめウイスキー」シリーズのまとめページになります。 このページを見れば、あなたが求めるウイスキーを探しだす手助けにきっとなるはずです。 おすすめウイスキ ... 目次1 定番のオススメスコッチブレンデッドを6本ご紹介1.1 バランタイン ファイネスト1.2 シーバスリーガル 12年1.3 ジョニーウォーカー ブラック 12年1.4 フェイマスグラウス ファイネ ... 今回は、「これからブログを始めて収益化していこう」と考えている人に向けての記事です。 収益化を考えた場合、無料ブログは問題外でしょうからWordPressでのサイト構築になってきます。 そんな時に迷う ... iPhone使ってたらパスコード変更しなさいと表示される 先日、普通にアイフォンを使っていると急にダイアログが表示されました。 そこには、アイフォンのパスコードを60分以内に変更してくださいと書いてあ ... [私が作ったペラサイトを2つ公開します!一つは稼げるもの、一つは稼げないものです。]目次1 ペラサイトの嘘と本当2 稼げるペラサイトとは3 ペラサイトの意義4 成功ペラサイト実例5 稼げないペラサイト ... 今回はブログのSEO対策において大切な「文字数」について解説していきます。 ブログの記事において「文字数」は大きなポイントとなります。 しっかりと、理解しておきましょう。 また、文字数を考える時に陥り ... 当ブログでのSTINGER8(スティンガーエイト)の使い方の記事をまとめてみました。(途中まではSTINGER PLUS+ですが、STINGER8にも対応させています。)基本的に初心者向けの使い方にな, 「WP Fastest Cache」のSTINGER PLUS+及び8への導入方法, 「Acunetix Secure」のSTINGER PLUS+及び8での初期設定方法, Limit Login AttemptsのSTINGER PLUS+及び8への導入方法. 再度ご確認ください。 stinger plus2の場合はこちら スマホではヘッダー(右上)の部分をクリック(タップ)することで、メニューが開閉(ドロップダウン)します。アコーディオン式のメニューとなっています。 スティンガー8 メニューの設定方法 You are the best. この部分に左側のメニューを追加して、どのようなメニューにするか設定していきます。, 「メニュー設定」 修正をしましたので、うまく中央にすることができなかった方は、 設置する場所は様々あるとは思いますが、 ブログにフリー素材で写真画像などを使いたい場合に、おすすめのサイトを紹介します。 PixabayPixabay CC0のみの写真を集めたフリー写真素材サイトです。 写真の枚数は74万枚以上あるようです。 また投稿... WordPressで、投稿された記事に「この記事は1年以上経過しています」なんていう表示をしているサイトがあると思います。ここでは過去の投稿にメッセージや警告文などを表示する方法を書きたいと思います。 どんなときに使えるか ... WordPressの公式テーマ【OnePress】の使い方やカスタマイズについて書いてみたいと思います。 前回【インストール編】を書きました。 WordPressテーマ【OnePress】の使い方!パララックス効果の設定方法... WordPressの固定ページのパーマリンク(URL)にスラッシュをつけたい場合の方法を書きたいと思います。 パーマリンクの設定 パーマリンクの設定は、 /%postname%.html そうすると投稿ページのU... 変な情報に惑わされずGoogle Adsense(グーグルアドセンス)審査をあっという間に通りたい!そんな正攻法を解説します!どうしたら審査に受かるのか、審査に簡単に受かった方法を書きたいと思います。. 今回は記事エリアを広げる方法です。 アコーディオンメニューというのはスマートフォンで表示されるメニューの形でstinger8では右上に三本線で表示されているものです。 押してみると分かるようにスライドで設定したカテゴリーが表示されます。今回は、ココの変更にも挑戦してみます。 ブログ立ち上げ当初から今までWordPressの無料テーマの「STINGER8」を長らく愛用してきましたが、また新たな挑戦を... どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。 ワードプレスでいざ、始めてみよ... どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。 STINGER(スティンガー)... ワードプレス(WordPress)のテーマ内にある「functions.php」は、ブログやwebサイトのシステムを構築する... どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。 ワードプレス(WordPres... 「STINGER8」TinyMCE Advancedのフォントサイズをpx表記にする方法, デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]. 以下のコードをstyle.cssに追記します。, とりあえず簡単なカスタマイズをの記事を書いてみました。 メニューの色を変えたい場合は、 また、文字色を変更したい場合は、 Copyright© 以下のコードをstyle.cssに追記します。, ちなみに上記のコードではわかりやすいように、 今まではいろいろなところを調整しながらやらなければならなかった記事エリアの横幅の変更ですが、 使っているテーマのスマホのヘッドメニューは、ドロップダウンメニューなので本文が隠れるのですね。ちなみにStinger8です。 そこで、簡単にスマホのヘッドメニューをスライド式に変更しました。 Google Adsenseの承認があったので、設置をしていきたいと思います。 STINGER8(スティンガー8)は、WordPressテーマで使える無料テンプレートの1つで、非常にシンプルな内容で構成されています。, 公式サイトでも「史上最高にシンプルなテーマ」と太鼓判を押しているくらいですからね。, ブログのデザインを「イチから自分好みにカスタマイズしていきたい!」という方には、STINGER8が特におすすめです。, 私もこのSTINGER8を使って色々とカスタマイズしてきましたが、一通りのことはやり終えたのでここでまとめておきたいと思います。, これからSTINGER8を使ってブログを始める方には参考になるかと思うので、ぜひカスタマイズに活用されてみて下さいね。, ※現在、当ブログでは有料のWordPressテーマ「JIN」を使用しているため、STINGER8のカスタマイズは以前使用していたものになります。, カスタマイズは個々で調整される場合、スマホ・PCで表示が崩れてしまう可能性があるので、ご自身の判断で活用して頂ければと思います。, まだSTINGER8を導入されていない方が対象になるので、すでに導入済みだという方は次に進まれて下さい。, STINGER8はWordPressブログで使用するテーマなので、まずはWordPressから導入していく必要があります。, WordPressが導入できている方は、次にSTINGER8のテーマ(テンプレート)ファイルをダウンロードしてから、WordPressに有効化していきます。, ダウンロードするファイルは、「親テーマ」と「子テーマ」の2種類があるので気をつけておきましょう。, STINGER8のカスタマイズにはテーマファイルやCSSコードを使用するので、ちょっとした入力ミスでデザインが反映されなかったり、不都合が発生してしまう場合もあります。, なので、コードを使ったカスタマイズを行う際には不都合が起きてしまった場合でも、すぐに元の内容に戻せるようタブを2つ開いておくといいですね。, 「親テーマと子テーマの違いについて」でも説明していますが、親テーマはアップデートされるとカスタマイズした内容が消えてしまいますが子テーマは消えません。, あとは「functions.php」ファイルが要注意で、恐ろしい「画面が真っ白エラー」が起きるので、とにかくこのファイルを編集するときだけは最大の注意を払って下さい。, ここでご紹介しているSTINGER8のカスタマイズ集は、基本的にパソコンとスマホで問題なく表示できるように意識しています。, ただ、私も人間なので抜けている部分があったり、タブレットなどで表示が崩れてしまう場合も考えられます。, その為、カスタマイズを行っていく上で特にCSSコードでは、内容によって以下のようにデバイスごとの分岐が必要になってきます。, パソコンでの表示は問題ありませんが、その他のデバイスで表示が崩れていないか必ず確認することをおすすめします。, デザインが崩れていれば上記のコードで分岐しながら、上手くデザインを調整されるようお願いします。, それでは私がSTINGER8でこれまで行ってきた、カスタマイズまとめ集をご紹介していきます。, ブラウザキャッシュの削除+ページの更新は、Windowsパソコンなら「Shift+F5キー」でできます。, ここから紹介していくSTINGER8のカスタマイズは、リンク先で詳しく使い方などを解説しているので、気になる項目があればご覧ください。, STINGER8の基本機能だけでも、ブログの外観やヘッダー・背景画像の変更、ファビコンの設定などの編集が簡単に行えます。, 記事中やタイトル部分の文字サイズや、ブログ全体の背景やエリア幅、テキストリンクなどに関する基本となる部分になります。, ブログの上部にあるタイトルをロゴ画像を使って、オシャレなものに変更するための方法になります。, ヘッダー部分に表示できるメニューリストを最適化するために、色々なカスタマイズを行いました。, >>STINGER8のヘッダー大改造!メニュー追尾や画像をキレイに表示する技←追記分, ヘッダーのブログタイトルやグローバルメニュー、検索ボタンを画面上部に並列表示で固定してスクロール時に追尾させるのと、ヘッダー画像を横幅一杯に表示させて自由にサイズ変更や余白の調整ができるカスタマイズになります。, ブログ下部のフッターエリアを3分割にしてから、ワードプレスのウィジェットを使って好きなコンテンツを追加する方法です。, サイドバーエリアにちょっと変わったプロフィールの設置や、見出し部分のデザインを変更する方法になります。, カテゴリーの文字サイズや色、アイコンの追加やマウスホバー時の変化など、個性的なものにアレンジしてみました。, サイドバートップに表示されている新着記事一覧を、非表示またはトップページの時だけ非表示にしたり、見出しがないので追加したりする方法です。, 記事一覧に「続きを読む」のようなボタンがないので、記事の詳細ページへわかりやすく誘導するためには便利です。, トップページの記事一覧や関連記事で表示しているアイキャッチに、カテゴリーを上手く重ねて表示できます。, 記事一覧の表示スタイルをタイルのように、2列や3列に並べることができるカスタマイズですが、先にカード型タイプに変更しておく必要があります。, 関連記事エリアの表示スタイルをタイル形式にして、横に記事を並べる方法でタイトルはアイキャッチ画像に重ねて表示しているバージョンです。, STINGER8のパンくずリストはデフォルトだと薄くて認識しづらいので、アイコンや配色などを追加・変更してわかりやすく表示できます。, 記事内のパンくずリストの1つ目にある「HOME・TOP」の表示を、ブログ名に変更する方法でこのブログであれば、「きにぶろぐ.com」になっています。, 記事内の見出しをデフォルトのシンプルなものから、個性のあるちょっと変わったデザインにするカスタマイズです。, 記事タイトルの下にある投稿日と更新日の文字や色、フォントアイコンに変えたりする方法になります。, 記事内の上部にあるカテゴリーや下部のタグ・執筆者の非表示、コメント欄を非表示または移動をする方法です。, ブログ内の右下にスクロールした時に出てくる「トップへ戻る」ボタンが、透明に近かったので見やすく変更しました。, >>STINGER8でRSSとfeedlyを記事下のSNSボタンに追加・設置する方法, SNSボタンの中に「RSS・feedly」のボタンを新たに追加することができる他、不要なボタンを非表示にすることも可能です。, SNSボタンを平面なデザインからボタン風にして、カーソルを合わせるとアクションするように見えるカスタマイズです。, >>「STINGER8」TinyMCE Advancedのフォントサイズをpx表記にする方法, 「TinyMCE Advanced」プラグインを導入した場合、フォントサイズが「%表記」になっているので、これを「px表記」に変更できます。, ウィジェットを追加して記事内にある最初の「h2見出し」のすぐ上に、アドセンス広告を表示させる簡単な方法です。, トップページやカテゴリーページなどの記事一覧の中に、アドセンス広告を挟み込む形で表示させることができます。, サイドバー上部に大きい広告(ラージスカイスクレイパー)を表示させると、スマホ閲覧時に規約違反になってしまうので、スマホの時はレスポンシブ広告になるように、使い分けができる方法です。, ここでご紹介したカスタマイズは基本的に、そのままコピー&ペーストするだけの簡単なものなので、CSSやHTMLの根本的な意味や使い方はマスターできません。, もしもカスタマイズで何かしらの不都合が起きてしまった時には、すべて自己責任になってしまうので、その原因の特定や修正は自分自身の手で行っていくことになります。, ある程度はネット上で検索すれば、CSSやHTMLについての理解を深めることができます。, ですが、正確な情報ではない可能性もあるのでしっかり勉強されたい方は、専用の本などを試しに購入されてみるといいでしょう。, わからないことがあった場合でもすぐ確認できるので、最低1冊は持っておくと何かと便利ですね。, 知識が全くない方でも、わかりやすく学べるような初心者向きの本を一応ご紹介しておきますので参考にされてみて下さい。, この本はとにかくCSSやHTMLを「イチから始めるぞ!」という人向きの入門書です。, 数ある本の中には内容が難しい中上級者向けのものもあるので、そういった本を最初に購入してしまうと、チンプンカンプンで読むのを諦めてしまう方も多いと思います。, そんな人でもこの本なら内容が丁寧かつ非常に優しく説明されていて、読みやすくてスムーズに理解できるのでおすすめです。, これまでに私が行ってきたSTINGER8のカスタマイズ集をご紹介したので、あとは自分流に使いやすいようアレンジされてみて下さい。, 他にもまだまだCSSなどを使えば細かい変更や調整などができますが、ここまでカスタマイズできれば、あなたも一人前の「STINGERエイター」に認定されるかもしれませんね。笑, 私はこよなく愛用してきたSTINGER8からテーマを変更してしまいましたが、本当に今まで私のブログを支えてくれた優秀なテーマです。, STINGER8は無料テーマの中でも自由度の高い個性を出せるシンプルなデザインなので、自分だけのカスタマイズに仕上げてみて下さいね。. 2020 All Rights Reserved. スマホナビメニューのカスタムデザイン参考 「[Ёп]STINGER8にApple公式サイト風の横スクロールするメニューを実装してみた!」endylab.net さま 」endylab.net さま WordPressをインストールするとき、フォルダを作ってその中にWordPressのデータを入れたりすることがあると思います。 例えばwpフォルダとかを作ったり。 そうすると、アドレスが となってしまいます。 そう... WordPressのテーマによっては、記事の下などに投稿者が表示されてしまい、なんとか消せないだろうかと思うこともあると思います。 今回はその場合の方法を書いてみたいと思います。 アーカイブでauthorのページがある ... WordPressではWP-Membersを使えば会員サイトを構築することができます。ここではログインしたらログインID名を表示させる方法を書きたいと思います。, WPの管理画面、投稿・カスタム投稿・固定ページの記事一覧に「アイキャッチ」を表示させる方法!, 【STINGER8】ナビゲーションのハンバーガー(ドロワー)メニューをカスタマイズ!, Contact Form 7でon_sent_okを使用しないで送信完了(サンクスページ)に飛ばす方法!, エックスサーバーでSSH(SFTP)接続、公開鍵を発行してFTPソフトWinSCPで使用する方法!.