読者です 読者をやめる 読者になる 読者になる

アスリート系ですがプログラミング始めました。

プログラミング初心者三十路越えアスリート系女がフリーランスプログラマーを目指すブログ

意外と簡単!Wordpressの見出しをカスタマイズ♪

f:id:simpledancer:20170126000720j:plain

 

やっとワードプレスの見出しをカスタマイズしました!(まだ完了ではありませんが)

とりあえず3パターン作ってみました。

f:id:simpledancer:20170125235214p:plain

こんな感じ。

テキストは

<h2 id="danraku2">見出し2</h2>
<h3 id="danraku3">見出し3</h3>
<h4 id="danraku4">見出し4</h4>

こういう感じになってます。

 

ステップ的にはとっても簡単でした!(※以前貼っていたリンクが無効になっていたので別リンクを貼ります!)

 

affiliate150.com

必要なのは4ステップ

step1:

2つのプラグイン

  • AddQuicktag
  • custum css

をインストール

step2

AddQuicktagにh2,h3など必要なものを入れていく

step3

外観>カスタムCSS に移動して自分の表示させたいcssのコードを入れていく

www.keni-customize.net

ここに11種類の見出しのサンプルコードがあるのでそれをまずは入れてみる(色などは後で変更しましょう)

step4:

cssを保存し、wordpressの記事を書く際、見出しを表示したいところで

f:id:simpledancer:20170126000059p:plain

入れたい見出し番号とquicktagsの所を変更h2,h3など。

※意外とずれてしまったり表示が外れてしまったりするので、一度ビジュアル→テキストでタグの中にちゃんと見出しの文言が入っているかどうか確認してプレビューしてから公開しましょう。

 

今後の課題

見出しがカスタマイズできたので

  • フォントを変更して見やすくする(今微妙な明朝体?)
  • サイドバーが見にくいので整理して画像を入れたり見やすくする。
  • 見出しの色を変更する。
  • ソーシャルのアイコンを変更する。

カスタマイズして表示出来ていくのが楽しいです。

wordpressの方がはてなブログよりもちょっと面倒くさいですが、引き続き読みやすいサイトになるように続けていきます♪

※サイトをActivello→Simplicity2にテーマを変更したら見出しが若干css崩れました。。

カスタマイズ前途多難。

tabibit.net

 

ナビゲーションバーを均等に配置してリンクを設置する

続き

simpledancer.hatenablog.com

さて続きです!

 

昨日までに見た目(css)とリンクの大元のコードはhtmlに書き込みましたので

f:id:simpledancer:20170120182638p:plain

こんな感じでできましたが、まだこの状態だと左よりになっていて、さらにリンク先が入っていないのでメニューをクリックしても何も出てきません。

 

まずメニューを均等に並べる

デザインCSSを変更していきます。

#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*ここを追加*/

line-height: 40px;/*2*/
background: #444;/*9*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}

 

そして

#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width: 20%;/*ここを自分のカテゴリ数を考慮して%を入れる。

私の場合は100/5カテゴリ=20なので20%*/

 

そうすると

f:id:simpledancer:20170121122406p:plain

均等になりました!

 

カテゴリーの中身の変更

ヘッダ<タイトル下

ここのhtmlを変更/追加します。

参考にさせていただいたブログはたくさんカテゴリや子カテゴリがあるのでそれを削除していきます。(私の場合必要なのは今の所5カテゴリ2子カテゴリとして)

 <ul id="menu-content">
        <li>
            <a href="1階層目のリンク">カテゴリ1 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ1-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-4</a></li>
            </ul>
        </li>

こちらの内容を例えば私の場合だと

<ul id="menu-content">
<li><a href="#">プロフィール</a></li>
<li><a href ="http://simpledancer.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">ブログカスタマイズ</a></li>
<li>
<a href="#">プログラミング <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="http://simpledancer.hatenablog.com/archive/category/Ruby">Ruby</a></li>
<li><a href="http://simpledancer.hatenablog.com/archive/category/JavaScript">Javascript</a></li>

のように変更します。""の中身をカテゴリーのリンク先URLをつけ、hrefタグの間にカテゴリ名を挿入します。

するとカテゴリーのボタンをクリックするとリンク先のURLに飛ぶことができます。

アドセンス張ってる方への注意点

  • Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。

 

ということなので気をつけながらやりましょう!

スマホ版も改良してみました!

simplelifedancer.hatenablog.com

 

 

 

 

 

 

ナビゲーションバーを配置する(工事中のため途中まで!)

f:id:simpledancer:20170109154750j:plain

 

30記事ほどできてきたのでそろそろナビゲーションバーを作ろうと思います!

まず参考のサイトはこちら

いつも参考にさせていただいています。

 

www.yukihy.com

 

やり方は全てゆきひーさんのブログをそのままコピペさせていただきました。

デザイン>デザインCSSと

デザイン>ヘッダー>タイトル下html

ここの2つにコピペコードを設置すれば反映されます!

もちろんリンクの中身とカテゴリ名は各々のブログのように書き換えます。

 

 

※ただ時間が迫ってきたので一旦中断して微妙なナビゲーションバーが設置されたままですが、この数日中にはカスタマイズ仕切れる予定、、、です。

設置自体は簡単に完了しました。

とてもわかりやすい!!

f:id:simpledancer:20170120182638p:plain

仕事に行かねばならないのでここから先はまた明日。

あ、明日の仮装大賞出てます!ポールダンスの組の1組目の方。

顔緑ですけどね!

www.ntv.co.jp

 

はてなブログcssを変更して5点カスタマイズしました。

f:id:simpledancer:20170113074451j:plain

 

ブログのカスタマイズとか、以前なんとなくやらずにやっていたのですが、調べてみると無料でたくさんの情報が落ちていることがわかりました!

 

せっかくだからはてなブログproにしたことだし

  • 見出しを綺麗にしたい
  • twitterのフィードを反映させる
  • ヘッダーにメニューバーを作りたい
  • ソーシャルのアイコンを変えたい

など改めてぐぐってみることにしました。

見出しを綺麗にしたい

まず 「はてなブログ pro 見出し カスタマイズ 」で調べてできたこちらのサイト

shiromatakumi.hatenablog.com

ものすごくたくさんの情報が書かれていて言うなれば私の変更したかったところがほぼほぼカバーできていました(最初に出会いたかったブログ)

 

早速デザインでcssを追加しました。

shiromatakumi.hatenablog.com

 

これはもう一個のサイトの方の見出しのcssなのですが

デザインCSSの所に

 

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}

を貼り付けました。

そうすると↓

f:id:simpledancer:20170113072612p:plain

こんな感じで大見出しができました。

このコードのh3をh4、h5と変更して記述すると、中身だし、小見出しも変更することができます。

 

自力ではてなだけ見ながらやってたら全然わからなかったところなのでとても助かりました。

 

twitterのフィードを反映させる

 

これは前回やったのでこちら

simpledancer.hatenablog.com

これはproに変更する前にいじってみたのですが、難なくできました。

他のブログサービス「アメブロ」でもフィードを埋め込むことができました(仕様がはてなと違うので、埋め込む時は 「アメブロ twitter 埋め込む カスタマイズ」とかで調べると出て来ます)

 

ヘッダーにメニューバーを作りたい

デザイン→ヘッダー でcss部分に改装を書いていくのですが

hacogaki.hatenablog.com

こちらのブログのグローバルメニューのところが他のブログと違って海外のサイトを参考にされておしゃれな作りになっていたのでメモがてら貼っておきます。

私は今は簡単に

 

nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="http://simplelifedancer.hatenablog.com/">ホーム</a></li>
<li><a href="#">プロフィール</a></li>
<li>
<a href="#" class="has-child">ミニマリスト</a>
<ul>
<li><a href="#">断捨離系</a></li>
<li><a href="#">人間関係</a></li>
</ul>
</li>
<li>
<a href="#" class="has-child">美容・ダイエット</a>
<ul>
<li><a href="#">アンチエイジング</a></li>
<li><a href="#">食生活</a></li>
</ul>
</li>

</ul>
</div>
</nav>

 

と、こういった感じでシンプルな階層にしていて#部分にそのカテゴリーのURLを貼り付けるとそのカテゴリーのページに行くようになります。

色味とかもっと変更したいです。

f:id:simpledancer:20170113074205p:plain

現在こんな感じでざっくり作りました。

諸々の仕事が終わったらこちらも変更してみようと思ってます。

 

ソーシャルのアイコンを変えたい

f:id:simpledancer:20170113074904p:plain

既存のままでも普通にヘッダー部分のデザイン>記事 に行くとソーシャルアイコンが自動で反映されるボタンがあり、それでもよかったのですが

私は可愛いボタンがよかったので 

cssをカスタマイズすることにしました。

 

ちなみに既存のチェックボタンは外しておきます。

www.yukihy.com

 

参考にさせてもらったブログはこちら。

細かく書かれていて本当に助かりました。

デザインをいじる前に、設定>詳細設定でheadに要素を追加の所に

(Yukihiiさんのブログより)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

を追加してからデザインをいじると反映できます。

私はまだスマホ画面の方はやってないのでこれも後日。今PC画面ではSNSボタンが見れます。→ スマホ版も2017年1月18日に変更できました!

www.ituore.com

 

まとめ

前までめんどくさいなあ、と思っていたけれどやりだすと止まらなくて寝るのを忘れてしまいます。まだまだカスタマイズできてない部分がたくさんあるけれど、うまくサイトに反映できた時はめちゃくちゃ嬉しいです。

 

今から成田空港へ向かうのでカスタマイズは現地に着いてから仕事後やります!

 

 

はてなブログProに変更しました!良かった点

f:id:simpledancer:20170106142057j:plain

 

先ほどはてなブログproに変更しました。

ドメインを独自のものに変更するかを迷ったのですが、いろいろサイトを調べていて

まだ流入数も少ないので当分hatenaのドメインでやることにしました。

 

Proに変更して良かった点

1.キーワードリンクがオフにできる。

下線リンクから違うページに飛んじゃうのでブログから離れていっちゃうのを防ぐため

2.アドセンス広告が貼れる。

 元々審査は通っていたのですが。無料版だと貼れなくなってましたので、嬉しい。

3.はてな独自の広告を非表示に出来る。

はてなのアドセンスがデカデカと占拠(ごめんなさい)してたのを消すことができる。

4.使えるツールが増える。

この辺はまた別途。

 

 

まだproに変更したてなのでうまくいくかわかりませんが1年ほどやってみてから独自ドメインには変更してみようかなと思います。

 

いろいろ試しにやってみたいことがあるので、雑記ブログとこのプログラミングブログを分けたいなと思ってます。ソーシャルアイコンを変えてみましたひとまず。

f:id:simpledancer:20170107164250p:plain

ラインボタンはもう一つの雑記ブログには入れたのですが、もともとデフォルトでコピペのPC版だとラインアイコンがなかったのでこっちのブログはまだデフォルトのまま。

アイコンで助かったブログがこちら

【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life

 

今日は出張で移動してるのでその間にいろいろカスタマイズをしてみようと思います。

 

 今後やろうと思っているカスタマイズ

1.メニューバーを作る

2.SNSアイコンを自作する

3.はてなグループに登録する

1/10にミニマリストグループにもう一個のブログ入りました!

4.ヘッダーに画像を挿入する

 

 緩くカスタマイズを楽しみます!

関係ないけど、東京駅で買ったピーナツ最中。

f:id:simpledancer:20170106152415j:image

simpledancer.hatenablog.com

 

 

 

 

 

にほんブログ村 IT技術ブログへ
にほんブログ村

 

 

 

無料ブログでtwitterのフィードを埋め込む方法

 

はてな使ってる人は

「なんだ〜そんなこと??」

と思われるかもしれませんが、

私、twitterとかFBのタイムラインが流れる(サイドバーとかに)あれ、無料ブログでは簡単にできないと思ってたんですけど、

めちゃ簡単にできました。

私ははてなブログとアメブロも使っているのでどちらも出来るかやってみようと思いました。twitterのタイムラインをサイドバーに反映させてみます(はてな無料ブログverとアメブロverやってみました)

 

f:id:simpledancer:20170104114223p:plain

 はてなver.

twitterの公式アカウントから

f:id:simpledancer:20170104114944p:plain

左側のEmbedded Timelineをクリックして

出てきたコードをcopy すると貼り付けるコードがコピーできます。

ただし、自動生成されたコードだとブログに貼ると超ながい!

なのでボタンの上らへんにある set custamization optionを クリックすると

幅を変更できます。そして変更したら、またcopycodeをポチッとすると新しいコードがコピーできます。

はてなのサイドバーに反映させるために

デザイン>🔧マーク>サイドバー>モジュールを追加>HTML>

まで画面を進めると

f:id:simpledancer:20170104120231p:plain

タイトルに例えばtwitter

したの余白にコピーコードを貼り付けて

青い適用ボタンをクリック

 

そうするとタイムラインが反映されます。

 

↓こちらのてつさんのブログを参考にさせていただきました!めちゃわかりやすかったです。

 

www.mutant-tetsu.com

 

アメブロver

 ※コピーコードまでは一緒です。

設定>サイドバー>プラグインの追加>プラグインのところにコピーコードを貼り付け

※サイドバーの配置設定のところで「使用しない機能」のところにフリープラグインが入っていると反映されないので、フリープラグインのボタンをドラッグアンドドロップで使用するの方へ移動させてください。

 

そうすると反映されます。

 

埋め込みタイムライン — Twitter Developers

developersのページにもやり方は書いていますが、各ブログサービスで階層などが違うかもしれないため、コードコピーした後は各ブログのヘルプなどで確認してみてください!

ただアメブロは広告や色が非常に多いのでかなりごちゃごちゃした印象になるため

タイムラインは外してしまいました!(広告多すぎやしませんか?後ピグとか。いらない。。)

 

自分の作ってるwordpressの方ではあまりごちゃっとさせたくないので今の所はフィードは反映させないようにしようと思ってます。

 

Poledance × Trip 

Poledance × Trip

 

 

アイキャッチ画像を追加するだけで一気にサイトがプロっぽくなった

f:id:simpledancer:20170107173134j:plain

 

メリークリスマス!

 

はてなブログを利用してる人はあまりクリスマスって関係なような気がしてならないのは置いておいて。

 

私は23日は仕事で24の明けまでシャンパンの洗礼を受け

24の昼過ぎに起きて湯船にお湯を溜めたまま溢れ出し

ガスは止まるし病院に行く時間なくなるし

バッタバタで

25日の今日は昼間で寝てお昼はコンビニのカフェラテとスーパーのラップサンドです。

スーパーのチープなチキンを買わなくても家で手羽元とか焼いたほうが美味しいし経済的。

 

それは置いておいて。

wordpressのカスタマイズをまたちょこちょこしてるわけですが、

いかんせん素人なものでどうも美しく仕上がらない。色々テーマを変更して今回は

Activelloにして、フォントの色だけちょっとカスタムしました。

 

で、アイキャッチ画像をずーっとつけてなかったので、なんとも殺風景(絶対読まれないブログ!)これはいかん、どうすればいいのか。とおもって。私の好きなブログを運営してる方のを読みながら、アイキャッチを追加してみました。

 

ruka-affiliate.com

ちなみに今回はフォントは私は変えてません。

 

テーマ変更とアイキャッチを追加してみた!

でも、テーマを変更、アイキャッチを追加すると

 

f:id:simpledancer:20161030111645p:plain

とかこんな感じだったのが

 

f:id:simpledancer:20161225161641p:plain

f:id:simpledancer:20161225161710p:plain

 

って感じで(サイドバーが消えちゃったのでガラッガラですが)

スライドできて、アイキャッチがそのまま反映されるのでいい感じになりました。

タイトル文字がどうもシロ文字でhoverの場合でないと目立ちにくいので

まずはアイキャッチですが

 

編集画面の右下に

f:id:simpledancer:20161225162019p:plain

があるので、そこで設定

f:id:simpledancer:20161225162123p:plain

でアイキャッチ画像を設定にすると

 

f:id:simpledancer:20161225163425p:plain

と、このように、

左がアイキャッチをつけてないバージョン

右がアイキャッチをつけたバージョン。

 

やっぱり画像がある方が、なになに、ってなりますよね。

wordpressカスタマイズ初めて2ヶ月目ですがちっともわかってませんでした〜

 

相変わらずのIT音痴。

 

サイドバーがテーマを変えたら消えちゃった〜のでまた引き続きカスタマイズします。

 

Poledance × Trip 

Poledance × Trip

 

 

にほんブログ村 IT技術ブログへ
にほんブログ村