どのようにカスタマイズしたのか共有するページ＆記事を書く上でのヒント

ここでは、主にデザインをどのように変化させていったのか書いていこうと思う。

カスタマイズ集

トップのシェアボタンをなくした

cocoon設定→SNSシェアボタン

の「メインカラムトップシェアボタンを表示」のチェックを外し、シェアボタンを外した。（８/2）

アイキャッチと見出しタイトルの順を変えた

下記URLを参考にして、アイキャッチ→タイトルになるようにした。（８/2）

Cocoon｜アイキャッチ画像を記事タイトルの上に移動する

WordPress 無料テーマ『Cocoon』の記事タイトルとアイキャッチ画像の位置（場所）を入れ替えるカスタマイズ方法をご紹介します。記事のポイントアイキャッチ画像を記事タイトルの上に移動できる他の Cocoon ブログではほほ見かけない

www.satokobo.net

日付の位置を変える

order: -1;をつけて、見出しタイトルの下→タイトルの上に。

text-align: left;をつけて左寄りにした。（８/2）

見出しタイトルを左寄りに

以下のcssを記述し、左寄りにした。

@media screen and (max-width: 834px){
.article h1{
padding-left:0px;
}}

スマホで左右にぶれるのをなくす

スマホ表示で横にぶれるのをなくした。

/*画像が横にぶれるんを防ぐ*/
@media screen and (max-width : 834px){
html,
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}

著者名カードの作成

CSSで左に画像を右にテキストを表示した横並びにする

CSSで左に画像を右にはテキストを表示する横並びのレイアウトに挑戦して以下の画像のようにシンプルに作成しました。     CSSで「左に画像を表示」「右にはテキ

shu-sait.com

↑の記事を参考にして、著者名カードを作成した。

左の画像を丸くすれば完成だが、それはまだできていない。（8/3）

サマリーｂｏｘの作成

タイトルの下にサマリー（導入文）を書くためにサマリーボックスを作成した。

サマリーボックス内に<div class=”summary”></div>に、サマリーを書くようにしよう。(8/3)

ヘッダーの作成

cocoon設定>モバイル>ヘッダーモバイルボタンにチェックをいれて、ヘッダーを作成した。

キャッチフレーズの削除

cocoon設定＞ヘッダー＞キャッチフレーズの配置で、表示しないを選びキャッチフレーズを消した。

ヘッダーモバイルメニューの作成

外観＞メニュー＞ヘッダーモバイルメニューで集英社のカテゴリー一覧みたいなのをつくった。

PCのロゴ表示を小さくした

スマホでのロゴ表示のために画像を大きくしたので、PC版で大きくなってしまった。

そこで、

cocoon設定＞ヘッダー＞ヘッダーロゴサイズを１００にし、少し小さく見えるようにした。（スマホ表示に影響はなし）

行間を狭くした。

cocoon設定＞本文＞行の余白を1.8→1.5にした。

すると、

文
画像
☆　←ここの間が広すぎる
文

だと画像下と文が広すぎてしまう。

なので、

p img{
margin-bottom:-.1em;
}

を記述し、画像とその下の文の間を狭めた。

インスタグラムの横幅を狭めた（important使用）

インスタをそのまま表示すると縦に長すぎるので、

.instagram-media{
max-width:200px !important;
margin-top:-.6em
}

を使用し、横を狭めることによって相対的に縦幅も短くなるようにした。

ハンバーガーマークを細くした

.mobile-menu-buttons .menu-icon {に

-webkit-text-stroke: 1px white;

を加えて線を細くした。

アイキャッチ上の幅をなくした

アイキャッチの上にわずかな隙間があった。

それを、

.eye-catch-wrap {margin-top:-1em;;/*上の余白*/
}

をつけることによりなくした。

「通知」がちゃんと出るように

アイキャッチ上部の幅を潰すと、「通知」が見えなくなってしまう。

だから、

@media screen and (max-width: 834px){
.notice-area {
margin-top:1.2em;}}

を記述することで、幅をもたせた。（通知が表示されるときだけ作動する）

記事を書くためのヒント集

ここは記事を書く際に気を付けるポイントを書いていこうと思います。

画像が2枚続く場合の対応

画像が2枚続く場合、少し離れすぎているのが気になってしまう。

そこで、

<p>画像<p>
<p>画像<p>

ではなく、

<div>画像<div>
<p>画像<p>

にすることで、良い感じの距離になる。

が、、、、そもそも、pの上が広すぎる気もするので、

段落<p></p>要素の行間を変える。
p { line-height: 行間の値 }

や

p img {margin-top:12em;}

を利用して、

全体的にpの上を狭めるのが良いかもしれないと思った。

行間の調節 CSS line-height:

www.shoshinsha.com

セキュリティの見直し

現在は、wordfenceをいれているが、少し不安なので他のセキュリティソフトも考えておく。

１，BBQ Firewall

これはスウェルの作者が推していたプラグイン。非常にシンプルで分かりやすいらしい。

サイト内でスウェル作者が言及していた、「リビジョンデータ」についても今後詳しくならなければならないと思った。

推奨プラグインと非推奨・不要・注意すべきプラグインについて | WordPressテーマ SWELL

WordPressテーマ「SWELL」ではどんなプラグインを使用すればいいのか、推奨されるもの・推奨されないもの・基本的に使わなくていいもの・使うなら気をつけて欲しいもの について、紹介していきます。 SWELLではほぼ必須なプラグイン 開

swell-theme.com

ちなみに、wordfenceのファイアーウォール最適化は以下のサイトで紹介している。（が、ここは怖いの放置でもいいかもしれない）

WordPressのセキュリティを強化できるプラグインWordfenceの設定方法をどこよりも詳しく解説します！ | WordPressを使ったホームページの作り方

WordPressの正しいセキュリティ設定については色々な説がありますが。Wordfenceでセキュリティを強化する方法を初心者の方にもわかりやすく図解でご紹介しています。セキュリティスキャン機能があるので、自分のサイトが安全な状態で運営できているのか？確認する事が出来ます！有料版では侵略されたWordPress復旧機...

hanami-web.tokyo.jp

２，All In One WP Security & Firewall

wordfenceと双璧をなすセキュリティプラグインだそうだ。ちなみに１で紹介したBBQ Firewallはこれにも含まれている。

下記サイトはセキュリティソフトを選ぶうえで大変参考になる。

プロが選ぶWordPressセキュリティ対策のおすすめプラグイン6つ！ | wp.geek

WordPressサイトの大きな不安のひとつがセキュリティ対策。 2017年には150万以上のWordPressサイトが改ざん被害を受けるという事件も発生しています。 ただ、独力でセキュリティ対策を行うには、高い知識と技...

wpmake.jp

【ヒント】SNSシェアボタンを記事に生成する方法

SNSシェアボタンを任意の場所に表示させたいとき、デペロッパーツールからフッターにあるSNSシェボタンを選択→copy→outerHTMLをコピーして貼り付けた後、

<a…の前に

<div class=”sns-share ss-col-1 ss-high-and-low-lc bc-brand-color sbc-hide ss-top”><div class=”sns-share-buttons sns-buttons”>

を記述し、

最後に</div>をつける。

すると、うまいことSNSシェアボタンが生成される。

そんなことしなくても・・・

シェアボタンの上側からコピーすれば終わる。

フッターに項目を追加する方法

外観＞メニュー＞フッターを選んでメニューに追加→設定を保存で追加できる。

自前で写真を用意できなくてもいい

ブログを作成する際に、写真を自前で撮らなくてもいい。

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

まりぴー🌸コスメ・メイク(@maripii_cosme)がシェアした投稿

例えば、カラコンの記事を書きたいとすると、カラコン関連のインスタを持ってくるといい。

ステップフローをつくった

ステップフローの使い方

ステップフローのHTML記述は少し厄介なので、それをステップフローで説明していく。