WPテーマ「STORK」カスタマイズ!〜番外編小ネタ集5選

WPテーマ「STORK」カスタマイズ!〜番外編小ネタ集5選

 

ここあです。

 

私はデザイナーなので

ブログのデザインに関しては

 

かなり細部にまでこだわって

カスタマイズしています。

 

なので、これまで…

 

私が使っているテーマ「STORK」の

カスタマイズ方法に関しては

かなりいろいろと書いてきました。

 

が、しかし、それでもまだまだ記事として

書いていない部分もたくさんあります。

 

ただ、どうして今までそれをずっと書かずに

放置してきたかと言うと…

 

おそらく需要が全くないぐらい

超マニアックなカスタマイズだから…(笑)

 

とは言え、みんなが書いているような

カスタマイズ方法を書いたところで…

と、いろいろな葛藤かっとうがあるんですね^^;

 

ただ…それでも…、やっぱり…

「書いてみないことには分からない!」

 

ということで、今回は…

「俺はみんなと同じは嫌だ!」という

超こだわり屋さんのためのSTORKカスタマイズ

 

「マニアック編」の小ネタ集として

ご紹介したいと思います^^

 

おそらく今回のカスタマイズは、微妙すぎて…

  • 「別にそこまでしなくてもいいかな…」
  • 「え〜、そんな所までしてたの?」

みたいなところですが…(笑)

 

そんな私のこだわりが「好きだ」という

ホットな「ここあファン」のあなたは

ぜひ生温かく見守りながら読んでやってください^^

 

他のSTORKユーザーと差別化したい人は必見です!

 

STORKをカスタマイズする時は…

毎度のことながら、最初に書いておきます^^

 

テーマをカスタマイズする時は

必ずバックアップを取ってください。

 

また、STORKのカスタマイズは基本的に

全て「子テーマ」の方で行ってください。

 

そして、この記事で紹介する

CSSコードの記述先は…

 

ダッシュボードメニューから

外観 → カスタマイズをクリック

ダッシュボードメニュー

 

 

以下、追加CSSの部分に

CSSコードを記述してください。

追加CSS編集画面

 

 

私がなぜいつもCSSコードの記述先を

追加CSSの部分に書くことを勧めるのかというと…

 

ライブビューで確認しながら作業ができ

非常に分かりやすいからです。

 

なので、CSSコードはこちらに記述することを

いつもおすすめしています^^

 

ということで…

カスタマイズ方法をご紹介していきます。

 

この記事を書いた人をカスタマイズする方法

通常、STORKで表示される

 

「この記事を書いた人」というのは

このように表示されますが…

この記事を書いた人

 

 

ちょっと存在感が薄くて残念ですよね…

せっかくがんばって記事を書いてるんだから

 

「俺が書いてるんだぜ!」と

もう少し主張させてもいいのでは…と

思ったりもしませんか?(笑)

 

なので、私は枠線と背景色をちょっとだけ加えて

このようにしています。

この記事を書いた人

 

 

そうすることで、存在感も

視覚的なメリハリも出ます^^

 

そもそもSTORKって…

「オシャレでキレイなテーマ」と言われている割に

「フッター付近が雑!」と思うのは私だけ?(笑)

 

だから、もう少し何とかしてキレイに整えたいって

思ったんですよね…^^

 

ということで、「この記事を書いた人」に

枠線や背景色をつける場合は

以下のCSSコードを記述しましょう。

 

/*ABOUT背景*/
.profile{
display: block;
border:solid 1px #ccc;
padding:0 25px 0 25px;
background:#ffffe9;
}

簡単にコードの説明をしておくと…

border:solid 1px #ccc;が枠線の種類・線幅・色になります。

 

なので…

1px2pxにすれば、線幅は太くなるし

#ccc#000にすれば、黒になります。
※#cccの部分は好きなカラーコードを入れてください。

 

さらに…

solidの部分をdottedにすれば点線に

dashedにすると破線になりますので試してみてくださいね。

 

また…

background:#ffffe9;のカラーコード#ffffe9を変えることで

背景の色が変わりますので、お好みの色を設定しましょう。

 

背景色を黒にして、文字を白にすると

ちょっとだけ格好良くなります^^

 

この記事を書いた人

 

今回は文字色のカスタマイズ方法は、あえて記載しませんが

反響があれば追記するかもしれません…。

 

RECOMMEND記事を見やすくする方法

次にご紹介するのは…

RECOMMEND記事を見やすくする方法です。

 

通常、STORKで表示される「RECOMMEND記事」というのは

以下のように表示されますが…

RECOMMEND記事

 

 

文字も太くて読みにくいし

それぞれのリンクカードがくっついてて

非常に分かりにくいですよね…

 

だから、それも思い切って解消しました。

こんな感じに…^^

RECOMMEND記事

 

 

何をしたかと言うと…

リンクカードの右側に細い罫線を入れて

文字も細く見やすくしています。

 

また、英文字や( )が入ってて

少し分かりにくいですが

 

タイトルの文字は

両端揃えになるよう設定してあるので

 

英字や( )を使ってなければ

さらにキレイに見やすくなります^^

 

これと同じ設定にする場合は

以下のCSSコードをコピペしてください。

/*関連記事RECOMMEND*/
@media only screen and (min-width: 766px) {
.related-box li {
border-right:solid 1px #ccc;
}

.related-box li:nth-child(4n){
border-right: none;
}

.carouselwrap .cat-name, .eyecatch .cat-name{
margin-right:7px;
}

.related-box li .eyecatch{
margin-right:7px;
}

.related-box li .ttl{
text-align:justify;
margin-right:7px;
font-weight:normal;
}
}

 

ただし、今回ご紹介するCSSコードは

PC版のみのコードとしているので

スマホ版には対応してません。

 

あらかじめご了承ください。

 

こちらは特にカスタマイズする必要はないと思いますが…

CSSコードのborder-right:solid 1px #ccc;の部分で

罫線の種類や色、太さを変えることができます。

 

お好みでどうぞ…^^

 

NEW POST記事を見やすくする方法

続いてNEW POST記事を見やすくする方法ですが

こちらも先ほどのRECOMMEND記事と全く同じです。

 

通常、デフォルトで表示される「NEW POST記事」は

このように表示されますが…

NEW POS記事

 

 

CSSコードを追加することで

RECOMMEND記事と同様

スッキリ見やすくすることができます。

NEW POS記事

 

 

こちらのCSSコードもPC版のみとしていますが

同じように変更する場合は…

以下のCSSコードをコピペしてくださいね。

 

/*関連記事NEWPOST*/
@media only screen and (min-width: 766px) {
.author-newpost li{
border-right:solid 1px #ccc;
}

.author-newpost li:nth-child(4n){
border-right:none;
}

.author-newpost .eyecatch{
margin-right:7px;
}

.author-newpost li .ttl{
font-weight:normal;
}
}

 

こちらも設定はお好みでどうぞ…^^

 

検索ボックスをカスタマイズする方法

お待たせしましたっ!

本当にどうでもいいカスタマイズ…(笑)

 

私のサイトは何となくWordPressテーマ「SANGO」風が

可愛くていいなと思い、SANGOの雰囲気を

一部取り入れているのですが…

 

そのために行ったカスタマイズというのが

検索ボックスなんですね。

 

通常、STORKの検索ボックスは

このように非常にシンプルなデザイン。

検索ボックス

 

 

なので、これをSANGO風にするために

CSSコードでカスタマイズしました。

検索ボックス

 

 

まぁ、ほんと些細なことですけど…

こうして見比べると印象が違って見えますよね?^^

 

正直「どうでも良い!」と思われる方が

9割ぐらいいるとは思いますが…(笑)

一応CSSコードを載せておきます!

 

/*検索BOXカスタマイズ*/
.widget.widget_search button {
background:#a7cff3;
border-radius:0px;
margin-top:2px;
height:110%;
}

.fa-search::before{
color:#fff;
}

 

CSSコードのカスタマイズ方法は…

background:#a7cff3;のカラーコードで水色の変更

color:#fff;のカラーコードで虫眼鏡の色が変更できます。

 

ということで、他のSTORKユーザーと差別化したい場合は

ぜひご活用ください!^^

 

STORKの記事にルビを付ける方法

テンプレートのカスタマイズとは少し離れますが

ブログを運営する場合…

 

あまり難しい漢字などを使うと

読者が記事に集中できず

離脱してしまう場合があります。

 

しかし、だからと言って

葛藤(かっとう)みたく漢字のあとに( )で入れるのも

 

何となく同じことを2回言ってる気がして

気持ち悪いですよね…^^;

 

そんな時に使えるのが「ルビ」の表示です。

 

ルビさえ使えるようになれば

例え難しい漢字があっても、葛藤かっとうと…

このように自然な感じで読んでもらうことができます。

 

また、私の場合に限って言えば…

例え一般的に読みにくそうな漢字であっても

 

ひらがなで書くよりは漢字で書く方が

視覚的に伝わりやすく感じる時があるので

 

そんな時はあえてルビを使って

誰でも読めるように分かりやすい記事に

なるよう心がけています。

 

だから、ルビに関しては使う使わないに関わらず

まずは「ルビを付ける方法がある」という知識だけ

インプットしておいて…

 

いざ「使おう!」と思った時に

私のサイトまで戻ってきてください(笑)

ということで、ルビの表示方法を記載しておきます!

 

<ruby>葛藤<rt>かっとう</rt></ruby>

 

ルビを表示させたい場合は

<ruby></ruby>の中にルビを表示させたい漢字を入れて

さらに<rt></rt>の間にルビとなる「ふりがな」を入力します。

 

ルビの表示方法は一見難しいそうに見えますが

分かってしまうと実は意外と簡単なんですね…。

 

また、私は漢字とルビの位置がちょうど良いところに来るように

CSSコードで位置調整もしています。

/*ルビ位置調整*/
ruby {
position: relative;
}

ruby rt {
position: relative;
top: 1ex;
}

 

CSSコードの解説はあえて致しませんが…(笑)

 

ルビを使ってみようと思う場合は

HTMLコードの書き方を覚えつつ

CSSコードも追加CSSにコピペしてくださいね。

 

STORKカスタマイズ!〜番外編小ネタ集まとめ

STORKカスタマイズ!〜番外編小ネタ集まとめ

 

今回はあまり必要性のない

マニアックなカスタマイズ記事を

あえてご紹介致しました^^

 

しかし、私が思うに…

  • これは必要じゃないかも…
  • これは当たり前のようにみんな知っているだろう

ということでも

 

実は意外とそうでもなかったり

する場合があるんですね。

 

なので、当然記事を書く時は

検索数の見込みが全くない記事を

ただ一生懸命書いても無駄にしかなりませんが

 

仮にそうでない場合は、とりあえず

記事を書いてみても良いかな…と

私は思っています。

 

特にネットの場合は

アクセス解析というカタチで

データ分析することもできるし

 

ある意味それが、ネットを使うことの強みなので

ちゃんと分析さえすれば、どんな記事も

無駄になるようなことは決してありません。

 

つまり、気になったことをとりあえず記事にしてみると

「これって意外と需要あるかも?」なんて

新たな発見ができることもあったりします。

 

いずれにしても記事を書く時は…

何かしら差別化をしていかないと

 

「この人の書いてる記事全然つまんない」とか

「全く役に立たない」と思われる

ただの悲しいブログになってしまいます^^;

 

なので、需要があるかないか分からない内容でも

他の人と切り口を変えて

まずは自分が楽しんで書くことで…

 

「この人の記事なんか面白い」と

思ってもらえる可能性も高くなるし

 

そうすることで少しずつファンを増やすことも

できるようになってきます。

 

だから、どうしても書く事が

見つからないという時は…

※私はそんなことないですよ…^^

 

あなたが「当たり前だ」と思っていることや

「まぁ、書くだけ無駄かな?」と

思うようなことでも

 

とりあえず書いてみましょう!(笑)

なにげない記事でもあなたの個性がちゃんと出れば

記事としては十分に生きます^^

 

なので、あなたの個性も大事にしましょう!

 

正直、機械が書いたような心のない記事

Wikipediaのような情報を載せただけの記事では

あなたにファンがつくことがありません。

 

今回はある意味、私にとっては

本当に試験的に書いたようなものですが…

 

それでも「良かった」と思ってくれる読者がいれば

私にとっては嬉しいし、書いてみて良かったと

思える時もくるんじゃないかな?と信じています^^

 

だからこそ、わたしは

こんなマニアックなカスタマイズ方法でも

書くことに意味があると思っているので…

 

これまで放置しながら温めていたネタを書きました。

 

もちろん、記事を書く以上は1人でも多くの方に

「役に立った」と思われる方が嬉しいので…

適当なことを書いたつもりはありません。

 

しかし、いつもいつも

「読者に役立つ記事は何だろう?」と

そればかり気にして書いていたら

 

正直、私はものスゴくしんどいし

ブログを書くのも全然楽しくなくなるので…

 

たまには1つぐらい自分が書きたい記事を

自由に書いてもいいんじゃないか…と思って

今回のような記事を書いたワケです。

 

少し話がそれてしまいましたが…

そんな私の想いも一緒に感じてもらえると嬉しいです^^

 

実は今回一番お伝えしたかったのは

そこなんですけどね…(笑)

カスタマイズはどうでもいいんかいっ!

 

一見カスタマイズ記事紹介のように書いてますが…

実は要点がそこじゃないというのも

ブログ運営の楽しさです…。

 

あなたは何を感じましたか?

せっかくブログを運営するなら

まずは自分がしっかり楽しみましょう^^

 

ということで…

最後までお読みいただきありがとうございました!

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズ!〜番外編小ネタ集5選

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。