ブログのデザインをカスタマイズしてみました

WordPress, ブログ運営ブログ, カスタマイズ

customize

こんにちは。ゆうきです。

ブログを初めてもうそろそろ1ヶ月経つので、背景とか、スタイルとか、いろいろいじってみました!

ちなみに、私はC言語とかなら多少いじったことがありますが、HTMLとかCSSについての知識は皆無です。

同じような「ブログもっとデザインしたい!でもやり方が分からない!」って方の参考になればいいな、と思います。

使っているサーバーとテーマ

使ってるサーバーはエックスサーバーです。

選んだ理由は、「ワードプレス サーバー おすすめ」とかでググったときに複数のサイトでおすすめされていたからです。

テーマはLuxeritas(ルクセリタス)というテーマを使っています。

カスタマイズからいじれるところがめちゃめちゃ多い!親切!!

初心者には特におすすめです。

 

背景の変更

背景画像を設定しました。

設定方法はLuxeritas→カスタマイズ(外観)から以下の通り。

background

「めっちゃ簡単やん!」と思っていたら…。

トップ画面

ん!?コンテンツ領域に反映されていない!真っ白なまま!!

「コンテンツ領域 背景 反映されない」とかでググってみたけど全然わからん。

軽く絶望しかかっていたときに、この項目を見つけました。

カスタマイズのやり方その2

透過したら、できたーーー!!

でも、ちょっと背景が濃くてうっとうしいと感じたので、今は軽く透過させています。

わりとバーを微調整するのが面倒でした。

透過率を数字で入力して、プレビュー表示ができるようになったらいいなあ~。

スポンサーリンク

見出しのスタイル変更

Luxeritasのデフォルト見出しはこんな感じ。

headline

ちょっとさびしいし、背景とあまりマッチしてない。

基本的に、私はh3とh4しか使わないので、この2種類をこんな感じに変更してみました↓

見出し3(h3)

見出し4(h4)

これは、Luxeritas→子テーマの編集から、style.cssを編集しました。

style.cssまでの行き方

スクロールして一番下まで行って、以下をコピー&ペースト

 /******h3見出し*******/
.post h3{
border-left: 0 none;
position: relative;
padding: 0 .5em .5em 2em;
border-bottom: 2px solid #ff4dac;
}
.post h3::before,
.post h3::after {
position: absolute;
content: ”;
border-radius: 100%
}
.post h3::before {
top: .2em;
left: .2em;
z-index: 2;
width: 22px;
height: 22px;
background: rgba(255, 20, 147, .5);
}
.post h3::after {
top: .7em;
left: .7em;
width: 15px;
height: 15px;
background: rgba(255, 179, 219, .5);
}
/******h4見出し*******/
.post h4{
border-left: 0 none;
border-bottom: double 5px #F28CBB;
}

これは以下のサイトを参考にしました。

線や図形の色やおおきさ、太さなんかはちょっとアレンジしてみました。あと、もとのテーマの横線を消すために、”border-left: 0 none;”を書き加えました。

 

吹き出しの設定

ブログでよく見るこれをやってみたかったんですよ。

これこれ!!
これをやってみたかった!

やり方は、まずLuxeritas→子テーマの編集から、function.phpに以下をコピー&ペースト

function balloon_left_img($atts, $content = null )
{
extract(shortcode_atts(array(
‘speaker’ =>”,
‘imgurl’ =>”,
), $atts));
$style=’balloon-right’;
$hyouji='<div class=”balloon”>
<div class=”balloon-img-left”><img src=”‘.$imgurl.'”>’.$speaker.'</div>
<div class=”‘.$style.'”>
‘.$content.’
</div>
</div>
<div style=”clear:both;”></div>
‘;
return $hyouji;
}
add_shortcode(‘balloon’, ‘balloon_left_img’);

※function.phpを書き間違えると、WordPress自体が作動しなくなるので編集には十分注意してください。

その後、Luxeritas→子テーマの編集から、style.phpを編集します。

これも一番下に以下をコピー&ペースト

.balloon-right{
position: relative;
background: #ffffff;
border: 2px solid #665247;
padding: 10px;
border-radius: 10px;
margin-top:0px;
margin-bottom:5px;
font-size:18px;
line-height:1.5;
}
.balloon-right{
width: calc(100%-115px);
width : -webkit-calc(100%-115px);
margin-left: 115px;
}
.balloon-right:after,
.balloon-right:before{
top: 25px;
border: solid transparent;
content: ” “;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
right: 100%;
}
.balloon-right:after{
border-width: 7px;
margin-top: -7px;
border-right-color: #ffffff;
}
.balloon-right:before{
border-width: 10px;
margin-top: -10px;
border-right-color: #665247;
}
.balloon-img-left{
width: 100px;
font-size:12px;
text-align:center;
margin-bottom:5px;
float:left;
}

これで準備は完了。

実際に使うときは、以下のようにして、画像のURLと喋らせる内容を指定すればOKです。

[ balloon speaker=” ” imgurl=”画像のURL”]喋らせる内容[/balloon]

使うときは、一番最初のスペースを消してください。

ちなみに、このコードは以下の2つのサイトを参考にして書きました。

ワードプレスは、ネット上に色んな情報が無料で落ちているのでありがたいですね。

 

まとめ

実は、WordPress(ワードプレス)って響きかっこいい!と何も考えずに入れました。

でも、いろいろいじれるのが楽しいし、勉強にもなるので結果的には良かったです。

次は、何をしようかなーとワクワクしています。

 

ここまでご覧いただきありがとうございました。

ブログランキングに参加しています。

よければ応援お願いします。

にほんブログ村 大学生日記ブログ 理系大学生へ