【マナブログminimal】サイドバーに好きな項目を設定する方法【プロフィールも】 | MUKKUN QUEST
MUKKUN QUEST     

 

【マナブログminimal】サイドバーに好きな項目を設定する方法【プロフィールも】

minimal

こんにちは!初心者ブロガーの味方むっくんです!
本日もマナブログの学さんが開発したWordPressテーマ【minimal】について解説していきます。

本日のテーマは

Minimalのサイドバーに好きな項目を設定する


ということで、サイドバーというのは、いわゆるココです↓

この赤枠のところですね。
あなたが設定したい場所で間違いありませんか?

スポンサードサーチ

【マナブログminimal】サイドバーに好きな項目を設定する方法

サイドバーにどんな項目を追加するにしても、まずはこの設定をしなければならない!という基本を初めに解説します。ところどころCSSをイジるような場面もあるので難しく感じるかもしれませんが、マナブログ の学さん作成のテーマMinimalは、そうやって自分で設定することで自己成長ができるよう仕向けられています。一緒に覚えていきましょうね♪

初めに設定しなければならない基本設定

それでは、いきなりですがCSSをイジる必要がありますので、ついてきて下さい!

下の画像の通りにクリックしましょう
赤枠①「外観」→赤枠②「テーマエディター」→赤枠③「サイドバー(sidebar.php)」の順です。


当ブログの説明では恒例ですが、CSSの説明をするときは無駄に変更箇所を探す手間を省くため、左端にある行数を指標に説明していきます。

3行〜7行を変える

現状↓このようになっているCSSを

<img src=”http://manabubb.xsrv.jp/simple-strap/wp-content/uploads/2017/01/author.png” class=”img-responsive img-circle”>
<h4>John Doe</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

全て消して、この↓内容に変えます。

<div class=”col-xs-12 author”>
 <img src=”ここにプロフィール画像URL” class=”img-responsive img-circle”>
 <h4>ここにあなたの名前</h4>
 <hr>
 <p>ここにプロフィール本文</p>
 <a href=”ここにページURL” class=”pull-right”>ここにページ名<i class=”fa fa-angle-right”></i></a>
 <br />
 <a href=”ここにページURL” class=”pull-right”>ここにページ名< <i class=”fa fa-angle-right”></i></a>
</div>

これで準備完了!ここまで出来たらあとは余裕ですよ!

サイドバーのプロフィール欄を設定する方法

それでは、まずサイドバーのプロフィール欄を充実させましょう!

プロフィールに名前を設定する方法

これはお察しの通りですが、今ほど入れ替えをしたCSSの赤文字「ここにあなたの名前」という部分を自分の名前に変更することで設定完了です。

プロフィールの文章を設定する方法

こちらも同じく、CSSの赤文字「ここにプロフィール本文」という部分に自分のプロフィールを入力してください。

プロフィール画像を設定する方法

まずは、ブログに画像を取り込みます。やり方がわからない方はコチラで簡単に説明しています。

画像を取り込み、URLを獲得したら、先ほど変えたCSSの赤文字「ここにプロフィール画像URL」という部分の文字をURLに変えることで、設定完了です!

サイドバーに各種ページを設定する方法

サイドバーには、いくつかの固定ページを設定するブログは多いですよね!
マナブログの学さんも、下記画像のようにサイドバーにはページを設定しています。


引用:坂内 学/manablog

成功している人のことは、ジャンジャン真似していきましょう!(笑)

まずは設定したいページを作成する

マナブログの学さんもそうですが、サイドバーにブログのお問い合わせページを持ってくる人は多いです。まずはお問い合わせページを作成しましょう!

 

作成したページのURLをCSSに打ち込む

お問い合わせページの作成が完了したら、そのページのURLをコピーして、先ほどのCSS赤文字部分「ここにページURL」という文字の部分に貼り付けます。

次に、もう1つの赤文字「ここにページ名」という部分を「お問い合わせ」だとか、「お問い合わせはコチラ」だとか、好きな文字列を打ち込みましょう。

以上でマナブログの学さん作成のテーマMinimalで、サイドバーに好きな項目を設定する方法の説明を終わります!

Minimalは他のワードプレステーマと違って、正直手がかかります。しかし、だからこそ自分も知識を得られるし、そしてブログに愛着が湧きます。

とはいっても、わからなすぎて悩みすぎても挫折してしまうので、そうなる前に、また僕のブログでカンニングしていってください(笑)

それではまた明日!