Stinger8をカスタマイズしてみた結果

Stinger8

Stingerシリーズは、Stinger3からいろいろ使用させていただいてます。
当時は、子テーマを使うことなどなく直接、テーマを直接カスタマイズしていましたね。
今から考えると随分と大胆なことをやっていたなと思いますが・・・
ノーマルであればどこがすごいのか分からない人もいるStinger8ですが、順番にカスタマイズ事例を見て行きましょう。

目次-OPEN

ヘッダーにお問い合わせを表示する

Stinger8ヘッダーカスタマイズ

子テーマをカスタマイズしてみました。
参考にしたのは、Stinger Plus 2のソースを流用しましたが、スタイルシートの加減でちょっとStinger Plus 2より中央に寄ってる感じですが・・・

Stinger Plus 2のキャプチャです。
ちょっとStinger8の方がちょっと中央に寄ってる感じがしますね。
このカスタマイズは、header.phpをカスタマイズします。
Stinger Plus 2のようにウィジェットに入れずにheader.phpに直接書き込んでいます。
ちょっと工夫したらウィジェットにできるかもしれませんね

wp908.com

ヘッダー画像をスライダーに変更

Stinger8ノーマルヘッダー
次はヘッダーカスタマイズつながりでヘッダー画像をスライダーに変更してみました。

Stinger8ヘッダーカスタマイズ
スライダーが表示されるのはトップページだけですが、詳しい内容は下記の記事を参考にしてください。

wp908.com

ソーシャルブックマークをLIONBLOG風に変更

ソーシャルボタンのカスタマイズ

ノーマルのStinger8のソーシャルブックマークですが、今はもうないGoogle+のブックマークがあったり2段になっているとかあまり筆者の好みではありません。これを好みのLIONBLOGのようなソーシャルブックマークに改造してカウントを表示できるようにしたいと思います。

wp908.com

アメブロ関連ツール

WordPress Tool

セキュリティアップできる子テーマが作成できるプラグインついに完成しました！プラグインをインストールして子テーマを作成するだけでセキュリティアップしながら複数の機能…

wp908.com

■お知らせ■

ブログについての共通する考え方

ブログをはじめる前にしておくこと

記事を書くときに気をつけること

記事構成について

ソーシャルメディアとの連携

ワードプレスのテーマを知る前にブログのことも知っておいてほしいと思います。

有料記事

起業したい方向け

クイックナビ

サービス /ブログ /プライバシーポリシー /お問い合わせ

アメブロ用目次付きテンプレートを無料で配布しています！

YouTubeチャンネル登録お願いします！

また、ALiSには、ブログ全般に関することを掲載しています。
アメブロの記事の増加とともにメルマガもスタートします。スタートは、2月の予定なので事前に登録していただけると幸いです。

アメブロやWordPressに関するお問い合わせは、下記よりお気軽に・・・

FacebookだけじゃなくアメブロもWordPressもくまはちLABへ

2021-01-11

フォーム作成プラグインの定番Contact Form 7の使い方

プラグイン

Contact Form 7は、お問い合わせやアンケートなどのフォームを作成できるプラグインですが、ガッツリ使うにはちょっと使い方を覚えていただく必要がありますね
Contact Form 7の機能の拡張方法や使い方について今回は知っていただければと思います。

目次-OPEN

Contact Form 7でのフォーム作成
Contact Form 7 との連携プラグイン
Contact Form 7で確認画面を出す方法
お問い合わせページをつくる
ContactForm7でファイル送信やテキストエリアで初期値を表示

Contact Form 7でのフォーム作成

WordPressでフォーム作成すると言えばContact Form 7は、定番のプラグインになります。
ただ単体では多くの機能がないのでプラグインの数が増えることになるのですが・・・
基本的な作成方法は、下記の記事を参考にしていただければと思います。

wp908.com

Contact Form 7 との連携プラグイン

Contact Form 7は、各種フォームを生成できるプラグインです。
フォーム送信をするためのプログラムを自動的に付加してくれるのでフォームを作成するだけでお問い合わせやアンケートなどのフォームを作成して固定ページや投稿に貼り付けるだけでフォームからのお問い合わせなどを受け取ることができます。また、付加機能のためのプラグインなどが豊富にあります。
例えば、送信後にリダイレクトページを設定する機能やプレビューなどを表示するプラグインなど
下記の記事では、オススメできるプラグインなどを紹介させていただきます。
また、必須で入れていただきたいプラグインとしてJetpackとAkismetの２つをセキュリティのために入れて欲しいと思います。

wp908.com

Contact Form 7で確認画面を出す方法

そのままではContact Form 7の場合は、確認画面を出すこと出来ないのですがプラグインを使うことで確認画面を出すことができるようになります。
詳しくは、下記の記事を参考にしてください。

wp908.com

お問い合わせページをつくる

プラグインを使って作るのですが、プラグインでフォーム作ってショートコード入れただけのページって多いように思います。
送信後にページを移動させるとかメール送信の設定についても気配りが必要ですね
下記の記事を参考にしてください。

wp908.com

ContactForm7でファイル送信やテキストエリアで初期値を表示

Contact Form 7でファイル送信やテキストエリアで初期値を表示するなど特殊な機能を使う場合にはちょっと難易度が高いのですが可能です。
それ以外でも「フォーム送信後にプラグインなしでリダイレクトさせる方法」や「フォームで独自のスタイルシートを適用させる方法」などについては、下記の記事を参考にしてください。

wp908.com

WEBのことならくまはちＬＡＢにお任せください。

2020-12-31

無料テーマ Lightningをカスタマイズした事例

テーマ Lightning

WordPressの無料テーマのLightningをいろいろとカスタマイズした事例についてこの記事では解説していきます。
人と違う使い方するのも１つの方法ですね
どんなカスタマイズができるのか？
いろいろチェックしてみてください。

目次-OPEN

Lightning ヘッダーロゴを大きくしたい
Lightningをカスタマイズしてヘッダーにお問い合わせを表示する
Lightningカスタマイズ　ヘッダーロゴとスライダー
Lightningでメニューバーを設定する
Lightningでお知らせやトピックスをトップページに表示する
Lightningでランディングページを作成する

f:id:eddie3:20210918200838p:plain — Lightning

Lightning ヘッダーロゴを大きくしたい

WordPress無料テーマLightningでヘッダーロゴを入れたときに小さいなーって思った方も少なくないと思います。このヘッダーロゴを大きくできる方法ないですかという要望がありましたのでその方法について解説していきます。

wp908.com

Lightningをカスタマイズしてヘッダーにお問い合わせを表示する

最近のビジネスサイトの傾向でヘッダーロゴの横もしくは、サイトタイトルの横にお問い合わせを表示したいというご要望がかなり多いですね。上記の画像では、ただ単にお問い合わせとして表示しておりますが、画像で表示するもしくは、テキストを電話番号にしたいなどそういったカスタマイズもできます。実は、Lightning無料版ではないのですが、Proでは簡単に設定が可能なのです。

wp908.com

Lightningカスタマイズ　ヘッダーロゴとスライダー

カスタマイズという書き方をしていますが、通常のカスタマイザーから画像を挿入する方法を図解入りで解説しています。そう難しくないので初心者でも可能だと思いますが・・・

wp908.com

Lightningでメニューバーを設定する

メニューバーですが、作成方法はテーマが変わってもそう変わることではありません。基本的な部分は、同じです。今回は、Lightningテーマを使って解説していきます。

wp908.com

Lightningでお知らせやトピックスをトップページに表示する

お知らせとトピックスをトップページに表示するのはそう難しいことではありません。ただ、お知らせとトピックスの違いをご存知ですか？通常、お知らせには最新のNewsを表示することが多いです。トピックスとは、トピックは、英語のTopicから来ており、「話題」「議題」「主題」という意味であり、時事性もあるが人が集まる場所において話のタネあるいはセミナーやシンポジウム等で何らかのテーマについてということになります。この違いをまず理解してください。

wp908.com

Lightningでランディングページを作成する

ランディングページ（Landing　Page）とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのことです。

訪問者がホームページに着地する（land）イメージからこの名前がつきました。略してLPとも呼ばれます。

ただし、以上の定義は、広い意味（広義）のランディングページのことを指しています。

ここがややこしい部分なのですが、「ランディングページ」と一口に言っても、「広義のランディングページ」と「狭義のランディングページ」が存在します。

特に初心者は両者の意味を混同しやすいです。

Webマーケティングの場面でもっぱら使われるのは、後者の狭義のランディングページのほうです。

ランディングページの意味をしっかりと理解するためにも、まずは広義と狭義の違いをおさえてみましょう。

wp908.com

アメブロ関連ツール

アメブロツール

ブログについての共通する考え方

ブログをはじめる前にしておくこと

記事を書くときに気をつけること

記事構成について

ソーシャルメディアとの連携

ワードプレスのテーマを知る前にブログのことも知っておいてほしいと思います。

有料記事

起業したい方向け

クイックナビ

サービス /ブログ /プライバシーポリシー /お問い合わせ /アメンバー記事一覧

■お知らせ■

アメブロ用目次付きテンプレートを無料で配布しています！

YouTubeチャンネル登録お願いします！

また、ALiSには、ブログ全般に関することを掲載しています。
アメブロの記事の増加とともにメルマガもスタートします。スタートは、2月の予定なので事前に登録していただけると幸いです。

アメブロやWordPressに関するお問い合わせは、下記よりお気軽に・・・

FacebookだけじゃなくアメブロもWordPressもくまはちLABへ

2020-05-23

ブログ記事が作り上げられるまでを徹底解説読者の行動から記事を書くまで

投稿記事

いろんな無料ブログの記事を見ているといつも思いつきで作成しているのかなって思うような記事が多くありますね。
それを仕事に活かしたいってあまりにもどうかなって思います。
よく考えてみて下さい。
仕事なのです。
仕事ならばちゃんとした調査も必要で計画性も必要なのです。
今回は、原案ができてから記事を作り上げるまでの流れなどを紹介したいと思います。

目次-OPEN

読者の行動とは？
まんだらチャートを使う理由
調査とは？
絵コンテを使う理由
記事を書く

読者の行動とは？

新聞や雑誌を読む時に何を目安に読みますか？
ブログ記事を読む時の行動も実は同じなのです。
また、何かに困った時に検索をして探すのが今は当たり前になりましたね
そんな時に皆さんは何を基準に検索結果からアクセスする記事を選びますか？
検索結果には多くはタイトルとDiscriptionと言われる記事の紹介文ですね
普段、筆者も含めそういったことを無意識の行動としてしているので気づく人が少ないのです。
ここで問題です。
この読者の行動からブログ記事にアクセスしてもらうのに大事なことがわかりますか？

まんだらチャートを使う理由

自分の中にある考えをまとめる時にまんだらチャートってホントに便利なんです。
定期的に記事を書くネタをまんだらチャートを使って書き出しします。
使ったときとそうでない場合の違いは、頭だけで考えて思い出しにくいことが使うことで忘れないで済むということ
その前の工程で「メモの魔術」じゃないですが、仕事しながらiPhoneにメモを残すようにしています。
そのメモの中からまんだらチャートに当てはめていくことで
「あっアレ忘れとった！」ってことが少なくなりましたね
そういう普段からの習慣が大事なのです。

調査とは？

Google Trends
調査って何？
って方もいると思いますが、今から書こうとする記事が世間で今すぐ必要なのかどうなのか？
それを調べてみようということです。
筆者がよく使うのは下記の３つです。

今から書く記事がどういうキーワードで探してもらえるのか？
また、それはよく検索されていることなのか？
この２つはせめて調べておきたいですね。

絵コンテを使う理由

絵コンテ
これから具体的に記事の構成を考えていきます。
初心者の方は、これを実践することで記事の内容が横道にそれるのを防ぐことが出来ますね。
記事のタイプで構成が変わることもあるのですが・・・
「お悩みを解決」する記事などの場合は、工程ごとに見出しを考えます。
記事を書くということは、雑誌のコーナーをもらったライターと同じなのです。
目を引く見出しがないと読んでもらえることもないです。
まず、悩みについての不安などを煽るような文章がきますね
その見出しがとても重要なのです。
悩みを解決する記事は最初が肝心なのです。
それを「そうそう」と相槌を打つような感じで読ませて滑り台をすべる感じで最後まで読ませるというのが一般的です。
悩み・原因・解決法という感じで見出しをつけて紹介すると読みやすくなります。
そういった部分を絵コンテに当てはめて考えていくのです。

記事を書く

記事を書く前に準備できていますか？
最近ではGoogle Chromeを使って記事を書く方が増えていますが、AmecareやInert Textが使える状態にありますか？
Firefoxを使われている場合は、Clippingsになりますが・・・
どちらも右クリックからアイテムを選択して指定するHTMLやスタイルシート・定型文などを簡単に挿入できます。
アメブロで記事を書いていなくてもアカウントさえあればAmecareを有効活用できます。
筆者は、アメブロやWordPressなどでも常にテキストエディタで執筆するのですごく便利に使っています。
はてなブログでMarkDownを使われている方もInert Textであれば手間を減らせるので記事を書く時間が短縮できますね。
WordPressでMarkDownを使う場合にはプラグインでJetpackを使うことではてなブログと同じように書くことが可能です。
筆者のメルマガ購読で目次付きテンプレートやAmecareとInert Textによく使うHTMLなどを一括挿入できるファイルを特典として配布しています。メルマガに登録してテンプレートをゲットする！

ここまででやっと記事を書く準備ができました。
いかがでしょうか？
結構途中で端折って書いてこれだけあるのです。
仕事のために記事を書くということを考えると思いつきのまま書くのではなくちゃんとした準備や計画性が必要だということがわかっていただけましたでしょうか？
自社サイトを作成する場合にそういったことを事前打ち合わせですべてヒアリングするのです。
ヒアリングに失敗した場合は、いいサイト作成などできません。
実際にはこれだけではありません。
記事を必ずソーシャルメディアでシェアなどする方は、OGP画像の作成に力を入れてください。
ソーシャルメディアのニュースフィードでスクロールする手を止めてくれるのは魅力あるOGP画像なのです。
そして各メディアに対する役割を決めておきます。
Facebookは、どんな役割になるのか？
はてなブログは、どんな役割になるのか？
記事内容だけでなく書いた後のことも考えておく必要があります。
これを中には自然と当たり前のようにできる方がいるのも事実ですがちゃんとチェックシートなどでチェックしながらやる方がミスを最小限にできます。
参考にしていただければ幸いです。

WEBのことならくまはちＬＡＢにお任せください。

2019-05-18

無料のワードプレスがクソほど使えない件

無料ワードプレス

無料のワードプレス

海外在住の日本人の友だちと久しぶりに話をしたときに日本では無料のワードプレスがなぜ流行らないのかと聞かれたので使ってみましたよ

というより以前からあるのですが・・・

使いはじめたときには、テーマの変更もできずに無料なので放置していましたが・・・

今は、いっちょ前にSSLのアドレスに変わっているのです。

この動画の中で語ってないことがあるのです。
なんだかわかりますか？
常時SSL化されたけどスタイルシートの変更が無料の場合はできない！
コレ最悪ですよ
テーマに画像を合わせないといけないので画像加工技術ない人はデザインがうまくできない
それやったらSSLでなくてもはてなブログでええやんって思ってしまう
日本の無料ブログもっとカスタマイズできるし、正直書きやすい
無料のワードプレスは、新エディターのグーテンベルグがうざくて書きにくい

プラグインのインストールもできないのでこの状況で使いたいってはてなブログやアメブロ使ってる人がまず思わないと思う
それでも使いたい人っていますか？
月に100万円ほどいただけるとオススメするかもしれませんが、そうでもない限りオススメできるものではないですね。
くまはちLABでオススメするのは、レンタルサーバーかりてインストールするワードプレスです。
無料ブログ使うならはてなブログやアメブロをオススメします。

一応、ワードプレス無料で３つ作成していますが、本気で使うつもりなんてありません。
書くだけでいいならはてなブログで十分ですよ

ただここにきて変化がありました。

どうやらWordPressは、ブロックエディターのみになるようです。

クラシックエディターのサポートは、2021年末まで

それ以降はいつまで使えるのかわかりません。

それならば今から無料のWordPressで練習するしかないね

wp908.com

2019-04-12

WordPressを動画で学ぶ(YouTube)

YouTube

WordPressの前に

WordPress

意外とブログとYouTubeって連動してない？

YouTubeがあるなら記事の中でしっかり表示して連携させる方が動画を見てもらえる可能性は大きくなります。

wp908.com

2019-03-22

WordPressでの記事紹介リンクの作り方

投稿記事

記事紹介リンクの作り方

よくある記事紹介ですが、いろんな紹介の仕方があります。くまはちLABでは、これまでAmecareでの記事紹介をすすめていましたが、面白いサイトを見つけました。１パターンのやり方だけでなくいろんなやり方を知っておくことも大事です。

目次-OPEN

記事紹介について

記事紹介

記事紹介とは、記事の文章などを引用したり何かの方法などを紹介したりした時に使う方法です。
知り合いの記事紹介する際にも使えますが・・・

Amecareとは？

アメブロでは有名なwazameba(わざめーば)さんが作成されたツールなのです。
基本、無料で使うことができますが機能によっては有料部分があります。
Amecare ってアメブロにログインしてる状態であれば他のブログ作成サービスなどでも使えたりする便利なツールなのです。

Amecareでの記事紹介

Amecare  は、アメブロ用に作られているのでWordPressで使う場合は、工夫が必要です。
横幅をアメブロ3カラム表示に合わせて指定してあるのでWordPressとアメブロ  でうまく訂正することなく使うには、ピクセルで指定するのではなく％で指定しておく方が投稿画面を幅いっぱいに使うことが可能です。これは、キャプチャー画像についても言えることです。
なのでくまはちLAB  では、下記のように変更しています。

<div class="syokai1">
<div class="syokai2"><a href="%URL%" target="_blank"><img src="%IMAGE%" class="syokai3"><span style="syokai4">%TITLE%</span></a>
<div style="clear:both">&nbsp;</div></div></div>

CSS(スタイルシート)については、子テーマのstyle.cssで書いているのでclass指定に変更しております。

■お知らせ■

YouTubeチャンネル登録お願いします！

アメブロの記事の増加とともにメルマガもスタートします。スタートは、3月の予定なので事前に登録していただけると幸いです。

FacebookだけじゃなくはてなもアメブロもWordPressもくまはちLABへ

2019-03-21

WordPressでユーザー名をadminにしてはいけない理由

セキュリティ

ユーザーIDをadminにしてはいけない理由

WordPressのインストール依頼でよくある依頼がユーザー名にadminを入れてほしいという依頼
くまはちLABではそういった依頼をお断りしています。それは、セキュリティ的に非常に危険な行為であり最悪な場合は、乗っ取りされて好き勝手やられる可能性もあります。

くまはちLAB が利用しているCPIサーバーでは、利用を緊急停止させられることもあります。
これまで数件乗っ取りされた事例を確認しています。その過半数がユーザー名にadminを使用していたという事実。また、数件が簡単すぎるユーザー名とパスワードを使用していたという事実がありますので乗っ取りされた時にどうなるのかということとそうならないための対策について解説します。

目次-OPEN

乗っ取りにあった事例

メール通知

乗っ取りに遭うと契約しているサーバーの対応にもよりますが、CPIサーバーでは利用を緊急停止させられることがあります。その場合は、TOPページへのアクセスもできませんし当然ですが管理画面へのアクセスができません。

不正なファイル

多くの場合に不正なプログラムをルートディレクトリに置かれている場合があるのです。
多くの場合は、不正メール送信の踏み台にされています。上記画像の選択されている３つは、WordPressに必要なファイルではありません。これは、お客さんが乗っ取られた時に実際にあった事例をキャプチャーしています。
既に乗っ取りされた場合には、すべてのIDパスワードを変更してFTP でログインしてファイルの整合性を確認しなければいけません。

ユーザー名adminを変更する方法

ユーザーの追加と削除

知らずにadminをユーザー名にしてしまった場合は、新しくユーザーを作成してadminの権限を引継ぎしてadminを削除します。その際に必須でやっておきたいことがあります。

ユーザーID

上記の画像のようにそのままの設定ではユーザーIDが丸わかりなのです。
それを回避しなければいけません。いくつかのテーマでは外観→カスタマイズで投稿者名を表示させない設定ができるものもあります。(Lightning ,Business Point ,Simplisity2など)
また、ユーザープロフィールでも設定変更が必要です。

ユーザープロフィール

ユーザー作成しただけではニックネームもユーザー名のままです。画像のように変更してニックネームでの表示に変更してください。
投稿者アーカイブのURLを変更するというのも１つの方法です。これには、「Edit Author Slug 」というプラグインを使うことで投稿者アーカイブのURLのURLを変更できます。

■お知らせ■

FacebookだけじゃなくはてなもアメブロもWordPressもくまはちLABへ

2019-02-01

Lightningをカスタマイズしてヘッダーにお問い合わせを表示する

テーマ Lightning

今回のLightningカスタマイズについては、1部でFTPソフトの使用が必要になります。
また、WordPressが場合によって真っ白になる危険もあるカスタマイズという認識を持っておいてください。
ただ、最近のビジネスサイトの流れの中でロゴの横にお問い合わせに関する表示をするというのが流行りになっている傾向もあります。

目次-OPEN

functions.phpとスタイルシートのカスタマイズ
テキストで表示するお問い合わせ
お知らせ

functions.phpとスタイルシートのカスタマイズ

functions.phpをカスタマイズして更新する時は、FTPでの更新をオススメしております。また、親テーマで更新するのではなく子テーマを活用して更新されることをおすすめしています。

このカスタマイズではfunctions.phpを使用してカスタマイズします。無料版では少し工夫が必要です。Pro版ではカスタマイズから設定があって簡単にできるようですが・・・

テキストで表示するお問い合わせ

functions.php

// ロゴの横にお問い合わせを表示する。
function my_lightning_header_logo_after() {
echo <<<EOM
<div class=”logo-after”>
<div class=”mail”><a href=”お問い合わせへのアドレス“><i class=”fa fa-envelope-o” aria-hidden=”true”></i>お問い合わせ</a></div>
<div class=”message” >ご予約・お問い合わせはお気軽に</div>
</div>
EOM;
}
add_action(‘lightning_header_logo_after’, ‘my_lightning_header_logo_after’);

CSS

/* ロゴ右側のブロック */
.logo-after {
display: block;
width: 200px;
float: right;
background-color:#191970;
color:#fff;
padding: 3px;
}

.logo-after a {color:#fff;}
.logo-after a:hover {color:#fff;}

.logo-after img {
max-height: 60px;
}

/* ヘッダー幅を100%に */
.navbar-header {
width: 100%;
}

@media (max-width: 991px) {
.logo-after {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
}

/* 連絡先のスタイル */
.logo-after .message {
font-size: 12px;
}

.logo-after .mail {
font-size: 18px;
}

スタイルシートは、外観→カスタマイズ→追加CSSに追記するもしくは、style.cssに追記します。

WEBのことならくまはちＬＡＢにお任せください。