くまはちのWordPressの使い方

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

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

 

目 次

    

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’);

 

/* ロゴ右側のブロック */
.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に追記します。

 

続きを読む

 

    
■お知らせ■

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

 

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

Lightningで見出しにアイコンフォントを自動で入れる

Lightningで見出しにアイコンフォントを自動で入れる 最近は、アイコンフォントを使うことってそう難しいものではなくなりました。 昔は、Gif画像を文字サイズに合わせるなどいろいろ工夫したものですが・・・ 

Lightningテーマと必須プラグインであるVK All in One Expansion Unitの組み合わせでスタイルシートをカスタマイズして見出しの中に自動的にアイコンフォントを挿入することが可能になります。

 

目 次

      

アイコンフォントとは?

アイコンフォントとは、その名の通りフォント形式で使用することができるアイコンファイルの事を言います。 アイコンはWebデザインを行う上で欠かせない要素であり、色々な場面で使用することができますね。

 

      

カスタマイズ方法

まず、外観→カスタマイズ→Lightning Font Awesomeの設定で

5 Web Fontsが選択されていることが前提になります。

この部分は、設定自体はそう難しくありません。

確認できたら次に進みます。

 

 

続きを読む

 

      

■お知らせ■

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

 

 

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

Lightningで見出しにアイコンフォントを自動で入れる

Lightningで見出しにアイコンフォントを自動で入れる 最近は、アイコンフォントを使うことってそう難しいものではなくなりました。 昔は、Gif画像を文字サイズに合わせるなどいろいろ工夫したものですが・・・ 

Lightningテーマと必須プラグインであるVK All in One Expansion Unitの組み合わせでスタイルシートをカスタマイズして見出しの中に自動的にアイコンフォントを挿入することが可能になります。

 

目 次

  

アイコンフォントとは?

アイコンフォントとは、その名の通りフォント形式で使用することができるアイコンファイルの事を言います。 アイコンはWebデザインを行う上で欠かせない要素であり、色々な場面で使用することができますね。

 

  

カスタマイズ方法

まず、外観→カスタマイズ→Lightning Font Awesomeの設定で

5 Web Fontsが選択されていることが前提になります。

この部分は、設定自体はそう難しくありません。

確認できたら次に進みます。

 

 

続きを読む

 

  

■お知らせ■

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

 

 

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

WordPress無料テーマLightningをインストールして設定する

WordPressの中でテーマ選びは、大変重要なポイントです。

テーマ1つで乗っ取りされる危険性が軽減されることもあるのです。

これは、多くの方がWordPressを使っておりドメイン以下のアドレスが同じであること

そういった理由でセキュリティに敏感にならざるえないデメリットもあるのです。

目 次

 

    

なぜ、Lightningを選んだのか?

Lightningを選んだ理由は、投稿者名を非表示にできる設定があったから・・・

これは、簡単にログインIDがわかってしまうので最低限の措置であります。

他にも要因は、あるのですが・・・

また、それが初心者でも設定方法がわかればできるというところが大きいです。

プロでないとできなければかなり難しくなりますので・・・

TOPページのカスタマイズが簡単であることも選んだ理由の1つです。

 

    

インストール

インストールは、外観→新規追加で[ Lightning ] を検索してインストール→有効化

完了後、指示通りプラグインをインストールできたら完了です。

 

    

カスタマイズ

カスタマイズは、外観→カスタマイズで順番にカスタマイズ可能です。

 

詳細については、下記のページで読むことができます。 YouTube動画と合わせてブログも読んで頂けるとわかりやすいと思います。

 

■お知らせ■

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

 

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

WordPressのテーマを選ぶ


WordPressの中でテーマを選ぶということは、非常に重要なことの1つです。 テーマは、デザインを決めるだけでなくセキュリティにも直結するからです。ご存知の通り、WordPressはすべてのホームページの中で25%は、WordPressで制作されていると言われています。 と言うことは、設置場所以降のアドレスが同じなので乗っ取りなどの被害に遭わないことを考えなくてはいけないからです。

 

目 次

                  

テーマとは? 

WordPress

テーマとは、何でしょうか?

Webサイトやブログの作成でよく使われているソフトウェア「WordPress」。 その中でも、作成したWebサイトに大きく影響するのが「テーマ」です。テーマは、Webサイトのデザインだけでなく、サイト全体の構成や骨組み、表示される機能まで反映されるものです。

テーマに含まれる複数のファイルは「テンプレートファイル」と呼ばれます。ページごとにファイルが分かれていて、表示内容を決めることができます。WordPressの基本的なメインコンテンツは、「index.php(トップページ)」、「single.php(個別記事)」、「page.php(固定ページ)」、「search.php(検索結果)」、「archive.php(過去記事一覧)」などのテンプレートファイルを結合させることで構成されています。

テーマを変更したい場合、ファイル一式を丸ごと入れ替える方法以外に、このテンプレートファイルを組み合わせてカスタマイズすることもできます。

テーマは、インターネット上で無料ダウンロードできるものから、有料で販売されているものもあります。よりWebサイトの構成にこだわりたい場合は、自分で作成したテーマをアップロードして適用することも可能です。

 
                  

テーマを選ぶ基準 

 

Theme

テーマを選ぶ基準ですが、どんな基準にするのか?

まず、今の時代レスポンシブデザインになっていないものは選ぶべきでないということ

Googleがモバイルフレンドリーをはじめてから4年ほどになると思いますが、スマホで見られることが多い中でレスポンシブデザインでないというのは、致命的です。

 

レスポンシブデザインとは?

レスポンシブウェブデザイン は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。

 

レスポンシブデザインというだけでなくまだ、基準は多いです。

デザイン性・サイトセキュリティ・有料なのか無料なのか・カスタマイズ性は、どうなのか?・SEO対策は?

など項目をあげていけばキリがないのですが、すべて大事な部分です。

足りない部分は、カスタマイズして埋めるしかないので初心者の方には不向きでしょう。

 
                  

セキュリティ 

セキュリティ

WordPressワード プレス)はオープンソースCMSであることから世界中で使われていると同時に、数多く使われているため不正アクセスを受けやすいと言われています。

WordPressは有料のサービスではないため、WEB制作会社に管理を依頼していない場合は、責任持って管理してくれるところがありません。

WordPressサイトを安全に運営するために、絶対にやっておきたいセキュリティ対策があるのです。その対策がしやすいテーマがいいということです。
 

 
                  

まとめ

 まとめるとセキュリティに強くレスポンシブデザインであることこれが絶対条件の中で自社のサイトに合うデザインを選ぶ

これが大事なのだということですね。

下記でも詳細について読んでいただく事ができます。

→ WordPressのテーマを選ぶ

 

メルマガ
くまはちLABでは、いろんな種類のメルマガを発行しております。
下記のページよりメルマガの登録が可能です。
登録後は、ちょっとした特典がついてきます。

メルマガに登録

 

イベント情報
くまはちLABでは、アメブロからステップアップしたい方向けにWordPressの活用に関する提案を行っています。
プログラムやタグなどの知識がなくてもいろんな機能の使い方を覚えるだけでアメブロなどでできない部分をカバーできます。
随時説明会やデモ体験会などを開催しております。

参加申込み

 

お知らせ
サイト情報

WordPress

WordPressでWEBサイト作成ならくまはちLABへ

 

Facebook

Facebookマニア

 

動画情報

動画作成のヒント

 

アメブロカスタマイズ

アメブロカスタマイズ情報

 

くまはちデジタルマート

くまはちデジタルマート

 

心に響く名言
くまはちLAB
LINEスタンプ

 

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